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

[brunovjk]

@neil-marcellini, what do you think of the proposed alternative solution? Thank you.

[melvin-bot]

@twisterdotcom, @neil-marcellini, @brunovjk Whoops! This issue is 2 days overdue. Let's get this updated quick!

[twisterdotcom]

Bump on this @neil-marcellini

[neil-marcellini]

@bernhardoj's proposal LGTM

I agree, we might need some tweaks in the PR, but we'll see.

[melvin-bot]

📣 @brunovjk 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[bernhardoj]

PR is ready

cc: @brunovjk

[neil-marcellini]

Head's up, I'll be working 50% for the rest of this week and next 🌲

[neil-marcellini]

It's time to do payment and close this out

[brunovjk]

Note

The production deploy automation failed: This should be on [HOLD for Payment 2024-08-22] according to #47356 prod deploy checklist, confirmed in #46942 (comment).

cc: @twisterdotcom

[brunovjk]

• [@brunovjk] The PR that introduced the bug has been identified. Link to the PR: Create optimistic report when approving/paying for report with hold expenses #42573
• [@brunovjk] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Create optimistic report when approving/paying for report with hold expenses #42573 (comment)
• [@brunovjk] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• [@brunovjk] Determine if we should create a regression test for this bug. Yes
• [@brunovjk] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again:

Regression Test Proposal:

• Go to settings and create a workspace
• Go to FAB and click on submit expense
• Select the workspace you created
• Enter an amount (e.g., 100) and click Next
• Input a merchant and submit the expense
• Create another expense with a different amount (e.g., 50)
• Navigate to the expense details page of the first expense (e.g., 100)
• Click on the header and select "Hold"
• Click on the "From" link in the subtitle to return to the expense list page
• Click the dropdown of the green pay button at the top right corner
• Select "Pay elsewhere"
• Click on "Pay only 50" in the confirmation pop-up
• Verify that the app navigates to the expense lists page, which is the behavior in online mode

Do we agree 👍 or 👎

[brunovjk]

Hey @twisterdotcom, just a heads up that the payment for this issue is still pending. When you have a moment, could you help process it so we can close this out? Appreciate it!

[twisterdotcom]

Ahh! Yes. Sorry, I'm OOO atm but will log in this evening to process it and close. Thanks for the bump.

[twisterdotcom]

Payment Summary:

• @bernhardoj paid $250 via Manual Requests (Contributor)
• @brunovjk paid $250 via Upwork here (C+)

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj