Switch onboarding accounting step to a tile grid and add missing integrations

src/CONST/index.ts

@@ -103,9 +103,12 @@ const chatTypes = {
 
 const ONBOARDING_ACCOUNTING_MAPPING = {
     quickbooksOnline: 'QuickBooks Online',
+    intuitEnterpriseSuite: 'Intuit Enterprise Suite',
     xero: 'Xero',
     netsuite: 'NetSuite',
     intacct: 'Sage Intacct',
+    financialforce: 'Certinia',
+    rillet: 'Rillet',
     quickbooksDesktop: 'QuickBooks Desktop',
     sap: 'SAP',
     oracle: 'Oracle',

src/languages/de.ts

@@ -3346,8 +3346,7 @@ ${amount} für ${merchant} – ${date}`,
         },
         accounting: {
             title: 'Verwendest du eine Buchhaltungssoftware?',
-            none: 'Keine',
-            otherAccountingSoftware: 'Deine Buchhaltungssoftware',
+            otherAccountingSoftware: 'Name der Software',
         },
         interestedFeatures: {
             title: 'An welchen Funktionen bist du interessiert?',

src/languages/el.ts

@@ -3399,8 +3399,7 @@ ${amount} για ${merchant} - ${date}`,
         },
         accounting: {
             title: 'Χρησιμοποιείτε κάποιο λογιστικό λογισμικό;',
-            none: 'Κανένα',
-            otherAccountingSoftware: 'Το λογιστικό σας λογισμικό',
+            otherAccountingSoftware: 'Όνομα λογισμικού',
         },
         interestedFeatures: {
             title: 'Σε ποιες δυνατότητες ενδιαφέρεστε;',

src/languages/en.ts

@@ -3440,8 +3440,7 @@ const translations = {
         },
         accounting: {
             title: 'Do you use any accounting software?',
-            none: 'None',
-            otherAccountingSoftware: 'Your accounting software',
+            otherAccountingSoftware: 'Name of software',
         },
         interestedFeatures: {
             title: 'What features are you interested in?',

src/languages/es.ts

@@ -3254,8 +3254,7 @@ ${amount} para ${merchant} - ${date}`,
         },
         accounting: {
             title: '¿Utilizas algún software de contabilidad?',
-            none: 'Ninguno',
-            otherAccountingSoftware: 'Tu software de contabilidad',
+            otherAccountingSoftware: 'Nombre del software',
         },
         interestedFeatures: {
             title: '¿Qué funciones te interesan?',

src/languages/fr.ts

@@ -3354,8 +3354,7 @@ ${amount} pour ${merchant} - ${date}`,
         },
         accounting: {
             title: 'Utilisez-vous un logiciel de comptabilité ?',
-            none: 'Aucun',
-            otherAccountingSoftware: 'Votre logiciel de comptabilité',
+            otherAccountingSoftware: 'Nom du logiciel',
         },
         interestedFeatures: {
             title: 'Quelles fonctionnalités vous intéressent ?',

src/languages/it.ts

@@ -3334,8 +3334,7 @@ ${amount} per ${merchant} - ${date}`,
         },
         accounting: {
             title: 'Usi un software di contabilità?',
-            none: 'Nessuno',
-            otherAccountingSoftware: 'Il tuo software di contabilità',
+            otherAccountingSoftware: 'Nome del software',
         },
         interestedFeatures: {
             title: 'A quali funzionalità sei interessato?',

src/languages/ja.ts

@@ -3306,8 +3306,7 @@ ${date} の ${merchant} への ${amount}`,
         },
         accounting: {
             title: '会計ソフトを利用していますか？',
-            none: 'なし',
-            otherAccountingSoftware: 'ご利用の会計ソフト',
+            otherAccountingSoftware: 'ソフトウェア名',
         },
         interestedFeatures: {
             title: 'どの機能にご興味がありますか？',

src/languages/nl.ts

@@ -3336,8 +3336,7 @@ ${amount} voor ${merchant} - ${date}`,
         },
         accounting: {
             title: 'Gebruikt u een boekhoudprogramma?',
-            none: 'Geen',
-            otherAccountingSoftware: 'Je boekhoudsoftware',
+            otherAccountingSoftware: 'Naam van de software',
         },
         interestedFeatures: {
             title: 'In welke functies ben je geïnteresseerd?',

src/languages/pl.ts

@@ -3366,8 +3366,7 @@ ${amount} dla ${merchant} - ${date}`,
         },
         accounting: {
             title: 'Czy korzystasz z jakiegoś oprogramowania księgowego?',
-            none: 'Brak',
-            otherAccountingSoftware: 'Twoje oprogramowanie księgowe',
+            otherAccountingSoftware: 'Nazwa oprogramowania',
         },
         interestedFeatures: {
             title: 'Jakie funkcje Cię interesują?',

src/languages/pt-BR.ts

@@ -3325,8 +3325,7 @@ ${amount} para ${merchant} - ${date}`,
         },
         accounting: {
             title: 'Você usa algum software de contabilidade?',
-            none: 'Nenhum',
-            otherAccountingSoftware: 'Seu software de contabilidade',
+            otherAccountingSoftware: 'Nome do software',
         },
         interestedFeatures: {
             title: 'Em quais recursos você tem interesse?',

src/languages/zh-hans.ts

@@ -3223,8 +3223,7 @@ ${amount}，商户：${merchant} - 日期：${date}`,
         },
         accounting: {
             title: '你是否使用任何会计软件？',
-            none: '无',
-            otherAccountingSoftware: '你的会计软件',
+            otherAccountingSoftware: '软件名称',
         },
         interestedFeatures: {
             title: '你对哪些功能感兴趣？',

src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

@@ -6,7 +6,7 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import Icon from '@components/Icon';
 import OnboardingHeader from '@components/OnboardingHeader';
 import {PressableWithoutFeedback} from '@components/Pressable';
-import RadioButtonWithLabel from '@components/RadioButtonWithLabel';
+import RadioButton from '@components/RadioButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import type {ListItem} from '@components/SelectionList/types';
@@ -15,12 +15,11 @@ import TextInput from '@components/TextInput';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 
 import useCompleteOnboarding from '@hooks/useCompleteOnboarding';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import {setOnboardingAccountingEnabled, setOnboardingAdminsChatReportID, setOnboardingPolicyID, setOnboardingUserReportedIntegration} from '@libs/actions/Welcome';
@@ -47,19 +46,37 @@ import {View} from 'react-native';
 import type {BaseOnboardingAccountingProps} from './types';
 
 type Integration = {
-    key: keyof typeof CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY;
-    iconName: 'QBOCircle' | 'QBDSquare' | 'XeroCircle' | 'NetSuiteSquare' | 'IntacctSquare' | 'SapSquare' | 'OracleSquare' | 'MicrosoftDynamicsSquare';
+    key: keyof typeof CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY | typeof CONST.POLICY.CONNECTIONS.ACCOUNTING_INTEGRATION_ALIASES.INTUIT_ENTERPRISE_SUITE;
+    iconName:
+        | 'QBOCircle'
+        | 'IntuitSquare'
+        | 'QBDSquare'
+        | 'XeroCircle'
+        | 'NetSuiteSquare'
+        | 'IntacctSquare'
+        | 'CertiniaSquare'
+        | 'RilletSquare'
+        | 'SapSquare'
+        | 'OracleSquare'
+        | 'MicrosoftDynamicsSquare';
     translationKey: TranslationPaths;
 };
 
 type AccountingOptionKey = Integration['key'] | 'other';
 
+// Ordered to match the design mocks, which lay the tiles out row by row in three columns on wide layouts and two on
+// narrow ones. DualEntry and Campfire are connections we support but deliberately do not offer here yet.
 const integrations: Integration[] = [
     {
         key: 'quickbooksOnline',
         iconName: 'QBOCircle',
         translationKey: 'workspace.accounting.qbo',
     },
+    {
+        key: CONST.POLICY.CONNECTIONS.ACCOUNTING_INTEGRATION_ALIASES.INTUIT_ENTERPRISE_SUITE,
+        iconName: 'IntuitSquare',
+        translationKey: 'workspace.accounting.intuitEnterpriseSuite',
+    },
     {
         key: 'quickbooksDesktop',
         iconName: 'QBDSquare',
@@ -80,6 +97,17 @@ const integrations: Integration[] = [
         iconName: 'IntacctSquare',
         translationKey: 'workspace.accounting.intacct',
     },
+    {
+        key: 'financialforce',
+        iconName: 'CertiniaSquare',
+        // Certinia has no `workspace.accounting` entry, but its connection page already translates the brand name.
+        translationKey: 'workspace.certinia.title',
+    },
+    {
+        key: 'rillet',
+        iconName: 'RilletSquare',
+        translationKey: 'workspace.accounting.rillet',
+    },
     {
         key: 'sap',
         iconName: 'SapSquare',
@@ -107,20 +135,22 @@ type OnboardingListItem = ListItem & {
 
 function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccountingProps) {
     const styles = useThemeStyles();
-    const theme = useTheme();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons([
-        'Connect',
         'QBOCircle',
+        'IntuitSquare',
         'QBDSquare',
         'XeroCircle',
         'NetSuiteSquare',
         'IntacctSquare',
+        'CertiniaSquare',
+        'RilletSquare',
         'SapSquare',
         'OracleSquare',
         'MicrosoftDynamicsSquare',
     ]);
+    const illustrations = useMemoizedLazyIllustrations(['Pencil']);
     // We need to use isSmallScreenWidth, see navigateAfterOnboarding function comment
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth, isInLandscapeMode} = useResponsiveLayout();
@@ -167,7 +197,7 @@ function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccount
                     src={icon}
                     width={variables.iconSizeExtraLarge}
                     height={variables.iconSizeExtraLarge}
-                    additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.DEFAULT, CONST.AVATAR_SHAPE.CIRCLE), styles.mr3]}
+                    additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.DEFAULT, CONST.AVATAR_SHAPE.CIRCLE)]}
                 />
             ),
             isSelected: selectedIntegration === integration.key,
