[$250] Provide education/confirmation before creating workspaces in New Workspace flows

[danielrvidal]

Proposal: Provide education/confirmation before creating workspaces in New Workspace flows

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.

Solution: Provide better education about what a workspace is and a confirmation screen when creating them in places employees are running into issues. If a user creates a New Workspace in Global Create or Settings > Workspaces > New Workspace, show a confirmation page informing them what it does and asking them to name it.

• The proposed screens are below.
• We’ll use the same logic we have today to suggest a workspace name, but allow the user to edit it.
• After the user clicks Confirm in the screen, they’ll be dropped into their workspace editor, like they are today.

Mobile

Web

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021851416153225764502
• Upwork Job ID: 1851416153225764502
• Last Price Increase: 2024-10-30
• Automatic offers:
• allgandalf | Reviewer | 104754886
• Krishna2323 | Contributor | 104754887

Issue Owner

Current Issue Owner: @allgandalf

[melvin-bot]

Triggered auto assignment to @dubielzyk-expensify (Design), see these Stack Overflow questions for more details.

[dubielzyk-expensify]

Tried to replicate what the request is and it'd probably be something like this:

Though I think I prefer something like this if we wanna list the workspaces with links to them:

I think ultimately it feels a bit weird to me to mention submitting expenses when they've tapped a New Workspace button, so I kinda wonder if we should be even more generic:

cc @Expensify/design for feedback, musings, poems, et al.

[shawnborton]

Yeah, I think I might be with Jon here, how do we know that users are actually hoping to submit an expense when they tap on New Workspace? So that being said, I like the idea of something more generic.

Here's another riff on that where we use workspace avatars and even link the user to the create expense flow:

[dubielzyk-expensify]

I quite like that too 😄 I prefer that dialog if we go for the more complex/custom ones.

[dannymcclain]

I like Shawn's riff too.

[danielrvidal]

We're still working on the design mocks. @dubielzyk-expensify updated the thread with the proposal so we'll likely be ready to work with contributor tomorrow. We'll leave that thread open until tomorrow for any feedback.

Sorry about requesting both designs @dubielzyk-expensify even though we're only going to do the first one right now.

[dubielzyk-expensify]

Alright. All good. Let's ignore the modal then 👍

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021851416153225764502

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allgandalf (External)

[danielrvidal]

@allgandalf just an fyi, I have updated the original post so that the finalized proposal and direction we want to go is there. Please let me know if you have any questions!

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Provide education/confirmation before creating workspaces in New Workspace flows

What is the root cause of that problem?

This is a new feature.

What changes do you think we should make in order to solve the problem?

When we create a new WS from the FAB or Workspace list page, we can navigate to a new confirmed workspace page

1. Create a confirmed WS page and add the route and screen for this. The UI follow the design in the description of the OP
2. When we click on new WS button in these case we will navigate to the WS confirm page

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Line 467 in a4c8de6

onSelected: () => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()),

App/src/pages/workspace/WorkspacesListPage.tsx

Line 366 in a4c8de6

onPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}

App/src/pages/workspace/WorkspacesListPage.tsx

Line 399 in a4c8de6

onCtaPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}

3. In the WS confirm page, the default value of the WS name input is generated by generateDefaultWorkspaceName(policyOwnerEmail) function, the currency is the localCurrencyCode of the current user. We can use CurrencySelectionList to select another currency.

4. Then when we create a new WS we will call createWorkspaceWithPolicyDraftAndNavigateToIt and pass policyName as the WS name input in confirm page, we need to accept a new param is currency in this function and pass it to createDraftInitialWorkspace function and use it here.

The detail can be done in the PR phrase. I can provide a test branch if we want to test this before moving this forward.

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal


Please re-state the problem that we are trying to solve in this issue.

Provide education/confirmation before creating workspaces in New Workspace flows

What is the root cause of that problem?

Feature request

What changes do you think we should make in order to solve the problem?


• We have to create several new components and make changes to multiple utils functions.
• This will also require backend change for creating the new workspace with custom avatar, the API for creating a workspace does not accept a file for avatar.

Code changes:

