[$250] Onboarding - Changing the size of the window dismisses the onboarding modal

[IuliiaHerets]

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: v9.0.31-4
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): dave0123seife@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Resize the height of the window to be a very small mobile viewport
2. Sign in as a new user
   3 When the onboarding modal shows resize to normal window size

Expected Result:

Resizing the of window does not dismisses the onboarding modal

Actual Result:

Resizing the of window dismisses the onboarding modal

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6598412_1725953865275.Screen_Recording_2024-09-10_at_10.22.23_in_the_morning.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834487171313044824
• Upwork Job ID: 1834487171313044824
• Last Price Increase: 2024-09-13
• Automatic offers:
• jjcoffee | Reviewer | 103951138
• c3024 | Contributor | 103951139

Issue Owner

Current Issue Owner: @jjcoffee

[melvin-bot]

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

[IuliiaHerets]

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

[c3024]

Proposal

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

Logging in on a narrow window and then enlarging it to a non-narrow window dismisses the onboarding modal

What is the root cause of that problem?

When we login in the narrow view, the routes in state only have BottomTabNavigator and OnboardingModalNavigator

and when we enlarge it we find the template state from the path

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Line 59 in bbe7d38

const {adaptedState: templateState} = getAdaptedStateFromPath(pathFromCurrentState, linkingConfig.config);

and here REPORT screen is added to the template state

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

Lines 240 to 242 in 56033cb

	if (!isNarrowLayout) {
	routes.push({
	name: SCREENS.REPORT,

We extract the central pane from the template state and insert it into state if there is no top most central pane route in it

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Lines 74 to 88 in bbe7d38

	const templateCentralPaneRoute = templateState.routes.find((route) => isCentralPaneName(route.name));
	const topmostCentralPaneRouteExtracted = getTopmostCentralPaneRoute(state);
	const templateCentralPaneRouteExtracted = getTopmostCentralPaneRoute(templateState as State<RootStackParamList>);
	// If there is no templateCentralPaneRoute, we don't have anything to add.
	if (!templateCentralPaneRoute) {
	return;
	}
	// If there is no topmostCentralPaneRoute in the state and template state has one, we need to add it.
	if (!topmostCentralPaneRoute) {
	insertRootRoute(state, templateCentralPaneRoute);
	return;
	}

and we insert it before modalRoutes

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Line 26 in bbe7d38

state.routes = [...nonModalRoutes, routeToInsert, ...modalRoutes]; // eslint-disable-line

but here

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Lines 19 to 20 in bbe7d38

	const nonModalRoutes = state.routes.filter((route) => route.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR && route.name !== NAVIGATORS.LEFT_MODAL_NAVIGATOR);
	const modalRoutes = state.routes.filter((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR);

only Left and Right Modal Navigators are included in the modal routes and Onboarding Navigator is not so it is moved to an index before the REPORT route.

So, the order of navigators will become
BottomTabNavigator > Onboarding Navigator > Report and the Onboarding Modal gets dismissed.

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

Exclude and include the NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR in these two lines respectively.

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Lines 19 to 20 in bbe7d38

	const nonModalRoutes = state.routes.filter((route) => route.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR && route.name !== NAVIGATORS.LEFT_MODAL_NAVIGATOR);
	const modalRoutes = state.routes.filter((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR);

What alternative solutions did you explore? (Optional)

[VictoriaExpensify]

Recreated the issue and I agree that this seem like a problem we should fix

[VictoriaExpensify]

It doesn't look like this is being resolved elsewhere

[melvin-bot]

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

[melvin-bot]

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

[jjcoffee]

@c3024's proposal LGTM!

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @jjcoffee 🎉 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

[melvin-bot]

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

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[c3024]

Deployed to production on 18-Sep. Payment due on 25-Sep.

[jjcoffee]

• The PR that introduced the bug has been identified. Link to the PR: [Onboarding - Stage 1] Onboarding Flow #37733
• 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: [Onboarding - Stage 1] Onboarding Flow #37733 (comment)
• 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 - fairly specific case that was missed
• Determine if we should create a regression test for this bug. Yes
• 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

1. Reduce the browser window to a narrow size.
2. Login with a new account.
3. Wait till the onboarding modal opens up.
4. Enlarge the screen till the central pane (report screen) shows up.
5. Verify that the onboarding modal is not dismissed.

Do we agree 👍 or 👎

[jjcoffee]

@VictoriaExpensify This one's due payment now as it was deployed last week.

[VictoriaExpensify]

Payment summary:
Contributor: @c3024 paid $250 via Upwork
Contributor+: @jjcoffee paid $250 via Upwork
Upwork job