Update onboarding flow

src/ONYXKEYS.ts

@@ -282,6 +282,9 @@ const ONYXKEYS = {
     /** Onboarding Purpose selected by the user during Onboarding flow */
     ONBOARDING_PURPOSE_SELECTED: 'onboardingPurposeSelected',
 
+    /** Onboarding Purpose selected by the user during Onboarding flow */
+    ONBOARDING_ADMINS_CHAT_REPORT_ID: 'onboardingAdminsChatReportID',
+
     // Max width supported for HTML <canvas> element
     MAX_CANVAS_WIDTH: 'maxCanvasWidth',
 
@@ -655,6 +658,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.MAX_CANVAS_HEIGHT]: number;
     [ONYXKEYS.MAX_CANVAS_WIDTH]: number;
     [ONYXKEYS.ONBOARDING_PURPOSE_SELECTED]: string;
+    [ONYXKEYS.ONBOARDING_ADMINS_CHAT_REPORT_ID]: string;
     [ONYXKEYS.IS_SEARCHING_FOR_REPORTS]: boolean;
     [ONYXKEYS.LAST_VISITED_PATH]: string | undefined;
     [ONYXKEYS.RECENTLY_USED_REPORT_FIELDS]: OnyxTypes.RecentlyUsedReportFields;

src/libs/actions/Welcome.ts

@@ -69,6 +69,10 @@ function setOnboardingPurposeSelected(value: OnboardingPurposeType) {
     Onyx.set(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED, value ?? null);
 }
 
+function setOnboardingAdminsChatReportID(adminsChatReportID?: string) {
+    Onyx.set(ONYXKEYS.ONBOARDING_ADMINS_CHAT_REPORT_ID, adminsChatReportID ?? null);
+}
+
 Onyx.connect({
     key: ONYXKEYS.NVP_ONBOARDING,
     initWithStoredValues: false,
@@ -130,4 +134,4 @@ function resetAllChecks() {
     isLoadingReportData = true;
 }
 
-export {onServerDataReady, isOnboardingFlowCompleted, setOnboardingPurposeSelected, resetAllChecks};
+export {onServerDataReady, isOnboardingFlowCompleted, setOnboardingPurposeSelected, resetAllChecks, setOnboardingAdminsChatReportID};

src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

@@ -22,15 +22,14 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import variables from '@styles/variables';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import * as Report from '@userActions/Report';
+import * as Welcome from '@userActions/Welcome';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import INPUT_IDS from '@src/types/form/DisplayNameForm';
 import type {BaseOnboardingPersonalDetailsOnyxProps, BaseOnboardingPersonalDetailsProps} from './types';
 
-const OPEN_WORK_PAGE_PURPOSES = [CONST.ONBOARDING_CHOICES.MANAGE_TEAM];
-
-function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNativeStyles, onboardingPurposeSelected}: BaseOnboardingPersonalDetailsProps) {
+function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNativeStyles, onboardingPurposeSelected, onboardingAdminsChatReportID}: BaseOnboardingPersonalDetailsProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -51,17 +50,18 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
                 return;
             }
 
-            if (OPEN_WORK_PAGE_PURPOSES.includes(onboardingPurposeSelected)) {
-                Navigation.navigate(ROUTES.ONBOARDING_WORK);
+            Report.completeOnboarding(
+                onboardingPurposeSelected,
+                CONST.ONBOARDING_MESSAGES[onboardingPurposeSelected],
+                {
+                    login: currentUserPersonalDetails.login ?? '',
+                    firstName,
+                    lastName,
+                },
+                onboardingAdminsChatReportID ?? undefined,
+            );
 
-                return;
-            }
-
-            Report.completeOnboarding(onboardingPurposeSelected, CONST.ONBOARDING_MESSAGES[onboardingPurposeSelected], {
-                login: currentUserPersonalDetails.login ?? '',
-                firstName,
-                lastName,
-            });
+            Welcome.setOnboardingAdminsChatReportID();
 
             Navigation.dismissModal();
 