@@ -179,11 +209,9 @@ function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccount
         text: translate('workspace.accounting.other'),
         leftElement: (
             <Icon
-                src={expensifyIcons.Connect}
-                width={variables.iconSizeNormal}
-                height={variables.iconSizeNormal}
-                fill={theme.icon}
-                additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.DEFAULT, CONST.AVATAR_SHAPE.CIRCLE), styles.mr3, styles.onboardingSmallIcon]}
+                src={illustrations.Pencil}
+                width={variables.iconSizeExtraLarge}
+                height={variables.iconSizeExtraLarge}
             />
         ),
         isSelected: isOtherSelected,
@@ -242,22 +270,24 @@ function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccount
                 sentryLabel={CONST.SENTRY_LABEL.ONBOARDING.ACCOUNTING_SELECT_INTEGRATION}
                 accessible={false}
                 hoverStyle={styles.hoveredComponentBG}
-                style={[styles.onboardingAccountingItem, isSmallScreenWidth && styles.flexBasis100]}
+                style={[
+                    styles.onboardingAccountingItem,
+                    isSmallScreenWidth ? styles.onboardingAccountingItemNarrow : styles.onboardingAccountingItemWide,
+                    !!item.isSelected && styles.onboardingAccountingItemSelected,
+                ]}
             >
