[$250] mWeb on Chrome and mobile app experience differs on signup

[m-natarajan]

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.15-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @davidcardoza
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1722471696514569

Action Performed:

1. Sign up for account
2. UsertTaps track expenses > taps get started after watching the video
   A. On mWeb the user is dropped into LHN with a GBR to Concierge
   B. On mobile iOS, the user is dropped into the Concierge chat

Expected Result:

The user should always be dropped into LHN with a GBR to Concierge

Actual Result:

Sign ups see two different experiences

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

RPReplay_Final1722469307.MP4

RPReplay_Final1722527646.MP4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dc1e03761805d373
• Upwork Job ID: 1820461993908929902
• Last Price Increase: 2024-08-05
• Automatic offers:
• rojiphil | Reviewer | 103494199

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.

[bernhardoj]

Proposal

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

The concierge page opens after completing onboarding in native.

What is the root cause of that problem?

In the onboarding page, we have an effect that prevent the user to access the onboarding page again by redirecting them to the concierge page. (it was added in #42087)

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

Lines 36 to 46 in 4f16e26

	useEffect(() => {
	if (!hasCompletedGuidedSetupFlow) {
	return;
	}
	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();
	});
	}, [hasCompletedGuidedSetupFlow]);

When we complete the onboarding, we call the API and dismiss the modal.

App/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

Lines 64 to 78 in 4f16e26

	Report.completeOnboarding(
	onboardingPurposeSelected,
	CONST.ONBOARDING_MESSAGES[onboardingPurposeSelected],
	{
	firstName,
	lastName,
	},
	onboardingAdminsChatReportID ?? undefined,
	onboardingPolicyID,
	);
	Welcome.setOnboardingAdminsChatReportID();
	Welcome.setOnboardingPolicyID();
	Navigation.dismissModal();

Looks like on native, the request is completed first before the navigator is completely closed, so the effect is triggered because the effect depends on hasCompletedGuidedSetupFlow.

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

Remove hasCompletedGuidedSetupFlow from the dependency so it's only triggered on mount which will still prevent the user to access the page if it's already completed.

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

Lines 36 to 46 in 4f16e26

	useEffect(() => {
	if (!hasCompletedGuidedSetupFlow) {
	return;
	}
	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();
	});
	}, [hasCompletedGuidedSetupFlow]);

[github-actions]

true

[melvin-bot]

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

[melvin-bot]

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

[abekkala]

@rojiphil there is already a proposal above ready for review! 🎉

[melvin-bot]

@rojiphil, @abekkala Whoops! This issue is 2 days overdue. Let's get this updated quick!

[abekkala]

@rojiphil can you please review the proposal above?

[rojiphil]

Sorry for the delay here. I will review and provide an update by tomorrow my day.

[rojiphil]

Yeah. An unnecessary trigger of the effect due to hasCompletedGuidedSetupFlow dependency is causing this issue. Removing the hasCompletedGuidedSetupFlow dependency makes sense.
@bernhardoj proposal LGTM.
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[dangrous]

cool, makes sense! we should just make sure that this still works appropriately on desktop, as well as fixing mobile. But sounds good to me. Will assign!

[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]

@rojiphil @dangrous I can't reproduce this anymore after this PR. Looks like the issue that PR is trying to solve is the same as this one but with a different solution.

[dangrous]

oh interesting! @abekkala do you have a moment to retest this? we might be able to just close it out

[rojiphil]

yeah. Just tested the latest and this is fixed now. We can close this.

[dangrous]

Nice, closing!