fix lint

Author: brunovjk

src/ROUTES.ts

@@ -294,11 +294,11 @@ const DYNAMIC_ROUTES = {
         entryScreens: [SCREENS.WORKSPACE.ACCOUNTING.DYNAMIC_XERO_EXPORT],
     },
     POLICY_ACCOUNTING_XERO_TRAVEL_INVOICING_CONFIGURATION: {
-        path: 'travel-invoicing',
+        path: 'xero-travel-invoicing',
         entryScreens: [SCREENS.WORKSPACE.ACCOUNTING.DYNAMIC_XERO_EXPORT],
     },
     POLICY_ACCOUNTING_XERO_TRAVEL_INVOICING_PAYABLE_ACCOUNT_SELECT: {
-        path: 'payable-account',
+        path: 'xero-travel-invoicing-payable-account',
         entryScreens: [SCREENS.WORKSPACE.ACCOUNTING.DYNAMIC_XERO_TRAVEL_INVOICING_CONFIGURATION],
     },
     POLICY_ACCOUNTING_XERO_AUTO_SYNC: {

src/pages/workspace/accounting/xero/export/XeroTravelInvoicingPayableAccountSelectPage.tsx

@@ -1,82 +1,51 @@
 import React from 'react';
-import BlockingView from '@components/BlockingViews/BlockingView';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
-import type {ListItem} from '@components/SelectionList/types';
-import SelectionScreen from '@components/SelectionScreen';
+import type {SelectorType} from '@components/SelectionScreen';
 import useDynamicBackPath from '@hooks/useDynamicBackPath';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {updateXeroTravelInvoicingPayableAccount} from '@libs/actions/connections/Xero';
 import {getLatestErrorField} from '@libs/ErrorUtils';
 import {settingsPendingAction} from '@libs/PolicyUtils';
 import Navigation from '@navigation/Navigation';
+import TravelInvoicingPayableAccountSelectPage from '@pages/workspace/accounting/common/TravelInvoicingPayableAccountSelectPage';
 import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
-import variables from '@styles/variables';
 import {clearXeroErrorField} from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import {DYNAMIC_ROUTES} from '@src/ROUTES';
 
-type PayableAccountListItem = ListItem & {
-    value: string;
-};
-
 function XeroTravelInvoicingPayableAccountSelectPage({policy}: WithPolicyConnectionsProps) {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const illustrations = useMemoizedLazyIllustrations(['Telescope']);
-
     const {bankAccounts} = policy?.connections?.xero?.data ?? {};
     const config = policy?.connections?.xero?.config;
 
     const policyID = policy?.id ?? String(CONST.DEFAULT_NUMBER_ID);
     const selectedAccountID = config?.export?.travelInvoicingPayableAccountID;
     const backPath = useDynamicBackPath(DYNAMIC_ROUTES.POLICY_ACCOUNTING_XERO_TRAVEL_INVOICING_PAYABLE_ACCOUNT_SELECT.path);
-    const data: PayableAccountListItem[] =
+    const data: Array<SelectorType<string>> =
         bankAccounts?.map((account) => ({
             value: account.id,
             text: account.name,
             keyForList: account.id,
             isSelected: account.id === selectedAccountID,
         })) ?? [];
 
-    const selectAccount = (row: PayableAccountListItem) => {
+    const selectAccount = (row: SelectorType<string>) => {
         if (row.value !== selectedAccountID) {
             updateXeroTravelInvoicingPayableAccount(policyID, row.value, selectedAccountID);
         }
         Navigation.goBack(backPath);
     };
 
-    const listEmptyContent = (
-        <BlockingView
-            icon={illustrations.Telescope}
-            iconWidth={variables.emptyListIconWidth}
-            iconHeight={variables.emptyListIconHeight}
-            title={translate('workspace.xero.noAccountsFound')}
-            subtitle={translate('workspace.xero.noAccountsFoundDescription')}
-            containerStyle={styles.pb10}
-        />
-    );
-
     return (
-        <SelectionScreen
+        <TravelInvoicingPayableAccountSelectPage
             policyID={policyID}
-            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
-            featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             displayName="XeroTravelInvoicingPayableAccountSelectPage"
-            title="workspace.common.travelInvoicingPayableAccount"
             data={data}
-            listItem={RadioListItem}
-            onSelectRow={selectAccount}
-            shouldSingleExecuteRowSelect
-            initiallyFocusedOptionKey={data.find((option) => option.isSelected)?.keyForList}
-            listEmptyContent={listEmptyContent}
             connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
-            onBackButtonPress={() => Navigation.goBack(backPath)}
+            emptyStateTitle="workspace.xero.noAccountsFound"
+            emptyStateSubtitle="workspace.xero.noAccountsFoundDescription"
+            onSelect={selectAccount}
+            onBack={() => Navigation.goBack(backPath)}
             pendingAction={settingsPendingAction([CONST.XERO_CONFIG.TRAVEL_INVOICING_PAYABLE_ACCOUNT], config?.pendingFields)}
             errors={getLatestErrorField(config, CONST.XERO_CONFIG.TRAVEL_INVOICING_PAYABLE_ACCOUNT)}
-            errorRowStyles={[styles.ph5, styles.pv3]}
             onClose={() => clearXeroErrorField(policyID, CONST.XERO_CONFIG.TRAVEL_INVOICING_PAYABLE_ACCOUNT)}
         />
     );