feat: add employee and accounting page to onboarding flow

src/CONST.ts

@@ -130,12 +130,22 @@ const onboardingEmployerOrSubmitMessage: OnboardingMessageType = {
 
 type OnboardingPurposeType = ValueOf<typeof onboardingChoices>;
 
+type OnboardingCompanySizeType = ValueOf<typeof onboardingCompanySize>;
+
 const onboardingInviteTypes = {
     IOU: 'iou',
     INVOICE: 'invoice',
     CHAT: 'chat',
 } as const;
 
+const onboardingCompanySize = {
+    MICRO: 'micro',
+    SMALL: 'small',
+    MEDIUM_SMALL: 'mediumSmall',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+
 type OnboardingInviteType = ValueOf<typeof onboardingInviteTypes>;
 
 type OnboardingTaskType = {
@@ -4509,6 +4519,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]:
@@ -5809,6 +5820,18 @@ 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,
+};
 
 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

@@ -1118,6 +1118,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

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

src/components/SelectionList/OnboardingListItem.tsx

@@ -0,0 +1,105 @@
+import {Str} from 'expensify-common';
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import Text from '@components/Text';
+import TextWithTooltip from '@components/TextWithTooltip';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import BaseListItem from './BaseListItem';
+import type {ListItem, OnboardingListItemProps} from './types';
+
+function OnboardingListItem<TItem extends ListItem>({
+    item,
+    isFocused,
+    showTooltip,
+    isDisabled,
+    canSelectMultiple,
+    onSelectRow,
+    onDismissError,
+    shouldPreventEnterKeySubmit,
+    rightHandSideComponent,
+    onFocus,
+    shouldSyncFocus,
+    pressableStyle,
+}: OnboardingListItemProps<TItem>) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
+
+    return (
+        <BaseListItem
+            item={item}
+            wrapperStyle={[
+                styles.flex1,
+                styles.justifyContentBetween,
+                styles.onboardingItemWrapper,
+                styles.userSelectNone,
+                styles.peopleRow,
+                isFocused && styles.sidebarLinkActive,
+                onboardingIsMediumOrLargerScreenWidth ? styles.ph8 : styles.ph5,
+            ]}
+            isFocused={isFocused}
+            isDisabled={isDisabled}
+            showTooltip={showTooltip}
+            canSelectMultiple={canSelectMultiple}
+            onSelectRow={onSelectRow}
+            onDismissError={onDismissError}
+            shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit}
+            rightHandSideComponent={rightHandSideComponent}
+            errors={item.errors}
+            pendingAction={item.pendingAction}
+            pressableStyle={pressableStyle}
+            FooterComponent={
+                item.invitedSecondaryLogin ? (
+                    <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
+                        {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
+                    </Text>
+                ) : undefined
+            }
+            keyForList={item.keyForList}
+            onFocus={onFocus}
+            shouldSyncFocus={shouldSyncFocus}
+        >
+            <>
+                {item.onboardingIcon && (
+                    <View style={[styles.mr3, styles.onboardingIconWrapper]}>
+                        <Icon
+                            src={item.onboardingIcon.icon}
+                            width={item.onboardingIcon.iconWidth}
+                            height={item.onboardingIcon.iconHeight}
+                            additionalStyles={item.onboardingIcon.iconStyles}
+                            fill={item.onboardingIcon.iconFill}
+                        />
+                    </View>
+                )}
+                <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
+                    <TextWithTooltip
+                        shouldShowTooltip={showTooltip}
+                        text={Str.removeSMSDomain(item.text ?? '')}
+                        style={[
+                            styles.optionDisplayName,
+                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                            item.isBold !== false && styles.sidebarLinkTextBold,
+                            styles.pre,
+                            item.alternateText ? styles.mb1 : null,
+                        ]}
+                    />
+                    {!!item.alternateText && (
+                        <TextWithTooltip
+                            shouldShowTooltip={showTooltip}
+                            text={Str.removeSMSDomain(item.alternateText ?? '')}
+                            style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                        />
+                    )}
+                </View>
+                {!!item.rightElement && item.rightElement}
+            </>
+        </BaseListItem>
+    );
+}
+
+OnboardingListItem.displayName = 'OnboardingListItem';
+
+export default OnboardingListItem;

src/components/SelectionList/types.ts

@@ -4,13 +4,15 @@ import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
 // eslint-disable-next-line no-restricted-imports
 import type CursorStyles from '@styles/utils/cursor/types';
 import type CONST from '@src/CONST';
+import type {OnboardingIcon} from '@src/types/onyx/Onboarding';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import type {SearchPersonalDetails, SearchReport, SearchReportAction, SearchTransaction} from '@src/types/onyx/SearchResults';
 import type {ReceiptErrors} from '@src/types/onyx/Transaction';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
 import type ChatListItem from './ChatListItem';
 import type InviteMemberListItem from './InviteMemberListItem';
+import type OnboardingListItem from './OnboardingListItem';
 import type RadioListItem from './RadioListItem';
 import type ReportListItem from './Search/ReportListItem';
 import type TransactionListItem from './Search/TransactionListItem';
@@ -286,6 +288,8 @@ type UserListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
     FooterComponent?: ReactElement;
 };
 
+type OnboardingListItemProps<TItem extends ListItem> = ListItemProps<TItem & {onboardingIcon?: OnboardingIcon}>;
+
 type InviteMemberListItemProps<TItem extends ListItem> = UserListItemProps<TItem>;
 
 type RadioListItemProps<TItem extends ListItem> = ListItemProps<TItem>;
@@ -305,7 +309,8 @@ type ValidListItem =
     | typeof InviteMemberListItem
     | typeof TransactionListItem
     | typeof ReportListItem
-    | typeof ChatListItem;
+    | typeof ChatListItem
+    | typeof OnboardingListItem;
 
 type Section<TItem extends ListItem> = {
     /** Title of the section */
@@ -592,4 +597,5 @@ export type {
     ValidListItem,
     ReportActionListItemType,
     ChatListItemProps,
+    OnboardingListItemProps,
 };

src/languages/en.ts

@@ -1629,6 +1629,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

@@ -1637,6 +1637,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/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

@@ -1307,6 +1307,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/Welcome/OnboardingFlow.ts

@@ -64,6 +64,10 @@ function adaptOnboardingRouteState() {
                     name: SCREENS.ONBOARDING.WORK,
                     params: currentRoute?.params,
                 },
+                {
+                    name: SCREENS.ONBOARDING.EMPLOYEES,
+                    params: currentRoute?.params,
+                },
                 {...currentRoute},
             ],
         } as Readonly<PartialState<NavigationState>>;

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,
 };