[$250] Report preview doesn't show distance merchant for tracked workspace expense

[m-natarajan]

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: 1.4.70-2 Reproducible in staging?: Yes Reproducible in production?: Yes If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @neil-marcellini Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1714782868884039

Action Performed:

1. Go to a workspace chat
2. Click plus and track expense
3. Choose distance, enter waypoints, Next, Track Expense

Expected Result:

Expense appears optimistically showing a map, the amount, and the merchant with distance info. After the response the same thing should be shown, although the map is expected to be slightly different.

Actual Result:

Expense appears optimistically showing the amount and the merchant with distance info only, no map. After the response it shows the map and the amount only.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

https://github.com/Expensify/App/assets/38435837/472c31c3-c010-4f3d-85e2-6f5f234d5af3

https://github.com/Expensify/App/assets/38435837/dc5967b1-5e39-475d-a6dc-578f876c923e

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017f6ca9bb1a7123b8
• Upwork Job ID: 1787504876858716160
• Last Price Increase: 2024-05-13

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot[bot]]

Triggered auto assignment to @JmillsExpensify (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.

[melvin-bot[bot]]

Current assignee @JmillsExpensify is eligible for the Bug assigner, not assigning anyone new.

[Krishna2323]

Proposal

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

Report preview doesn't show distance merchant for tracked workspace expense

What is the root cause of that problem?

The description/merchant is only shown when numberOfRequests is 1 and buildOptimisticReportPreview returns 1 for childMoneyRequestCount, but when we get data from backend the childMoneyRequestCount is again set to 0.

https://github.com/Expensify/App/blob/ab1e924bf0d4f928a9006f5bdd6b9da60346b1df/src/libs/ReportUtils.ts#L4074 https://github.com/Expensify/App/blob/ab1e924bf0d4f928a9006f5bdd6b9da60346b1df/src/components/ReportActionItem/ReportPreview.tsx#L123 https://github.com/Expensify/App/blob/ab1e924bf0d4f928a9006f5bdd6b9da60346b1df/src/components/ReportActionItem/ReportPreview.tsx#L142

The map shouldn't be shown optimistically instead ReceiptGeneric should be shown. This is also what we do when we create submit expense distance request but the ReceiptGeneric also isn't shown because we haven't included in optimistic transaction. https://github.com/Expensify/App/blob/ab1e924bf0d4f928a9006f5bdd6b9da60346b1df/src/libs/actions/IOU.ts#L2027-L2044

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

We can check for number of transaction(allTransactions.length) instead of numberOfRequests (money request) to show/hide the merchant/description and for the receipt we need to pass optimisticReceipt instead of receiptObject when isDistanceRequest is true.

   // getTrackExpenseInformation util function changes
    const optimisticReceipt: Receipt = {
        source: ReceiptGeneric as ReceiptSource,
        state: CONST.IOU.RECEIPT_STATE.OPEN,
    };
    const existingTransaction = allTransactionDrafts[`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${existingTransactionID ?? CONST.IOU.OPTIMISTIC_TRANSACTION_ID}`];
    const isDistanceRequest = existingTransaction && existingTransaction.iouRequestType === CONST.IOU.REQUEST_TYPE.DISTANCE;
    let optimisticTransaction = TransactionUtils.buildOptimisticTransaction(
        ReportUtils.isExpenseReport(iouReport) ? -amount : amount,
        currency,
        shouldUseMoneyReport && iouReport ? iouReport.reportID : '0',
        comment,
        created,
        '',
        '',
        merchant,
        isDistanceRequest ? optimisticReceipt : receiptObject,
        filename,
        existingTransactionID ?? null,
        category,
        tag,
        billable,
        isDistanceRequest ? {waypoints: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD} : undefined,
        false,
    );

    // In ReportPreview.tsx
    const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID);
    const numberOfRequests = allTransactions.length;

What alternative solutions did you explore? (Optional)

Result

https://github.com/Expensify/App/assets/85894871/7d6eb9ae-53a7-4e22-89c4-ce3d8b0f1836

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[parasharrajat]

The map shouldn't be shown optimistically instead ReceiptGeneric should be shown. This is also what we do when we create submit expense distance request but the ReceiptGeneric also isn't shown because we haven't included in optimistic transaction.

@neil-marcellini Is this something we are expecting https://github.com/Expensify/App/issues/41653#issuecomment-2094852253?

Or we show map while online and ReceiptGeneric while offline.

[nkdengineer]

Proposal

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

Expense appears optimistically showing the amount and the merchant with distance info only, no map. After the response it shows the map and the amount only.

What is the root cause of that problem?

1. When we create a track expense, we update childMoneyRequestCount in optimistic data but BE doesn't expect that so after API is complete, the merchant in preview disappears.

