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

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.73-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• feat: Provide education/confirmation before creating workspaces in New Workspace flows #52164

If no regressions arise, payment will be issued on 2024-12-17. 🎊

For reference, here are some details about the assignees on this issue:

• @Krishna2323 requires payment automatic offer (Contributor)
• @allgandalf requires payment automatic offer (Reviewer)

[allgandalf]

Please remove the hold for payments label, we reverted the original PR, working on new one now

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @RachCHopkins you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[RachCHopkins]

@allgandalf can you please clarify - is this on prod and ready for payment, or is it still being worked on, and not ready for payment?

[allgandalf]

This is not ready for payment yet, the original PR was reverted so we are working on a new one

[shawnborton]

What's the status on the new PR for this? I would love to get this one into the product ASAP. Thanks!