[$250] Book travel - Report screen changes to profile view when clicking Country field

[izarutskaya]

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.18.1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Book travel.
3. Click Book travel.
4. Click Country.

Expected Result:

The report screen in the background will not change to profile page.

Actual Result:

The report screen in the background changes to profile page while LHN remains the same after opening Country RHP.

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

Bug6565224_1723088792855.20240808_113943.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011952935e51b38f07
• Upwork Job ID: 1826610853854953560
• Last Price Increase: 2024-08-22
• Automatic offers:
• rojiphil | Reviewer | 103684843

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

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

[izarutskaya]

We think this issue might be related to the #vip-travel

[abekkala]

@izarutskaya is it only when clicking Country that the pages changes or is it any of them?

[melvin-bot]

@abekkala Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[abekkala]

@izarutskaya bumping my question above from last week

[bernhardoj]

Proposal

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

The background screen changes to workspace profile view when open address page from travel page.

What is the root cause of that problem?

The behavior is a bit different now than the video. When we press Book travel, it will open the profile address page and based on the mapping, the workspace address RHP maps to the workspace profile full screen page.

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

Line 5 in 3559aed

[SCREENS.WORKSPACE.PROFILE]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.ADDRESS, SCREENS.WORKSPACE.CURRENCY, SCREENS.WORKSPACE.DESCRIPTION, SCREENS.WORKSPACE.SHARE],

So, the workspace profile page is shown. It's the same case with the country selection page where the backTo param is the workspace address page which we recursively find the matching root for the backTo params page.

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

Lines 112 to 135 in 3559aed

	function getMatchingRootRouteForRHPRoute(route: NavigationPartialRoute): NavigationPartialRoute<CentralPaneName | typeof NAVIGATORS.FULL_SCREEN_NAVIGATOR> | undefined {
	// Check for backTo param. One screen with different backTo value may need diferent screens visible under the overlay.
	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) {
	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?

We need to add a backTo params to the workspace address page that points to the travel page so getMatchingRootRouteForRHPRoute will return the matching root for the travel page, which is nothing.

App/src/ROUTES.ts

Lines 546 to 549 in 3559aed

	WORKSPACE_PROFILE_ADDRESS: {
	route: 'settings/workspaces/:policyID/profile/address',
	getRoute: (policyID: string) => `settings/workspaces/${policyID}/profile/address` as const,
	},

getRoute: (policyID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/profile/address` as const, backTo),

Then, pass the active route as the backTo.

App/src/pages/Travel/ManageTrips.tsx

Line 64 in 3559aed

Navigation.navigate(ROUTES.WORKSPACE_PROFILE_ADDRESS.getRoute(activePolicyID ?? '-1'));

Navigation.navigate(ROUTES.WORKSPACE_PROFILE_ADDRESS.getRoute(activePolicyID ?? '-1', Navigation.getActiveRoute()));

Next, we need to do the same thing for the address sub-page, that is country and state selection page. Both pages already have a backTo, but for the country selection page, we pass the active route without params, so the nested backTo is removed.

App/src/components/CountrySelector.tsx

Lines 78 to 80 in 3559aed

	const activeRoute = Navigation.getActiveRouteWithoutParams();
	didOpenContrySelector.current = true;
	Navigation.navigate(ROUTES.SETTINGS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute));

So, the matching root will still be the workspace profile page. We need to replace it with Navigation.getActiveRoute().

Last, we need to update the route here so it appends the param correctly because the backTo contains a nested backTo (?backTo={...?backTo=...}).

App/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx

Lines 50 to 56 in 3559aed

	} else if (!!backTo && navigation.getState().routes.length === 1) {
	// If "backTo" is not empty and there is only one route, go back to the specific route defined in "backTo" with a country parameter
	Navigation.goBack(`${route.params.backTo}?country=${option.value}` as Route);
	} else {
	// Otherwise, navigate to the specific route defined in "backTo" with a country parameter
	Navigation.navigate(`${route.params.backTo}?country=${option.value}` as Route);
	}

} else if (!!backTo && navigation.getState().routes.length === 1) {
    // If "backTo" is not empty and there is only one route, go back to the specific route defined in "backTo" with a country parameter
    Navigation.goBack(appendParam(backTo, 'country', option.value) as Route);
} else {
    // Otherwise, navigate to the specific route defined in "backTo" with a country parameter
    Navigation.navigate(appendParam(backTo, 'country', option.value) as Route);
}