[HOLD for payment 2024-12-17] [$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[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[bot]]

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

[melvin-bot[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

https://github.com/Expensify/App/blob/a4c8de60b4cdcd99aad0089ce73c339afa5d94f9/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx#L467

https://github.com/Expensify/App/blob/a4c8de60b4cdcd99aad0089ce73c339afa5d94f9/src/pages/workspace/WorkspacesListPage.tsx#L366

https://github.com/Expensify/App/blob/a4c8de60b4cdcd99aad0089ce73c339afa5d94f9/src/pages/workspace/WorkspacesListPage.tsx#L399

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

https://github.com/user-attachments/assets/90ca1f2f-4015-4da6-854e-a3904fad718d

[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?

[dannymcclain]

Yeah I was thinking about that too. Seems unlikely they'll actually unfocus the input. Maybe we just update it as soon as the input has a new first character? 🤷

[shawnborton]

cc @grgia in case you have any thoughts on this one - how do we determine the color scheme of the avatar too?

[grgia]

@shawnborton I believe we use a hash of the policyID to determine the color these days

[Krishna2323]

I believe we use a hash of the policyID to determine the color these days

Yes, the color is determined by the policyID and the letter in the avatar should update when the workspace name is changed.

We just need to pass the latest input value to ReportUtils.getDefaultWorkspaceAvatar.

https://github.com/user-attachments/assets/1de89dee-a7aa-4ef3-a65f-30fdaa39c9dd

[shawnborton]

Cool, so sounds like the color won't change but we should do something like Danny is suggesting where we take the first letter/etc of the input and adjust the avatar above.

[shawnborton]

@Krishna2323 your video looks good, though disclaimer: I am not involved in evaluating proposals :)

[dannymcclain]

disclaimer: I am not involved in evaluating proposals :)

Haha same! But that is what I had in mind.

[dubielzyk-expensify]

Nothing to add but to say that this is looking great!

[danielrvidal]

@allgandalf can you review? Does @Krishna2323 looks good since the proposal helped us catch something?

[allgandalf]

I will review both proposals and differences between both and recommend one contributor by EOD

[melvin-bot[bot]]

@danielrvidal, @allgandalf, @dubielzyk-expensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[danielrvidal]

Any thoughts on which one to go with @allgandalf ? It would be great to get started!

[allgandalf]

@Krishna2323 's proposal helped us discuss more about the changes we would want so i would prefer their proposal here 🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @rafecolton, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot[bot]]

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job