feat: add employee and accounting page to onboarding flow

src/CONST.ts

@@ -139,11 +139,11 @@ const onboardingInviteTypes = {
 } as const;
 
 const onboardingCompanySize = {
-    MICRO: 'micro',
-    SMALL: 'small',
-    MEDIUM_SMALL: 'mediumSmall',
-    MEDIUM: 'medium',
-    LARGE: 'large',
+    MICRO: '1-10',
+    SMALL: '11-50',
+    MEDIUM_SMALL: '51-100',
+    MEDIUM: '101-1000',
+    LARGE: '1001+',
 };
 
 type OnboardingInviteType = ValueOf<typeof onboardingInviteTypes>;

src/libs/API/parameters/CompleteGuidedSetupParams.ts

@@ -1,4 +1,6 @@
-import type {OnboardingPurposeType} from '@src/CONST';
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+import type {OnboardingCompanySizeType, OnboardingPurposeType} from '@src/CONST';
 
 type CompleteGuidedSetupParams = {
     firstName: string;
@@ -7,6 +9,8 @@ type CompleteGuidedSetupParams = {
     guidedSetupData: string;
     engagementChoice: OnboardingPurposeType;
     paymentSelected?: string;
+    companySize?: OnboardingCompanySizeType;
+    userReportedIntegration?: ValueOf<typeof CONST.POLICY.CONNECTIONS.NAME>;
 };
 
 export default CompleteGuidedSetupParams;

src/libs/actions/Report.ts

@@ -82,7 +82,7 @@
 import shouldSkipDeepLinkNavigation from '@libs/shouldSkipDeepLinkNavigation';
 import Visibility from '@libs/Visibility';
 import CONFIG from '@src/CONFIG';
-import type {OnboardingPurposeType} from '@src/CONST';
+import type {OnboardingCompanySizeType, OnboardingPurposeType} from '@src/CONST';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
@@ -3341,6 +3341,8 @@
     adminsChatReportID?: string,
     onboardingPolicyID?: string,
     paymentSelected?: string,
+    companySize?: OnboardingCompanySizeType,
+    userReportedIntegration?: ValueOf<typeof CONST.POLICY.CONNECTIONS.NAME> | null,
 ) {
     const actorAccountID = CONST.ACCOUNT_ID.CONCIERGE;
     const targetChatReport = ReportUtils.getChatByParticipants([actorAccountID, currentUserAccountID]);
@@ -3687,6 +3689,8 @@
         actorAccountID,
         guidedSetupData: JSON.stringify(guidedSetupData),
         paymentSelected,
+        companySize,
+        userReportedIntegration,
     };
 
     API.write(WRITE_COMMANDS.COMPLETE_GUIDED_SETUP, parameters, {optimisticData, successData, failureData});

src/libs/actions/Welcome/OnboardingFlow.ts

@@ -52,18 +52,14 @@ function adaptOnboardingRouteState() {
     }
 
     let adaptedOnboardingModalNavigatorState = {} as Readonly<PartialState<NavigationState>>;
