[$250] Invoice - In the first invoice created, the text " Expense " is not shown

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.28 Reproducible in staging?: Y Reproducible in production?: Y Issue reported by: Applause Internal Team

Action Performed:

1. Launch app
2. Tap fab -- new workspace
3. Navigate to LHN
4. Tap fab -- Send invoice
5. Enter an amount and tap next
6. Select a user 7.Tap send invoice
7. Via plus icon -- send invoice, create 2 more invoice
8. Note preview of all invoice created

Expected Result:

In the first invoice created, the text " Expense " is not shown

Actual Result:

In the first invoice created, the text " Expense ut it is displayed in other invoice created.

Workaround:

Unknown

Platforms:

• [x] Android: Native
• [x] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/cb33e405-030e-4125-a913-64c4601dbad3

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021837147636277169515
• Upwork Job ID: 1837147636277169515
• Last Price Increase: 2024-09-27

Issue Owner

Current Issue Owner: @aimane-chnaif

[melvin-bot[bot]]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@puneetlath FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[nkdengineer]

The same RCA with https://github.com/Expensify/App/issues/48238

[puneetlath]

Thanks @nkdengineer. Going to put on hold for that issue.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

@puneetlath, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[aimane-chnaif]

Is this still on hold?

[puneetlath]

Looks like it doesn't need to be anymore. I removed the hold and I'll ask QA to re-test.

[m-natarajan]

Able to reproduce

https://github.com/user-attachments/assets/9f10ebe3-01db-4e2f-b440-e2c3e30993ed

[nkdengineer]

Proposal

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

In the first invoice created, the text " Expense ut it is displayed in other invoice created.

What is the root cause of that problem?

1. The first send invoice is created with merchant as (none) then it works as expected. After that, the transaction draft still exists because this logic

https://github.com/Expensify/App/blob/b3675dac1b8e003088a56a2bd7ebc8e504581cbd/src/pages/iou/request/IOURequestStartPage.tsx#L63-L69

2. When we start the second send invoice, we clear the transactionDraft first and then open the IOURequestStartPage which will initiate the money request. That problem starts here, the draft transaction is updated after we call initMoneyRequest (let's see the log below, the transaction change log is logged here).

https://github.com/Expensify/App/blob/b3675dac1b8e003088a56a2bd7ebc8e504581cbd/src/libs/actions/IOU.ts#L382-L385

https://github.com/user-attachments/assets/1f91d69a-58a1-4c9d-ad18-2f82b746eb09

We move to this case because the transaction still exists as mentioned in point 1. Then the transaction draft is init with merchant as undefined because the current transaction value in the storage is null then we send merchant as an empty string to SendInvoice API. As expected, BE returns the merchant as Expense.

https://github.com/Expensify/App/blob/b3675dac1b8e003088a56a2bd7ebc8e504581cbd/src/libs/actions/IOU.ts#L323

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

We have some options to solve this issue

1. We can add Promise.all to ensure the draft transaction is cleared before we start another money request

function startMoneyRequest(iouType: ValueOf<typeof CONST.IOU.TYPE>, reportID: string, requestType?: IOURequestType, skipConfirmation = false) {
    Promise.all([clearMoneyRequest(CONST.IOU.OPTIMISTIC_TRANSACTION_ID, skipConfirmation)]).then(() => {
        switch (requestType) {
            case CONST.IOU.REQUEST_TYPE.MANUAL:
                Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE_TAB_MANUAL.getRoute(CONST.IOU.ACTION.CREATE, iouType, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
                return;
            case CONST.IOU.REQUEST_TYPE.SCAN:
                Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE_TAB_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
                return;
            case CONST.IOU.REQUEST_TYPE.DISTANCE:
                Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE_TAB_DISTANCE.getRoute(CONST.IOU.ACTION.CREATE, iouType, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
                return;
            default:
                Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE.getRoute(CONST.IOU.ACTION.CREATE, iouType, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
        }
    });
}

https://github.com/Expensify/App/blob/b3675dac1b8e003088a56a2bd7ebc8e504581cbd/src/libs/actions/IOU.ts#L382-L385

2. Pass the transaction value from the component to initMoneyRequest instead of getting it from allTransactionDrafts

https://github.com/Expensify/App/blob/b3675dac1b8e003088a56a2bd7ebc8e504581cbd/src/pages/iou/request/IOURequestStartPage.tsx#L63-L69

3. Fallback the merchant here to CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT instead of empty string

https://github.com/Expensify/App/blob/b3675dac1b8e003088a56a2bd7ebc8e504581cbd/src/libs/actions/IOU.ts#L1862

4. Add another check to not display the merchant if it's the default merchant as we do here

if (formattedMerchant && formattedMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT && formattedMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && formattedMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT) { 

https://github.com/Expensify/App/blob/b3675dac1b8e003088a56a2bd7ebc8e504581cbd/src/components/ReportActionItem/ReportPreview.tsx#L383

What alternative solutions did you explore? (Optional)

5. We can add a useEffect with a cleanup function in IOURequestStartPage to clear the transaction draft when this page is unmounted if the action param is create

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@puneetlath, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[aimane-chnaif]

reviewing proposal above