[Hold] Tweaks to the `Create Expense` Flow

[trjExpensify]

Coming from here.

Background: We're experimenting with an A/B test of a combined "Create expense" flow to see if we improve the decision juncture between "Submit expense" and "Track expense" out the gate. We've seen in Fullstory that submitters are still getting wrong-footed on this page choosing the "Just track it (don't submit it!)" option row. All the while, the workspace settings actually determine whether an expense created is submitted on creation, or if it’s added to a draft report to be submitted later, either manually or automatically with scheduled submit.

Problem: When submitters choose the "Just track it (don't submit it!)" on this page, they end up creating non-reimbursable expenses in the selfDM, which leads to confusion and having no recourse to getting paid back.

Solution: Let's make a couple of tweaks to the Create expense flow, as follows:

Participant selector screen

• Title it "Choose recipient"
• Remove the "Just track it (don't submit it)" option row
• Add a section for "Workspaces" at the top (if you're a member of a workspace). Your primary workspace should be in the top position. That should be followed by a section for "Personal", which has your selfDM. Then followed by the existing "Recents" (if you have any that aren't already above in workspaces/selfDM) and "Contacts" sections.

Confirmation page screen

• Title it "Confirm details"
• Update the confirmation button to read: "Create $amount expense"

CC: @danielrvidal @JmillsExpensify @Expensify/design

[melvin-bot[bot]]

Triggered auto assignment to @alexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-23 15:51:56 UTC.

Proposal

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

Tweaks to the Create Expense Flow

What is the root cause of that problem?

New feature

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

• The test branch here: https://github.com/mkzie2/App/tree/mkzie2-issue/52981-temp

1. Create a new translation for Choose recipient and Confirm details

2. Participant selector screen

Title it "Choose recipient"

• Change headerTitle to Choose recipient or only change to it on the default case and the if action === CONST.IOU.ACTION.SUBMIT

https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/iou/request/step/IOURequestStepParticipants.tsx#L47

Remove the "Just track it (don't submit it)" option row

• Remove shouldDisplayTrackExpenseButton and onTrackExpensePress props in MoneyRequestParticipantsSelector and all variables and functions related with these props

https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/iou/request/step/IOURequestStepParticipants.tsx#L191-L194

Add a section for "Workspaces" at the top (if you're a member of a workspace). Your primary workspace should be in the top position. That should be followed by a section for "Personal", which has your selfDM. Then followed by the existing "Recents" (if you have any that aren't already above in workspaces/selfDM) and "Contacts" sections.

• Introduce two new params in getOptions and getFilteredOptions function shouldSeparateSelfDMChat, shouldSeparateWorkspaceChat. The default value is false. In getOptions, if it's true we will return recent workspace chats/selfDM chats in a separate variable

  • Pass two params above as true here
• Update filterOptions to implement the splice and search logic for recentWorkspaceChats like recentReports

https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/libs/OptionsListUtils.ts#L1743

• Merge recentWorkspaceChats and recentReports options when we call formatSectionsFromSearchTerm here or we can introduce a new param recentWorkspaceChats in this function

https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx#L164-L169

• Add a workspace section from recentWorkspaceChats and personal section from selfDMChat above the recent section here

https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx#L175

• Pick isSelfDM field here, and if isSelfDM is true we will not call onFinish function.

• In this function we will call trackExpense function if the first option is selfDM

  const firstParticipant = val.at(0);
  
          if (firstParticipant?.isSelfDM) {
              trackExpense();
              return;
          }

https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/iou/request/step/IOURequestStepParticipants.tsx#L87

3. Confirmation page screen

Title it "Confirm details"

• Change the headerTitle to Confirm details or only do it in the case Track/submit expense

https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/iou/request/step/IOURequestStepConfirmation.tsx#L111

Update the confirmation button to read: "Create $amount expense"

• Create a new translation for Create ${amount} expense and use this translation here and here

Optional: For changing the title and the submit button, we can only do this if canUseCombinedTrackSubmit is true

What alternative solutions did you explore? (Optional)

Result

https://github.com/user-attachments/assets/da91342b-5671-4342-bf1d-9ae107cb3075

[grgia]

I reached out to Fábio about taking this 💬

[trjExpensify]

Popped on planning for a sec, discussing here.