[HOLD for payment 2024-12-11] [$250] Held expense - Empty message with reply appears after paying the unheld amount for second time

[IuliiaHerets]

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: 9.0.63-3
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh051115@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. [User A] Submit two expenses to User B.
3. [User B] Hold the first expense.
4. [User B] Click Pay button and pay the unheld amount.
5. [User A] Submit another expense to User B.
6. [User B] Go to the expense report.
7. [User B] Click Pay button and pay the unheld amount.
8. [User B] Note that the held expense is marked as paid when it should be moved to another report.
9. [User B] Refresh the expense report.
10. [User B] Note that there is an empty message with reply which opens the held expense when clicked.

Expected Result:

In Step 8, the held expense should move to another report when only the pending amount is paid.
In Step 10, after refreshing the page, there should not be an empty message in the expense report.

Actual Result:

In Step 8, the held expense does not move to another report when only the pending amount is paid. The expense preview is marked as paid when only the unheld amount is paid.

In Step 10, after refreshing the page, there is an empty message in the expense report, which opens the held expense.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6668237_1731920941849.bandicam_2024-11-18_17-00-07-546.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859730399211188082
• Upwork Job ID: 1859730399211188082
• Last Price Increase: 2024-11-21
• Automatic offers:
• DylanDylann | Reviewer | 105075616

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

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

The hold report action isn't removed from the paid expense chat and becomes empty when revisiting the report.

What is the root cause of that problem?

When we pay the expense report with held expense, it will optimistically remove the held expense and move it to the new optimistic expense report.

App/src/libs/actions/IOU.ts

Lines 6309 to 6331 in f77087f

	holdReportActions.forEach((holdReportAction) => {
	const originalMessage = ReportActionsUtils.getOriginalMessage(holdReportAction);
	deleteHoldReportActions[holdReportAction.reportActionID] = {
	message: [
	{
	deleted: DateUtils.getDBTime(),
	type: CONST.REPORT.MESSAGE.TYPE.TEXT,
	text: '',
	},
	],
	};
	const reportActionID = rand64();
	addHoldReportActions[reportActionID] = {
	...holdReportAction,
	reportActionID,
	originalMessage: {
	...originalMessage,
	IOUReportID: optimisticExpenseReport.reportID,
	},
	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
	};

But the issue started to happen when we did it again the second time. It's because when we optimistically add the held expense to a new expense report, we set the pending action to add (as shown above). But we don't clear it when the request is successful. So, the pending action is always true and when we optimistically delete it, it will still be shown because a pending action is always shown.

App/src/libs/ReportActionsUtils.ts

Lines 676 to 679 in f77087f

	const isDeleted = isDeletedAction(reportAction);
	const isPending = !!reportAction.pendingAction;
	return !isDeleted || isPending || isDeletedParentAction(reportAction) || isReversedTransaction(reportAction);

It becomes an empty message when we reopen it because the BE response changes the action to ADDCOMMENT instead of IOU.

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

We need to clear the pending action when the request is successful.

const successAddHoldReportActions = {};

holdReportActions.forEach((holdReportAction) => {

const reportActionID = rand64();
addHoldReportActions[reportActionID] = {
    ...
    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
};

successAddHoldReportActions[reportActionID] = {
    pendingAction: null,
};

We might need to do it for the optimistic report preview too because it also adds a pending action when created optimistically.

App/src/libs/actions/IOU.ts

Lines 6295 to 6302 in f77087f

	const optimisticExpenseReportPreview = ReportUtils.buildOptimisticReportPreview(
	chatReport,
	optimisticExpenseReport,
	'',
	firstHoldTransaction,
	optimisticExpenseReport.reportID,
	newParentReportActionID,
	);

We can do the same with other optimistic data that I missed.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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