[$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);
}

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011952935e51b38f07

[melvin-bot]

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

[melvin-bot]

@rojiphil @abekkala this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[rojiphil]

Thanks for the proposal.
The RCA is correct i.e. RHP pages of Address and Country selection map to the workspace profile page in central pane due to which the central pane switches to profile page.
And it makes sense to fix this using backTo
@bernhardoj proposal LGTM
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @rojiphil 🎉 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: @rojiphil

[abekkala]

note: not yet merged

[rojiphil]

Oh! The automation did not get triggered here.
Note: Reached production on 06 Sep

[rojiphil]

• [@rojiphil] The PR that introduced the bug has been identified. Link to the PR: Offending PR
• [@rojiphil] 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: Added comment
• [@rojiphil] 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: Not Required. Existing checklist is good enough to capture such issues.
• [@rojiphil] Determine if we should create a regression test for this bug. : Yes. We can
• [@rojiphil] 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.

Steps:
1 Press FAB > Book travel
2 Press the Book travel button
3 (Web/Desktop) Verify that the screen behind the RHP overlay doesn't change
4 Press Country
5 (Web/Desktop) Verify that the screen behind the RHP overlay doesn't change
6 (Android/mWeb/iOS) Close the address and book travel page and verify you are still in LHN. After that, go back to the address page
7 Change the country to the United States
8 Press State
9 (Web/Desktop) Verify that the screen behind the RHP overlay doesn't change
10 (Android/mWeb/iOS) Close the address and book travel page and verify you are still in LHN.

[rojiphil]

@abekkala Please help with payment summary here as this reached production 3 weeks ago. I have also added BZ checklist for the issue. Thanks.

[abekkala]

PAYMENT SUMMARY:

• Fix: @bernhardoj [$250] paid via NewDot PR
• PR Review: @rojiphil [$250] Offer (previous expired)

[rojiphil]

• PR Review: @rojiphil [$250] Offer (previous expired

@abekkala Accepted offer. Thanks.

[bernhardoj]

@abekkala I think you paid the wrong Contributor

[bernhardoj]

Requested in ND.

[abekkala]

@rojiphil payment sent and contract ended - thank you! 🎉

[abekkala]

@bernhardoj

@abekkala I think you paid the wrong Contributor

yes, I apolize that I tagged the other cont. - I was viewing PR 46333 that Rojiphil linked rather than yours #48002 . I'ved edited.

[abekkala]

PAYMENT SUMMARY:

• Fix: @bernhardoj [$250] paid via NewDot Fix screen behind overlay changes to WS profile when open WS address page #48002
• PR Review: @rojiphil [$250] Offer (previous expired) (paid ✅ )

[JmillsExpensify]

$250 approved for @bernhardoj