• First we need to create a new component for the workspace confirmation page, we can name that WorkspaceConfirmationPage.
  • This component will contain the text at the top and it will render AvatarWithImagePicker, TextInput with InputWrapper.
  • We will generate the default policy name using generateDefaultWorkspaceName and policyID using Policy.generatePolicyID(), we would need the policy ID inside WorkspaceConfirmationPage because we need the correct default WS avatar.
  • Then we should update the files to create a new route and screen for WorkspaceConfirmationPage, ONYXKEYS.ts, ROUTES.ts, SCREENS.ts, ModalStackNavigators.ts, RIghtModalNavigator.tsx, config.ts, Navigation/types.ts and few other types.
• Then we should create a new component CurrencyPicker, this will be render the CurrencySelectionList inside the modal so for selecting currency, we won't need to create a new page.
• After creating CurrencyPicker, we will use that with InputWrapper, just like we use ValuePicker.
• Then we should navigate to WorkspaceConfirmationPage instead of calling createWorkspaceWithPolicyDraftAndNavigateToIt from WorkspacesListPage's empty view and from FloatingActionButtonAndPopover.tsx.
• We would also need to make changes to utils function like App.createWorkspaceWithPolicyDraftAndNavigateToIt to accept new parameters for policyName, file and currency. CreateWorkspace

TEST BRANCH

What alternative solutions did you explore? (Optional)

Result

Monosnap.screencast.2024-10-30.11-30-19.mp4

[dannymcclain]

One thing I think we need to consider that Krishna's proposal made me realize: I think we should auto-update the avatar when the name field is blurred (or something like that).

It's a bit weird to me that the avatar letter doesn't match the name until the workspace is confirmed. Since this screen is a confirmation, I would expect it to accurately reflect what I'm going to get when I confirm. cc @Expensify/design

[shawnborton]

Oh that's a really great point, I definitely agree with that.

[shawnborton]

I mean it is probably likely that someone would hit the Save button directly while being focused in the name input... so I wonder if we would even consider updating the avatar after a second of no typing or something even if the user was still focused in the name input?

[danielrvidal]

Moving this to Daily until we get an answer from our internal team as this is high priority.

[allgandalf]

@grgia i hope this update is enough for you ?

[grgia]

@grgia, the BE endpoint should also accept currency: string; and file: File;. @allgandalf, could you please double-check this as well? Thanks!

@Krishna2323 do we need to return anything in the response?
Also, could you confirm what behavior change we need the API command to make

[Krishna2323]

do we need to return anything in the response?
Also, could you confirm what behavior change we need the API command to make

I don't think we need something from the backend. It should just return the policy with the provided file (avatar) and currency.

Also, could you confirm what behavior change we need the API command to make

Not sure what do you mean by "behavior change". Could you please explain?

[grgia]

Not sure what do you mean by "behavior change". Could you please explain?

@Krishna2323 you proposed we send currency and file to CreateWorkspace-

I want to confirm so we're all on the same page. Are we setting the policy currency and avatar with currency/file? Then returning that data in the policy response?

[Krishna2323]

I want to confirm so we're all on the same page. Are we setting the policy currency and avatar with currency/file? Then returning that data in the policy response?

Yeah, correct.

[grgia]

Great thank you, Looking into this now 👀

[grgia]

Looking at unblocking this now. A lot of this code exists in Web (and probably shouldn't) and I'd rather not hold this on a refactor. I'll update once I confirm

[allgandalf]

Thanks for the update 🙇

[grgia]

I've got the Auth PR nearly done- working on unit tests now. I have a draft for the PHP changes that I'm working on as well but haven't gotten to test it yet

[grgia]

Auth is passing tests, but I've found an alternate solution in web. Looking at that now. Should be good to go early next week either way

[allgandalf]

Thanks for those updated...

[grgia]

Auth PR is in review, will finalize PHP changes today from the Auth Review

[allgandalf]

@grgia, when can we expect the changes to hit staging ?

[grgia]

Web PR is in final review @allgandalf

[grgia]

@allgandalf the changes are in staging
For the avatar file upload, I referenced the upload avatar flow from ND. I can make an App PR with param updates to help if needed

[allgandalf]

That is great!!, thansk @grgia

I can make an App PR with param updates to help if needed

We can include that in the current PR itself right ?

@Krishna2323 when can you have the PR ready for review ?

[grgia]

Yep all good to include in the PR!

[allgandalf]

@grgia hey, can you take a look at this comment when you find time ;) thanks

[grgia]

Looking 👀

[allgandalf]

Update: most probably we should get the PR approved tomorrow