[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 alternative solution and add minor details

[pankajsoftyoi]

Proposal

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

Update onboarding flow to drop a user into the main chat screen after clicking "Get Started" on welcome video

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?

Remove the code that navigates users to the concierge chat when they complete the onboarding flow:

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

Line 46 in 50bea90

Report.navigateToConciergeChat();

What alternative solutions did you explore? (Optional)

To skip this step for new users only, add this line outside of useEffect

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

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

Lines 42 to 47 in 50bea90

	Navigation.isNavigationReady().then(() => {
	// Need to go back to previous route and then redirect to Concierge,
	// otherwise going back on Concierge will go to onboarding and then redirected to Concierge again
	Navigation.goBack();
	Report.navigateToConciergeChat();
	});

Then, add a conditional statement before Report.navigateToConciergeChat();

Navigation.isNavigationReady().then(() => {
    // Need to go back to previous route and then redirect to Concierge,
    // otherwise going back on Concierge will go to onboarding and then redirected to Concierge again
    Navigation.goBack();
    if (onboardingPurposeSelected === 'newDotEmployer') {
        Report.navigateToSystemChat()
        return;
    }
    Report.navigateToConciergeChat();
});

[Pujan92]

@daledah's proposal to return early makes sense.

@mountiny Just wanted to confirm whether we need to navigate concierge here

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

Line 46 in 50bea90

Report.navigateToConciergeChat();

I see it is added here as a part of a solution for the deeplink onboarding issue but not sure if it's required. Without it, the onboarding modal gets opened and closed immediately due to goback, isn't that ok for the user instead of taking them to concierge?

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-10.at.22.36.00.mp4

[mountiny]

@Pujan92 Hmm I think that in that case we usually do not want to see any action, in the video you could see that the page was transitioning in and out.

So it might be safer to go to the LHN home / the last accessed report in that case

[Pujan92]

Thanks @mountiny, @daledah @pankajsoftyoi Could you plz update your proposal to navigate/back the user to the LHN home.

[pankajsoftyoi]

@Pujan92
Proposal updated
#45094 (comment)

[daledah]

I updated my proposal earlier but still need to test a bit more, @Pujan92 I'll let you know soon once all good to review again

[Pujan92]

Report.navigateToSystemChat()

@pankajsoftyoi we need to come back to the home route, not the system chat.

Replace this line by the navigation back to home, such as Navigation.navigate(ROUTES.HOME);

@daledah I think navigate to home won't work as the TopmostBottomTabRoute is Home only, so it won't navigate to the same screen. Instead of navigate we can think of goBack.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[daledah]

@daledah I think navigate to home won't work as the TopmostBottomTabRoute is Home only, so it won't navigate to the same screen. Instead of navigate we can think of goBack.

@Pujan92 Thanks for your feedback. I updated the alternative solution in the proposal, it should work well now.

[Pujan92]

The below suggested change for smaller screens in @daledah's proposal seems to work correctly. I think we can proceed with it. We can make a minor change in Navigation.goBack(ROUTES.HOME, true, true); which can be handled in the PR.

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

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[daledah]

@Pujan92 this PR is ready for review.

[melvin-bot]

This issue has not been updated in over 15 days. @Pujan92, @mountiny, @zanyrenney, @daledah eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[mountiny]

$250 to @daledah and to @Pujan92

[zanyrenney]

Needing to remake the job as it closed.

[zanyrenney]

Hey @daledah Upwork's search filter is not working, can you please apply to the job directly? Thanks!

Link is here - https://www.upwork.com/jobs/~01e554c2a63ca11b1d

[daledah]

@zanyrenney I can't open the job link, it says This job is private. Only freelancers invited by client can view this job.

Instead, could you send the offer directly to my profile here https://www.upwork.com/freelancers/~0138d999529f34d33f

Thx

[zanyrenney]

Hey @daledah the issue is that I can't search. The search bar in upwork isn't working to find you so i would have to click through all 500+ Expensify hires even with the profile link it doesn't help.

I have made the job public now, so please reapply there,

[daledah]

@zanyrenney Could you try searching for "Dai L"? Maybe the search term is not correct so I'm not showing up in the result.

Sorry currently I don't have any Upwork connects so could not apply.

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @Pujan92 owed $250 via NewDot
• ROLE: @daledah paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@zanyrenney)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1810704059603315165/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[zanyrenney]

https://www.upwork.com/jobs/~01d3afa424727566eb @daledah please accept.

[daledah]

@zanyrenney I accepted thanks

[zanyrenney]

please accept contract @daledah

[daledah]

@zanyrenney Done!

[zanyrenney]

No regression test required.

Payment summary:
@daledah paid $250 via upwork
@Pujan92 please request $250 via NewDot.

Thanks!

[garrettmknight]

@Pujan92's request has been paid via NewDot.