[HOLD for Payment 2024-10-07][$250][Search v2.1] Web - App navigates from search page to inbox when refreshing

[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.16
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): Yokabdk+new37@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Click on account setting
3. Click on FAB
4. Click Submit Expense
5. Input any amount & account and submit the expense
6. Go to search
7. Select the expense on the checkbox and click on the drop down on the top right corner and click on hold
8. Open the expense by clicking on it
9. Refresh the page
10. The background of the app navigates to the inbox

Expected Result:

App stays on inbox page when refreshing

Actual Result:

App navigates from search page to inbox when refreshing while its showing Hold banner page

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

Bug6554941_1722111871260.2024-07-27_23_01_54.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015e208924e7bade60
• Upwork Job ID: 1820124885802480794
• Last Price Increase: 2024-08-18
• Automatic offers:
• rayane-djouah | Reviewer | 103652362

[melvin-bot]

Triggered auto assignment to @lschurr (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]

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

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

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

Inbox page is shown after refresh while hold educational page is showing in search page.

What is the root cause of that problem?

The hold educational page can be accessed from the report screen (central pane) and report RHP, so we don't have the central pane mapping for the hold educational page.

If a RHP page doesn't have the matching route from the mapping, then a report (of inbox) is shown by default when we refresh the web.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 188 to 196 in 4bce838

	let matchingRootRoute = getMatchingRootRouteForRHPRoute(focusedRHPRoute);
	const isRHPScreenOpenedFromLHN = focusedRHPRoute?.name && RHP_SCREENS_OPENED_FROM_LHN.includes(focusedRHPRoute?.name as RHPScreenOpenedFromLHN);
	// This may happen if this RHP doens't have a route that should be under the overlay defined.
	if (!matchingRootRoute || isRHPScreenOpenedFromLHN) {
	metainfo.isCentralPaneAndBottomTabMandatory = false;
	metainfo.isFullScreenNavigatorMandatory = false;
	// If matchingRootRoute is undefined and it's a narrow layout, don't add a report screen under the RHP.
	matchingRootRoute = matchingRootRoute ?? (!isNarrowLayout ? {name: SCREENS.REPORT} : undefined);
	}

But we actually have another way to show the correct central pane screen, that is by using backTo params which we don't use for hold educational page.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 106 to 131 in 4bce838

	if (route.params && 'backTo' in route.params && typeof route.params.backTo === 'string') {
	const stateForBackTo = getStateFromPath(route.params.backTo, config);
	if (stateForBackTo) {
	// eslint-disable-next-line @typescript-eslint/no-shadow
	const rhpNavigator = stateForBackTo.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR);
	const centralPaneOrFullScreenNavigator = stateForBackTo.routes.find(
	// eslint-disable-next-line @typescript-eslint/no-shadow
	(route) => isCentralPaneName(route.name) || route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR,
	);
	// If there is rhpNavigator in the state generated for backTo url, we want to get root route matching to this rhp screen.
	if (rhpNavigator && rhpNavigator.state) {
	const isRHPinState = stateForBackTo.routes[0].name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;
	if (isRHPinState) {
	return getMatchingRootRouteForRHPRoute(findFocusedRoute(stateForBackTo) as NavigationPartialRoute);
	}
	}
	// If we know that backTo targets the root route (central pane or full screen) we want to use it.
	if (centralPaneOrFullScreenNavigator && centralPaneOrFullScreenNavigator.state) {
	return centralPaneOrFullScreenNavigator as NavigationPartialRoute<CentralPaneName | typeof NAVIGATORS.FULL_SCREEN_NAVIGATOR>;
	}
	}
	}

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

First, we need to add the backTo param to the hold educational page route.

// in ROUTES.ts
PROCESS_MONEY_REQUEST_HOLD: {
    route: 'hold-expense-educational',
    getRoute: (backTo?: string) => getUrlWithBackToParam('hold-expense-educational', backTo),
},

Then, we need to update all the usages of ROUTES.PROCESS_MONEY_REQUEST_HOLD and make sure to pass the current active route, for example

App/src/components/MoneyRequestHeader.tsx

Lines 111 to 117 in 4bce838

	if (isSmallScreenWidth) {
	if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD) {
	Navigation.goBack();
	}
	} else {
	Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD);
	}

if (isSmallScreenWidth) {
    if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) {
        Navigation.goBack();
    }
} else {
    Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getActiveRoute()));
}

This way, the backTo logic of getMatchingRootRouteForRHPRoute will be used, but there is currently another issue. When we open the hold educational page from the report RHP, the backTo will be the report RHP. If the backTo is an RHP, it will check if stateForBackTo.routes[0].name equals to NAVIGATORS.RIGHT_MODAL_NAVIGATOR.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 118 to 124 in 4bce838

	if (rhpNavigator && rhpNavigator.state) {
	const isRHPinState = stateForBackTo.routes[0].name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;
	if (isRHPinState) {
	return getMatchingRootRouteForRHPRoute(findFocusedRoute(stateForBackTo) as NavigationPartialRoute);
	}
	}

However, the stateForBackTo of report RHP is

{
...,
routes: [{name: 'BottomTabNavigator'}, {name: 'RightModalNavigator', ...}],

so, isRHPinState is always false. I think we don't need to check for isRHPinState anymore because we already found the RHP navigator which means RHP is in the state, so I propose to remove isRHPinState.

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 109 to 110 in 4bce838

	// eslint-disable-next-line @typescript-eslint/no-shadow
	const rhpNavigator = stateForBackTo.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR);

We can apply this backTo solution to report details and other pages too.

[melvin-bot]

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

[melvin-bot]

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

[rayane-d]

Reviewing today 👀

[rayane-d]

@luacmartins - This bug is reproducible if we open any transaction edit pages or details pages and then refresh. Do you think we should fix it for all pages?

Screen.Recording.2024-08-07.at.2.37.44.PM.mov