feat: Provide education/confirmation before creating workspaces in New Workspace flows by Krishna2323 · Pull Request #53845 · Expensify/App

Krishna2323 · 2024-12-10T12:24:21Z

Explanation of Change

Problem: When users attempting to submit expenses are inadvertently led to create workspaces, it causes confusion about how to submit an expense to their boss, leading to frustration and a poor user experience.
This PR adds a workspace confirmation page which will be shown before a workspace is created. Workspace confirmation page will have avatar picker, name input and currency selector, users can now choose custom avatar, workspace name and currency before creating a workspace.
This PR also fixes regressions from the previous PR. Issues:
$ [HOLD for payment 2024-12-19] [HOLD for payment 2024-12-17] Workspace - Unable to save new workspace name #53765
$ [HOLD for payment 2024-12-19] [HOLD for payment 2024-12-17] Create workspace - Selected currecy does not appear selected with a green checkmark #53766
$ [HOLD for payment 2024-12-19] [HOLD for payment 2024-12-17] Create workspace - Edit avatar modal is blocking the avatar #53768
$ [HOLD for payment 2024-12-19] [HOLD for payment 2024-12-17] Create workspace - Error message does not have left and right padding #53771
$ [HOLD for payment 2024-12-19] [HOLD for payment 2024-12-17] FAB - Page crashes after tracking an expense from QAB #53793

Fixed Issues

$ #51504
PROPOSAL: #51504 (comment)

Tests

Go to workspace lists page > Click on Create workspace
Verify RHP is opened with avatar selector, name input and currency selector.
Select any avatar > Enter custom name > Select a different currency
Click confirm
Verify workspace is created with the selected avatar, name and currency.
Repeat Step 1 to 4 with default avatar
Verify workspace is created with the default avatar, name and currency.
Repeat Step 1 to 4 with default currency
Verify workspace is created with the selected avatar, name and default currency.
Click on Create workspace > Enter any custom name
Verify default avatar uses the first character of the name.
Log out and login with a new account > Complete onboarding
Open FAB > Select New workspace > Verify RHP is opened with avatar selector, name input and currency selector.
Select any avatar > Enter custom name > Select a different currency
Click confirm
Verify workspace is created with the selected avatar, name and currency.
Delete the single workspace from workspace list page
On workspace list page click New Workspace button
Verify RHP is opened with avatar selector, name input and currency selector.
Select any avatar > Enter custom name > Select a different currency
Click confirm
Verify workspace is created with the selected avatar, name and currency.

Verify that no errors appear in the JS console

Offline tests

Go to workspace lists page > Click on Create workspace
Verify RHP is opened with avatar selector, name input and currency selector.
Select any avatar > Enter custom name > Select a different currency
Click confirm
Verify workspace is created with the selected avatar, name and currency.
Repeat Step 1 to 4 with default avatar
Verify workspace is created with the default avatar, name and currency.
Repeat Step 1 to 4 with default currency
Verify workspace is created with the selected avatar, name and default currency.
Click on Create workspace > Enter any custom name
Verify default avatar uses the first character of the name.
Log out and login with a new account > Complete onboarding
Open FAB > Select New workspace > Verify RHP is opened with avatar selector, name input and currency selector.
Select any avatar > Enter custom name > Select a different currency
Click confirm
Verify workspace is created with the selected avatar, name and currency.
Delete the single workspace from workspace list page
On workspace list page click New Workspace button
Verify RHP is opened with avatar selector, name input and currency selector.
Select any avatar > Enter custom name > Select a different currency
Click confirm
Verify workspace is created with the selected avatar, name and currency.

QA Steps

Go to workspace lists page > Click on Create workspace
Verify RHP is opened with avatar selector, name input and currency selector.
Select any avatar > Enter custom name > Select a different currency
Click confirm
Verify workspace is created with the selected avatar, name and currency.
Repeat Step 1 to 4 with default avatar
Verify workspace is created with the default avatar, name and currency.
Repeat Step 1 to 4 with default currency
Verify workspace is created with the selected avatar, name and default currency.
Click on Create workspace > Enter any custom name
Verify default avatar uses the first character of the name.
Log out and login with a new account > Complete onboarding
Open FAB > Select New workspace > Verify RHP is opened with avatar selector, name input and currency selector.
Select any avatar > Enter custom name > Select a different currency
Click confirm
Verify workspace is created with the selected avatar, name and currency.
Delete the single workspace from workspace list page
On workspace list page click New Workspace button
Verify RHP is opened with avatar selector, name input and currency selector.
Select any avatar > Enter custom name > Select a different currency
Click confirm
Verify workspace is created with the selected avatar, name and currency.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

android_native.mp4

Android: mWeb Chrome

android_chrome.mp4

iOS: Native

ios_native.mp4

iOS: mWeb Safari

ios_safari.mp4

MacOS: Chrome / Safari

web_chrome.mp4

MacOS: Desktop

desktop_app.mp4

…space flows. Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 · 2024-12-11T08:31:05Z

@allgandalf, the regression issues are fixed but I'm facing a new error, can you please take a look?

Monosnap.screencast.2024-12-11.13-55-01.mp4

allgandalf · 2024-12-12T09:06:19Z

Can you merge main and retry ? is this constantly reproducible ?

Krishna2323 · 2024-12-14T10:12:26Z

I'm still able to reproduce this issue even after merging main. I'm investigating the RCA of the issue. @allgandalf please let me know if you know anything about this, this is probably related to how we are updating the onyx value.

It only occurs when creating a second workspace with an avatar. I'm unsure if this is a backend or frontend bug.

allgandalf · 2024-12-14T16:29:44Z

Can you put out reproduction steps please

Krishna2323 · 2024-12-15T02:44:23Z

Reproduction Steps:

Create a new account > Manage my team's expenses during onboarding process
Go to workspace list page > Create a workspace with an avatar

danielrvidal · 2024-12-18T17:42:12Z

I can also reproduce the issue. You can see it here:
https://github.com/user-attachments/assets/9f2267d5-72c8-4c98-899e-189183126c0b

shubham1206agra · 2024-12-19T05:57:29Z

src/libs/actions/Policy/Policy.ts

        customUnitRateID,
        engagementChoice,
+        currency: outputCurrency,
+        file,


Suggested change

file,

file: {...file},

Please soft clone it to remove non-indexable errors.

shubham1206agra · 2024-12-19T05:58:15Z

src/libs/actions/Policy/Policy.ts

        customUnitID,
        customUnitRateID,
+        currency: outputCurrency,
+        file,


Suggested change

file,

file: {...file},

Please soft clone it to remove non-indexable errors.

Thanks @shubham1206agra 🙇🏻, checking...

shubham1206agra · 2024-12-19T06:00:14Z

@Krishna2323 Can you ready this PR with fixes?

I need this PR merged today. So, I can work on another feature which requires this screen.

shubham1206agra · 2024-12-19T06:07:15Z

