Merge pull request #51382 from bernhardoj/fix/50177-user-is-able-to-g…

…o-back-from-onboarding Fix able to dismiss onboarding flow with going back
Expensify · Oct 29, 2024 · bc7b855 · bc7b855
2 parents 422a0eb + 6ff99e2
commit bc7b855
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 89 deletions.
diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts
@@ -20,6 +20,7 @@ import config, {normalizedConfigs} from './config';
 import FULL_SCREEN_TO_RHP_MAPPING from './FULL_SCREEN_TO_RHP_MAPPING';
 import getMatchingBottomTabRouteForState from './getMatchingBottomTabRouteForState';
 import getMatchingCentralPaneRouteForState from './getMatchingCentralPaneRouteForState';
+import getOnboardingAdaptedState from './getOnboardingAdaptedState';
 import replacePathInNestedState from './replacePathInNestedState';
 
 const RHP_SCREENS_OPENED_FROM_LHN = [
@@ -253,7 +254,15 @@ function getAdaptedState(state: PartialState<NavigationState<RootStackParamList>
         }
 
         if (onboardingModalNavigator) {
-            routes.push(onboardingModalNavigator);
+            if (onboardingModalNavigator.state) {
+                // Build the routes list based on the current onboarding step, so going back will go to the previous step instead of closing the onboarding flow
+                routes.push({
+                    ...onboardingModalNavigator,
+                    state: getOnboardingAdaptedState(onboardingModalNavigator.state),
+                });
+            } else {
+                routes.push(onboardingModalNavigator);
+            }
         }
 
         if (welcomeVideoModalNavigator) {

diff --git a/src/libs/Navigation/linkingConfig/getOnboardingAdaptedState.ts b/src/libs/Navigation/linkingConfig/getOnboardingAdaptedState.ts
@@ -0,0 +1,21 @@
+import type {NavigationState, PartialState} from '@react-navigation/native';
+import SCREENS from '@src/SCREENS';
+
+export default function getOnboardingAdaptedState(state: PartialState<NavigationState>): PartialState<NavigationState> {
+    const onboardingRoute = state.routes.at(0);
+    if (!onboardingRoute || onboardingRoute.name === SCREENS.ONBOARDING.PURPOSE) {
+        return state;
+    }
+
+    const routes = [];
+    routes.push({name: SCREENS.ONBOARDING.PURPOSE});
+    if (onboardingRoute.name === SCREENS.ONBOARDING.ACCOUNTING) {
+        routes.push({name: SCREENS.ONBOARDING.EMPLOYEES});
+    }
+    routes.push(onboardingRoute);
+
+    return {
+        routes,
+        index: routes.length - 1,
+    };
+}
diff --git a/src/libs/actions/Welcome/OnboardingFlow.ts b/src/libs/actions/Welcome/OnboardingFlow.ts
@@ -3,23 +3,14 @@ import type {NavigationState, PartialState} from '@react-navigation/native';
 import Onyx from 'react-native-onyx';
 import linkingConfig from '@libs/Navigation/linkingConfig';
 import getAdaptedStateFromPath from '@libs/Navigation/linkingConfig/getAdaptedStateFromPath';
-import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
-import type {NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
+import {navigationRef} from '@libs/Navigation/Navigation';
+import type {RootStackParamList} from '@libs/Navigation/types';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 import type Onboarding from '@src/types/onyx/Onboarding';
 
-let selectedPurpose: string | undefined = '';
-Onyx.connect({
-    key: ONYXKEYS.ONBOARDING_PURPOSE_SELECTED,
-    callback: (value) => {
-        selectedPurpose = value;
-    },
-});
-
 let onboardingInitialPath = '';
 const onboardingLastVisitedPathConnection = Onyx.connect({
     key: ONYXKEYS.ONBOARDING_LAST_VISITED_PATH,
@@ -43,63 +34,6 @@ Onyx.connect({
     },
 });
 
-/**
- * Build the correct stack order for `onboardingModalNavigator`,
- * based on onboarding data (currently from the selected purpose).
- * The correct stack order will ensure that navigation and
- * the `goBack` navigatoin work properly.
- */
-function adaptOnboardingRouteState() {
-    const currentRoute: NavigationPartialRoute | undefined = navigationRef.getCurrentRoute();
-    if (!currentRoute || currentRoute?.name === SCREENS.ONBOARDING.PURPOSE) {
-        return;
-    }
-
-    const rootState = navigationRef.getRootState();
-    const adaptedState = rootState;
-    const lastRouteIndex = (adaptedState?.routes?.length ?? 0) - 1;
-    const onBoardingModalNavigatorState = adaptedState?.routes.at(lastRouteIndex)?.state;
-    if (!onBoardingModalNavigatorState || onBoardingModalNavigatorState?.routes?.length > 1 || lastRouteIndex === -1) {
-        return;
-    }
-
-    let adaptedOnboardingModalNavigatorState = {} as Readonly<PartialState<NavigationState>>;
-    if (currentRoute?.name === SCREENS.ONBOARDING.ACCOUNTING && selectedPurpose === CONST.ONBOARDING_CHOICES.MANAGE_TEAM) {
-        adaptedOnboardingModalNavigatorState = {
-            index: 2,
-            routes: [
-                {
-                    name: SCREENS.ONBOARDING.PURPOSE,
-                    params: currentRoute?.params,
-                },
-                {
-                    name: SCREENS.ONBOARDING.EMPLOYEES,
-                    params: currentRoute?.params,
-                },
-                {...currentRoute},
-            ],
-        } as Readonly<PartialState<NavigationState>>;
-    } else {
-        adaptedOnboardingModalNavigatorState = {
-            index: 1,
-            routes: [
-                {
-                    name: SCREENS.ONBOARDING.PURPOSE,
-                    params: currentRoute?.params,
-                },
-                {...currentRoute},
-            ],
-        } as Readonly<PartialState<NavigationState>>;
-    }
-
-    const route = adaptedState.routes.at(lastRouteIndex);
-
-    if (route) {
-        route.state = adaptedOnboardingModalNavigatorState;
-    }
-    navigationRef.resetRoot(adaptedState);
-}
-
 /**
  * Start a new onboarding flow or continue from the last visited onboarding page.
  */
@@ -140,17 +74,4 @@ function clearInitialPath() {
     onboardingInitialPath = '';
 }
 
-/**
- * Onboarding flow: Go back to the previous page.
- * Since there is no `initialRoute` for `onBoardingModalNavigator`,
- * firstly, adjust the current onboarding modal navigator to establish the correct stack order.
- * Then, navigate to the previous onboarding page using the usual `goBack` function.
- */
-function goBack() {
-    adaptOnboardingRouteState();
-    Navigation.isNavigationReady().then(() => {
-        Navigation.goBack();
-    });
-}
-
-export {getOnboardingInitialPath, startOnboardingFlow, clearInitialPath, goBack};
+export {getOnboardingInitialPath, startOnboardingFlow, clearInitialPath};
diff --git a/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx b/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx
@@ -18,10 +18,10 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import navigateAfterOnboarding from '@libs/navigateAfterOnboarding';
+import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
 import * as Welcome from '@userActions/Welcome';
-import * as OnboardingFlow from '@userActions/Welcome/OnboardingFlow';
 import CONST from '@src/CONST';
 import type {OnboardingAccountingType} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -167,7 +167,7 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding
             <HeaderWithBackButton
                 shouldShowBackButton
                 progressBarPercentage={75}
-                onBackButtonPress={OnboardingFlow.goBack}
+                onBackButtonPress={Navigation.goBack}
             />
             <Text style={[styles.textHeadlineH1, styles.mb5, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
                 {translate('onboarding.accounting.title')}

diff --git a/src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx b/src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx
@@ -14,7 +14,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Policy from '@userActions/Policy/Policy';
 import * as Welcome from '@userActions/Welcome';
-import * as OnboardingFlow from '@userActions/Welcome/OnboardingFlow';
 import CONST from '@src/CONST';
 import type {OnboardingCompanySizeType} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -86,7 +85,7 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE
             <HeaderWithBackButton
                 shouldShowBackButton
                 progressBarPercentage={onboardingPurposeSelected === CONST.ONBOARDING_CHOICES.MANAGE_TEAM ? 50 : 75}
-                onBackButtonPress={OnboardingFlow.goBack}
+                onBackButtonPress={Navigation.goBack}
             />
             <Text style={[styles.textHeadlineH1, styles.mb5, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
                 {translate('onboarding.employees.title')}

diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx
@@ -19,11 +19,11 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import navigateAfterOnboarding from '@libs/navigateAfterOnboarding';
+import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import * as Report from '@userActions/Report';
 import * as Welcome from '@userActions/Welcome';
-import * as OnboardingFlow from '@userActions/Welcome/OnboardingFlow';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/DisplayNameForm';
@@ -121,7 +121,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
             <HeaderWithBackButton
                 shouldShowBackButton
                 progressBarPercentage={75}
-                onBackButtonPress={OnboardingFlow.goBack}
+                onBackButtonPress={Navigation.goBack}
             />
             <FormProvider
                 style={[styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}