-    if (currentRoute?.name === SCREENS.ONBOARDING.PERSONAL_DETAILS && selectedPurpose === CONST.ONBOARDING_CHOICES.MANAGE_TEAM) {
+    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.WORK,
-                    params: currentRoute?.params,
-                },
                 {
                     name: SCREENS.ONBOARDING.EMPLOYEES,
                     params: currentRoute?.params,

src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

@@ -1,5 +1,7 @@
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import Button from '@components/Button';
 import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -15,23 +17,35 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import * as Policy from '@userActions/Policy/Policy';
+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 type {} from '@src/types/onyx/Bank';
 import type {OnboardingIcon} from '@src/types/onyx/Onboarding';
 import type {BaseOnboardingAccountingProps} from './types';
 
+type OnboardingAccountingType = ValueOf<typeof CONST.POLICY.CONNECTIONS.NAME>;
+
 type OnboardingListItemData = ListItem & {
+    keyForList: OnboardingAccountingType | null;
     onboardingIcon: OnboardingIcon;
 };
-
-function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccountingProps) {
+function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboardingAccountingProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {onboardingIsMediumOrLargerScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
-    const [userReportedIntegration, setUserReportedIntegration] = useState<string | null | undefined>(undefined);
+    const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED);
+    const [onboardingPolicyID] = useOnyx(ONYXKEYS.ONBOARDING_POLICY_ID);
+    const [onboardingAdminsChatReportID] = useOnyx(ONYXKEYS.ONBOARDING_ADMINS_CHAT_REPORT_ID);
+    const [onboardingCompanySize] = useOnyx(ONYXKEYS.ONBOARDING_COMPANY_SIZE);
+
+    const [userReportedIntegration, setUserReportedIntegration] = useState<OnboardingAccountingType | null | undefined>(undefined);
     const [error, setError] = useState('');
 
     const accountingOptions: OnboardingListItemData[] = useMemo(() => {
@@ -112,13 +126,44 @@ function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccount
                 text={translate('common.confirm')}
                 // eslint-disable-next-line rulesdir/prefer-early-return
                 onPress={() => {
-                    if (!userReportedIntegration) {
+                    if (userReportedIntegration === undefined) {
                         setError(translate('onboarding.purpose.errorSelection'));
                         // eslint-disable-next-line no-useless-return
                         return;
                     }
 
-                    // TODO: call CompleOnboarding API after the back-end PR is complete
+                    if (!onboardingPurposeSelected) {
+                        return;
+                    }
+
+                    if (onboardingPolicyID) {
+                        Policy.enablePolicyConnections(onboardingPolicyID, true);
+                    }
+
+                    Report.completeOnboarding(
+                        onboardingPurposeSelected,
+                        CONST.ONBOARDING_MESSAGES[onboardingPurposeSelected],
+                        {
+                            firstName: '',
+                            lastName: '',
+                        },
+                        onboardingAdminsChatReportID ?? undefined,
+                        onboardingPolicyID,
+                        undefined,
+                        onboardingCompanySize,
+                        userReportedIntegration,
+                    );
+
+                    Welcome.setOnboardingAdminsChatReportID();
+                    Welcome.setOnboardingPolicyID();
+
+                    Navigation.dismissModal();
+
+                    // Only navigate to concierge chat when central pane is visible
+                    // Otherwise stay on the chats screen.
+                    if (!shouldUseNarrowLayout && !route.params?.backTo) {
+                        Report.navigateToConciergeChat();
+                    }
                 }}
                 pressOnEnter
             />
@@ -150,6 +195,7 @@ function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccount
                     sections={[{data: accountingOptions}]}
                     onSelectRow={(item) => {
                         setUserReportedIntegration(item.keyForList);
+                        setError('');
                     }}
                     shouldUpdateFocusedIndex
                     ListItem={OnboardingListItem}

src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

@@ -20,6 +20,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import OnboardingRefManager from '@libs/OnboardingRefManager';
 import type {TOnboardingRef} from '@libs/OnboardingRefManager';
 import variables from '@styles/variables';
+import * as Policy from '@userActions/Policy/Policy';
 import * as Welcome from '@userActions/Welcome';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -38,6 +39,7 @@ const menuIcons = {
 function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, route}: BaseOnboardingPurposeProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [onboardingPolicyID] = useOnyx(ONYXKEYS.ONBOARDING_POLICY_ID);
     const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
     const {windowHeight} = useWindowDimensions();
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to show offline indicator on small screen only
@@ -66,6 +68,11 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
                 Welcome.setOnboardingErrorMessage('');
 
                 if (choice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM) {
+                    if (!onboardingPolicyID) {
+                        const {adminsChatReportID, policyID} = Policy.createWorkspace(undefined, true);
+                        Welcome.setOnboardingAdminsChatReportID(adminsChatReportID);
+                        Welcome.setOnboardingPolicyID(policyID);
+                    }
                     Navigation.navigate(ROUTES.ONBOARDING_EMPLOYEES.getRoute(route.params?.backTo));
                     return;
                 }