[Due for payment 2025-03-05] [Due for payment 2025-02-18] [HOLD for payment 2025-02-04] 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

New addition from @dubielzyk-expensify to add as a follow-up

In the participant selector, switch out the second line of each workspace row (which currently reads Workspace) to be the displayName of the approver ("submitsTo") instead. Use the primaryLogin as a fallback if no displayName is set.

Issue Owner

Current Issue Owner: @trjExpensify

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

App/src/pages/iou/request/step/IOURequestStepParticipants.tsx

Line 47 in 3ebe852

const headerTitle = useMemo(() => {

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

App/src/pages/iou/request/step/IOURequestStepParticipants.tsx

Lines 191 to 194 in 3ebe852

	onTrackExpensePress={trackExpense}
	iouType={iouType}
	action={action}
	shouldDisplayTrackExpenseButton={shouldDisplayTrackExpenseButton}

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

App/src/libs/OptionsListUtils.ts

Line 1743 in 3ebe852

function filterOptions(options: Options, searchInputValue: string, config?: FilterOptionsConfig): Options {

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

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Lines 164 to 169 in 3ebe852

	const formatResults = OptionsListUtils.formatSectionsFromSearchTerm(
	debouncedSearchTerm,
	participants.map((participant) => ({...participant, reportID: participant.reportID ?? '-1'})),
	chatOptions.recentReports,
	chatOptions.personalDetails,
	personalDetails,

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

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 175 in 3ebe852

newSections.push({

• 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;
         }

App/src/pages/iou/request/step/IOURequestStepParticipants.tsx

Line 87 in 3ebe852

const addParticipant = useCallback(

3. Confirmation page screen

Title it "Confirm details"

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

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Line 111 in 3ebe852

const headerTitle = useMemo(() => {

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

Screen.Recording.2024-11-23.at.22.46.08.mov

[grgia]

I reached out to Fábio about taking this 💬

[trjExpensify]

Popped on planning for a sec, discussing here.

[trjExpensify]

No change, thread likely picked up next week at this point.

[melvin-bot]

@trjExpensify, @grgia Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[trjExpensify]

Anu is back today, bumped the thread.

[JmillsExpensify]

Nice, I'd like to get this one moving again. I'm still concerned that the original Create Expense test isn't testing what we need to test (e.g. whether they would like to submit now or later, which is different than whether they don't want to submit to anyone. ever).

[grgia]

@JmillsExpensify @trjExpensify could you ping me when this is ready to be picked up again by an engineer

[trjExpensify]

Yep, will do.

[JKobrynski]

Hi, I'm Julian from Callstack - expert agency - and I would like to work on this issue.

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@JKobrynski] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[melvin-bot]

Skipping the payment summary for this issue since all the assignees are employees or vendors. If this is incorrect, please manually add the payment summary SO.

[mananjadhav]

Just adding for tracking: There are 3 payments pending on this one for the PR reviews done. 2 PRs linked in this issue and 1 from here

[mananjadhav]

There was one related issue #55661 (comment) which we decided not to treat as regression and include in the original scope.

There's this one edge case #56507 left out related to the subtitle change. This can be treated as regression to the subtitle PR #55863.

[trjExpensify]

Okay cool, so that's $625 total due then, right?

[trjExpensify]

Payment summary as follows:

• $750 to @mananjadhav for the PR reviews

Go ahead and request! I've created a regression test request for the submitsTo subtitle inclusion. Thanks!

[mananjadhav]

Thanks for the summary @trjExpensify. I was going to request if we could pay this in full.

The regression case was a very edge case and though surfaced with the PR, but it's because the Options list doesn't refresh. Hence, I didn't have a way to compare it with the production behavior too.

[trjExpensify]

Oh right, then I misinterpreted you here:

There's this one edge case #56507 left out related to the subtitle change. This can be treated as regression to the subtitle PR #55863.

@grgia what do you think about the below wrt to the regression?

The regression case was a very edge case and thought surfaced with the PR, but it's because the Options list doesn't refresh. Hence, I didn't have a way to compare it with the production behavior too.

[mananjadhav]

Yeah I didn't think about it while writing the comment. I realized when I was reviewing the PR.

[mananjadhav]

@grgia Can you please check the previous conversations?

[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.1.5-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Update Create expense Track task #57329

If no regressions arise, payment will be issued on 2025-03-05. 🎊

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

• @mananjadhav requires payment through NewDot Manual Requests
• @JKobrynski does not require payment (Contractor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mananjadhav] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[grgia]

@trjExpensify I agree with @mananjadhav

[trjExpensify]

#52981 (comment) - cool amended payment summary to $750.

[garrettmknight]

$750 approved for @mananjadhav