Add XeroChartOfAccountsPage

src/CONST.ts

@@ -1299,6 +1299,7 @@ const CONST = {
     XERO_CONFIG: {
         AUTO_SYNC: 'autoSync',
         SYNC: 'sync',
+        ENABLE_NEW_CATEGORIES: 'enableNewCategories',
         EXPORT: 'export',
         IMPORT_CUSTOMERS: 'importCustomers',
         IMPORT_TAX_RATES: 'importTaxRates',

src/ROUTES.ts

@@ -776,6 +776,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/accounting/xero/import',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/import` as const,
     },
+    POLICY_ACCOUNTING_XERO_CHART_OF_ACCOUNTS: {
+        route: 'settings/workspaces/:policyID/accounting/xero/import/accounts',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/import/accounts` as const,
+    },
     POLICY_ACCOUNTING_XERO_ORGANIZATION: {
         route: 'settings/workspaces/:policyID/accounting/xero/organization/:currentOrganizationID',
         getRoute: (policyID: string, currentOrganizationID: string) => `settings/workspaces/${policyID}/accounting/xero/organization/${currentOrganizationID}` as const,

src/SCREENS.ts

@@ -242,6 +242,7 @@ const SCREENS = {
             QUICKBOOKS_ONLINE_INVOICE_ACCOUNT_SELECTOR: 'Policy_Accounting_Quickbooks_Online_Invoice_Account_Selector',
             XERO_IMPORT: 'Policy_Accounting_Xero_Import',
             XERO_ORGANIZATION: 'Policy_Accounting_Xero_Customers',
+            XERO_CHART_OF_ACCOUNTS: 'Policy_Accounting_Xero_Import_Chart_Of_Accounts',
             XERO_CUSTOMER: 'Policy_Acounting_Xero_Import_Customer',
             XERO_TAXES: 'Policy_Accounting_Xero_Taxes',
             XERO_TRACKING_CATEGORIES: 'Policy_Accounting_Xero_Tracking_Categories',

src/languages/en.ts

@@ -1883,6 +1883,7 @@ export default {
             travel: 'Travel',
             members: 'Members',
             accounting: 'Accounting',
+            displayedAs: 'Displayed as',
             plan: 'Plan',
             profile: 'Profile',
             bankAccount: 'Bank account',
@@ -1913,7 +1914,6 @@ export default {
             classes: 'Classes',
             locations: 'Locations',
             customers: 'Customers/Projects',
-            displayedAs: 'Displayed as',
             accountsDescription: 'When connected to Quickbooks Online, chart of accounts are always imported to Expensify as categories.',
             accountsSwitchTitle: 'Below you can choose to have any new account imported as an enabled or disabled category by default.',
             accountsSwitchDescription: 'Enabled categories are available for members to select when creating their expenses.',
@@ -2021,6 +2021,9 @@ export default {
             organization: 'Xero organization',
             organizationDescription: 'Select the organization in Xero you are importing data from.',
             importDescription: 'Choose which coding configurations are imported from Xero to Expensify.',
+            accountsDescription: 'When connected to Xero, chart of accounts are always imported to Expensify as categories.',
+            accountsSwitchTitle: 'Below you can choose to have any new account imported as an enabled or disabled category by default.',
+            accountsSwitchDescription: 'Enabled categories are available for members to select when creating their expenses.',
             trackingCategories: 'Tracking categories',
             trackingCategoriesDescription: 'Choose whether to import tracking categories and see where they are displayed.',
             mapXeroCostCentersTo: 'Map Xero cost centers to',

src/languages/es.ts

@@ -1910,6 +1910,7 @@ export default {
             plan: 'Plan',
             profile: 'Perfil',
             bankAccount: 'Cuenta bancaria',
+            displayedAs: 'Mostrado como',
             connectBankAccount: 'Conectar cuenta bancaria',
             testTransactions: 'Transacciones de prueba',
             issueAndManageCards: 'Emitir y gestionar tarjetas',
@@ -1937,7 +1938,6 @@ export default {
             classes: 'Clases',
             locations: 'Lugares',
             customers: 'Clientes/Proyectos',
-            displayedAs: 'Mostrado como',
             accountsDescription: 'Cuando estás conectado a Quickbooks Online, los planes de cuentas siempre se importan a Expensify como categorías.',
             accountsSwitchTitle: 'Elige abajo si las categorías importadas serán activadas o desactivadas por defecto.',
             accountsSwitchDescription: 'Las categorías activas estarán disponibles para ser escogidas cuando se crea un gasto.',
@@ -2053,6 +2053,9 @@ export default {
             organization: 'Organización Xero',
             organizationDescription: 'Seleccione la organización en Xero desde la que está importando los datos.',
             importDescription: 'Elija qué configuraciones de codificación se importan de Xero a Expensify.',
+            accountsDescription: 'Cuando estás conectado a Xero, los planes de cuentas siempre se importan a Expensify como categorías.',
+            accountsSwitchTitle: 'Elige abajo si las categorías importadas serán activadas o desactivadas por defecto.',
+            accountsSwitchDescription: 'Las categorías activas estarán disponibles para ser escogidas cuando se crea un gasto.',
             trackingCategories: 'Categorías de seguimiento',
             trackingCategoriesDescription: 'Elige si deseas importar categorías de seguimiento y ver dónde se muestran.',
             mapXeroCostCentersTo: 'Asignar centros de coste de Xero a',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -303,6 +303,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
 
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_IMPORT]: () => require('../../../../pages/workspace/accounting/xero/XeroImportPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION]: () => require('../../../../pages/workspace/accounting/xero/XeroOrganizationConfigurationPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.ACCOUNTING.XERO_CHART_OF_ACCOUNTS]: () => require('../../../../pages/workspace/accounting/xero/import/XeroChartOfAccountsPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_CUSTOMER]: () => require('../../../../pages/workspace/accounting/xero/import/XeroCustomerConfigurationPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES]: () => require('../../../../pages/workspace/accounting/xero/XeroTaxesConfigurationPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_TRACKING_CATEGORIES]: () =>

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -41,6 +41,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.ACCOUNTING.QUICKBOOKS_ONLINE_ACCOUNT_SELECTOR,
         SCREENS.WORKSPACE.ACCOUNTING.QUICKBOOKS_ONLINE_INVOICE_ACCOUNT_SELECTOR,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_IMPORT,
+        SCREENS.WORKSPACE.ACCOUNTING.XERO_CHART_OF_ACCOUNTS,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_CUSTOMER,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES,

src/libs/Navigation/linkingConfig/config.ts

@@ -328,6 +328,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_INVOICE_ACCOUNT_SELECTOR.route,
                         },
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_IMPORT]: {path: ROUTES.POLICY_ACCOUNTING_XERO_IMPORT.route},
+                        [SCREENS.WORKSPACE.ACCOUNTING.XERO_CHART_OF_ACCOUNTS]: {path: ROUTES.POLICY_ACCOUNTING_XERO_CHART_OF_ACCOUNTS.route},
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION]: {path: ROUTES.POLICY_ACCOUNTING_XERO_ORGANIZATION.route},
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_TRACKING_CATEGORIES]: {path: ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES.route},
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_COST_CENTERS]: {path: ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES_MAP_COST_CENTERS.route},

src/libs/Navigation/types.ts

@@ -314,6 +314,9 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_IMPORT]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.ACCOUNTING.XERO_CHART_OF_ACCOUNTS]: {
+        policyID: string;
+    };
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_CUSTOMER]: {
         policyID: string;
     };

src/pages/workspace/accounting/qbo/import/QuickbooksChartOfAccountsPage.tsx

@@ -45,7 +45,7 @@ function QuickbooksChartOfAccountsPage({policy}: WithPolicyProps) {
             <MenuItemWithTopDescription
                 interactive={false}
                 title={translate('workspace.common.categories')}
-                description={translate('workspace.qbo.displayedAs')}
+                description={translate('workspace.common.displayedAs')}
                 wrapperStyle={styles.sectionMenuItemTopDescription}
             />
             <Text style={styles.pv5}>{translate('workspace.qbo.accountsSwitchTitle')}</Text>

src/pages/workspace/accounting/qbo/import/QuickbooksClassesPage.tsx

@@ -64,7 +64,7 @@ function QuickbooksClassesPage({policy}: WithPolicyProps) {
                             <MenuItemWithTopDescription
                                 interactive={false}
                                 title={isReportFieldsSelected ? translate('workspace.common.reportFields') : translate('workspace.common.tags')}
-                                description={translate('workspace.qbo.displayedAs')}
+                                description={translate('workspace.common.displayedAs')}
                                 wrapperStyle={styles.sectionMenuItemTopDescription}
                             />
                         </OfflineWithFeedback>

src/pages/workspace/accounting/qbo/import/QuickbooksCustomersPage.tsx

@@ -63,7 +63,7 @@ function QuickbooksCustomersPage({policy}: WithPolicyProps) {
                             <MenuItemWithTopDescription
                                 interactive={false}
                                 title={isReportFieldsSelected ? translate('workspace.common.reportFields') : translate('workspace.common.tags')}
-                                description={translate('workspace.qbo.displayedAs')}
+                                description={translate('workspace.common.displayedAs')}
                                 wrapperStyle={styles.sectionMenuItemTopDescription}
                             />
                         </OfflineWithFeedback>

src/pages/workspace/accounting/qbo/import/QuickbooksLocationsPage.tsx

@@ -64,7 +64,7 @@ function QuickbooksLocationsPage({policy}: WithPolicyProps) {
                             <MenuItemWithTopDescription
                                 interactive={false}
                                 title={isReportFieldsSelected ? translate('workspace.common.reportFields') : translate('workspace.common.tags')}
-                                description={translate('workspace.qbo.displayedAs')}
+                                description={translate('workspace.common.displayedAs')}
                                 wrapperStyle={styles.sectionMenuItemTopDescription}
                             />
                         </OfflineWithFeedback>

src/pages/workspace/accounting/xero/XeroImportPage.tsx

@@ -29,9 +29,9 @@ function XeroImportPage({policy}: WithPolicyProps) {
         () => [
             {
                 description: translate('workspace.accounting.accounts'),
-                action: () => {},
+                action: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_CHART_OF_ACCOUNTS.getRoute(policyID)),
                 hasError: !!policy?.errors?.enableNewCategories,
-                title: translate('workspace.accounting.imported'),
+                title: translate('workspace.accounting.importAsCategory'),
                 pendingAction: pendingFields?.enableNewCategories,
             },
             {

src/pages/workspace/accounting/xero/import/XeroChartOfAccountsPage.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {View} from 'react-native';
+import ConnectionLayout from '@components/ConnectionLayout';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import Switch from '@components/Switch';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as Connections from '@libs/actions/connections';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import withPolicyConnections from '@pages/workspace/withPolicyConnections';
+import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
+import variables from '@styles/variables';
+import * as Policy from '@userActions/Policy';
+import CONST from '@src/CONST';
+
+function XeroChartOfAccountsPage({policy}: WithPolicyProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const policyID = policy?.id ?? '';
+    const xeroConfig = policy?.connections?.xero?.config;
+    const {enableNewCategories, pendingFields} = xeroConfig ?? {};
+
+    return (
+        <ConnectionLayout
+            displayName={XeroChartOfAccountsPage.displayName}
+            headerTitle="workspace.accounting.accounts"
+            title="workspace.xero.accountsDescription"
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
+            contentContainerStyle={[styles.pb2, styles.ph5]}
+        >
+            <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                <View style={styles.flex1}>
+                    <Text fontSize={variables.fontSizeNormal}>{translate('workspace.accounting.import')}</Text>
+                </View>
+                <View style={[styles.flex1, styles.alignItemsEnd, styles.pl3]}>
+                    <Switch
+                        accessibilityLabel={translate('workspace.accounting.accounts')}
+                        isOn
+                        disabled
+                        onToggle={() => {}}
+                    />
+                </View>
+            </View>
+            <MenuItemWithTopDescription
+                interactive={false}
+                title={translate('workspace.common.categories')}
+                description={translate('workspace.common.displayedAs')}
+                wrapperStyle={styles.sectionMenuItemTopDescription}
+            />
+            <Text style={styles.pv5}>{translate('workspace.xero.accountsSwitchTitle')}</Text>
+            <ToggleSettingOptionRow
+                title={translate('workspace.common.enabled')}
+                subtitle={translate('workspace.xero.accountsSwitchDescription')}
+                shouldPlaceSubtitleBelowSwitch
+                wrapperStyle={styles.mv3}
+                isActive={!!enableNewCategories}
+                onToggle={() => Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.ENABLE_NEW_CATEGORIES, !enableNewCategories)}
+                pendingAction={pendingFields?.enableNewCategories}
+                errors={ErrorUtils.getLatestErrorField(xeroConfig ?? {}, CONST.XERO_CONFIG.ENABLE_NEW_CATEGORIES)}
+                onCloseError={() => Policy.clearXeroErrorField(policyID, CONST.XERO_CONFIG.ENABLE_NEW_CATEGORIES)}
+            />
+        </ConnectionLayout>
+    );
+}
+
+XeroChartOfAccountsPage.displayName = 'XeroChartOfAccountsPage';
+
+export default withPolicyConnections(XeroChartOfAccountsPage);

src/pages/workspace/accounting/xero/import/XeroCustomerConfigurationPage.tsx

@@ -51,7 +51,7 @@ function XeroCustomerConfigurationPage({policy}: WithPolicyProps) {
                         <MenuItemWithTopDescription
                             interactive={false}
                             title={translate('workspace.common.tags')}
-                            description={translate('workspace.qbo.displayedAs')}
+                            description={translate('workspace.common.displayedAs')}
                             wrapperStyle={styles.sectionMenuItemTopDescription}
                         />
                     </OfflineWithFeedback>