From 86bbf4bcddc7238f37070dfcf72486ad9334d73b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:05:40 +0200 Subject: [PATCH 01/20] make translations dynamic for xero tracking categories --- src/languages/en.ts | 6 ++---- src/languages/es.ts | 6 ++---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 68c1d4120385..1b524c53ab91 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -2041,10 +2041,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.', diff --git a/src/languages/es.ts b/src/languages/es.ts index ef2e27275775..9eed722deb3e 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2073,10 +2073,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.', From ff704d1fd00333399aaae3bbf6ee34dba6f32716 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:06:12 +0200 Subject: [PATCH 02/20] use only one route for tracking category mapping --- src/ROUTES.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 9ffe725ebb7c..245eee116c96 100644 --- a/src/ROUTES.ts +++ b/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}/${categoryName}` as const, }, POLICY_ACCOUNTING_XERO_CUSTOMER: { route: 'settings/workspaces/:policyID/accounting/xero/import/customers', From 9e860f3c9e4580c7dabdd00f70651f82bd6db36d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:21:49 +0200 Subject: [PATCH 03/20] use one screen for the tracking category mapping --- src/SCREENS.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 87d31b071050..79e66e6dea32 100644 --- a/src/SCREENS.ts +++ b/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', From 1b8901a4d58c9df39b284c54b16b2769a7c96ae0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:22:25 +0200 Subject: [PATCH 04/20] handle navigation for the new page for tracking category --- .../Navigation/AppNavigator/ModalStackNavigators/index.tsx | 4 ++-- src/libs/Navigation/linkingConfig/config.ts | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 25bf6fe06265..da9081a2b46a 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -299,8 +299,8 @@ const SettingsModalStackNavigator = createModalStackNavigator 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, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index b49b7795d292..ac4aba4501b3 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -326,8 +326,7 @@ const config: LinkingOptions['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}, From c837440986f154c27fdcc6504129fe2dc4c32ae5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:22:40 +0200 Subject: [PATCH 05/20] add new types for tracking category mapping --- src/libs/Navigation/types.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 0583fc8cc630..4ae0cca8ed0b 100644 --- a/src/libs/Navigation/types.ts +++ b/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; From 2256423ba9b3cae76c821efa7c7dae4336422f65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:23:06 +0200 Subject: [PATCH 06/20] map the tracking category page to rhp --- .../Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts index 50e51e03da9c..2aaceb96f52a 100755 --- a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts @@ -45,8 +45,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial> = { 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, From bb8c24ee90996b4a9d4713383f77be9359ba0417 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:23:50 +0200 Subject: [PATCH 07/20] create function to get tracking categories --- src/libs/actions/connections/ConnectToXero.ts | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/src/libs/actions/connections/ConnectToXero.ts b/src/libs/actions/connections/ConnectToXero.ts index 43972e540d58..e327b218989c 100644 --- a/src/libs/actions/connections/ConnectToXero.ts +++ b/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, categoryName: string): (XeroTrackingCategory & {value: string}) | undefined => { +const getTrackingCategories = (policy: OnyxEntry): Array => { 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}; From 5b797b62d3019ede54b5cc1084a264f847546af5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:25:32 +0200 Subject: [PATCH 08/20] modify component for dynamic translations --- src/components/ConnectionLayout.tsx | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx index 6d17b84bfffa..aac0404ddc8a 100644 --- a/src/components/ConnectionLayout.tsx +++ b/src/components/ConnectionLayout.tsx @@ -17,8 +17,8 @@ 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; @@ -26,7 +26,7 @@ type ConnectionLayoutProps = { /** 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 */ @@ -49,16 +49,22 @@ 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; }; -type ConnectionLayoutContentProps = Pick; +type ConnectionLayoutContentProps = Pick; -function ConnectionLayoutContent({title, titleStyle, children}: ConnectionLayoutContentProps) { +function ConnectionLayoutContent({title, titleStyle, children, titleAlreadyTranslated}: ConnectionLayoutContentProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); return ( <> - {title && {translate(title)}} + {title && {titleAlreadyTranslated ?? translate(title)}} {children} ); @@ -77,6 +83,8 @@ function ConnectionLayout({ titleStyle, shouldIncludeSafeAreaPaddingBottom, shouldUseScrollView = true, + headerTitleAlreadyTranslated, + titleAlreadyTranslated, }: ConnectionLayoutProps) { const {translate} = useLocalize(); @@ -85,11 +93,12 @@ function ConnectionLayout({ {children} ), - [title, titleStyle, children], + [title, titleStyle, children, titleAlreadyTranslated], ); return ( @@ -104,7 +113,7 @@ function ConnectionLayout({ testID={displayName} > Navigation.goBack()} /> From ed4c53f0993e24528a652e08f231fbf3351ac153 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:26:00 +0200 Subject: [PATCH 09/20] make the handling of tracking categories dynamic --- ...roMapTrackingCategoryConfigurationPage.tsx | 76 +++++++++++++++++++ .../XeroTrackingCategoryConfigurationPage.tsx | 33 +++----- 2 files changed, 85 insertions(+), 24 deletions(-) create mode 100644 src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx diff --git a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx new file mode 100644 index 000000000000..572ec476d632 --- /dev/null +++ b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx @@ -0,0 +1,76 @@ +import {useRoute} from '@react-navigation/native'; +import React, {useCallback, useMemo} from 'react'; +import ConnectionLayout from '@components/ConnectionLayout'; +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 Navigation from '@libs/Navigation/Navigation'; +import type {WithPolicyProps} from '@pages/workspace/withPolicy'; +import withPolicyConnections from '@pages/workspace/withPolicyConnections'; +import CONST from '@src/CONST'; +import type {TranslationPaths} from '@src/languages/types'; +import ROUTES from '@src/ROUTES'; + +type RouteParams = { + categoryId?: string; + categoryName?: string; +}; + +function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { + const {translate} = useLocalize(); + const route = useRoute(); + const params = route.params as RouteParams; + const styles = useThemeStyles(); + const categoryId = params?.categoryId ?? ''; + const categoryName = params?.categoryName ?? ''; + const policyID = policy?.id ?? ''; + + const optionsList = useMemo( + () => + Object.values(CONST.XERO_CONFIG.TRACKING_CATEGORY_OPTIONS).map((option) => ({ + value: option, + text: translate(`workspace.xero.trackingCategoriesOptions.${option.toLowerCase()}` as TranslationPaths), + keyForList: option, + isSelected: option.toLowerCase() === categoryName.toLowerCase(), + })), + [translate, categoryName], + ); + + const updateMapping = useCallback( + (option: {value: string}) => { + if (option.value !== categoryName) { + Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.MAPPINGS, { + ...(policy?.connections?.xero?.config?.mappings ?? {}), + ...(categoryId ? {[`${CONST.XERO_CONFIG.TRACKING_CATEGORY_PREFIX}${categoryId}`]: option.value} : {}), + }); + } + Navigation.goBack(ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES.getRoute(policyID)); + }, + [categoryId, categoryName, policyID, policy?.connections?.xero?.config?.mappings], + ); + + return ( + + + + ); +} + +XeroMapTrackingCategoryConfigurationPage.displayName = 'XeroMapTrackingCategoryConfigurationPage'; +export default withPolicyConnections(XeroMapTrackingCategoryConfigurationPage); diff --git a/src/pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage.tsx index 2742060eaa2b..2a8b67839c9d 100644 --- a/src/pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage.tsx @@ -6,7 +6,7 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Connections from '@libs/actions/connections'; -import {getTrackingCategory} from '@libs/actions/connections/ConnectToXero'; +import {getTrackingCategories} from '@libs/actions/connections/ConnectToXero'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import type {WithPolicyProps} from '@pages/workspace/withPolicy'; @@ -16,6 +16,7 @@ import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ROUTES from '@src/ROUTES'; +import type {XeroTrackingCategory} from '@src/types/onyx/Policy'; function XeroTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { const {translate} = useLocalize(); @@ -25,30 +26,14 @@ function XeroTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { const isSwitchOn = !!xeroConfig?.importTrackingCategories; const menuItems: MenuItemProps[] = useMemo(() => { - const availableCategories = []; - - const costCenterCategoryValue = getTrackingCategory(policy, CONST.XERO_CONFIG.TRACKING_CATEGORY_FIELDS.COST_CENTERS)?.value ?? ''; - const regionCategoryValue = getTrackingCategory(policy, CONST.XERO_CONFIG.TRACKING_CATEGORY_FIELDS.REGION)?.value ?? ''; - if (costCenterCategoryValue) { - const isValidOption = Object.values(CONST.XERO_CONFIG.TRACKING_CATEGORY_OPTIONS).findIndex((option) => option.toLowerCase() === costCenterCategoryValue.toLowerCase()) > -1; - availableCategories.push({ - description: translate('workspace.xero.mapXeroCostCentersTo'), - onPress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES_MAP_COST_CENTERS.getRoute(policyID)), - title: isValidOption ? translate(`workspace.xero.trackingCategoriesOptions.${costCenterCategoryValue.toLowerCase()}` as TranslationPaths) : '', - }); - } - - if (regionCategoryValue) { - const isValidOption = Object.values(CONST.XERO_CONFIG.TRACKING_CATEGORY_OPTIONS).findIndex((option) => option.toLowerCase() === regionCategoryValue.toLowerCase()) > -1; - availableCategories.push({ - description: translate('workspace.xero.mapXeroRegionsTo'), - onPress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES_MAP_REGION.getRoute(policyID)), - title: isValidOption ? translate(`workspace.xero.trackingCategoriesOptions.${regionCategoryValue.toLowerCase()}` as TranslationPaths) : '', - }); - } - return availableCategories; + const trackingCategories = getTrackingCategories(policy); + return trackingCategories.map((category: XeroTrackingCategory & {value: string}) => ({ + description: translate('workspace.xero.mapTrackingCategoryTo', {categoryName: category.name}) as TranslationPaths, + onPress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES_MAP.getRoute(policyID, category.id, category.name)), + title: translate(`workspace.xero.trackingCategoriesOptions.${category.value.toLowerCase()}` as TranslationPaths), + })); }, [translate, policy, policyID]); - + return ( Date: Fri, 24 May 2024 15:37:14 +0200 Subject: [PATCH 10/20] fix style --- .../accounting/xero/XeroTrackingCategoryConfigurationPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage.tsx index 2a8b67839c9d..dd9e9ca06a33 100644 --- a/src/pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage.tsx @@ -33,7 +33,7 @@ function XeroTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { title: translate(`workspace.xero.trackingCategoriesOptions.${category.value.toLowerCase()}` as TranslationPaths), })); }, [translate, policy, policyID]); - + return ( Date: Fri, 24 May 2024 15:37:22 +0200 Subject: [PATCH 11/20] delete specific tracking categories pages --- .../XeroMapCostCentersToConfigurationPage.tsx | 71 ------------------- .../XeroMapRegionsToConfigurationPage.tsx | 70 ------------------ 2 files changed, 141 deletions(-) delete mode 100644 src/pages/workspace/accounting/xero/XeroMapCostCentersToConfigurationPage.tsx delete mode 100644 src/pages/workspace/accounting/xero/XeroMapRegionsToConfigurationPage.tsx diff --git a/src/pages/workspace/accounting/xero/XeroMapCostCentersToConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroMapCostCentersToConfigurationPage.tsx deleted file mode 100644 index 1d1307a0d31c..000000000000 --- a/src/pages/workspace/accounting/xero/XeroMapCostCentersToConfigurationPage.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, {useCallback, useMemo} from 'react'; -import ConnectionLayout from '@components/ConnectionLayout'; -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 {getTrackingCategory} from '@libs/actions/connections/ConnectToXero'; -import Navigation from '@libs/Navigation/Navigation'; -import type {WithPolicyProps} from '@pages/workspace/withPolicy'; -import withPolicyConnections from '@pages/workspace/withPolicyConnections'; -import CONST from '@src/CONST'; -import type {TranslationPaths} from '@src/languages/types'; -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.TRACKING_CATEGORY_FIELDS.COST_CENTERS); - - const optionsList = useMemo( - () => - Object.values(CONST.XERO_CONFIG.TRACKING_CATEGORY_OPTIONS).map((option) => ({ - value: option, - text: translate(`workspace.xero.trackingCategoriesOptions.${option.toLowerCase()}` as TranslationPaths), - keyForList: option, - isSelected: option.toLowerCase() === category?.value?.toLowerCase(), - })), - [translate, category], - ); - - const updateMapping = useCallback( - (option: {value: string}) => { - if (option.value !== category?.value) { - Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.MAPPINGS, { - ...(policy?.connections?.xero?.config?.mappings ?? {}), - ...(category?.id ? {[`${CONST.XERO_CONFIG.TRACKING_CATEGORY_PREFIX}${category.id}`]: option.value} : {}), - }); - } - Navigation.goBack(ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES.getRoute(policyID)); - }, - [category, policyID, policy?.connections?.xero?.config?.mappings], - ); - - return ( - - option.isSelected)?.keyForList} - /> - - ); -} - -XeroMapCostCentersToConfigurationPage.displayName = 'XeroMapCostCentersToConfigurationPage'; -export default withPolicyConnections(XeroMapCostCentersToConfigurationPage); diff --git a/src/pages/workspace/accounting/xero/XeroMapRegionsToConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroMapRegionsToConfigurationPage.tsx deleted file mode 100644 index 5c97de36d353..000000000000 --- a/src/pages/workspace/accounting/xero/XeroMapRegionsToConfigurationPage.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, {useCallback, useMemo} from 'react'; -import ConnectionLayout from '@components/ConnectionLayout'; -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 {getTrackingCategory} from '@libs/actions/connections/ConnectToXero'; -import Navigation from '@libs/Navigation/Navigation'; -import type {WithPolicyProps} from '@pages/workspace/withPolicy'; -import withPolicyConnections from '@pages/workspace/withPolicyConnections'; -import CONST from '@src/CONST'; -import type {TranslationPaths} from '@src/languages/types'; -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.TRACKING_CATEGORY_FIELDS.REGION); - - const optionsList = useMemo( - () => - Object.values(CONST.XERO_CONFIG.TRACKING_CATEGORY_OPTIONS).map((option) => ({ - value: option, - text: translate(`workspace.xero.trackingCategoriesOptions.${option.toLowerCase()}` as TranslationPaths), - keyForList: option, - isSelected: option.toLowerCase() === category?.value?.toLowerCase(), - })), - [translate, category], - ); - - const updateMapping = useCallback( - (option: {value: string}) => { - if (option.value !== category?.value) { - Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.MAPPINGS, { - ...(policy?.connections?.xero?.config?.mappings ?? {}), - ...(category?.id ? {[`${CONST.XERO_CONFIG.TRACKING_CATEGORY_PREFIX}${category.id}`]: option.value} : {}), - }); - } - Navigation.goBack(ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES.getRoute(policyID)); - }, - [category, policyID, policy?.connections?.xero?.config?.mappings], - ); - - return ( - - option.isSelected)?.keyForList} - /> - - ); -} - -XeroMapRegionsToConfigurationPage.displayName = 'XeroMapRegionsToConfigurationPage'; -export default withPolicyConnections(XeroMapRegionsToConfigurationPage); From be8013448754349cde689f2849c321ff07d7aa56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 24 May 2024 15:37:28 +0200 Subject: [PATCH 12/20] make the handling of tracking categories dynamic --- .../accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx index 572ec476d632..b8705cd87d5c 100644 --- a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx @@ -67,6 +67,7 @@ function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { sections={[{data: optionsList}]} ListItem={RadioListItem} onSelectRow={updateMapping} + initiallyFocusedOptionKey={optionsList.find((option) => option.isSelected)?.keyForList} /> ); From e3e42b73d24df0fd4c3877d1b841052b04704518 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Mon, 27 May 2024 07:32:54 +0200 Subject: [PATCH 13/20] fix lint --- src/components/ConnectionLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx index aac0404ddc8a..72fd84709682 100644 --- a/src/components/ConnectionLayout.tsx +++ b/src/components/ConnectionLayout.tsx @@ -113,7 +113,7 @@ function ConnectionLayout({ testID={displayName} > Navigation.goBack()} /> From 72ce91a37bb88504c84e15ef5f419fa068f97e16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Mon, 27 May 2024 10:34:54 +0200 Subject: [PATCH 14/20] fix lint --- src/components/ConnectionLayout.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx index c15e3f66d853..abb47b64faa6 100644 --- a/src/components/ConnectionLayout.tsx +++ b/src/components/ConnectionLayout.tsx @@ -123,7 +123,8 @@ function ConnectionLayout({ testID={displayName} > Navigation.goBack()} /> From e0bb80481a049ee1d72d57ccdc5db664b23a1365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Mon, 27 May 2024 10:55:05 +0200 Subject: [PATCH 15/20] fix typo --- src/components/ConnectionLayout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx index abb47b64faa6..c7fa599d0acd 100644 --- a/src/components/ConnectionLayout.tsx +++ b/src/components/ConnectionLayout.tsx @@ -123,7 +123,6 @@ function ConnectionLayout({ testID={displayName} > Navigation.goBack()} From 4df274a571b5511007e2455f7992e4733b8b5054 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Mon, 27 May 2024 11:11:21 +0200 Subject: [PATCH 16/20] encode category name --- src/ROUTES.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 245eee116c96..33a9c753e4e3 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -798,7 +798,7 @@ const ROUTES = { 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}/${categoryName}` as const, + `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', From 0b94f59abb8449c1ee5b364b7731fe1953f4040a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Mon, 27 May 2024 11:12:22 +0200 Subject: [PATCH 17/20] decode category name --- .../xero/XeroMapTrackingCategoryConfigurationPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx index 8dc85611d8c2..3f2de1923c48 100644 --- a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx @@ -60,8 +60,8 @@ function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { titleStyle={[styles.pb2, styles.ph5]} contentContainerStyle={[styles.flex1]} shouldUseScrollView={false} - headerTitleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryTo', {categoryName})} - titleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryToDescription', {categoryName})} + headerTitleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryTo', {categoryName: decodeURIComponent(categoryName)})} + titleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryToDescription', {categoryName: decodeURIComponent(categoryName)})} connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO} > Date: Mon, 27 May 2024 12:07:16 +0200 Subject: [PATCH 18/20] fix isSelected --- .../XeroMapTrackingCategoryConfigurationPage.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx index 3f2de1923c48..3b8fe2e7b9ee 100644 --- a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx @@ -18,14 +18,23 @@ type RouteParams = { categoryName?: string; }; +const TRACKING_CATEGORIES_KEY = 'trackingCategory_'; + function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { const {translate} = useLocalize(); const route = useRoute(); const params = route.params as RouteParams; const styles = useThemeStyles(); const categoryId = params?.categoryId ?? ''; - const categoryName = params?.categoryName ?? ''; + const categoryName = decodeURIComponent(params?.categoryName ?? ''); const policyID = policy?.id ?? ''; + const {trackingCategories} = policy?.connections?.xero?.data ?? {}; + const {mappings} = policy?.connections?.xero?.config ?? {}; + + const currentTrackingCategory = trackingCategories?.find((category) => category.id === categoryId); + const currentTrackingCategoryValue = currentTrackingCategory + ? mappings?.[`${TRACKING_CATEGORIES_KEY}${currentTrackingCategory.id}`] ?? '' + : ''; const optionsList = useMemo( () => @@ -33,9 +42,9 @@ function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { value: option, text: translate(`workspace.xero.trackingCategoriesOptions.${option.toLowerCase()}` as TranslationPaths), keyForList: option, - isSelected: option.toLowerCase() === categoryName.toLowerCase(), + isSelected: option === currentTrackingCategoryValue, })), - [translate, categoryName], + [translate, currentTrackingCategory], ); const updateMapping = useCallback( From 7a559dface5ec68514da5518b2d99d9f7f00c53c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Mon, 27 May 2024 12:08:44 +0200 Subject: [PATCH 19/20] use already decoded category name --- .../xero/XeroMapTrackingCategoryConfigurationPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx index 3b8fe2e7b9ee..b946387212c1 100644 --- a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx @@ -69,8 +69,8 @@ function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { titleStyle={[styles.pb2, styles.ph5]} contentContainerStyle={[styles.flex1]} shouldUseScrollView={false} - headerTitleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryTo', {categoryName: decodeURIComponent(categoryName)})} - titleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryToDescription', {categoryName: decodeURIComponent(categoryName)})} + headerTitleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryTo', {categoryName: categoryName})} + titleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryToDescription', {categoryName: categoryName})} connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO} > Date: Mon, 27 May 2024 13:30:01 +0200 Subject: [PATCH 20/20] fix lint --- .../xero/XeroMapTrackingCategoryConfigurationPage.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx index b946387212c1..4054afbde797 100644 --- a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx @@ -32,9 +32,7 @@ function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { const {mappings} = policy?.connections?.xero?.config ?? {}; const currentTrackingCategory = trackingCategories?.find((category) => category.id === categoryId); - const currentTrackingCategoryValue = currentTrackingCategory - ? mappings?.[`${TRACKING_CATEGORIES_KEY}${currentTrackingCategory.id}`] ?? '' - : ''; + const currentTrackingCategoryValue = currentTrackingCategory ? mappings?.[`${TRACKING_CATEGORIES_KEY}${currentTrackingCategory.id}`] ?? '' : ''; const optionsList = useMemo( () => @@ -44,7 +42,7 @@ function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { keyForList: option, isSelected: option === currentTrackingCategoryValue, })), - [translate, currentTrackingCategory], + [translate, currentTrackingCategoryValue], ); const updateMapping = useCallback( @@ -69,8 +67,8 @@ function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { titleStyle={[styles.pb2, styles.ph5]} contentContainerStyle={[styles.flex1]} shouldUseScrollView={false} - headerTitleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryTo', {categoryName: categoryName})} - titleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryToDescription', {categoryName: categoryName})} + headerTitleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryTo', {categoryName})} + titleAlreadyTranslated={translate('workspace.xero.mapTrackingCategoryToDescription', {categoryName})} connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO} >