feat: add employee and accounting page to onboarding flow

src/languages/en.ts

@@ -1723,9 +1723,9 @@ const translations = {
         getStarted: 'Get started',
         whatsYourName: "What's your name?",
         whereYouWork: 'Where do you work?',
+        errorSelection: 'Please make a selection to continue.',
         purpose: {
             title: 'What do you want to do today?',
-            errorSelection: 'Please make a selection to continue.',
             errorContinue: 'Please press continue to get set up.',
             errorBackButton: 'Please finish the setup questions to start using the app.',
             [CONST.ONBOARDING_CHOICES.EMPLOYER]: 'Get paid back by my employer',

src/languages/es.ts

@@ -1723,9 +1723,9 @@ const translations = {
         getStarted: 'Comenzar',
         whatsYourName: '¿Cómo te llamas?',
         whereYouWork: '¿Dónde trabajas?',
+        errorSelection: 'Por favor selecciona una opción para continuar.',
         purpose: {
             title: '¿Qué quieres hacer hoy?',
-            errorSelection: 'Por favor selecciona una opción para continuar.',
             errorContinue: 'Por favor, haz click en continuar para configurar tu cuenta.',
             errorBackButton: 'Por favor, finaliza las preguntas de configuración para empezar a utilizar la aplicación.',
             [CONST.ONBOARDING_CHOICES.EMPLOYER]: 'Cobrar de mi empresa',

src/libs/actions/Report.ts

@@ -70,7 +70,7 @@ import Parser from '@libs/Parser';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PhoneNumber from '@libs/PhoneNumber';
 import getPolicyEmployeeAccountIDs from '@libs/PolicyEmployeeListUtils';
-import {extractPolicyIDFromPath} from '@libs/PolicyUtils';
+import {extractPolicyIDFromPath, getPolicy} from '@libs/PolicyUtils';
 import processReportIDDeeplink from '@libs/processReportIDDeeplink';
 import * as Pusher from '@libs/Pusher/pusher';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
@@ -3669,7 +3669,7 @@ function completeOnboarding(
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${onboardingPolicyID}`,
             value: {
-                areConnectionsEnabled: false,
+                areConnectionsEnabled: getPolicy(onboardingPolicyID)?.areConnectionsEnabled,
                 pendingFields: {
                     areConnectionsEnabled: null,
                 },

src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

@@ -6,7 +6,6 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import OfflineIndicator from '@components/OfflineIndicator';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
@@ -47,45 +46,50 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding
     const [error, setError] = useState('');
 
     const accountingOptions: OnboardingListItem[] = useMemo(() => {
-        const policyAccountingOptions = Object.values(CONST.POLICY.CONNECTIONS.NAME).map((connectionName): OnboardingListItem => {
-            let text;
-            let accountingIcon;
-            switch (connectionName) {
-                case CONST.POLICY.CONNECTIONS.NAME.QBO: {
-                    text = translate('workspace.accounting.qbo');
-                    accountingIcon = Expensicons.QBOCircle;
-                    break;
-                }
-                case CONST.POLICY.CONNECTIONS.NAME.XERO: {
-                    text = translate('workspace.accounting.xero');
-                    accountingIcon = Expensicons.XeroCircle;
-                    break;
-                }
-                case CONST.POLICY.CONNECTIONS.NAME.NETSUITE: {
-                    text = translate('workspace.accounting.netsuite');
-                    accountingIcon = Expensicons.NetSuiteSquare;
-                    break;
-                }
-                default: {
-                    text = translate('workspace.accounting.intacct');
-                    accountingIcon = Expensicons.IntacctSquare;
-                    break;
+        const policyAccountingOptions = Object.values(CONST.POLICY.CONNECTIONS.NAME)
+            .map((connectionName): OnboardingListItem | undefined => {
+                let text;
+                let accountingIcon;
+                switch (connectionName) {
+                    case CONST.POLICY.CONNECTIONS.NAME.QBO: {
+                        text = translate('workspace.accounting.qbo');
+                        accountingIcon = Expensicons.QBOCircle;
+                        break;
+                    }
+                    case CONST.POLICY.CONNECTIONS.NAME.XERO: {
+                        text = translate('workspace.accounting.xero');
+                        accountingIcon = Expensicons.XeroCircle;
+                        break;
+                    }
+                    case CONST.POLICY.CONNECTIONS.NAME.NETSUITE: {
+                        text = translate('workspace.accounting.netsuite');
+                        accountingIcon = Expensicons.NetSuiteSquare;
+                        break;
+                    }
+                    case CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT: {
+                        text = translate('workspace.accounting.intacct');
+                        accountingIcon = Expensicons.IntacctSquare;
+                        break;
+                    }
+                    default: {
+                        return;
+                    }
                 }
-            }
-            return {
-                keyForList: connectionName,
-                text,
-                leftElement: (
-                    <Icon
-                        src={accountingIcon}
-                        width={variables.iconSizeExtraLarge}
-                        height={variables.iconSizeExtraLarge}
-                        additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.DEFAULT, CONST.ICON_TYPE_AVATAR), styles.mr3]}
-                    />
-                ),
-                isSelected: userReportedIntegration === connectionName,
-            };
-        });
+                return {
+                    keyForList: connectionName,
+                    text,
+                    leftElement: (
+                        <Icon
+                            src={accountingIcon}
+                            width={variables.iconSizeExtraLarge}
+                            height={variables.iconSizeExtraLarge}
+                            additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.DEFAULT, CONST.ICON_TYPE_AVATAR), styles.mr3]}
+                        />
+                    ),
+                    isSelected: userReportedIntegration === connectionName,
+                };
+            })
+            .filter((item): item is OnboardingListItem => !!item);
         const noneAccountingOption: OnboardingListItem = {
             keyForList: null,
             text: translate('onboarding.accounting.noneOfAbove'),
@@ -115,10 +119,10 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding
             <Button
                 success
                 large
-                text={translate('common.confirm')}
+                text={translate('common.continue')}
                 onPress={() => {
                     if (userReportedIntegration === undefined) {
-                        setError(translate('onboarding.purpose.errorSelection'));
+                        setError(translate('onboarding.errorSelection'));
                         return;
                     }
 
@@ -180,7 +184,6 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding
                 shouldShowTooltips={false}
                 listItemWrapperStyle={onboardingIsMediumOrLargerScreenWidth ? [styles.pl8, styles.pr8] : []}
             />
-            {shouldUseNarrowLayout && <OfflineIndicator />}
         </ScreenWrapper>
     );
 }

src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx

@@ -4,7 +4,6 @@ import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import OfflineIndicator from '@components/OfflineIndicator';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
@@ -30,7 +29,7 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE
     const {translate} = useLocalize();
     const [onboardingCompanySize] = useOnyx(ONYXKEYS.ONBOARDING_COMPANY_SIZE);
     const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED);
-    const {onboardingIsMediumOrLargerScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
+    const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
     const [selectedCompanySize, setSelectedCompanySize] = useState<OnboardingCompanySizeType | null | undefined>(onboardingCompanySize);
     const [error, setError] = useState('');
 
@@ -56,10 +55,10 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE
             <Button
                 success
                 large
-                text={translate('common.confirm')}
+                text={translate('common.continue')}
                 onPress={() => {
                     if (!selectedCompanySize) {
-                        setError(translate('onboarding.purpose.errorSelection'));
+                        setError(translate('onboarding.errorSelection'));
                         return;
                     }
                     Welcome.setOnboardingCompanySize(selectedCompanySize);
@@ -82,9 +81,7 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE
                 onBackButtonPress={OnboardingFlow.goBack}
             />
             <View style={[onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
-                <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb5]}>
-                    <Text style={[styles.textHeadlineH1]}>{translate('onboarding.employees.title')}</Text>
-                </View>
+                <Text style={[styles.textHeadlineH1, styles.mb5]}>{translate('onboarding.employees.title')}</Text>
             </View>
             <SelectionList
                 sections={[{data: companySizeOptions}]}
@@ -98,7 +95,6 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE
                 footerContent={footerContent}
                 listItemWrapperStyle={onboardingIsMediumOrLargerScreenWidth ? [styles.pl8, styles.pr8] : []}
             />
-            {shouldUseNarrowLayout && <OfflineIndicator />}
         </ScreenWrapper>
     );
 }

src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

@@ -88,7 +88,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
     const isFocused = useIsFocused();
 
     const handleOuterClick = useCallback(() => {
-        Welcome.setOnboardingErrorMessage(translate('onboarding.purpose.errorSelection'));
+        Welcome.setOnboardingErrorMessage(translate('onboarding.errorSelection'));
     }, [translate]);
 
     const onboardingLocalRef = useRef<TOnboardingRef>(null);