https://github.com/Expensify/App/blob/84118d84da7415bf1ee71fbfcc304bffb75a5530/src/components/ReportActionItem/ReportPreview.tsx#L142

2. We don't create a optimistic receipt as we do here so the preview doesn't show ReceiptGeneric

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

3. Because the track-expense doesn't increase the childMoneyRequestCount, we should get numberOfTransactions here by filtering the transaction that isn't deleted from allTransactions and then use it in the condition to show merchant, description

const numberOfTransactions = allTransactions.filter((transaction) => transaction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE).length;

let formattedMerchant = numberOfTransactions === 1 ? TransactionUtils.getMerchant(allTransactions[0]) : null;
const formattedDescription = numberOfTransactions === 1 ? TransactionUtils.getDescription(allTransactions[0]) : null;

const shouldShowSingleRequestMerchantOrDescription =
numberOfTransactions === 1 && (!!formattedMerchant || !!formattedDescription) && !(hasOnlyTransactionsWithPendingRoutes && !totalDisplaySpend);

https://github.com/Expensify/App/blob/84118d84da7415bf1ee71fbfcc304bffb75a5530/src/components/ReportActionItem/ReportPreview.tsx#L142

OPTIONAL: We can also count the number of track-expenses and display it in the support text here https://github.com/Expensify/App/blob/84118d84da7415bf1ee71fbfcc304bffb75a5530/src/components/ReportActionItem/ReportPreview.tsx#L236

2. We shouldn't increase childMoneyRequestCount of REPORTPREVIEW action when we create a track-expense since it's not the expected from BE and childMoneyRequestCount is also used to display the number of expenses in ReportPreview.

3. We should update the receiptObject as we do here if the transaction is the distance request

if (isDistanceRequest) {
    receiptObject.source = ReceiptGeneric as ReceiptSource,
    receiptObject.state = CONST.IOU.RECEIPT_STATE.OPEN
}

https://github.com/Expensify/App/blob/84118d84da7415bf1ee71fbfcc304bffb75a5530/src/libs/actions/IOU.ts#L2036

What alternative solutions did you explore? (Optional)

NA

[kaushiktd]

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

Report preview doesn't show distance merchant for tracked workspace expense

What is the root cause of that problem?

The inconsistency between the optimistic data and the backend response stems from the handling of childMoneyRequestCount. Initially, during expense creation, the optimistic data sets childMoneyRequestCount to 1, leading to an optimistic display showing only the amount and merchant with distance information but no map. However, upon receiving the backend response, childMoneyRequestCount is reset to 0. Consequently, the optimistic display only shows the map and amount. Cause: The getNumberOfMoneyRequests function determines the display of expense details in the optimistic state based on childMoneyRequestCount. This count is set to 1 in the optimistic data during initial expense creation but is reset to 0 in the backend response.

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

To ensure consistency between the optimistic and backend states and address the issue of differing displays, we propose using childStatusNum instead of childMoneyRequestCount in the getNumberOfMoneyRequests function. Given that childStatusNum is always set to 1 during expense creation, it provides a reliable basis for determining the display of expense details optimistically. https://github.com/Expensify/App/blob/9cad71513fc52ab0cfd5ca5a5434770eb6eec7a7/src/libs/ReportActionsUtils.ts#L792

function getNumberOfMoneyRequests(reportPreviewAction: OnyxEntry<ReportAction>): number {

    return reportPreviewAction?.childStatusNum ?? 0;
}

Video:

https://drive.google.com/file/d/1Ali5HXxIeN_qo7Ky4xRWjOp1yfUeGfDG/view?usp=sharing

[neil-marcellini]

The map shouldn't be shown optimistically instead ReceiptGeneric should be shown. This is also what we do when we create submit expense distance request but the ReceiptGeneric also isn't shown because we haven't included in optimistic transaction.

@neil-marcellini Is this something we are expecting #41653 (comment)?

Or we show map while online and ReceiptGeneric while offline.

As mentioned in the issue description expected result, it should show the map optimistically (for the online case). While offline we should show a pending view. That's getting handled in this PR https://github.com/Expensify/App/pull/39243. Maybe we can just focus on the merchant info for now, and see if we need to fix the map later?

[parasharrajat]

Maybe we can just focus on the merchant info for now, and see if we need to fix the map later?

Got it. Thanks. I will focus on showing merchant info for now.

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

[parasharrajat]

@Gonals Trying to understand the correct behaviour here around childMoneyRequestCount which was added in https://github.com/Expensify/App/pull/23651. Should childMoneyRequestCount increase as well for track expenses?

[melvin-bot[bot]]

@JmillsExpensify, @parasharrajat, @neil-marcellini Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot[bot]]

@JmillsExpensify, @parasharrajat, @neil-marcellini Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[parasharrajat]

@Gonals Any thoughts on this https://github.com/Expensify/App/issues/41653#issuecomment-2108623077?