@@ -79,7 +79,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
                 Navigation.navigate(ROUTES.WELCOME_VIDEO_ROOT);
             }, variables.welcomeVideoDelay);
         },
-        [currentUserPersonalDetails.login, isSmallScreenWidth, onboardingPurposeSelected],
+        [currentUserPersonalDetails.login, isSmallScreenWidth, onboardingPurposeSelected, onboardingAdminsChatReportID],
     );
 
     const validate = (values: FormOnyxValues<'onboardingPersonalDetailsForm'>) => {
@@ -121,7 +121,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
         <View style={[styles.h100, styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}>
             <HeaderWithBackButton
                 shouldShowBackButton
-                progressBarPercentage={OPEN_WORK_PAGE_PURPOSES.includes(onboardingPurposeSelected ?? '') ? 50 : 75}
+                progressBarPercentage={75}
                 onBackButtonPress={Navigation.goBack}
             />
             <KeyboardAvoidingView
@@ -186,5 +186,8 @@ export default withCurrentUserPersonalDetails(
         onboardingPurposeSelected: {
             key: ONYXKEYS.ONBOARDING_PURPOSE_SELECTED,
         },
+        onboardingAdminsChatReportID: {
+            key: ONYXKEYS.ONBOARDING_ADMINS_CHAT_REPORT_ID,
+        },
     })(BaseOnboardingPersonalDetails),
 );

src/pages/OnboardingPersonalDetails/types.ts

@@ -7,6 +7,9 @@ type OnboardingPersonalDetailsProps = Record<string, unknown>;
 type BaseOnboardingPersonalDetailsOnyxProps = {
     /** Saved onboarding purpose selected by the user */
     onboardingPurposeSelected: OnyxEntry<OnboardingPurposeType>;
+
+    /** Saved onboarding admin chat report ID */
+    onboardingAdminsChatReportID: OnyxEntry<string>;
 };
 
 type BaseOnboardingPersonalDetailsProps = WithCurrentUserPersonalDetailsProps &

src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

@@ -75,6 +75,11 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on
             return;
         }
 
+        if (selectedPurpose === CONST.ONBOARDING_CHOICES.MANAGE_TEAM) {
+            Navigation.navigate(ROUTES.ONBOARDING_WORK);
+            return;
+        }
+
         Navigation.navigate(ROUTES.ONBOARDING_PERSONAL_DETAILS);
     }, [selectedPurpose]);
 

src/pages/OnboardingWork/BaseOnboardingWork.tsx

@@ -9,7 +9,6 @@ import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape';
 import useLocalize from '@hooks/useLocalize';
 import useOnboardingLayout from '@hooks/useOnboardingLayout';
@@ -18,16 +17,17 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import variables from '@styles/variables';
 import * as Policy from '@userActions/Policy';
-import * as Report from '@userActions/Report';
+import * as Welcome from '@userActions/Welcome';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import INPUT_IDS from '@src/types/form/WorkForm';
 import type {BaseOnboardingWorkOnyxProps, BaseOnboardingWorkProps} from './types';
 
