[HOLD for payment 2024-06-20] [$250] Android - Track expense - Confirmation modal when deleting a tracked expense shows in the wrong place for a few seconds

[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.4.61
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch app
2. Tap fab --- track expense -- manual
3. Enter an amount and tap next
4. Tap track expense
5. Open expense to view details page
6. Tap top right 3 dots and select delete expense
7. Tap confirm in the modal to delete

Expected Result:

The confirmation modal overlay closes on the details page, and then the details page slides away.

Actual Result:

The details page slides away first, making the confirmation modal overlay appear to show on the selfDM chat for a few seconds.

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

Bug6442491_1712592350901.all_rp.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0159ed3445fa44ec24
• Upwork Job ID: 1777503807286583296
• Last Price Increase: 2024-04-09
• Automatic offers:
• Ollyws | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[lanitochka17]

@trjExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[ZhenjaHorbach]

Proposal

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

Track expense - Confirm delete box in tract expense conversation page shown for seconds

What is the root cause of that problem?

The main problem with issue is that when we delete transaction
We leave the modal window open
And the only case is when the modal window closes
This is when the current screen is completely unmounted

App/src/components/MoneyRequestHeader.tsx

Lines 74 to 77 in 8fa9894

	if (ReportActionsUtils.isTrackExpenseAction(parentReportAction)) {
	IOU.deleteTrackExpense(parentReport?.reportID ?? '', iouTransactionID, parentReportAction, true);
	return;
	}

And as we see
We expect the modal window to close
But since we have return in our case
We can't call code with setIsDeleteModalVisible(false)

App/src/components/MoneyRequestHeader.tsx

Lines 71 to 82 in 8fa9894

	const deleteTransaction = useCallback(() => {
	if (parentReportAction) {
	const iouTransactionID = parentReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? parentReportAction.originalMessage?.IOUTransactionID ?? '' : '';
	if (ReportActionsUtils.isTrackExpenseAction(parentReportAction)) {
	IOU.deleteTrackExpense(parentReport?.reportID ?? '', iouTransactionID, parentReportAction, true);
	return;
	}
	IOU.deleteMoneyRequest(iouTransactionID, parentReportAction, true);
	}
	setIsDeleteModalVisible(false);
	}, [parentReport?.reportID, parentReportAction, setIsDeleteModalVisible]);

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

To fix this issue we can update this code and add setIsDeleteModalVisible(false) like

            if (ReportActionsUtils.isTrackExpenseAction(parentReportAction)) {
                IOU.deleteTrackExpense(parentReport?.reportID ?? '', iouTransactionID, parentReportAction, true);
                setIsDeleteModalVisible(false);
                return;
            }

What alternative solutions did you explore? (Optional)

As alternative, we can update isVisible and add isFocused or use useEffect with isFocused in dependency to be sure that when we leave the screen we close the modal window

App/src/components/MoneyRequestHeader.tsx

Line 200 in 8fa9894

isVisible={isDeleteModalVisible}

Or we can add this logic inside ConfirmModal

[trjExpensify]

@trjExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

Yep, it can be external. @thienlnam where are you putting bug issues for Track Expense in #vip-vsb?

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

Proposal

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

In track expense details page only, the confirm delete box must be shown. But user can see confirm delete box in tract expense (you) conversation page for few seconds

What is the root cause of that problem?

When we delete the track-expense, we return here without updating isDeleteRequestModalVisible state. So this modal only disappears when the component is unmounted.

App/src/components/MoneyReportHeader.tsx

Lines 136 to 146 in 38ced97

	if (requestParentReportAction) {
	const iouTransactionID = requestParentReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? requestParentReportAction.originalMessage?.IOUTransactionID ?? '' : '';
	if (ReportActionsUtils.isTrackExpenseAction(requestParentReportAction)) {
	IOU.deleteTrackExpense(moneyRequestReport?.reportID ?? '', iouTransactionID, requestParentReportAction, true);
	return;
	}
	IOU.deleteMoneyRequest(iouTransactionID, requestParentReportAction, true);
	}
	setIsDeleteRequestModalVisible(false);
	}, [moneyRequestReport?.reportID, requestParentReportAction, setIsDeleteRequestModalVisible]);

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

We should close the modal before we call the delete function so this can make sure the modal is closed before we navigate.
We should move this logic here to before this line.

OPTIONAL: We also can wrap this logic into InteractionManager.runAfterInteractions as well to make sure the confirm modal is always closed first.

App/src/components/MoneyReportHeader.tsx

Lines 136 to 145 in 38ced97

	if (requestParentReportAction) {
	const iouTransactionID = requestParentReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? requestParentReportAction.originalMessage?.IOUTransactionID ?? '' : '';
	if (ReportActionsUtils.isTrackExpenseAction(requestParentReportAction)) {
	IOU.deleteTrackExpense(moneyRequestReport?.reportID ?? '', iouTransactionID, requestParentReportAction, true);
	return;
	}
	IOU.deleteMoneyRequest(iouTransactionID, requestParentReportAction, true);
	}
	setIsDeleteRequestModalVisible(false);

This bug also happens for transaction thread report here, we should fix this as well

What alternative solutions did you explore? (Optional)

NA