src/languages/en.ts

        emptyWorkspace: {
            title: 'Create a workspace',
-            subtitle: 'Create a workspace to track receipts, reimburse expenses, send invoices, and more -- all at the speed of chat.',
+            subtitle: 'Create a workspace to track receipts, reimburse expenses, send invoices, and more — all at the speed of chat.',


Suggested change

subtitle: 'Create a workspace to track receipts, reimburse expenses, send invoices, and more — all at the speed of chat.',

subtitle: 'Create a workspace to track receipts, reimburse expenses, manage travel, send invoices, and more — all at the speed of chat.',

Update the copy as per #53753 (comment)

I think this update can be made in this PR.

Alright, thanks

@shubham1206agra can you make sure you include this in the above PR

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 · 2024-12-19T12:17:38Z

@allgandalf, you can review the code, I will add the screenshot after few hours.

allgandalf · 2024-12-19T14:37:10Z

all good, please take a look at the failing test as well

Krishna2323 · 2024-12-20T10:34:46Z

Not sure why the BE is not returning the correct avatar. Will check again.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

allgandalf · 2025-01-16T14:43:18Z

@allgandalf, are you still able to reproduce #53845 (comment)? I can’t seem to reproduce it anymore.

Yes, can reproduce this constantly

Screen.Recording.2025-01-16.at.8.11.34.PM.mov

allgandalf · 2025-01-16T14:45:51Z

@Krishna2323 did you investigate what Francois suggested here?

With the Development section steps here you can make changes to react-native-onyx locally. Based on the console log from #53845, it sounds like we're logging this alert, so maybe you can add a breakpoint in there, or at least add some more logs (maybe for args) to see what we're trying to merge into Onyx and if it's actually not serializable?

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 · 2025-01-16T23:49:31Z

@allgandalf, have you pulled the latest on this branch? Its seems fixed for me:

Monosnap.screencast.2025-01-17.05-16-19.mp4

@Krishna2323 did you investigate what Francois suggested #53417 (comment)?

I did and it was the file which had arrayBuffer().

allgandalf · 2025-01-17T06:44:11Z

I did and it was the file which had arrayBuffer().

Sorry , but can you explain what exactly is wrong technically? some code reference can also help

@allgandalf, have you pulled the latest on this branch? Its seems fixed for me:

Not fixed, this is on your latest branch:

Screen.Recording.2025-01-17.at.12.12.39.PM.mov

Krishna2323 · 2025-01-17T10:32:35Z

@allgandalf, in App/node_modules/react-native-onyx/dist/OnyxUtils.js, you can log console.log(error, onyxMethod, args) on line 889, here. Its hard for me to show the object which we are trying to save since this bug isn't reproducible for me. I'm not sure what's technically wrong, this bug is also reproducible in multiple places.

Krishna2323 · 2025-01-17T10:35:24Z

@allgandalf, I'm not sure what to do here since the bug isn't related to our PR, and I have already invested a lot of time in this. I don't have the bandwidth to investigate further.

cc: @grgia

shawnborton · 2025-01-17T10:45:18Z

I believe Georgia is OOO today. @cristipaval are you able to help out here?

allgandalf · 2025-01-17T11:48:51Z

chatted 1:1 with @shubham1206agra and we think to fix this holistically as follow up part of #54358 and this issue #47150

Just a note to whoever reviews this PR: that we will observe the same bug on staging/prodcution, so leaving it upto the internal engineer about merging this PR as is , happy to discuss more about this thing on slack

cristipaval · 2025-01-17T11:59:41Z

I just tested this locally, and it doesn't reproduce for me either. I also think the bug is not related to this PR, and given that it is already being investigated, I don't think we should duplicate efforts here.

cristipaval · 2025-01-17T12:00:46Z

Thanks @allgandalf for the rigorous testing and @Krishna2323 for investigating 🙏

cristipaval

I see @grgia is still ooo and we really need this one to get the travel issue unblocked as we're approaching the external commit. I'll merge it to get it in today's deploy.

shawnborton · 2025-01-20T14:47:02Z

Awesome, thanks @cristipaval - super excited to finally get this one into the product!

OSBotify · 2025-01-20T19:56:25Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2025-01-21T08:30:20Z

🚀 Deployed to staging by https://github.com/cristipaval in version: 9.0.88-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	success ✅
🍎🔄 iOS HybridApp 🍎🔄	success ✅

github-actions · 2025-01-23T18:05:47Z

🚀 Deployed to production by https://github.com/puneetlath in version: 9.0.88-7 🚀

platform	result
🤖 android 🤖	true ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	success ✅

shubham1206agra · 2025-03-26T02:32:30Z

src/components/CurrencyPicker.tsx

+                onModalHide={hidePickerModal}
+                hideModalContentWhileAnimating
+                useNativeDriver
+                onBackdropPress={hidePickerModal}


We forgot to add shouldHandleNavigationBack here which caused #57513

dominictb · 2025-03-27T16:20:18Z

src/pages/workspace/WorkspacesListPage.tsx

            accessibilityLabel={translate('workspace.new.newWorkspace')}
            text={translate('workspace.new.newWorkspace')}
-            onPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
+            onPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute())))}


Setting backTo to a variable Navigation.getActiveRoute() value caused this issue #57824.

jayeshmangwani · 2025-04-30T09:37:37Z

src/pages/workspace/WorkspaceConfirmationPage.tsx

+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    // Approved Accountants and Guides can enter a flow where they make a workspace for other users,
+    // and those are passed as a search parameter when using transition links
+    const policyOwnerEmail = currentUrl ? new URL(currentUrl).searchParams.get('ownerEmail') ?? '' : '';


Coming from this issue #59776, we're using currentUrl to retrieve the policyOwnerEmail, but on native platforms, currentUrl is empty—resulting in a missing email value.

To resolve this, we can add fallback value of currentUserLogin to generateDefaultWorkspaceName. More context can be found here: #59776 (comment)

Krishna2323 added 3 commits December 10, 2024 15:59

Provide education/confirmation before creating workspaces in New Work…

7f40593

…space flows. Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Provide education/confirmation before creating workspaces in New Work…

ee98ccd

…space flows. Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Merge branch 'Expensify:main' into krishna2323/issue/52164_pr2

3b47bb6

Krishna2323 changed the title ~~Krishna2323/issue/52164 pr2~~ feat: Provide education/confirmation before creating workspaces in New Workspace flows Dec 10, 2024

Krishna2323 added 4 commits December 11, 2024 10:11

fix: Selected currecy does not appear selected with a green checkmark.

0125372

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: Create workspace - Edit avatar modal is blocking the avatar.

50a5a5d

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: Error message does not have left and right padding.

1863105

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

add param names.

3748621

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 added 2 commits December 13, 2024 08:00

Merge branch 'Expensify:main' into krishna2323/issue/52164_pr2

59713aa

Merge branch 'Expensify:main' into krishna2323/issue/52164_pr2

88960da

shubham1206agra reviewed Dec 19, 2024

View reviewed changes

shubham1206agra mentioned this pull request Dec 19, 2024

