[HOLD PR#35880][$500] IOU - Total amount is only grayed out after revisiting IOU report when creating IOU offline

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v.1.4-39-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4295316
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:

1. Go to staging.new.expensify.com
2. Go to FAB > Request money > Manual.
   3, Create a manual request from a user.
3. Go offline.
4. In 1:1 DM, click on the IOU preview to go to IOU report.
5. Click + > Request money.
6. Create a manual request in local currency.
7. Create another manual request in foreign currency.
8. Go to main chat and return to IOU report.

Expected Result:

In Step 8, the total amount is grayed out because request with foreign currency is created offline.

Actual Result:

In Step 8, the total amount is not grayed out.
In Step 9, after revisiting the report, the total amount is grayed out.

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

Add any screenshot/video evidence

Bug6373675_1707489311442.bandicam_2024-02-09_12-24-02-200__1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01eeb6c185339b648d
• Upwork Job ID: 1755966084970962944
• Last Price Increase: 2024-02-09

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-split-p2p-chat-groups
CC @gabrielessner

[melvin-bot]

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

[paultsimura]

This might be resolved by #35880 – where we handle the total update when the request with a different currency is made.
cc: @cubuspl42 could you please check if this might be related?

[bernhardoj]

Proposal

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

The total amount of text doesn't grayed out after adding a new request with a different currency while offline.

What is the root cause of that problem?

The text will be grayed out if hasUpdatedTotal returns false.

App/src/components/ReportActionItem/MoneyReportView.tsx

Lines 121 to 125 in 04fc886

	<Text
	numberOfLines={1}
	style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}
	>
	{formattedTotalAmount}

The issue is, hasUpdatedTotal depends on transaction data.

App/src/libs/ReportUtils.ts

Lines 4672 to 4682 in 04fc886

	function hasUpdatedTotal(report: OnyxEntry<Report>): boolean {
	if (!report) {
	return true;
	}
	const transactions = TransactionUtils.getAllReportTransactions(report.reportID);
	const hasPendingTransaction = transactions.some((transaction) => !!transaction.pendingAction);
	const hasTransactionWithDifferentCurrency = transactions.some((transaction) => transaction.currency !== report.currency);
	return !(hasPendingTransaction && hasTransactionWithDifferentCurrency);
	}

But the component (MoneyReportView) doesn't subscribed to (or have props of) transaction onyx data, so it won't re-render.

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

First of all, we should connect the transaction onyx data.

withOnyx({
    transactions: {
        key: ONYXKEYS.COLLECTION.TRANSACTION,
    },
})(MoneyReportView);

Then, instead of using getAllReportTransactions to get the transaction list, we can pass the transactions props to hasUpdatedTotal. We can filter before passing it through selector or inside hasUpdatedTotal itself (I think the selector is better).

If we concern with the performance, we can create a view wrapper that will calculate the hasUpdatedTotal value and pass it down, so MoneyReportView will only re-render if hasUpdatedTotal value changes.
or calculate hasUpdatedTotal in the onyx selector, so instead of receiving transaction props, it will receive hasUpdatedTotal props

[cubuspl42]

This might be resolved by #35880 – where we handle the total update when the request with a different currency is made. cc: @cubuspl42 could you please check if this might be related?

I agree that it could have the same root cause. That PR should be merged soon, I gave it a bump!

[abdulrahuman5196]

Thanks @cubuspl42. We can have a check back once the PR is merged.

[melvin-bot]

@sakluger, @abdulrahuman5196 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[sakluger]

I put the issue on hold for #35880, hopefully that one fixes this!

[sakluger]

I also removed Help Wanted temporarily while we wait for that issue.

[sakluger]

#35880 has been deployed to prod as of yesterday. I added the 'retest-weekly' label so we can see if this is still reproduceable.

[melvin-bot]

@sakluger, @abdulrahuman5196 Eep! 4 days overdue now. Issues have feelings too...

[sakluger]

I reached out to #qa on Slack to see if they were able to retest this: https://expensify.slack.com/archives/C9YU7BX5M/p1709589428240689

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[sakluger]

Looks like the other PR fixed this issue, nice! I'm going to close this issue out, please bump me on Slack if I missed anything.