[$500] IOU - After editing a Distance request in offline mode, TBD does not appear in the Amount field

[lanitochka17]

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.3.86-1

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: Applause - Internal Team

Slack conversation:

Action Performed:

Prerequisites:
The account must have a distance request or create one

1. Open New Expensify app
2. Log in with your HT account
3. Navigate to a distance request details conversation
4. Disable the internet connection
5. Select the distance item
6. Add a new stop to the route
7. Save the change
8. Navigate to the report conversation

Expected Result:

After changing the route in offline mode the receipt route image should be pending, and the distance and amount should show as TBD

Actual Result:

The receipt route image is not in a pending state, and the distance and amount are not displayed as TBD when editing Distance expense request offline

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Bug6242084_1697652502355.Recording__497.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a882c54a16f7ff85
• Upwork Job ID: 1714715676869181440
• Last Price Increase: 2023-10-18
• Automatic offers:
• Tony-MK | Contributor | 27294889

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[melvin-bot]

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

[FitseTLT]

Proposal

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

After editing waypoints in offline mode, the amount and distance don't change to TBD

What is the root cause of that problem?

Our IOU.updateDistanceRequest doesn't handle the offline case on which it can't determine the updated amount and distance

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

In IOU.updateDistanceRequest we need to set the amount and distance value to TBD by checking if the user is offline.

What alternative solutions did you explore? (Optional)

We can also use OptimisticData to set the values to TBD until the user goes online.

[Tony-MK]

Proposal

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

After editing a Distance request in offline mode, TBD does not appear in the Amount field

What is the root cause of that problem?

The root cause of the problem is that when the user changes the waypoints when offline the transaction data remains the same until the new data, with the correct distance and amount, is fetched from the server changes it. The receipt data stays the same as well. Currently, there is only one handler for displaying common.tbd but it only does this when the transaction.amount and transaction.modifiedAmount are both set to zero. For example:

App/src/components/ReportActionItem/MoneyRequestView.js

Lines 102 to 104 in b38171d

	if (isDistanceRequest && !formattedTransactionAmount) {
	formattedTransactionAmount = translate('common.tbd');
	}

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

Firstly, we need to handle the text to be displayed when the waypoints key is present in the transaction.pendingFields object. Therefore, we need to create new handlers near the lines where transaction.amount and transaction.merchant are used across the MoneyRequestView, MoneyRequestAction and ReportPreview components. This is to ensure consistency. Here is an example of the handlers on the MoneyRequestView component:

App/src/components/ReportActionItem/MoneyRequestView.js

Lines 102 to 104 in b38171d

	if (isDistanceRequest && !formattedTransactionAmount) {
	formattedTransactionAmount = translate('common.tbd');
	}

const hasPendingWaypoints = lodashGet(transaction, 'pendingFields.waypoints');
if (isDistanceRequest && (!formattedTransactionAmount || hasPendingWaypoints)) {
     formattedTransactionAmount = translate('common.tbd');
}

Also for the merchant string.

App/src/components/ReportActionItem/MoneyRequestView.js

Line 210 in b38171d

title={transactionMerchant}

// For replaceMerchantForTBD, probably use regex to replace the distance in the merchant string with 
// common.tbd or use the Distance.Utils.getDistanceMerchant function to generate a merchant string
// with common.tbd
title={hasPendingWaypoints ? replaceMerchantForTBD() : transactionMerchant}

Lastly, to render the default receipt, we need to add some logic such as !Object.hasOwn(transaction?.pendingFields, 'waypoints') to allow the getThumbnailAndImageURIs function, in the ReceiptUtils.ts file, to output the ReceiptGeneric. This will happen when the waypoints key is in the transaction.pendingFields.

[ArekChr]

I chose the proposal from @Tony-MK, it provides a more detailed description of the problem and clearly defined solutions that cover a broader range of use cases.

🎀 👀 🎀 C+ reviewed