[HOLD for payment 2024-08-21] [$250] [FT] - Update onboarding flow to drop user into main chat screen after clicking "Get Started" on welcome video [Mobile]

[LLPeckham]

Hi there, we need to update the onboarding flow on Mobile for when a user selects "Get paid back by my employer"

What's happening now/what's broken: User signs up for New Expensify on mobile app > is shown intent selection modal > clicks selection (get paid back by my employer) > enters name > is shown welcome video > is dropped into Concierge chat DM

In summary, we do not want the user to drop into the Concierge DM after clicking "Get started" on the welcome video modal, and instead be shown the main home screen where they can see the GBR (screenshot below). Note we are A/B testing so the GBR will either be shown from a Concierge DM or from Expensify DM.

Screenshot of current flow for reference:

Expected: User signs up for new Expensify on mobile app > is shown intent selection modal > clicks selection (get paid back by my employer) > enters name > is shown welcome video > is dropped into the main chat home screen with GBR on onboarding task list

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0174265012f8ae6366
• Upwork Job ID: 1810704059603315165
• Last Price Increase: 2024-07-16

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[daledah]

Proposal

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

Update onboarding flow to drop user into main chat screen after clicking "Get Started" on welcome video [Mobile]

What is the root cause of that problem?

New feature request

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

Connect to ONYXKEYS.ONBOARDING_PURPOSE_SELECTED here

App/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx

Line 37 in 50bea90

const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED);

And before this line (or after)

App/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx

Line 45 in 50bea90

Navigation.goBack();

, early return if onboardingPurposeSelected is newDotEmployer (we'll export onboardingChoices and use onboardingChoices.EMPLOYER)

if (onboardingPurposeSelected === 'newDotEmployer') {
    return;
}

So it will not navigate to Concierge page if it's Get paid back by my employer purpose.

The onboardingPurposeSelected could optionally be used as a ref so we always have its latest value inside useEffect

What alternative solutions did you explore? (Optional)

Use useOnyx on the ONYXKEYS.ONBOARDING_PURPOSE_SELECTED key in OnboardingWelcomeVideo

In

App/src/components/OnboardingWelcomeVideo.tsx

Line 10 in e6804ca

<FeatureTrainingModal

, get the onboardingPurposeSelected from the route, if the onboarding purpose indicates the Get paid back by my employer (this), pass onConfirm to the FeatureTrainingModal and in it, navigate to the home/LHN route

Also some enhancements:

• Limit the above logic to only if the user is on mobile (isSmallScreenWidth), in desktop/web it's not necessary

Alternative for the recommended action here

Replace both lines by the navigation back to home, such as

Navigation.setShouldPopAllStateOnUP(true);
Navigation.goBack(ROUTES.HOME, true, true);

This will pop all the navigation state as well, we do the same in some other scenarios for example

App/src/libs/actions/Report.ts

Line 2215 in 8d9b20b

Navigation.setShouldPopAllStateOnUP(true);

,

App/src/pages/home/ReportScreen.tsx

Line 546 in 8d9b20b

Navigation.setShouldPopAllStateOnUP(true);

We can explore only goBack without setShouldPopAllStateOnUP(true) but I like the setShouldPopAllStateOnUP more because it makes sure we have a clean navigation structure after the going back.

An enhancement we can make is we only do that going back logic if the user is not already at the Home screen, as there's no need to go back to Home screen if the user is already there. Also can limit that change to only small screen width, by isSmallScreenWidth

[daledah]

I updated proposal to add an alternative solution