Fix tracking categories not dynamic

src/ROUTES.ts

@@ -795,13 +795,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/accounting/xero/import/tracking-categories',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/import/tracking-categories` as const,
     },
-    POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES_MAP_COST_CENTERS: {
-        route: 'settings/workspaces/:policyID/accounting/xero/import/tracking-categories/cost-centers',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/import/tracking-categories/cost-centers` as const,
-    },
-    POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES_MAP_REGION: {
-        route: 'settings/workspaces/:policyID/accounting/xero/import/tracking-categories/region',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/import/tracking-categories/region` as const,
+    POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES_MAP: {
+        route: 'settings/workspaces/:policyID/accounting/xero/import/tracking-categories/mapping/:categoryId/:categoryName',
+        getRoute: (policyID: string, categoryId: string, categoryName: string) =>
+            `settings/workspaces/${policyID}/accounting/xero/import/tracking-categories/mapping/${categoryId}/${encodeURIComponent(categoryName)}` as const,
     },
     POLICY_ACCOUNTING_XERO_CUSTOMER: {
         route: 'settings/workspaces/:policyID/accounting/xero/import/customers',

src/SCREENS.ts

@@ -244,8 +244,7 @@ const SCREENS = {
             XERO_CUSTOMER: 'Policy_Acounting_Xero_Import_Customer',
             XERO_TAXES: 'Policy_Accounting_Xero_Taxes',
             XERO_TRACKING_CATEGORIES: 'Policy_Accounting_Xero_Tracking_Categories',
-            XERO_MAP_COST_CENTERS: 'Policy_Accounting_Xero_Map_Cost_Centers',
-            XERO_MAP_REGION: 'Policy_Accounting_Xero_Map_Region',
+            XERO_MAP_TRACKING_CATEGORY: 'Policy_Accounting_Xero_Map_Tracking_Category',
             XERO_EXPORT: 'Policy_Accounting_Xero_Export',
             XERO_EXPORT_PURCHASE_BILL_DATE_SELECT: 'Policy_Accounting_Xero_Export_Purchase_Bill_Date_Select',
             XERO_ADVANCED: 'Policy_Accounting_Xero_Advanced',

src/components/ConnectionLayout.tsx

@@ -19,16 +19,16 @@ type ConnectionLayoutProps = {
     /** Used to set the testID for tests */
     displayName: string;
 
-    /** Header title for the connection */
-    headerTitle: TranslationPaths;
+    /** Header title to be translated for the connection component */
+    headerTitle?: TranslationPaths;
 
     /** The subtitle to show in the header */
     headerSubtitle?: string;
 
     /** React nodes that will be shown */
     children?: React.ReactNode;
 
-    /** Title of the connection component */
+    /** Title to be translated for the connection component */
     title?: TranslationPaths;
 
     /** The current policyID */
@@ -52,18 +52,24 @@ type ConnectionLayoutProps = {
     /** Whether to use ScrollView or not */
     shouldUseScrollView?: boolean;
 
+    /** Used for dynamic header title translation with parameters */
+    headerTitleAlreadyTranslated?: string;
+
+    /** Used for dynamic title translation with parameters */
+    titleAlreadyTranslated?: string;
+
     /** Name of the current connection */
     connectionName: ConnectionName;
 };
 
-type ConnectionLayoutContentProps = Pick<ConnectionLayoutProps, 'title' | 'titleStyle' | 'children'>;
+type ConnectionLayoutContentProps = Pick<ConnectionLayoutProps, 'title' | 'titleStyle' | 'children' | 'titleAlreadyTranslated'>;
 
-function ConnectionLayoutContent({title, titleStyle, children}: ConnectionLayoutContentProps) {
+function ConnectionLayoutContent({title, titleStyle, children, titleAlreadyTranslated}: ConnectionLayoutContentProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     return (
         <>
-            {title && <Text style={[styles.pb5, titleStyle]}>{translate(title)}</Text>}
+            {title && <Text style={[styles.pb5, titleStyle]}>{titleAlreadyTranslated ?? translate(title)}</Text>}
             {children}
         </>
     );
@@ -83,6 +89,8 @@ function ConnectionLayout({
     shouldIncludeSafeAreaPaddingBottom,
     connectionName,
     shouldUseScrollView = true,
+    headerTitleAlreadyTranslated,
+    titleAlreadyTranslated,
 }: ConnectionLayoutProps) {
     const {translate} = useLocalize();
 
@@ -94,11 +102,12 @@ function ConnectionLayout({
             <ConnectionLayoutContent
                 title={title}
                 titleStyle={titleStyle}
+                titleAlreadyTranslated={titleAlreadyTranslated}
             >
                 {children}
             </ConnectionLayoutContent>
         ),
-        [title, titleStyle, children],
+        [title, titleStyle, children, titleAlreadyTranslated],
     );
 
     return (
@@ -114,7 +123,7 @@ function ConnectionLayout({
                 testID={displayName}
             >
                 <HeaderWithBackButton
-                    title={translate(headerTitle)}
+                    title={headerTitleAlreadyTranslated ?? (headerTitle ? translate(headerTitle as TranslationPaths) : '')}
                     subtitle={headerSubtitle}
                     onBackButtonPress={() => Navigation.goBack()}
                 />

src/languages/en.ts

@@ -2042,10 +2042,8 @@ export 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',
-            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.',
+            mapTrackingCategoryTo: ({categoryName}) => `Map Xero ${categoryName} to`,
+            mapTrackingCategoryToDescription: ({categoryName}) => `Choose where to map ${categoryName} to when exporting 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.',

src/languages/es.ts

@@ -2074,10 +2074,8 @@ export default {
             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',
-            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.',
+            mapTrackingCategoryTo: ({categoryName}) => `Asignar ${categoryName} de Xero a`,
+            mapTrackingCategoryToDescription: ({categoryName}) => `Elige dónde mapear ${categoryName} al exportar 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.',

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

@@ -299,8 +299,8 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES]: () => require('../../../../pages/workspace/accounting/xero/XeroTaxesConfigurationPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_TRACKING_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_REGION]: () => require('../../../../pages/workspace/accounting/xero/XeroMapRegionsToConfigurationPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_TRACKING_CATEGORY]: () =>
+        require('../../../../pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_EXPORT]: () => require('../../../../pages/workspace/accounting/xero/export/XeroExportConfigurationPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_EXPORT_PURCHASE_BILL_DATE_SELECT]: () =>
         require('../../../../pages/workspace/accounting/xero/export/XeroPurchaseBillDateSelectPage').default as React.ComponentType,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -45,8 +45,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.ACCOUNTING.XERO_CUSTOMER,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_TRACKING_CATEGORIES,
-        SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_COST_CENTERS,
-        SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_REGION,
+        SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_TRACKING_CATEGORY,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_EXPORT,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_EXPORT_PURCHASE_BILL_DATE_SELECT,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_ADVANCED,

src/libs/Navigation/linkingConfig/config.ts

@@ -326,8 +326,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [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},
-                        [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_REGION]: {path: ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES_MAP_REGION.route},
+                        [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_TRACKING_CATEGORY]: {path: ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES_MAP.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.ACCOUNTING.XERO_EXPORT]: {path: ROUTES.POLICY_ACCOUNTING_XERO_EXPORT.route},

src/libs/Navigation/types.ts

@@ -332,11 +332,10 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_TRACKING_CATEGORIES]: {
         policyID: string;
     };
-    [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_COST_CENTERS]: {
-        policyID: string;
-    };
-    [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_REGION]: {
+    [SCREENS.WORKSPACE.ACCOUNTING.XERO_MAP_TRACKING_CATEGORY]: {
         policyID: string;
+        categoryId: string;
+        categoryName: string;
     };
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_EXPORT]: {
         policyID: string;

src/libs/actions/connections/ConnectToXero.ts

@@ -12,26 +12,18 @@ const getXeroSetupLink = (policyID: string) => {
     return commandURL + new URLSearchParams(params).toString();
 };
 
-/**
- * Fetches the category object from the xero.data.trackingCategories based on the category name.
- * This is required to get Xero category object with current value stored in the xero.config.mappings
- * @param policy
- * @param key
- * @returns Filtered category matching the category name or undefined.
- */
-const getTrackingCategory = (policy: OnyxEntry<OnyxTypes.Policy>, categoryName: string): (XeroTrackingCategory & {value: string}) | undefined => {
+const getTrackingCategories = (policy: OnyxEntry<OnyxTypes.Policy>): Array<XeroTrackingCategory & {value: string}> => {
     const {trackingCategories} = policy?.connections?.xero?.data ?? {};
     const {mappings} = policy?.connections?.xero?.config ?? {};
 
-    const category = trackingCategories?.find((currentCategory) => currentCategory.name.toLowerCase() === categoryName.toLowerCase());
-    if (!category) {
-        return undefined;
+    if (!trackingCategories) {
+        return [];
     }
 
-    return {
+    return trackingCategories.map((category) => ({
         ...category,
         value: mappings?.[`${CONST.XERO_CONFIG.TRACKING_CATEGORY_PREFIX}${category.id}`] ?? '',
-    };
+    }));
 };
 
-export {getXeroSetupLink, getTrackingCategory};
+export {getXeroSetupLink, getTrackingCategories};