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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Screen.Recording.2024-05-03.at.5.22.56.PM.mov

Track.expernse.mp4

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-06-03

Issue Owner

Current Issue Owner: @parasharrajat

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

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.

App/src/libs/ReportUtils.ts

Line 4074 in ab1e924

childMoneyRequestCount: 1,

App/src/components/ReportActionItem/ReportPreview.tsx

Line 123 in ab1e924

const numberOfRequests = ReportActionUtils.getNumberOfMoneyRequests(action);

App/src/components/ReportActionItem/ReportPreview.tsx

Line 142 in ab1e924

let formattedMerchant = numberOfRequests === 1 ? TransactionUtils.getMerchant(allTransactions[0]) : null;

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.

App/src/libs/actions/IOU.ts

Lines 2027 to 2044 in ab1e924

	let optimisticTransaction = TransactionUtils.buildOptimisticTransaction(
	ReportUtils.isExpenseReport(iouReport) ? -amount : amount,
	currency,
	shouldUseMoneyReport && iouReport ? iouReport.reportID : '0',
	comment,
	created,
	'',
	'',
	merchant,
	receiptObject,
	filename,
	existingTransactionID ?? null,
	category,
	tag,
	billable,
	isDistanceRequest ? {waypoints: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD} : undefined,
	false,
	);

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

report_preview_track_expense.mp4

[melvin-bot]

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

[melvin-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 #41653 (comment)?

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.

App/src/components/ReportActionItem/ReportPreview.tsx

Line 142 in 84118d8

let formattedMerchant = numberOfRequests === 1 ? TransactionUtils.getMerchant(allTransactions[0]) : null;

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?

1. 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);

App/src/components/ReportActionItem/ReportPreview.tsx

Line 142 in 84118d8

let formattedMerchant = numberOfRequests === 1 ? TransactionUtils.getMerchant(allTransactions[0]) : null;

OPTIONAL: We can also count the number of track-expenses and display it in the support text here

App/src/components/ReportActionItem/ReportPreview.tsx

Line 236 in 84118d8

supportText: translate('iou.expenseCount', {

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
}

App/src/libs/actions/IOU.ts

Line 2036 in 84118d8

const receiptObject: Receipt = {};

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.

App/src/libs/ReportActionsUtils.ts

Line 792 in 9cad715

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

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 #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]

📣 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 #23651. Should childMoneyRequestCount increase as well for track expenses?

[melvin-bot]

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

[melvin-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 #41653 (comment)?

[melvin-bot]

@JmillsExpensify @parasharrajat @neil-marcellini this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[parasharrajat]

Created a slack thread for the same question.

[melvin-bot]

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

[parasharrajat]

Got one lead on slack and started looking into the code for analysis. Next update by tomorrow.

[parasharrajat]

Still looking. I will prioritize this today.

[neil-marcellini]

I chimed in on the Slack convo. Maybe we need a backend fix?

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

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

[parasharrajat]

Not working today. I will have an update tomorrow. Probably we need to update both fronted and backend.

[melvin-bot]

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

[parasharrajat]

Ok, so we must fix the backend to return the proper data. This should resolve the issue with distance and merchant info.

we are only focusing on distance and merchant info on this issue as per #41653 (comment)

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @neil-marcellini is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

@JmillsExpensify @parasharrajat @neil-marcellini this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

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

@JmillsExpensify, @parasharrajat, @neil-marcellini Whoops! This issue is 2 days overdue. Let's get this updated quick!

[parasharrajat]

Waiting on @neil-marcellini.