[HOLD for Payment 2024-08-22] [$250] Web - Expense - App navigates to not found page when paying part of an expense offline

[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: 9.0.14-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: N/A
Email or phone of affected tester (no customers): Yokabdk+new1@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to settings and workspace and create a workspace
3. Go to FAB
4. Click on submit expense and click the workspace you created
5. Enter an amount (e.g 100) and click Next
6. Input a merchant and submit the expense
7. Create another expense with a different amount (e.g 50)
8. Navigate to the expense details page of the first expense (e.g 100)
9. Click on header and click on hold
10. Click on the subtitle "From" link to go back to the expense lists page (Important)
11. Click on the drop down of the green pay button at the top right corner
12. Click on "Pay elsewhere"
13. Click on "Pay only 50" on the confirmation pop up

Expected Result:

App navigates to the expense lists page which is the behavior in online mode

Actual Result:

App navigates to not here page when clicking on the pay only ... button while 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

Add any screenshot/video evidence

Bug6553411_1721982281588.VID_20240726_112408_394.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0116c34258c5f026d6
• Upwork Job ID: 1818936321732205498
• Last Price Increase: 2024-08-01
• Automatic offers:
• brunovjk | Reviewer | 103423828

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

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

[lanitochka17]

@twisterdotcom 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

[bernhardoj]

Proposal

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

Not found page when paying partial report.

What is the root cause of that problem?

The not found page is because the report action isn't found anymore. If we have a hold expense and then pay it partially, we will optimistically remove the hold expense and move it to a new expense report. This is introduced in #42573.

App/src/libs/actions/IOU.ts

Lines 6564 to 6572 in bbaa9da

	if (!full) {
	const holdReportOnyxData = getReportFromHoldRequestsOnyxData(chatReport, iouReport, recipient);
	optimisticData.push(...holdReportOnyxData.optimisticData);
	failureData.push(...holdReportOnyxData.failureData);
	optimisticHoldReportID = holdReportOnyxData.optimisticHoldReportID;
	optimisticHoldActionID = holdReportOnyxData.optimisticHoldActionID;
	optimisticHoldReportExpenseActionIDs = JSON.stringify(holdReportOnyxData.optimisticHoldReportExpenseActionIDs);
	}

If we link to the hold expense action, when it's moved to the new expense report, the not found page shows.

App/src/pages/home/ReportScreen.tsx

Lines 413 to 421 in bbaa9da

	const shouldShowNotFoundLinkedAction =
	(!isLinkedActionInaccessibleWhisper && isLinkedActionDeleted) ||
	(shouldShowSkeleton &&
	!reportMetadata.isLoadingInitialReportActions &&
	!!reportActionIDFromRoute &&
	!!sortedAllReportActions &&
	sortedAllReportActions?.length > 0 &&
	reportActions.length === 0 &&
	!isLinkingToMessage);

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

We can follow a similar approach when deleting a comment by checking if the deleted action is the linked action, then clear the reportActionID from the params.

App/src/libs/actions/Report.ts

Lines 1498 to 1502 in d69b203

	// if we are linking to the report action, and we are deleting it, and it's not a deleted parent action,
	// we should navigate to its report in order to not show not found page
	if (Navigation.isActiveRoute(ROUTES.REPORT_WITH_ID.getRoute(reportID, reportActionID)) && !isDeletedParentAction) {
	Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(reportID), true);
	}

App/src/libs/actions/IOU.ts

Lines 6564 to 6572 in bbaa9da

	if (!full) {
	const holdReportOnyxData = getReportFromHoldRequestsOnyxData(chatReport, iouReport, recipient);
	optimisticData.push(...holdReportOnyxData.optimisticData);
	failureData.push(...holdReportOnyxData.failureData);
	optimisticHoldReportID = holdReportOnyxData.optimisticHoldReportID;
	optimisticHoldActionID = holdReportOnyxData.optimisticHoldActionID;
	optimisticHoldReportExpenseActionIDs = JSON.stringify(holdReportOnyxData.optimisticHoldReportExpenseActionIDs);
	}

for (const oldReportAction of holdReportOnyxData.optimisticHoldReportExpenseActionIDs) {
    if (Navigation.isActiveRoute(ROUTES.REPORT_WITH_ID.getRoute(iouReport.reportID, oldReportAction.oldReportActionID))) {
        Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(iouReport.reportID), true);
        break;
    }
}

We will do the same for approving

What alternative solutions did you explore? (Optional)

In ReportScreen, if the linked action is previously available but is now deleted, clear the reportActionID.

App/src/pages/home/ReportScreen.tsx

Line 391 in d69b203

const isLinkedActionDeleted = useMemo(() => !!linkedAction && !ReportActionsUtils.shouldReportActionBeVisible(linkedAction, linkedAction.reportActionID), [linkedAction]);

const prevIsLinkedActionDeleted = usePrevious(linkedAction ? isLinkedActionDeleted : undefined);

useEffect(() => {
    if (prevIsLinkedActionDeleted !== undefined && !prevIsLinkedActionDeleted && isLinkedActionDeleted) {
        Navigation.setParams({reportActionID: ''});
    }
}, [prevIsDeletedParentAction, isLinkedActionDeleted]);

But the user will notice a brief blink of the not found page because we clear the reportActionID not immediately and to prevent that, we can update the not found condition to only show if both the previous prevIsLinkedActionDeleted and isLinkedActionDeleted are true.

App/src/pages/home/ReportScreen.tsx

Lines 413 to 414 in d69b203

	const shouldShowNotFoundLinkedAction =
	(!isLinkedActionInaccessibleWhisper && isLinkedActionDeleted) ||

const shouldShowNotFoundLinkedAction =
    (!isLinkedActionInaccessibleWhisper && isLinkedActionDeleted && prevIsLinkedActionDeleted) ||

[melvin-bot]

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

[melvin-bot]

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

[brunovjk]

@bernhardoj's proposal LGTM. The RCA seems correct to me, about the solution I'm not so sure, I tested and works fine but, I'll wait for @neil-marcellini opinion about it.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @neil-marcellini, see https://stackoverflow.com/c/expensify/questions/7972 for more details.