-function BaseOnboardingWork({currentUserPersonalDetails, shouldUseNativeStyles, onboardingPurposeSelected}: BaseOnboardingWorkProps) {
+const OPEN_WORK_PAGE_PURPOSES = [CONST.ONBOARDING_CHOICES.MANAGE_TEAM];
+
+function BaseOnboardingWork({shouldUseNativeStyles, onboardingPurposeSelected}: BaseOnboardingWorkProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -40,39 +40,12 @@ function BaseOnboardingWork({currentUserPersonalDetails, shouldUseNativeStyles,
             if (!onboardingPurposeSelected) {
                 return;
             }
-
             const work = values.work.trim();
-
             const {adminsChatReportID} = Policy.createWorkspace(undefined, true, work);
-
-            Report.completeOnboarding(
-                onboardingPurposeSelected,
-                CONST.ONBOARDING_MESSAGES[onboardingPurposeSelected],
-                {
-                    login: currentUserPersonalDetails.login ?? '',
-                    firstName: currentUserPersonalDetails.firstName ?? '',
-                    lastName: currentUserPersonalDetails.lastName ?? '',
-                },
-                adminsChatReportID,
-            );
-
-            Navigation.dismissModal();
-
-            // Only navigate to concierge chat when central pane is visible
-            // Otherwise stay on the chats screen.
-            if (isSmallScreenWidth) {
-                Navigation.navigate(ROUTES.HOME);
-            } else {
-                Report.navigateToConciergeChat();
-            }
-
-            // Small delay purely due to design considerations,
-            // no special technical reasons behind that.
-            setTimeout(() => {
-                Navigation.navigate(ROUTES.WELCOME_VIDEO_ROOT);
-            }, variables.welcomeVideoDelay);
+            Welcome.setOnboardingAdminsChatReportID(adminsChatReportID);
+            Navigation.navigate(ROUTES.ONBOARDING_PERSONAL_DETAILS);
         },
-        [currentUserPersonalDetails.firstName, currentUserPersonalDetails.lastName, currentUserPersonalDetails.login, isSmallScreenWidth, onboardingPurposeSelected],
+        [onboardingPurposeSelected],
     );
 
     const validate = (values: FormOnyxValues<'onboardingWorkForm'>) => {
@@ -96,7 +69,7 @@ function BaseOnboardingWork({currentUserPersonalDetails, shouldUseNativeStyles,
         <View style={[styles.h100, styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}>
             <HeaderWithBackButton
                 shouldShowBackButton
-                progressBarPercentage={75}
+                progressBarPercentage={OPEN_WORK_PAGE_PURPOSES.includes(onboardingPurposeSelected ?? '') ? 50 : 75}
                 onBackButtonPress={Navigation.goBack}
             />
             <KeyboardAvoidingView
@@ -141,10 +114,8 @@ function BaseOnboardingWork({currentUserPersonalDetails, shouldUseNativeStyles,
 
 BaseOnboardingWork.displayName = 'BaseOnboardingWork';
 
-export default withCurrentUserPersonalDetails(
-    withOnyx<BaseOnboardingWorkProps, BaseOnboardingWorkOnyxProps>({
-        onboardingPurposeSelected: {
-            key: ONYXKEYS.ONBOARDING_PURPOSE_SELECTED,
-        },
-    })(BaseOnboardingWork),
-);
+export default withOnyx<BaseOnboardingWorkProps, BaseOnboardingWorkOnyxProps>({
+    onboardingPurposeSelected: {
+        key: ONYXKEYS.ONBOARDING_PURPOSE_SELECTED,
+    },
+})(BaseOnboardingWork);

src/pages/OnboardingWork/types.ts

@@ -1,5 +1,4 @@
 import type {OnyxEntry} from 'react-native-onyx';
-import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import type {OnboardingPurposeType} from '@src/CONST';
 
 type OnboardingWorkProps = Record<string, unknown>;
@@ -9,10 +8,9 @@ type BaseOnboardingWorkOnyxProps = {
     onboardingPurposeSelected: OnyxEntry<OnboardingPurposeType>;
 };
 
-type BaseOnboardingWorkProps = WithCurrentUserPersonalDetailsProps &
-    BaseOnboardingWorkOnyxProps & {
-        /* Whether to use native styles tailored for native devices */
-        shouldUseNativeStyles: boolean;
-    };
+type BaseOnboardingWorkProps = BaseOnboardingWorkOnyxProps & {
+    /* Whether to use native styles tailored for native devices */
+    shouldUseNativeStyles: boolean;
+};
 
 export type {OnboardingWorkProps, BaseOnboardingWorkOnyxProps, BaseOnboardingWorkProps};