[Wave Collect][Xero] Import tracking categories

src/CONST.ts

@@ -1270,6 +1270,17 @@ const CONST = {
     XERO_CONFIG: {
         IMPORT_CUSTOMERS: 'importCustomers',
         IMPORT_TAX_RATES: 'importTaxRates',
+        IMPORT_TRACK_CATEGORIES: 'importTrackingCategories',
+        MAPPINGS: 'mappings',
+        TRACK_CATEGORY_PREFIX: 'trackingCategory_',
+        TRACK_CATEGORY_FIELDS: {
+            COST_CENTERS: 'cost centers',
+            REGION: 'region',
+        },
+        TRACK_CATEGORY_OPTIONS: {
+            DEFAULT: 'DEFAULT',
+            TAG: 'TAG'
+        }
     },
 
     QUICKBOOKS_OUT_OF_POCKET_EXPENSE_ACCOUNT_TYPE: {

src/ROUTES.ts

@@ -774,6 +774,18 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/accounting/xero/organization/:currentOrganizationID',
         getRoute: (policyID: string, currentOrganizationID: string) => `settings/workspaces/${policyID}/accounting/xero/organization/${currentOrganizationID}` as const,
     },
+    POLICY_ACCOUNTING_XERO_TRACK_CATEGORIES: {
+        route: 'settings/workspaces/:policyID/accounting/xero/import/trackCategories',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/import/trackCategories` as const,
+    },
+    POLICY_ACCOUNTING_XERO_MAP_COST_CENTERS: {
+        route: 'settings/workspaces/:policyID/accounting/xero/import/trackCategories/mapCostCenters',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/import/trackCategories/mapCostCenters` as const,
+    },
+    POLICY_ACCOUNTING_XERO_MAP_REGIONS: {
+        route: 'settings/workspaces/:policyID/accounting/xero/import/trackCategories/mapRegions',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/import/trackCategories/mapRegions` as const,
+    },
     POLICY_ACCOUNTING_XERO_CUSTOMER: {
         route: '/settings/workspaces/:policyID/accounting/xero/import/customers',
         getRoute: (policyID: string) => `/settings/workspaces/${policyID}/accounting/xero/import/customers` as const,

src/SCREENS.ts

@@ -238,6 +238,9 @@ const SCREENS = {
             XERO_ORGANIZATION: 'Policy_Accounting_Xero_Customers',
             XERO_CUSTOMER: 'Policy_Acounting_Xero_Import_Customer',
             XERO_TAXES: 'Policy_Accounting_Xero_Taxes',
+            XERO_TRACK_CATEGORIES: 'Policy_Accounting_Xero_Track_Categories',
+            XERO_MAP_COST_CENTERS: 'Policy_Accounting_Xero_Map_Cost_Centers',
+            XERO_MAP_REGIONS: 'Policy_Accounting_Xero_Map_Regions',
         },
         INITIAL: 'Workspace_Initial',
         PROFILE: 'Workspace_Profile',

src/components/ConnectToXeroButton/index.native.tsx

@@ -11,7 +11,7 @@ import Modal from '@components/Modal';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {removePolicyConnection} from '@libs/actions/connections';
-import getXeroSetupLink from '@libs/actions/connections/ConnectToXero';
+import {getXeroSetupLink} from '@libs/actions/connections/ConnectToXero';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Session} from '@src/types/onyx';

src/components/ConnectToXeroButton/index.tsx

@@ -5,7 +5,7 @@ import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {removePolicyConnection} from '@libs/actions/connections';
-import getXeroSetupLink from '@libs/actions/connections/ConnectToXero';
+import {getXeroSetupLink} from '@libs/actions/connections/ConnectToXero';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import type {ConnectToXeroButtonProps} from './types';

src/languages/en.ts

@@ -1999,10 +1999,19 @@ export default {
             organizationDescription: 'Select the organization in Xero you are importing data from.',
             importDescription: 'Choose which coding configurations are imported from Xero to Expensify.',
             trackingCategories: 'Tracking categories',
+            trackingCategoriesDescription: 'Choose whether to import tracking categories and see where they are displayed.',
+            mapXeroCostCentersTo: 'Map Xero cost centers to',
+            mapXeroRegionsTo: 'Map Xero regions to',
+            mapXeroCostCentersToDescription: 'Choose where to map cost centers to when exporting to Xero.',
+            mapXeroRegionsToDescription: 'Choose where to map employee regions when exporting expense reports to Xero.',
             customers: 'Re-bill customers',
             customersDescription: 'Import customer contacts. Billable expenses need tags for export. Expenses will carry the customer information to Xero for sales invoices.',
             taxesDescription: 'Choose whether to import tax rates and tax defaults from your accounting integration.',
             notImported: 'Not imported',
+            trackingCategoriesOptions: {
+                default: 'Xero contact default',
+                tag: 'Tags'
+            },
         },
         type: {
             free: 'Free',

src/languages/es.ts

@@ -2031,11 +2031,20 @@ export default {
             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.',
             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',
+            mapXeroRegionsTo: 'Asignar regiones de Xero a',
+            mapXeroCostCentersToDescription: 'Elige dónde mapear los centros de coste al exportar a Xero.',
+            mapXeroRegionsToDescription: 'Elige dónde asignar las regiones de los empleados al exportar informes de gastos a Xero.',
             customers: 'Volver a facturar a los clientes',
             customersDescription:
                 'Importar contactos de clientes. Los gastos facturables necesitan etiquetas para la exportación. Los gastos llevarán la información del cliente a Xero para las facturas de ventas.',
             taxesDescription: 'Elige si quires importar las tasas de impuestos y  los impuestos por defecto de tu integración de contaduría.',
             notImported: 'No importado',
+            trackingCategoriesOptions: {
+                default: 'Contacto de Xero por defecto',
+                tag: 'Etiquetas'
+            },
         },
         type: {
             free: 'Gratis',

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

@@ -297,6 +297,9 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION]: () => require('../../../../pages/workspace/accounting/xero/XeroOrganizationConfigurationPage').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_TRACK_CATEGORIES]: () => require('../../../../pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_COST_CENTERS]: () => require('../../../../pages/workspace/accounting/xero/XeroMapCostCentersToConfigurationPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_REGIONS]: () => require('../../../../pages/workspace/accounting/xero/XeroMapRegionsToConfigurationPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY]: () => require('../../../../pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_MONTHLY_OFFSET]: () =>
         require('../../../../pages/workspace/workflows/WorkspaceAutoReportingMonthlyOffsetPage').default as React.ComponentType,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -43,6 +43,9 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_CUSTOMER,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES,
+        SCREENS.WORKSPACE.ACCOUNTING.XERO_TRACK_CATEGORIES,
+        SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_COST_CENTERS,
+        SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_REGIONS,
     ],
     [SCREENS.WORKSPACE.TAXES]: [
         SCREENS.WORKSPACE.TAXES_SETTINGS,

src/libs/Navigation/linkingConfig/config.ts

@@ -326,6 +326,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         },
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_IMPORT]: {path: ROUTES.POLICY_ACCOUNTING_XERO_IMPORT.route},
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION]: {path: ROUTES.POLICY_ACCOUNTING_XERO_ORGANIZATION.route},
+                        [SCREENS.WORKSPACE.ACCOUNTING.XERO_TRACK_CATEGORIES]: {path: ROUTES.POLICY_ACCOUNTING_XERO_TRACK_CATEGORIES.route},
+                        [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_COST_CENTERS]: {path: ROUTES.POLICY_ACCOUNTING_XERO_MAP_COST_CENTERS.route},
+                        [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_REGIONS]: {path: ROUTES.POLICY_ACCOUNTING_XERO_MAP_REGIONS.route},
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_CUSTOMER]: {path: ROUTES.POLICY_ACCOUNTING_XERO_CUSTOMER.route},
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES]: {path: ROUTES.POLICY_ACCOUNTING_XERO_TAXES.route},
                         [SCREENS.WORKSPACE.DESCRIPTION]: {

src/libs/Navigation/types.ts

@@ -321,6 +321,9 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.ACCOUNTING.XERO_TRACK_CATEGORIES]: {
+        policyID: string;
+    };
     [SCREENS.GET_ASSISTANCE]: {
         backTo: Routes;
     };

src/libs/actions/connections/ConnectToXero.ts

@@ -1,11 +1,29 @@
 import type {ConnectPolicyToAccountingIntegrationParams} from '@libs/API/parameters';
 import {READ_COMMANDS} from '@libs/API/types';
 import {getCommandURL} from '@libs/ApiUtils';
+import CONST from '@src/CONST';
+import type {OnyxEntry} from 'react-native-onyx';
+import type * as OnyxTypes from '@src/types/onyx';
 
 const getXeroSetupLink = (policyID: string) => {
     const params: ConnectPolicyToAccountingIntegrationParams = {policyID};
     const commandURL = getCommandURL({command: READ_COMMANDS.CONNECT_POLICY_TO_XERO, shouldSkipWebProxy: true});
     return commandURL + new URLSearchParams(params).toString();
 };
 
-export default getXeroSetupLink;
+const getTrackingCategory = (policy: OnyxEntry<OnyxTypes.Policy>, key: string) => {
+    const { trackingCategories } = policy?.connections?.xero?.data ?? {};
+    const { mappings } = policy?.connections?.xero?.config ?? {};
+
+    const category = trackingCategories?.find((currentCategory) => currentCategory.name.toLowerCase() === key.toLowerCase());
+    if (!category) {
+        return undefined;
+    }
+
+    return {
+        ...category,
+        value: mappings?.[`${CONST.XERO_CONFIG.TRACK_CATEGORY_PREFIX}${category.id}`] ?? ""
+    };
+}
+
+export {getXeroSetupLink, getTrackingCategory};

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

@@ -36,7 +36,7 @@ function XeroImportPage({policy}: WithPolicyProps) {
             },
             {
                 description: translate('workspace.xero.trackingCategories'),
-                action: () => {},
+                action: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_TRACK_CATEGORIES.getRoute(policyID)),
                 hasError: !!policy?.errors?.importTrackingCategories,
                 title: importTrackingCategories ? translate('workspace.accounting.importedAsTags') : translate('workspace.xero.notImported'),
                 pendingAction: pendingFields?.importTrackingCategories,

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

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/RadioListItem';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as Connections from '@libs/actions/connections';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import withPolicyConnections from '@pages/workspace/withPolicyConnections';
+import { getTrackingCategory } from '@libs/actions/connections/ConnectToXero';
+import CONST from '@src/CONST';
+import { TranslationPaths } from '@src/languages/types';
+import Navigation from '@libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+
+function XeroMapCostCentersToConfigurationPage({policy}: WithPolicyProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const policyID = policy?.id ?? '';
+
+    const category = getTrackingCategory(policy,  CONST.XERO_CONFIG.TRACK_CATEGORY_FIELDS.COST_CENTERS);
+
+    const optionsList = useMemo(() => (
+        Object.values(CONST.XERO_CONFIG.TRACK_CATEGORY_OPTIONS).map((option) => ({
+            value: option,
+            text: translate(`workspace.xero.trackingCategoriesOptions.${option.toLowerCase()}` as TranslationPaths),
+            keyForList: option,
+            isSelected: option.toLowerCase() === category?.value?.toLowerCase()
+        }))
+    ), [policyID, translate, category]);
+
+
+    return (
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
+            policyID={policyID && category?.id ? policyID : ''}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
+        >
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
+                testID={XeroMapCostCentersToConfigurationPage.displayName}
+            >
+                <HeaderWithBackButton title={translate('workspace.xero.mapXeroCostCentersTo')} />
+                <View style={[styles.pb2, styles.ph5]}>
+                    <Text style={styles.pb5}>{translate('workspace.xero.mapXeroCostCentersToDescription')}</Text>
+                </View>
+                <SelectionList
+                        sections={[{data: optionsList}]}
+                        ListItem={RadioListItem}
+                        onSelectRow={(option) => {
+                            Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.MAPPINGS, {
+                                ...(policy?.connections?.xero?.config?.mappings ?? {}),
+                                ...(category?.id ? {[`${CONST.XERO_CONFIG.TRACK_CATEGORY_PREFIX}${category.id}`]: option.value}: {})
+                            })
+                            Navigation.goBack(ROUTES.POLICY_ACCOUNTING_XERO_TRACK_CATEGORIES.getRoute(policyID));
+                        }}
+                    />
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+XeroMapCostCentersToConfigurationPage.displayName = 'XeroMapCostCentersToConfigurationPage';
+export default withPolicyConnections(XeroMapCostCentersToConfigurationPage);

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

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/RadioListItem';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as Connections from '@libs/actions/connections';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import withPolicyConnections from '@pages/workspace/withPolicyConnections';
+import CONST from '@src/CONST';
+import { getTrackingCategory } from '@libs/actions/connections/ConnectToXero';
+import { TranslationPaths } from '@src/languages/types';
+import Navigation from '@libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+
+
+function XeroMapRegionsToConfigurationPage({policy}: WithPolicyProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const policyID = policy?.id ?? '';
+    const category = getTrackingCategory(policy,  CONST.XERO_CONFIG.TRACK_CATEGORY_FIELDS.REGION);
+
+    const optionsList = useMemo(() => (
+        Object.values(CONST.XERO_CONFIG.TRACK_CATEGORY_OPTIONS).map((option) => (
+            {
+                value: option,
+                text: translate(`workspace.xero.trackingCategoriesOptions.${option.toLowerCase()}` as TranslationPaths),
+                keyForList: option,
+                isSelected: option.toLowerCase() === category?.value?.toLowerCase()
+            }
+        ))), [policyID, translate, category]);
+
+    return (
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
+            policyID={policyID && category?.id ? policyID : ''}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
+        >
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
+                testID={XeroMapRegionsToConfigurationPage.displayName}
+            >
+                <HeaderWithBackButton title={translate('workspace.xero.mapXeroRegionsTo')} />
+                <View style={[styles.pb2, styles.ph5]}>
+                    <Text style={styles.pb5}>{translate('workspace.xero.mapXeroRegionsToDescription')}</Text>
+                </View>
+                <SelectionList
+                        sections={[{data: optionsList}]}
+                        ListItem={RadioListItem}
+                        onSelectRow={(option) => {
+                            Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.MAPPINGS, {
+                                ...(policy?.connections?.xero?.config?.mappings ?? {}),
+                                ...(category?.id ? {[`${CONST.XERO_CONFIG.TRACK_CATEGORY_PREFIX}${category.id}`]: option.value}: {})
+                            })
+                            Navigation.goBack(ROUTES.POLICY_ACCOUNTING_XERO_TRACK_CATEGORIES.getRoute(policyID));
+                        }}
+                    />
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+XeroMapRegionsToConfigurationPage.displayName = 'XeroMapRegionsToConfigurationPage';
+export default withPolicyConnections(XeroMapRegionsToConfigurationPage);