-                <RadioButtonWithLabel
+                {/* Square like a checkbox to match the mocks, but announced as a radio because only one option can be picked. */}
+                <RadioButton
                     isChecked={!!item.isSelected}
                     onPress={() => handleIntegrationSelect(item.keyForList)}
-                    accessibilityLabel={item.text}
-                    style={[styles.flexRowReverse]}
-                    wrapperStyle={[styles.ml0]}
-                    labelElement={
-                        <View style={[styles.alignItemsCenter, styles.flexRow]}>
-                            {item.leftElement}
-                            <Text style={styles.textStrong}>{item.text}</Text>
-                        </View>
-                    }
-                    shouldBlendOpacity
+                    accessibilityLabel={item.text ?? ''}
+                    containerBorderRadius={variables.componentBorderRadiusSmall}
+                    style={styles.onboardingAccountingItemRadioButton}
                 />
+                <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.flex1]}>
+                    {item.leftElement}
+                    <Text style={[styles.textStrong, styles.textAlignCenter, styles.mt2]}>{item.text}</Text>
+                </View>
             </PressableWithoutFeedback>
         );
     }
@@ -310,16 +340,7 @@ function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccount
                 onContentSizeChange={handleContentSizeChange}
                 keyboardShouldPersistTaps="handled"
             >
-                <View style={[styles.flexRow, styles.flexWrap, styles.gap3, styles.mb3]}>
-                    {accountingOptions.map(renderOption)}
-                    {/* Keep Other from expanding across the empty second column on wide layouts. */}
-                    {!isSmallScreenWidth && (
-                        <View
-                            testID="onboarding-accounting-wide-layout-spacer"
-                            style={[styles.onboardingAccountingItem, styles.bgTransparent, styles.p0]}
-                        />
-                    )}
-                </View>
+                <View style={[styles.flexRow, styles.flexWrap, styles.gap3, styles.mb3]}>{accountingOptions.map(renderOption)}</View>
                 {isOtherSelected && (
                     <TextInput
                         ref={otherAccountingSoftwareInputRef}

src/styles/index.ts

@@ -5138,10 +5138,6 @@ const staticStyles = (theme: ThemeColors) =>
             backgroundColor: theme.highlightBG,
         },
 
-        onboardingSmallIcon: {
-            padding: 10,
-        },
-
         sidebarStatusAvatarContainer: {
             height: variables.avatarSizeMedium,
             width: variables.avatarSizeMedium,
@@ -5681,8 +5677,28 @@ const staticStyles = (theme: ThemeColors) =>
             paddingVertical: 20,
             flexGrow: 1,
             flexShrink: 1,
+            minHeight: 144,
+        },
 
-            flexBasis: '35%',
+        // The basis and maxWidth handle the gap between columns and keep items aligned when the scrollbar appears
+        onboardingAccountingItemWide: {
+            flexBasis: '32%',
+            maxWidth: '32%',
+        },
+
+        onboardingAccountingItemNarrow: {
+            flexBasis: '48.5%',
+            maxWidth: '48.5%',
+        },
+
+        onboardingAccountingItemSelected: {
+            backgroundColor: theme.reactionActiveBackground,
+        },
+
+        onboardingAccountingItemRadioButton: {
+            position: 'absolute',
+            top: 16,
+            left: 16,
         },
 
         onboardingInterestedFeaturesItem: {