[$250] QAB - Negative amount briefly displayed when Pay someone

[lanitochka17]

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: 9.0.4-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?/cases/view/2990372
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: user did 'Pay someone' to individual chat

1. Click FAB
2. Click QAB > Pay someone
3. Input amount
4. Click Pay elsewhere

Expected Result:

User navigated to chat with person he payed. Expense preview displays amount

Actual Result:

User navigated to chat with person he payed. Expense preview briefly displays negative amount (occasionally negative amount may stay)

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

Bug6533418_1720122986864.pay_someone.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ee0d66d57ed7a8d9
• Upwork Job ID: 1810894586733112761
• Last Price Increase: 2024-08-21

Issue Owner

Current Issue Owner: @brunovjk

[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.

[bernhardoj]

Proposal

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

Negative amount is shown on the report preview when pay someone.

What is the root cause of that problem?

The pay amount logic is, if there is a total amount from the IOU report object, then we use that amount, otherwise, we take the amount from the report preview message.

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 206 to 232 in c5eafd3

	const getDisplayAmount = (): string => {
	if (totalDisplaySpend) {
	return CurrencyUtils.convertToDisplayString(totalDisplaySpend, iouReport?.currency);
	}
	if (isScanning) {
	return translate('iou.receiptScanning');
	}
	if (hasOnlyTransactionsWithPendingRoutes) {
	return translate('iou.fieldPending');
	}
	// If iouReport is not available, get amount from the action message (Ex: "Domain20821's Workspace owes $33.00" or "paid ₫60" or "paid -₫60 elsewhere")
	let displayAmount = '';
	const actionMessage = ReportActionsUtils.getReportActionText(action);
	const splits = actionMessage.split(' ');
	splits.forEach((split) => {
	if (!/\d/.test(split)) {
	return;
	}
	displayAmount = split;
	});
	return displayAmount;
	};

In the OP video, we can see the amount changes from
UAH xx -> ₴ xx -> -UAH xx

The reason it shows a negative amount is that the IOU report total is 0, so it takes the amount from the report preview message which is negative. If we see some logic related to the money request amount, we take the abs amount if it's an IOU report, which we don't do here.

App/src/libs/ReportUtils.ts

Lines 2408 to 2412 in c5eafd3

	// There is a possibility that if the Expense report has a negative total.
	// This is because there are instances where you can get a credit back on your card,
	// or you enter a negative expense to “offset” future expenses
	nonReimbursableSpend = isExpenseReport(moneyRequestReport) ? nonReimbursableSpend * -1 : Math.abs(nonReimbursableSpend);
	totalSpend = isExpenseReport(moneyRequestReport) ? totalSpend * -1 : Math.abs(totalSpend);

But, if we look into the onyx storage, the IOU report actually has a non-zero total, but the data isn't reflected in the report preview component. So, the report preview component holds the old data. It's the withOnyx bug where it doesn't give the most up-to-date data when there are multiple merges happening within a short span of time. It's similar to this issue where the policy data is undefined because activeWorkspaceID is initially undefined but then is updated when the nav state changes, but the policy data stays undefined.

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

As withOnyx is officially deprecated, we can just replace it with useOnyx for the ReportPreview component which doesn't have the bug. This will make the component always stay up-to-date.

However, we still have one problem, that is the amount changing. After we replace it with useOnyx, the amount will change from
UAH xx -> ₴ xx -> -UAH xx -> UAH xx

The first amount is the optimistic amount. Then, after the send money request is completed, the send money API response returns multiple Onyx merge requests. The first request merges the IOU report data which has a total data of 0. This overwrites the optimistic total.

Also, notice that the statusNum is 1 which is SUBMITTED instead of 4 (REIMBURSED). This makes the isSettled state becomes false.

Because the total is 0, it will get the amount from the report preview message, but the message from the BE response uses the currency symbol (₴) instead of the currency code (UAH). (the 2nd amount shown)

The last few merge requests from the API response contain the correct data. (the 3rd (the correct message) and then 4th (the correct iou report total) amount is shown)

This needs a BE fix.

Additionally, we can make sure the amount is never be in negative by making it absolute for IOU report,

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 218 to 230 in c5eafd3

	let displayAmount = '';
	const actionMessage = ReportActionsUtils.getReportActionText(action);
	const splits = actionMessage.split(' ');
	splits.forEach((split) => {
	if (!/\d/.test(split)) {
	return;
	}
	displayAmount = split;
	});
	return displayAmount;

just like we did here.

App/src/libs/ReportUtils.ts

Line 2412 in c5eafd3

totalSpend = isExpenseReport(moneyRequestReport) ? totalSpend * -1 : Math.abs(totalSpend);

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[JmillsExpensify]

I'll add the external label. If the solution is straightforward we can fix it.

[brunovjk]

@bernhardoj Thanks for the proposal. Your RCA is not clear to me yet. I replace withOnyx with useOnyx in ReportPreview and I continue with exactly the same behavior as before, which by the way is a bit different, I go from $xx to -$xx and I'll stay there. Could you please give me a more detail or share a test branch? Thank you very much.

[bernhardoj]

Hmm, you're right. Maybe there is something happened when I tested it. I just rechecked that the problem is in Onyx.connect which doesn't give us the latest value and I haven't found a solution for that yet..

[melvin-bot]

@JmillsExpensify, @brunovjk Eep! 4 days overdue now. Issues have feelings too...

[brunovjk]

Still waiting for proposals

[brunovjk]

the problem is in Onyx.connect which doesn't give us the latest value and I haven't found a solution for that yet..

Any new finds @bernhardoj ? Thank you :D

[bernhardoj]

Not yet

[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 @brunovjk 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!

[brunovjk]

Not overdue, still looking for proposals

[brunovjk]

Bumping Slack for proposals

[melvin-bot]

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

[brunovjk]

Bumped on Slack for proposals

[melvin-bot]

@JmillsExpensify @brunovjk 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!

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[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, @brunovjk Whoops! This issue is 2 days overdue. Let's get this updated quick!

[brunovjk]

@JmillsExpensify can you reproduce? Thanks

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[melvin-bot]

@JmillsExpensify, @brunovjk Huh... This is 4 days overdue. Who can take care of this?

[brunovjk]

@JmillsExpensify should we wait for mvtglobally to complete its weeks, or can we close the issue? We reopen if necessary.

[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, @brunovjk Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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

[mvtglobally]

Issue not reproducible during KI retests. (Third week)

[melvin-bot]

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

[brunovjk]

I was unable to reproduce (v9.0.24-1). I believe this issue was being caused by some conflict in the server response, which is why there were times when we were able to reproduce it and others not. I didn't find anything strange about it in FE.

cc: @JmillsExpensify

[brunovjk]

@JmillsExpensify Do you think we can get someone else to reproduce and confirm that the issue still exists? Thank you.

[JmillsExpensify]

Let's just close. It's not reproducible for several QA runs. Thanks for reaching out via Slack!