feat: add employee and accounting page to onboarding flow

src/CONST.ts

@@ -130,12 +130,24 @@ const onboardingEmployerOrSubmitMessage: OnboardingMessageType = {
 
 type OnboardingPurposeType = ValueOf<typeof onboardingChoices>;
 
+type OnboardingCompanySizeType = ValueOf<typeof onboardingCompanySize>;
+
+type OnboardingAccountingType = ValueOf<typeof CONST.POLICY.CONNECTIONS.NAME> | null;
+
 const onboardingInviteTypes = {
     IOU: 'iou',
     INVOICE: 'invoice',
     CHAT: 'chat',
 } as const;
 
+const onboardingCompanySize = {
+    MICRO: '1-10',
+    SMALL: '11-50',
+    MEDIUM_SMALL: '51-100',
+    MEDIUM: '101-1000',
+    LARGE: '1001+',
+};
+
 type OnboardingInviteType = ValueOf<typeof onboardingInviteTypes>;
 
 type OnboardingTaskType = {
@@ -4445,6 +4457,7 @@ const CONST = {
     ONBOARDING_CHOICES: {...onboardingChoices},
     SELECTABLE_ONBOARDING_CHOICES: {...selectableOnboardingChoices},
     ONBOARDING_INVITE_TYPES: {...onboardingInviteTypes},
+    ONBOARDING_COMPANY_SIZE: {...onboardingCompanySize},
     ACTIONABLE_TRACK_EXPENSE_WHISPER_MESSAGE: 'What would you like to do with this expense?',
     ONBOARDING_CONCIERGE: {
         [onboardingChoices.EMPLOYER]:
@@ -5765,6 +5778,19 @@ type FeedbackSurveyOptionID = ValueOf<Pick<ValueOf<typeof CONST.FEEDBACK_SURVEY_
 type SubscriptionType = ValueOf<typeof CONST.SUBSCRIPTION.TYPE>;
 type CancellationType = ValueOf<typeof CONST.CANCELLATION_TYPE>;
 
-export type {Country, IOUAction, IOUType, RateAndUnit, OnboardingPurposeType, IOURequestType, SubscriptionType, FeedbackSurveyOptionID, CancellationType, OnboardingInviteType};
+export type {
+    Country,
+    IOUAction,
+    IOUType,
+    RateAndUnit,
+    OnboardingPurposeType,
+    OnboardingCompanySizeType,
+    IOURequestType,
+    SubscriptionType,
+    FeedbackSurveyOptionID,
+    CancellationType,
+    OnboardingInviteType,
+    OnboardingAccountingType,
+};
 
 export default CONST;

src/ONYXKEYS.ts

@@ -1,6 +1,6 @@
 import type {ValueOf} from 'type-fest';
 import type CONST from './CONST';
-import type {OnboardingPurposeType} from './CONST';
+import type {OnboardingCompanySizeType, OnboardingPurposeType} from './CONST';
 import type * as FormTypes from './types/form';
 import type * as OnyxTypes from './types/onyx';
 import type Onboarding from './types/onyx/Onboarding';
@@ -343,6 +343,9 @@ const ONYXKEYS = {
     /** Onboarding policyID selected by the user during Onboarding flow */
     ONBOARDING_POLICY_ID: 'onboardingPolicyID',
 
+    /** Onboarding company size selected by the user during Onboarding flow */
+    ONBOARDING_COMPANY_SIZE: 'onboardingCompanySize',
+
     /** Onboarding Purpose selected by the user during Onboarding flow */
     ONBOARDING_ADMINS_CHAT_REPORT_ID: 'onboardingAdminsChatReportID',
 
@@ -947,6 +950,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.MAX_CANVAS_HEIGHT]: number;
     [ONYXKEYS.MAX_CANVAS_WIDTH]: number;
     [ONYXKEYS.ONBOARDING_PURPOSE_SELECTED]: OnboardingPurposeType;
+    [ONYXKEYS.ONBOARDING_COMPANY_SIZE]: OnboardingCompanySizeType;
     [ONYXKEYS.ONBOARDING_ERROR_MESSAGE]: string;
     [ONYXKEYS.ONBOARDING_POLICY_ID]: string;
     [ONYXKEYS.ONBOARDING_ADMINS_CHAT_REPORT_ID]: string;

src/ROUTES.ts

@@ -1125,6 +1125,14 @@ const ROUTES = {
         route: 'onboarding/work',
         getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/work`, backTo),
     },
+    ONBOARDING_EMPLOYEES: {
+        route: 'onboarding/employees',
+        getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/employees`, backTo),
+    },
+    ONBOARDING_ACCOUNTING: {
+        route: 'onboarding/accounting',
+        getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/accounting`, backTo),
+    },
     ONBOARDING_PURPOSE: {
         route: 'onboarding/purpose',
         getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/purpose`, backTo),

src/SCREENS.ts

@@ -509,6 +509,8 @@ const SCREENS = {
         PERSONAL_DETAILS: 'Onboarding_Personal_Details',
         PURPOSE: 'Onboarding_Purpose',
         WORK: 'Onboarding_Work',
+        EMPLOYEES: 'Onboarding_Employees',
+        ACCOUNTING: 'Onboarding_accounting',
     },
 
     WELCOME_VIDEO: {

src/languages/en.ts

@@ -1631,6 +1631,19 @@ export default {
             [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: 'Chat and split expenses with friends',
             [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: 'Something else',
         },
+        employees: {
+            title: 'How many employees do you have?',
+            [CONST.ONBOARDING_COMPANY_SIZE.MICRO]: '1-10 employees',
+            [CONST.ONBOARDING_COMPANY_SIZE.SMALL]: '11-50 employees',
+            [CONST.ONBOARDING_COMPANY_SIZE.MEDIUM_SMALL]: '51-100 employees',
+            [CONST.ONBOARDING_COMPANY_SIZE.MEDIUM]: '101-1,000 employees',
+            [CONST.ONBOARDING_COMPANY_SIZE.LARGE]: 'More than 1,000 employees',
+        },
+        accounting: {
+            title: 'Do you use any accounting software?',
+            description: 'Connect your accounting software directly to Expensify',
+            noneOfAbove: 'None of the above',
+        },
         error: {
             requiredFirstName: 'Please input your first name to continue.',
         },

src/languages/es.ts

@@ -1639,6 +1639,19 @@ export default {
             [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: 'Chatea y divide gastos con tus amigos',
             [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: 'Algo más',
         },
+        employees: {
+            title: 'How many empleados do you have?',
+            [CONST.ONBOARDING_COMPANY_SIZE.MICRO]: '1-10 empleados',
+            [CONST.ONBOARDING_COMPANY_SIZE.SMALL]: '11-50 empleados',
+            [CONST.ONBOARDING_COMPANY_SIZE.MEDIUM_SMALL]: '51-100 empleados',
+            [CONST.ONBOARDING_COMPANY_SIZE.MEDIUM]: '101-1,000 empleados',
+            [CONST.ONBOARDING_COMPANY_SIZE.LARGE]: 'More than 1,000 empleados',
+        },
+        accounting: {
+            title: 'Do you use any accounting software?',
+            description: 'Connect your accounting software directly to Expensify',
+            noneOfAbove: 'None of the above',
+        },
         error: {
             requiredFirstName: 'Introduce tu nombre para continuar.',
         },

src/libs/API/parameters/CompleteGuidedSetupParams.ts

@@ -1,4 +1,4 @@
-import type {OnboardingPurposeType} from '@src/CONST';
+import type {OnboardingAccountingType, OnboardingCompanySizeType, OnboardingPurposeType} from '@src/CONST';
 
 type CompleteGuidedSetupParams = {
     firstName: string;
@@ -7,6 +7,8 @@ type CompleteGuidedSetupParams = {
     guidedSetupData: string;
     engagementChoice: OnboardingPurposeType;
     paymentSelected?: string;
+    companySize?: OnboardingCompanySizeType;
+    userReportedIntegration?: OnboardingAccountingType;
 };
 
 export default CompleteGuidedSetupParams;

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

@@ -12,6 +12,8 @@ import OnboardingModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator
 import Navigation from '@libs/Navigation/Navigation';
 import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types';
 import OnboardingRefManager from '@libs/OnboardingRefManager';
+import OnboardingAccounting from '@pages/OnboardingAccounting';
+import OnboardingEmployees from '@pages/OnboardingEmployees';
 import OnboardingPersonalDetails from '@pages/OnboardingPersonalDetails';
 import OnboardingPurpose from '@pages/OnboardingPurpose';
 import OnboardingWork from '@pages/OnboardingWork';
@@ -87,6 +89,14 @@ function OnboardingModalNavigator() {
                                 name={SCREENS.ONBOARDING.WORK}
                                 component={OnboardingWork}
                             />
+                            <Stack.Screen
+                                name={SCREENS.ONBOARDING.EMPLOYEES}
+                                component={OnboardingEmployees}
+                            />
+                            <Stack.Screen
+                                name={SCREENS.ONBOARDING.ACCOUNTING}
+                                component={OnboardingAccounting}
+                            />
                         </Stack.Navigator>
                     </View>
                 </FocusTrapForScreens>

src/libs/Navigation/linkingConfig/config.ts

@@ -123,6 +123,14 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                     path: ROUTES.ONBOARDING_WORK.route,
                     exact: true,
                 },
+                [SCREENS.ONBOARDING.EMPLOYEES]: {
+                    path: ROUTES.ONBOARDING_EMPLOYEES.route,
+                    exact: true,
+                },
+                [SCREENS.ONBOARDING.ACCOUNTING]: {
+                    path: ROUTES.ONBOARDING_ACCOUNTING.route,
+                    exact: true,
+                },
             },
         },
         [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: {

src/libs/Navigation/types.ts

@@ -1313,6 +1313,12 @@ type OnboardingModalNavigatorParamList = {
     [SCREENS.ONBOARDING.WORK]: {
         backTo?: string;
     };
+    [SCREENS.ONBOARDING.EMPLOYEES]: {
+        backTo?: string;
+    };
+    [SCREENS.ONBOARDING.ACCOUNTING]: {
+        backTo?: string;
+    };
 };
 
 type WelcomeVideoModalNavigatorParamList = {

src/libs/NavigationUtils.ts

@@ -17,7 +17,14 @@ const CENTRAL_PANE_SCREEN_NAMES = new Set([
     SCREENS.REPORT,
 ]);
 
-const ONBOARDING_SCREEN_NAMES = new Set([SCREENS.ONBOARDING.PERSONAL_DETAILS, SCREENS.ONBOARDING.PURPOSE, SCREENS.ONBOARDING.WORK, SCREENS.ONBOARDING_MODAL.ONBOARDING]);
+const ONBOARDING_SCREEN_NAMES = new Set([
+    SCREENS.ONBOARDING.PERSONAL_DETAILS,
+    SCREENS.ONBOARDING.PURPOSE,
+    SCREENS.ONBOARDING.WORK,
+    SCREENS.ONBOARDING_MODAL.ONBOARDING,
+    SCREENS.ONBOARDING.EMPLOYEES,
+    SCREENS.ONBOARDING.ACCOUNTING,
+]);
 
 const removePolicyIDParamFromState = (state: State<RootStackParamList>) => {
     const stateCopy = cloneDeep(state);

src/libs/actions/Report.ts

@@ -82,7 +82,7 @@ import {doesReportBelongToWorkspace} from '@libs/ReportUtils';
 import shouldSkipDeepLinkNavigation from '@libs/shouldSkipDeepLinkNavigation';
 import Visibility from '@libs/Visibility';
 import CONFIG from '@src/CONFIG';
-import type {OnboardingPurposeType} from '@src/CONST';
+import type {OnboardingAccountingType, 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 @@ function completeOnboarding(
     adminsChatReportID?: string,
     onboardingPolicyID?: string,
     paymentSelected?: string,
+    companySize?: OnboardingCompanySizeType,
+    userReportedIntegration?: OnboardingAccountingType,
 ) {
     const actorAccountID = CONST.ACCOUNT_ID.CONCIERGE;
     const targetChatReport = ReportUtils.getChatByParticipants([actorAccountID, currentUserAccountID]);
@@ -3687,6 +3689,8 @@ function completeOnboarding(
         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,7 +52,7 @@ 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: [
@@ -61,7 +61,7 @@ function adaptOnboardingRouteState() {
                     params: currentRoute?.params,
                 },
                 {
-                    name: SCREENS.ONBOARDING.WORK,
+                    name: SCREENS.ONBOARDING.EMPLOYEES,
                     params: currentRoute?.params,
                 },
                 {...currentRoute},

src/libs/actions/Welcome/index.ts

@@ -5,7 +5,7 @@ import * as API from '@libs/API';
 import {WRITE_COMMANDS} from '@libs/API/types';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
-import type {OnboardingPurposeType} from '@src/CONST';
+import type {OnboardingCompanySizeType, OnboardingPurposeType} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type Onboarding from '@src/types/onyx/Onboarding';
@@ -144,6 +144,10 @@ function setOnboardingPurposeSelected(value: OnboardingPurposeType) {
     Onyx.set(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED, value ?? null);
 }
 
+function setOnboardingCompanySize(value: OnboardingCompanySizeType) {
+    Onyx.set(ONYXKEYS.ONBOARDING_COMPANY_SIZE, value);
+}
+
 function setOnboardingErrorMessage(value: string) {
     Onyx.set(ONYXKEYS.ONBOARDING_ERROR_MESSAGE, value ?? null);
 }
@@ -236,4 +240,5 @@ export {
     completeHybridAppOnboarding,
     handleHybridAppOnboarding,
     setOnboardingErrorMessage,
+    setOnboardingCompanySize,
 };