Implement upgrade to collect when booking travel #53753

Merged

49 tasks

shubham1206agra reviewed Dec 19, 2024

View reviewed changes

shubham1206agra mentioned this pull request Dec 19, 2024

[Due for payment 2025-02-18] [$250] Book Travel - Unable to continue setting up travel, error appears #48305

Closed

6 tasks

Krishna2323 added 2 commits December 19, 2024 17:18

Merge branch 'Expensify:main' into krishna2323/issue/52164_pr2

113f37b

crash fix.

1757ec8

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Merge branch 'main' into krishna2323/issue/52164_pr2

f08311b

fix: file not cloned correctly.

29dbf37

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 marked this pull request as ready for review December 20, 2024 16:12

Krishna2323 added 2 commits January 17, 2025 05:11

resolve merge conflicts.

6465ce1

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Merge branch 'main' into krishna2323/issue/52164_pr2

5a23b84

allgandalf approved these changes Jan 17, 2025

View reviewed changes

melvin-bot bot requested a review from grgia January 17, 2025 12:15

cristipaval approved these changes Jan 20, 2025

View reviewed changes

cristipaval merged commit 75f09ac into Expensify:main Jan 20, 2025

github-actions bot mentioned this pull request Jan 21, 2025

Deploy Checklist: New Expensify 2025-01-21 #55507

Closed

53 tasks

amyevans mentioned this pull request Jan 21, 2025

mWeb - Workspace - "Confirm" button is overlapped by keyboard during WS creation #55547

Closed

8 tasks

MarioExpensify mentioned this pull request Jan 21, 2025

[HOLD for payment 2025-02-04] [HOLD for payment 2025-01-30] Workspace - New workspace modal - Unable to close currency list using device back button #55551

Closed

8 tasks

luacmartins mentioned this pull request Jan 21, 2025

[HOLD for payment 2025-02-04] [HOLD for payment 2025-01-30] Web - Create workspace - Search & troubleshoot modal is opened behind currency list #55552

Closed

8 tasks

Krishna2323 mentioned this pull request Jan 21, 2025

[CP Staging] fix: Unable to close currency list using device back button. #55575

Merged

49 tasks

izarutskaya mentioned this pull request Jan 22, 2025

[Due for payment 2025-02-05] [$250] Workspace - mWeb - Currency selector scrolls to the top when I scroll down quickly #55601

Closed

8 tasks

shubham1206agra reviewed Mar 26, 2025

View reviewed changes

dominictb reviewed Mar 27, 2025

View reviewed changes

jayeshmangwani reviewed Apr 30, 2025

View reviewed changes

jayeshmangwani mentioned this pull request Apr 30, 2025

[Due for payment 2025-04-30] [$250] Android - Empty workspace name for first workspace created in new account #59776

Closed

8 tasks

	subtitle: 'Create a workspace to track receipts, reimburse expenses, send invoices, and more — all at the speed of chat.',
	subtitle: 'Create a workspace to track receipts, reimburse expenses, manage travel, send invoices, and more — all at the speed of chat.',

Conversation

Krishna2323 commented Dec 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

Krishna2323 commented Dec 11, 2024

Uh oh!

allgandalf commented Dec 12, 2024

Uh oh!

Krishna2323 commented Dec 14, 2024

Uh oh!

allgandalf commented Dec 14, 2024

Uh oh!

Krishna2323 commented Dec 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danielrvidal commented Dec 18, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shubham1206agra commented Dec 19, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Krishna2323 commented Dec 19, 2024

Uh oh!

allgandalf commented Dec 19, 2024

Uh oh!

Krishna2323 commented Dec 20, 2024

Uh oh!

allgandalf commented Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

allgandalf commented Jan 16, 2025

Uh oh!

Krishna2323 commented Jan 16, 2025

Uh oh!

allgandalf commented Jan 17, 2025

Uh oh!

Krishna2323 commented Jan 17, 2025

Uh oh!

Krishna2323 commented Jan 17, 2025

Uh oh!

shawnborton commented Jan 17, 2025

Uh oh!

allgandalf commented Jan 17, 2025

Uh oh!

cristipaval commented Jan 17, 2025

Uh oh!

cristipaval commented Jan 17, 2025

Uh oh!

cristipaval left a comment

Choose a reason for hiding this comment

Uh oh!

shawnborton commented Jan 20, 2025

Uh oh!

OSBotify commented Jan 20, 2025

Uh oh!

github-actions bot commented Jan 21, 2025

Uh oh!

github-actions bot commented Jan 23, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Krishna2323 commented Dec 10, 2024 •

edited

Loading

Krishna2323 commented Dec 15, 2024 •

edited

Loading

allgandalf commented Jan 16, 2025 •

edited

Loading