Login - Onboarding modal not displayed for new account creation

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.36
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create new account with either gmail or expensifail domain

Expected Result:

Onboarding modal should be displayed for new account creation

Actual Result:

Onboarding modal not displayed for new account creation

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

Bug6365501_1706921789553.Staging_Gmail_account.mp4

View all open jobs on GitHub

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @iwiznia (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

Production:

[bernhardoj]

Proposal

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

The engagement modal for new user doesn't show.

What is the root cause of that problem?

If the active route is not a bottom tab navigator, the modal won't show.

App/src/components/PurposeForUsingExpensifyModal.tsx

Lines 99 to 104 in 3ab4e6e

	const navigationState = navigation.getState();
	const routes = navigationState.routes;
	const currentRoute = routes[navigationState.index];
	if (currentRoute && NAVIGATORS.BOTTOM_TAB_NAVIGATOR !== currentRoute.name) {
	return;
	}

This works fine for small screen, but for large screen, we have both the bottom tab navigator and central pane navigator (the report screen) on the stack and the central pane navigator is the focused (active) screen.

If we look at the engagement modal PR, we cover both small and large screen cases by checking whether the active route is not a central pane navigator or a HOME.

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

Add another case to check whether the active route is not a central pane navigator.

if (currentRoute && NAVIGATORS.BOTTOM_TAB_NAVIGATOR !== currentRoute.name && currentRoute.name !== NAVIGATORS.CENTRAL_PANE_NAVIGATOR) {
    return;
}

We don't check for HOME because HOME is inside the bottom tab navigator.

What alternative solutions did you explore? (Optional)

Even though the main solution is the approach we have been using before, one downside is that the engagement modal will still show on a report screen on a small-screen device which maybe we actually don't expect. We can obviously add a small screen check, but another way is to move back the engagement modal component (PurposeForUsingExpensifyModal) to SidebarScreen and then we only need to check whether the active route is HOME or not.

if (currentRoute && currentRoute.name !== SCREENS.HOME) {
    return;
}

Why do we check for HOME now? Because the sidebar screen is inside the bottom tab navigator and navigation.getState will get the nearest navigator state, in this case, the bottom tab navigator.

[shubham1206agra]

Dupe of #35663
cc @iwiznia @hayata-suenaga

[mountiny]

@bernhardoj could you move your proposal over to #35663 that issue came first