diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 16c126be5dfe8..7623be3ea1184 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -1703,12 +1703,7 @@ const ROUTES = { }, POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES: { route: 'workspaces/:policyID/accounting/quickbooks-desktop/import/classes', - getRoute: (policyID: string | undefined) => { - if (!policyID) { - Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES route'); - } - return `workspaces/${policyID}/accounting/quickbooks-desktop/import/classes` as const; - }, + getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-desktop/import/classes` as const, }, POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES_DISPLAYED_AS: { route: 'workspaces/:policyID/accounting/quickbooks-desktop/import/classes/displayed_as', @@ -1716,12 +1711,7 @@ const ROUTES = { }, POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CUSTOMERS: { route: 'workspaces/:policyID/accounting/quickbooks-desktop/import/customers', - getRoute: (policyID: string | undefined) => { - if (!policyID) { - Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CUSTOMERS route'); - } - return `workspaces/${policyID}/accounting/quickbooks-desktop/import/customers` as const; - }, + getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-desktop/import/customers` as const, }, POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CUSTOMERS_DISPLAYED_AS: { route: 'workspaces/:policyID/accounting/quickbooks-desktop/import/customers/displayed_as', @@ -3063,12 +3053,7 @@ const ROUTES = { }, POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CLASSES: { route: 'workspaces/:policyID/accounting/quickbooks-online/import/classes', - getRoute: (policyID: string | undefined) => { - if (!policyID) { - Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CLASSES route'); - } - return `workspaces/${policyID}/accounting/quickbooks-online/import/classes` as const; - }, + getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-online/import/classes` as const, }, POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CLASSES_DISPLAYED_AS: { route: 'workspaces/:policyID/accounting/quickbooks-online/import/classes/displayed-as', @@ -3076,12 +3061,7 @@ const ROUTES = { }, POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CUSTOMERS: { route: 'workspaces/:policyID/accounting/quickbooks-online/import/customers', - getRoute: (policyID: string | undefined) => { - if (!policyID) { - Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CUSTOMERS route'); - } - return `workspaces/${policyID}/accounting/quickbooks-online/import/customers` as const; - }, + getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-online/import/customers` as const, }, POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CUSTOMERS_DISPLAYED_AS: { route: 'workspaces/:policyID/accounting/quickbooks-online/import/customers/displayed-as', @@ -3089,12 +3069,7 @@ const ROUTES = { }, POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_LOCATIONS: { route: 'workspaces/:policyID/accounting/quickbooks-online/import/locations', - getRoute: (policyID: string | undefined) => { - if (!policyID) { - Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_LOCATIONS route'); - } - return `workspaces/${policyID}/accounting/quickbooks-online/import/locations` as const; - }, + getRoute: (policyID: string) => `workspaces/${policyID}/accounting/quickbooks-online/import/locations` as const, }, POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_LOCATIONS_DISPLAYED_AS: { route: 'workspaces/:policyID/accounting/quickbooks-online/import/locations/displayed-as', @@ -3129,12 +3104,7 @@ const ROUTES = { }, POLICY_ACCOUNTING_NETSUITE_IMPORT: { route: 'workspaces/:policyID/accounting/netsuite/import', - getRoute: (policyID: string | undefined) => { - if (!policyID) { - Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_NETSUITE_IMPORT route'); - } - return `workspaces/${policyID}/accounting/netsuite/import` as const; - }, + getRoute: (policyID: string) => `workspaces/${policyID}/accounting/netsuite/import` as const, }, POLICY_ACCOUNTING_NETSUITE_IMPORT_MAPPING: { route: 'workspaces/:policyID/accounting/netsuite/import/mapping/:importField', @@ -3174,12 +3144,7 @@ const ROUTES = { }, POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOMERS_OR_PROJECTS: { route: 'workspaces/:policyID/accounting/netsuite/import/customer-projects', - getRoute: (policyID: string | undefined) => { - if (!policyID) { - Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOMERS_OR_PROJECTS route'); - } - return `workspaces/${policyID}/accounting/netsuite/import/customer-projects` as const; - }, + getRoute: (policyID: string) => `workspaces/${policyID}/accounting/netsuite/import/customer-projects` as const, }, POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOMERS_OR_PROJECTS_SELECT: { route: 'workspaces/:policyID/accounting/netsuite/import/customer-projects/select', diff --git a/src/components/SelectionList/ListItem/types.ts b/src/components/SelectionList/ListItem/types.ts index f2d0cb6f83626..ab8328f97a287 100644 --- a/src/components/SelectionList/ListItem/types.ts +++ b/src/components/SelectionList/ListItem/types.ts @@ -232,9 +232,6 @@ type ListItemProps = CommonListItemProps & { /** Whether to show RBR */ shouldDisplayRBR?: boolean; - /** Boolean whether to display the right icon */ - shouldShowRightCaret?: boolean; - /** Styles applied for the title */ titleStyles?: StyleProp; diff --git a/src/components/SelectionListWithSections/TableListItem.tsx b/src/components/SelectionListWithSections/TableListItem.tsx index e9b1c22b70b03..48e23290fd80e 100644 --- a/src/components/SelectionListWithSections/TableListItem.tsx +++ b/src/components/SelectionListWithSections/TableListItem.tsx @@ -1,11 +1,11 @@ -import React from 'react'; +import React, {useCallback} from 'react'; import {View} from 'react-native'; import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import ReportActionAvatars from '@components/ReportActionAvatars'; import TextWithTooltip from '@components/TextWithTooltip'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; -import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -33,7 +33,6 @@ function TableListItem({ const styles = useThemeStyles(); const theme = useTheme(); const StyleUtils = useStyleUtils(); - const icons = useMemoizedLazyExpensifyIcons(['Checkmark']); const animatedHighlightStyle = useAnimatedHighlightStyle({ borderRadius: styles.selectionListPressableItemWrapper.borderRadius, @@ -45,13 +44,13 @@ function TableListItem({ const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar; - const handleCheckboxPress = () => { + const handleCheckboxPress = useCallback(() => { if (onCheckboxPress) { onCheckboxPress(item); } else { onSelectRow(item); } - }; + }, [item, onCheckboxPress, onSelectRow]); return ( ({ {!!item.isSelected && ( = ListItem & { @@ -46,7 +46,7 @@ type SelectionScreenProps = { listFooterContent?: React.JSX.Element | null; /** Sections for the section list */ - data: Array>; + sections: Array>>; /** Default renderer for every item in the list */ listItem: typeof RadioListItem | typeof UserListItem | typeof TableListItem; @@ -55,10 +55,10 @@ type SelectionScreenProps = { listItemWrapperStyle?: StyleProp; /** Item `keyForList` to focus initially */ - initiallyFocusedOptionKey?: string | undefined; + initiallyFocusedOptionKey?: string | null | undefined; /** Callback to fire when a row is pressed */ - onSelectRow: (item: SelectorType) => void; + onSelectRow: (selection: SelectorType) => void; /** Callback to fire when back button is pressed */ onBackButtonPress?: () => void; @@ -120,7 +120,7 @@ function SelectionScreen({ headerContent, listEmptyContent, listFooterContent, - data, + sections, listItem, listItemWrapperStyle, initiallyFocusedOptionKey, @@ -167,23 +167,26 @@ function SelectionScreen({ pendingAction={pendingAction} style={[styles.flex1]} contentContainerStyle={[styles.flex1]} - shouldDisableOpacity={!data.length} + shouldDisableOpacity={!sections.length} > ( - policyID: string | undefined, + policyID: string, mappingName: TMappingName, mappingValue: ValueOf, oldMappingValue?: ValueOf | null, ) { - if (!policyID) { - return; - } const onyxData: OnyxData = { optimisticData: [ { @@ -443,7 +440,7 @@ function updateNetSuiteImportMapping( - policyID: string | undefined, + policyID: string, settingValue: TSettingValue, oldSettingValue?: TSettingValue, ) { - if (!policyID) { - return; - } const onyxData = buildOnyxDataForQuickbooksDesktopMappingsConfiguration(policyID, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CLASSES, settingValue, oldSettingValue); const parameters: UpdateQuickbooksDesktopGenericTypeParams = { policyID, @@ -446,13 +443,10 @@ function updateQuickbooksDesktopSyncClasses( - policyID: string | undefined, + policyID: string, settingValue: TSettingValue, oldSettingValue?: TSettingValue, ) { - if (!policyID) { - return; - } const onyxData = buildOnyxDataForQuickbooksDesktopMappingsConfiguration(policyID, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CUSTOMERS, settingValue, oldSettingValue); const parameters: UpdateQuickbooksDesktopGenericTypeParams = { policyID, diff --git a/src/libs/actions/connections/QuickbooksOnline.ts b/src/libs/actions/connections/QuickbooksOnline.ts index 109bb9ea8984f..1296e8862fe1e 100644 --- a/src/libs/actions/connections/QuickbooksOnline.ts +++ b/src/libs/actions/connections/QuickbooksOnline.ts @@ -256,13 +256,10 @@ function updateQuickbooksOnlineReimbursableExpensesAccount( - policyID: string | undefined, + policyID: string, settingValue: TSettingValue, oldSettingValue?: TSettingValue, ) { - if (!policyID) { - return; - } const onyxData = buildOnyxDataForQuickbooksConfiguration(policyID, CONST.QUICKBOOKS_CONFIG.SYNC_LOCATIONS, settingValue, oldSettingValue); const parameters: UpdateQuickbooksOnlineGenericTypeParams = { @@ -274,13 +271,10 @@ function updateQuickbooksOnlineSyncLocations( - policyID: string | undefined, + policyID: string, settingValue: TSettingValue, oldSettingValue?: TSettingValue, ) { - if (!policyID) { - return; - } const onyxData = buildOnyxDataForQuickbooksConfiguration(policyID, CONST.QUICKBOOKS_CONFIG.SYNC_CUSTOMERS, settingValue, oldSettingValue); const parameters: UpdateQuickbooksOnlineGenericTypeParams = { @@ -292,13 +286,10 @@ function updateQuickbooksOnlineSyncCustomers( - policyID: string | undefined, + policyID: string, settingValue: TSettingValue, oldSettingValue?: TSettingValue, ) { - if (!policyID) { - return; - } const onyxData = buildOnyxDataForQuickbooksConfiguration(policyID, CONST.QUICKBOOKS_CONFIG.SYNC_CLASSES, settingValue, oldSettingValue); const parameters: UpdateQuickbooksOnlineGenericTypeParams = { policyID, diff --git a/src/pages/home/report/ReportDetailsExportPage.tsx b/src/pages/home/report/ReportDetailsExportPage.tsx index cbd6f9404a00f..13be42d70a539 100644 --- a/src/pages/home/report/ReportDetailsExportPage.tsx +++ b/src/pages/home/report/ReportDetailsExportPage.tsx @@ -84,7 +84,6 @@ function ReportDetailsExportPage({route}: ReportDetailsExportPageProps) { }, ], isDisabled: !canBeExported, - keyForList: CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION, }, { value: CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED, @@ -96,7 +95,6 @@ function ReportDetailsExportPage({route}: ReportDetailsExportPageProps) { }, ], isDisabled: !canBeExported, - keyForList: CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED, }, ]; @@ -127,7 +125,7 @@ function ReportDetailsExportPage({route}: ReportDetailsExportPageProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="ReportDetailsExportPage" - data={exportSelectorOptions} + sections={[{data: exportSelectorOptions}]} listItem={UserListItem} shouldBeBlocked={false} onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID, backTo))} diff --git a/src/pages/workspace/accounting/intacct/SageIntacctEntityPage.tsx b/src/pages/workspace/accounting/intacct/SageIntacctEntityPage.tsx index 422fe57497c1d..492d7de08d85e 100644 --- a/src/pages/workspace/accounting/intacct/SageIntacctEntityPage.tsx +++ b/src/pages/workspace/accounting/intacct/SageIntacctEntityPage.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -19,7 +19,7 @@ function SageIntacctEntityPage({policy}: WithPolicyProps) { const {translate} = useLocalize(); const policyID = policy?.id; - const options = [ + const sections = [ { text: translate('workspace.common.topLevel'), value: translate('workspace.common.topLevel'), @@ -28,7 +28,7 @@ function SageIntacctEntityPage({policy}: WithPolicyProps) { }, ]; for (const entity of policy?.connections?.intacct?.data?.entities ?? []) { - options.push({ + sections.push({ text: entity.name, value: entity.name, keyForList: entity.id, @@ -46,10 +46,10 @@ function SageIntacctEntityPage({policy}: WithPolicyProps) { policyID={policyID} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="SageIntacctEntityPage" - data={options} + sections={sections ? [{data: sections}] : []} listItem={RadioListItem} onSelectRow={saveSelection} - initiallyFocusedOptionKey={options?.find((mode) => mode.isSelected)?.keyForList} + initiallyFocusedOptionKey={sections?.find((mode) => mode.isSelected)?.keyForList} onBackButtonPress={() => Navigation.dismissModal()} title="workspace.intacct.entity" accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} diff --git a/src/pages/workspace/accounting/intacct/advanced/SageIntacctAccountingMethodPage.tsx b/src/pages/workspace/accounting/intacct/advanced/SageIntacctAccountingMethodPage.tsx index 226315c5f9546..d55121d127213 100644 --- a/src/pages/workspace/accounting/intacct/advanced/SageIntacctAccountingMethodPage.tsx +++ b/src/pages/workspace/accounting/intacct/advanced/SageIntacctAccountingMethodPage.tsx @@ -2,8 +2,8 @@ import {CONST as COMMON_CONST} from 'expensify-common'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -33,7 +33,7 @@ function SageIntacctAccountingMethodPage({policy}: WithPolicyConnectionsProps) { value: accountingMethodType, text: translate(`workspace.sageIntacct.accountingMethods.values.${accountingMethodType}` as TranslationPaths), alternateText: translate(`workspace.sageIntacct.accountingMethods.alternateText.${accountingMethodType}` as TranslationPaths), - keyForList: `${accountingMethodType}`, + keyForList: accountingMethodType, isSelected: accountingMethod === accountingMethodType, })); @@ -64,7 +64,7 @@ function SageIntacctAccountingMethodPage({policy}: WithPolicyConnectionsProps) { displayName="SageIntacctAccountingMethodPage" headerTitleAlreadyTranslated={translate('workspace.sageIntacct.accountingMethods.label')} headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExpenseReportApprovalLevel(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/intacct/advanced/SageIntacctPaymentAccountPage.tsx b/src/pages/workspace/accounting/intacct/advanced/SageIntacctPaymentAccountPage.tsx index 986685837f319..ad8f345dd1604 100644 --- a/src/pages/workspace/accounting/intacct/advanced/SageIntacctPaymentAccountPage.tsx +++ b/src/pages/workspace/accounting/intacct/advanced/SageIntacctPaymentAccountPage.tsx @@ -56,7 +56,7 @@ function SageIntacctPaymentAccountPage({policy}: WithPolicyConnectionsProps) { policyID={policyID} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="SageIntacctPaymentAccountPage" - data={vendorSelectorOptions ?? []} + sections={vendorSelectorOptions.length ? [{data: vendorSelectorOptions}] : []} listItem={RadioListItem} onSelectRow={updateDefaultVendor} initiallyFocusedOptionKey={vendorSelectorOptions.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/intacct/export/SageIntacctDatePage.tsx b/src/pages/workspace/accounting/intacct/export/SageIntacctDatePage.tsx index a8427290ff18b..5b97424d9d28b 100644 --- a/src/pages/workspace/accounting/intacct/export/SageIntacctDatePage.tsx +++ b/src/pages/workspace/accounting/intacct/export/SageIntacctDatePage.tsx @@ -2,8 +2,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -70,7 +70,7 @@ function SageIntacctDatePage({policy}: WithPolicyProps) { displayName="SageIntacctDatePage" title="workspace.sageIntacct.exportDate.label" headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExportDate(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx b/src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx index d912f4e16d820..9a330d57e16d5 100644 --- a/src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx +++ b/src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx @@ -100,7 +100,7 @@ function SageIntacctDefaultVendorPage() { policyID={policyID} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="SageIntacctDefaultVendorPage" - data={vendorSelectorOptions ?? []} + sections={vendorSelectorOptions.length ? [{data: vendorSelectorOptions}] : []} listItem={RadioListItem} onSelectRow={updateDefaultVendor} initiallyFocusedOptionKey={vendorSelectorOptions.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/intacct/export/SageIntacctNonReimbursableCreditCardAccountPage.tsx b/src/pages/workspace/accounting/intacct/export/SageIntacctNonReimbursableCreditCardAccountPage.tsx index 30b37b72198eb..6ed16f19fdabf 100644 --- a/src/pages/workspace/accounting/intacct/export/SageIntacctNonReimbursableCreditCardAccountPage.tsx +++ b/src/pages/workspace/accounting/intacct/export/SageIntacctNonReimbursableCreditCardAccountPage.tsx @@ -67,7 +67,7 @@ function SageIntacctNonReimbursableCreditCardAccountPage({policy}: WithPolicyCon policyID={policyID} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="SageIntacctNonReimbursableCreditCardAccountPage" - data={creditCardSelectorOptions ?? []} + sections={creditCardSelectorOptions.length ? [{data: creditCardSelectorOptions}] : []} listItem={RadioListItem} onSelectRow={updateCreditCardAccount} initiallyFocusedOptionKey={creditCardSelectorOptions.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/intacct/export/SageIntacctNonReimbursableExpensesDestinationPage.tsx b/src/pages/workspace/accounting/intacct/export/SageIntacctNonReimbursableExpensesDestinationPage.tsx index 2c6e558c30064..59735c5d567ff 100644 --- a/src/pages/workspace/accounting/intacct/export/SageIntacctNonReimbursableExpensesDestinationPage.tsx +++ b/src/pages/workspace/accounting/intacct/export/SageIntacctNonReimbursableExpensesDestinationPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback} from 'react'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; @@ -57,7 +57,7 @@ function SageIntacctNonReimbursableExpensesDestinationPage({policy}: WithPolicyC selectDestination(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/intacct/export/SageIntacctPreferredExporterPage.tsx b/src/pages/workspace/accounting/intacct/export/SageIntacctPreferredExporterPage.tsx index f84da6131ad1a..d2e767c6035bf 100644 --- a/src/pages/workspace/accounting/intacct/export/SageIntacctPreferredExporterPage.tsx +++ b/src/pages/workspace/accounting/intacct/export/SageIntacctPreferredExporterPage.tsx @@ -2,8 +2,8 @@ import {useRoute} from '@react-navigation/native'; import isEmpty from 'lodash/isEmpty'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; @@ -101,7 +101,7 @@ function SageIntacctPreferredExporterPage({policy}: WithPolicyProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="SageIntacctPreferredExporterPage" - data={data} + sections={[{data}]} listItem={RadioListItem} headerContent={headerContent} onSelectRow={selectExporter} diff --git a/src/pages/workspace/accounting/intacct/export/SageIntacctReimbursableExpensesDestinationPage.tsx b/src/pages/workspace/accounting/intacct/export/SageIntacctReimbursableExpensesDestinationPage.tsx index 6215ea532bc28..982248738f688 100644 --- a/src/pages/workspace/accounting/intacct/export/SageIntacctReimbursableExpensesDestinationPage.tsx +++ b/src/pages/workspace/accounting/intacct/export/SageIntacctReimbursableExpensesDestinationPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback} from 'react'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; @@ -61,7 +61,7 @@ function SageIntacctReimbursableExpensesDestinationPage({policy}: WithPolicyConn selectDestination(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/intacct/import/SageIntacctImportTaxMappingPage.tsx b/src/pages/workspace/accounting/intacct/import/SageIntacctImportTaxMappingPage.tsx index 0bc63addcf31b..d4dc0630bbc81 100644 --- a/src/pages/workspace/accounting/intacct/import/SageIntacctImportTaxMappingPage.tsx +++ b/src/pages/workspace/accounting/intacct/import/SageIntacctImportTaxMappingPage.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import usePolicy from '@hooks/usePolicy'; @@ -58,7 +58,7 @@ function SageIntacctImportTaxMappingPage({route}: SageIntacctMappingsTypePagePro accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="SageIntacctImportTaxMappingPage" - data={selectionOptions} + sections={[{data: selectionOptions}]} listItem={RadioListItem} connectionName={CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT} onSelectRow={updateMapping} diff --git a/src/pages/workspace/accounting/intacct/import/SageIntacctMappingsTypePage.tsx b/src/pages/workspace/accounting/intacct/import/SageIntacctMappingsTypePage.tsx index 7481d00e8c166..8f7048e9fcbe8 100644 --- a/src/pages/workspace/accounting/intacct/import/SageIntacctMappingsTypePage.tsx +++ b/src/pages/workspace/accounting/intacct/import/SageIntacctMappingsTypePage.tsx @@ -1,17 +1,17 @@ import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; import {updateSageIntacctMappingValue} from '@libs/actions/connections/SageIntacct'; -import {getLatestErrorField} from '@libs/ErrorUtils'; +import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {settingsPendingAction} from '@libs/PolicyUtils'; -import {clearSageIntacctErrorField} from '@userActions/Policy/Policy'; +import * as Policy from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; @@ -25,7 +25,7 @@ function SageIntacctMappingsTypePage({route}: SageIntacctMappingsTypePageProps) const mappingName: SageIntacctMappingName = route.params.mapping; const policy = usePolicy(route.params.policyID); - const policyID = policy?.id; + const policyID = policy?.id ?? '-1'; const {config} = policy?.connections?.intacct ?? {}; const {mappings, pendingFields, export: exportConfig} = config ?? {}; @@ -80,7 +80,7 @@ function SageIntacctMappingsTypePage({route}: SageIntacctMappingsTypePageProps) accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="SageIntacctMappingsTypePage" - data={selectionOptions} + sections={[{data: selectionOptions}]} listItem={RadioListItem} connectionName={CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT} onSelectRow={updateMapping} @@ -88,9 +88,9 @@ function SageIntacctMappingsTypePage({route}: SageIntacctMappingsTypePageProps) onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_TOGGLE_MAPPINGS.getRoute(policyID, mappingName))} title="workspace.common.displayedAs" pendingAction={settingsPendingAction([mappingName], pendingFields)} - errors={getLatestErrorField(config ?? {}, mappingName)} + errors={ErrorUtils.getLatestErrorField(config ?? {}, mappingName)} errorRowStyles={[styles.ph5, styles.pv3]} - onClose={() => clearSageIntacctErrorField(policyID, mappingName)} + onClose={() => Policy.clearSageIntacctErrorField(policyID, mappingName)} /> ); } diff --git a/src/pages/workspace/accounting/netsuite/NetSuiteSubsidiarySelector.tsx b/src/pages/workspace/accounting/netsuite/NetSuiteSubsidiarySelector.tsx index dede5431670ee..8c67aa08976cb 100644 --- a/src/pages/workspace/accounting/netsuite/NetSuiteSubsidiarySelector.tsx +++ b/src/pages/workspace/accounting/netsuite/NetSuiteSubsidiarySelector.tsx @@ -1,7 +1,7 @@ import React, {useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -86,7 +86,7 @@ function NetSuiteSubsidiarySelector({policy}: WithPolicyConnectionsProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteSubsidiarySelector" - data={subsidiaryListSections} + sections={subsidiaryListSections.length > 0 ? [{data: subsidiaryListSections}] : []} listItem={RadioListItem} connectionName={CONST.POLICY.CONNECTIONS.NAME.NETSUITE} onSelectRow={updateSubsidiary} diff --git a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteAccountingMethodPage.tsx b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteAccountingMethodPage.tsx index 2a87dfce9ff3a..e456bc24f29b7 100644 --- a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteAccountingMethodPage.tsx +++ b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteAccountingMethodPage.tsx @@ -2,8 +2,8 @@ import {CONST as COMMON_CONST} from 'expensify-common'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -70,7 +70,7 @@ function NetSuiteAccountingMethodPage({policy, route}: WithPolicyConnectionsProp displayName="NetSuiteAccountingMethodPage" title="workspace.netsuite.advancedConfig.accountingMethods.label" headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExpenseReportApprovalLevel(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteApprovalAccountSelectPage.tsx b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteApprovalAccountSelectPage.tsx index 4b5fb3848d5c4..b6c1e8774effc 100644 --- a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteApprovalAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteApprovalAccountSelectPage.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -76,7 +76,7 @@ function NetSuiteApprovalAccountSelectPage({policy}: WithPolicyConnectionsProps) featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteApprovalAccountSelectPage" headerContent={headerContent} - data={netsuiteApprovalAccountOptions} + sections={netsuiteApprovalAccountOptions.length ? [{data: netsuiteApprovalAccountOptions}] : []} listItem={RadioListItem} onSelectRow={updateCollectionAccount} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteCollectionAccountSelectPage.tsx b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteCollectionAccountSelectPage.tsx index 11ac2d64d7dc9..1235e88b7f25d 100644 --- a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteCollectionAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteCollectionAccountSelectPage.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -74,7 +74,7 @@ function NetSuiteCollectionAccountSelectPage({policy}: WithPolicyConnectionsProp featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteCollectionAccountSelectPage" headerContent={headerContent} - data={netsuiteCollectionAccountOptions} + sections={netsuiteCollectionAccountOptions.length ? [{data: netsuiteCollectionAccountOptions}] : []} listItem={RadioListItem} onSelectRow={updateCollectionAccount} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteExpenseReportApprovalLevelSelectPage.tsx b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteExpenseReportApprovalLevelSelectPage.tsx index 2302aba38e6c1..d11f898d62e82 100644 --- a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteExpenseReportApprovalLevelSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteExpenseReportApprovalLevelSelectPage.tsx @@ -1,8 +1,8 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/ListItem/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -58,7 +58,7 @@ function NetSuiteExpenseReportApprovalLevelSelectPage({policy}: WithPolicyConnec displayName="NetSuiteExpenseReportApprovalLevelSelectPage" title="workspace.netsuite.advancedConfig.exportReportsTo.label" headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExpenseReportApprovalLevel(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteJournalEntryApprovalLevelSelectPage.tsx b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteJournalEntryApprovalLevelSelectPage.tsx index 0f0cf14a60757..34f21897b31b5 100644 --- a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteJournalEntryApprovalLevelSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteJournalEntryApprovalLevelSelectPage.tsx @@ -1,8 +1,8 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/ListItem/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -58,7 +58,7 @@ function NetSuiteJournalEntryApprovalLevelSelectPage({policy}: WithPolicyConnect displayName="NetSuiteJournalEntryApprovalLevelSelectPage" title="workspace.netsuite.advancedConfig.exportJournalsTo.label" headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectJournalApprovalLevel(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteReimbursementAccountSelectPage.tsx b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteReimbursementAccountSelectPage.tsx index c3c86c2ac9f06..65bc0c4152af0 100644 --- a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteReimbursementAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteReimbursementAccountSelectPage.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -74,7 +74,7 @@ function NetSuiteReimbursementAccountSelectPage({policy}: WithPolicyConnectionsP featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteReimbursementAccountSelectPage" headerContent={headerContent} - data={netsuiteReimbursableAccountOptions} + sections={netsuiteReimbursableAccountOptions.length ? [{data: netsuiteReimbursableAccountOptions}] : []} listItem={RadioListItem} onSelectRow={updateReimbursementAccount} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteVendorBillApprovalLevelSelectPage.tsx b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteVendorBillApprovalLevelSelectPage.tsx index 520d84e8ac876..69c07981ee9f9 100644 --- a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteVendorBillApprovalLevelSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteVendorBillApprovalLevelSelectPage.tsx @@ -1,8 +1,8 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -58,7 +58,7 @@ function NetSuiteVendorBillApprovalLevelSelectPage({policy}: WithPolicyConnectio displayName="NetSuiteVendorBillApprovalLevelSelectPage" title="workspace.netsuite.advancedConfig.exportVendorBillsTo.label" headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectVendorBillApprovalLevel(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteDateSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteDateSelectPage.tsx index da754ee2b9f1a..a533588e6395b 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteDateSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteDateSelectPage.tsx @@ -2,8 +2,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -70,7 +70,7 @@ function NetSuiteDateSelectPage({policy}: WithPolicyConnectionsProps) { displayName="NetSuiteDateSelectPage" title="workspace.netsuite.exportDate.label" headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExportDate(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesDestinationSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesDestinationSelectPage.tsx index 822fd1e713466..82b709da997ef 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesDestinationSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesDestinationSelectPage.tsx @@ -2,8 +2,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useState} from 'react'; import type {ValueOf} from 'type-fest'; import ConfirmModal from '@components/ConfirmModal'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; @@ -79,7 +79,7 @@ function NetSuiteExportExpensesDestinationSelectPage({policy}: WithPolicyConnect selectDestination(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} @@ -97,7 +97,7 @@ function NetSuiteExportExpensesDestinationSelectPage({policy}: WithPolicyConnect isVisible={isWarningModalVisible} title={translate('common.areYouSure')} onConfirm={() => { - selectDestination({value: CONST.NETSUITE_EXPORT_DESTINATION.EXPENSE_REPORT, keyForList: CONST.NETSUITE_EXPORT_DESTINATION.EXPENSE_REPORT}, true); + selectDestination({value: CONST.NETSUITE_EXPORT_DESTINATION.EXPENSE_REPORT}, true); setIsWarningModalVisible(false); }} onCancel={() => setIsWarningModalVisible(false)} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesJournalPostingPreferenceSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesJournalPostingPreferenceSelectPage.tsx index 5c2badb091af6..d80eaab5ae38c 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesJournalPostingPreferenceSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesJournalPostingPreferenceSelectPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback} from 'react'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; @@ -64,7 +64,7 @@ function NetSuiteExportExpensesJournalPostingPreferenceSelectPage({policy}: With selectPostingPreference(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesPayableAccountSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesPayableAccountSelectPage.tsx index d0cb687b0e30a..ab315731cbc5a 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesPayableAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesPayableAccountSelectPage.tsx @@ -1,7 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -78,7 +78,7 @@ function NetSuiteExportExpensesPayableAccountSelectPage({policy}: WithPolicyConn accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteExportExpensesPayableAccountSelectPage" - data={netsuitePayableAccountOptions} + sections={netsuitePayableAccountOptions.length ? [{data: netsuitePayableAccountOptions}] : []} listItem={RadioListItem} onSelectRow={updatePayableAccount} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesVendorSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesVendorSelectPage.tsx index 95d20e1c452b2..d78e1c5357ff9 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesVendorSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteExportExpensesVendorSelectPage.tsx @@ -1,7 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -72,7 +72,7 @@ function NetSuiteExportExpensesVendorSelectPage({policy}: WithPolicyConnectionsP accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteExportExpensesVendorSelectPage" - data={netsuiteVendorOptions} + sections={netsuiteVendorOptions.length ? [{data: netsuiteVendorOptions}] : []} listItem={RadioListItem} onSelectRow={updateDefaultVendor} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteInvoiceItemSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteInvoiceItemSelectPage.tsx index ad350c55360d1..6d04c0db326d9 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteInvoiceItemSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteInvoiceItemSelectPage.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -59,7 +59,7 @@ function NetSuiteInvoiceItemSelectPage({policy}: WithPolicyConnectionsProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteInvoiceItemSelectPage" - data={netsuiteInvoiceItemOptions} + sections={netsuiteInvoiceItemOptions.length ? [{data: netsuiteInvoiceItemOptions}] : []} listItem={RadioListItem} onSelectRow={updateInvoiceItem} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuitePreferredExporterSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuitePreferredExporterSelectPage.tsx index e6f4f85c3ee87..cee2860a0242e 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuitePreferredExporterSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuitePreferredExporterSelectPage.tsx @@ -2,8 +2,8 @@ import {useRoute} from '@react-navigation/native'; import isEmpty from 'lodash/isEmpty'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; @@ -98,7 +98,7 @@ function NetSuitePreferredExporterSelectPage({policy}: WithPolicyConnectionsProp accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuitePreferredExporterSelectPage" - data={data} + sections={[{data}]} listItem={RadioListItem} headerContent={headerContent} onSelectRow={selectExporter} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteProvincialTaxPostingAccountSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteProvincialTaxPostingAccountSelectPage.tsx index 6f81824a5e6e2..73eae1953f531 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteProvincialTaxPostingAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteProvincialTaxPostingAccountSelectPage.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -65,7 +65,7 @@ function NetSuiteProvincialTaxPostingAccountSelectPage({policy}: WithPolicyConne accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteProvincialTaxPostingAccountSelectPage" - data={netsuiteTaxAccountOptions} + sections={netsuiteTaxAccountOptions.length ? [{data: netsuiteTaxAccountOptions}] : []} listItem={RadioListItem} onSelectRow={updateTaxAccount} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteReceivableAccountSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteReceivableAccountSelectPage.tsx index 7cdfa5e1f698a..3704b497f6afd 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteReceivableAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteReceivableAccountSelectPage.tsx @@ -1,7 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -70,7 +70,7 @@ function NetSuiteReceivableAccountSelectPage({policy}: WithPolicyConnectionsProp accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteReceivableAccountSelectPage" - data={netsuiteReceivableAccountOptions} + sections={netsuiteReceivableAccountOptions.length ? [{data: netsuiteReceivableAccountOptions}] : []} listItem={RadioListItem} onSelectRow={updateReceivableAccount} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/netsuite/export/NetSuiteTaxPostingAccountSelectPage.tsx b/src/pages/workspace/accounting/netsuite/export/NetSuiteTaxPostingAccountSelectPage.tsx index 6f43dfc972990..c6c0e7fd84e1e 100644 --- a/src/pages/workspace/accounting/netsuite/export/NetSuiteTaxPostingAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/export/NetSuiteTaxPostingAccountSelectPage.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -67,7 +67,7 @@ function NetSuiteTaxPostingAccountSelectPage({policy}: WithPolicyConnectionsProp accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteTaxPostingAccountSelectPage" - data={netsuiteTaxAccountOptions} + sections={netsuiteTaxAccountOptions.length ? [{data: netsuiteTaxAccountOptions}] : []} listItem={RadioListItem} onSelectRow={updateTaxAccount} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomersOrProjectSelectPage.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomersOrProjectSelectPage.tsx index e3b96d5d90251..3658ed18fd11a 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomersOrProjectSelectPage.tsx +++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomersOrProjectSelectPage.tsx @@ -1,16 +1,16 @@ import React, {useCallback} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {updateNetSuiteCustomersJobsMapping} from '@libs/actions/connections/NetSuiteCommands'; -import {getLatestErrorField} from '@libs/ErrorUtils'; +import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import {areSettingsInErrorFields, settingsPendingAction} from '@libs/PolicyUtils'; import withPolicyConnections from '@pages/workspace/withPolicyConnections'; import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections'; -import {clearNetSuiteErrorField} from '@userActions/Policy/Policy'; +import * as Policy from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type {NetSuiteMappingValues} from '@src/types/onyx/Policy'; @@ -20,7 +20,7 @@ type ImportListItem = SelectorType & { }; function NetSuiteImportCustomersOrProjectSelectPage({policy}: WithPolicyConnectionsProps) { - const policyID = policy?.id; + const policyID = policy?.id ?? '-1'; const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -67,7 +67,7 @@ function NetSuiteImportCustomersOrProjectSelectPage({policy}: WithPolicyConnecti accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteImportCustomersOrProjectSelectPage" - data={inputSectionData} + sections={[{data: inputSectionData}]} listItem={RadioListItem} connectionName={CONST.POLICY.CONNECTIONS.NAME.NETSUITE} onSelectRow={(selection: SelectorType) => updateImportMapping(selection as ImportListItem)} @@ -76,8 +76,8 @@ function NetSuiteImportCustomersOrProjectSelectPage({policy}: WithPolicyConnecti title="workspace.common.displayedAs" errors={ areSettingsInErrorFields([CONST.NETSUITE_CONFIG.SYNC_OPTIONS.CUSTOMER_MAPPINGS.CUSTOMERS], netsuiteConfig?.errorFields) - ? getLatestErrorField(netsuiteConfig ?? {}, CONST.NETSUITE_CONFIG.SYNC_OPTIONS.CUSTOMER_MAPPINGS.CUSTOMERS) - : getLatestErrorField(netsuiteConfig ?? {}, CONST.NETSUITE_CONFIG.SYNC_OPTIONS.CUSTOMER_MAPPINGS.JOBS) + ? ErrorUtils.getLatestErrorField(netsuiteConfig ?? {}, CONST.NETSUITE_CONFIG.SYNC_OPTIONS.CUSTOMER_MAPPINGS.CUSTOMERS) + : ErrorUtils.getLatestErrorField(netsuiteConfig ?? {}, CONST.NETSUITE_CONFIG.SYNC_OPTIONS.CUSTOMER_MAPPINGS.JOBS) } errorRowStyles={[styles.ph5, styles.pv3]} pendingAction={settingsPendingAction( @@ -85,8 +85,8 @@ function NetSuiteImportCustomersOrProjectSelectPage({policy}: WithPolicyConnecti netsuiteConfig?.pendingFields, )} onClose={() => { - clearNetSuiteErrorField(policyID, CONST.NETSUITE_CONFIG.SYNC_OPTIONS.CUSTOMER_MAPPINGS.CUSTOMERS); - clearNetSuiteErrorField(policyID, CONST.NETSUITE_CONFIG.SYNC_OPTIONS.CUSTOMER_MAPPINGS.JOBS); + Policy.clearNetSuiteErrorField(policyID, CONST.NETSUITE_CONFIG.SYNC_OPTIONS.CUSTOMER_MAPPINGS.CUSTOMERS); + Policy.clearNetSuiteErrorField(policyID, CONST.NETSUITE_CONFIG.SYNC_OPTIONS.CUSTOMER_MAPPINGS.JOBS); }} /> ); diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportMappingPage.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportMappingPage.tsx index d10b79d855199..3a9882e637278 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportMappingPage.tsx +++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportMappingPage.tsx @@ -2,20 +2,20 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {TupleToUnion, ValueOf} from 'type-fest'; import RenderHTML from '@components/RenderHTML'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {updateNetSuiteImportMapping} from '@libs/actions/connections/NetSuiteCommands'; -import {getLatestErrorField} from '@libs/ErrorUtils'; +import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import Parser from '@libs/Parser'; import {settingsPendingAction} from '@libs/PolicyUtils'; import withPolicyConnections from '@pages/workspace/withPolicyConnections'; import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections'; -import {clearNetSuiteErrorField} from '@userActions/Policy/Policy'; +import * as Policy from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ROUTES from '@src/ROUTES'; @@ -41,7 +41,7 @@ function NetSuiteImportMappingPage({ params: {importField}, }, }: NetSuiteImportMappingPageProps) { - const policyID = policy?.id; + const policyID = policy?.id ?? '-1'; const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -99,7 +99,7 @@ function NetSuiteImportMappingPage({ accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="NetSuiteImportMappingPage" - data={inputSectionData} + sections={[{data: inputSectionData}]} listItem={RadioListItem} connectionName={CONST.POLICY.CONNECTIONS.NAME.NETSUITE} onSelectRow={(selection: SelectorType) => updateImportMapping(selection as ImportListItem)} @@ -109,9 +109,9 @@ function NetSuiteImportMappingPage({ title={titleKey} listFooterContent={listFooterContent} pendingAction={settingsPendingAction([importField], netsuiteConfig?.pendingFields)} - errors={getLatestErrorField(netsuiteConfig ?? {}, importField)} + errors={ErrorUtils.getLatestErrorField(netsuiteConfig ?? {}, importField)} errorRowStyles={[styles.ph5, styles.pv3]} - onClose={() => clearNetSuiteErrorField(policyID, importField)} + onClose={() => Policy.clearNetSuiteErrorField(policyID, importField)} /> ); } diff --git a/src/pages/workspace/accounting/qbd/advanced/QuickbooksDesktopAccountingMethodPage.tsx b/src/pages/workspace/accounting/qbd/advanced/QuickbooksDesktopAccountingMethodPage.tsx index c681b746adfa2..34e3d6909f646 100644 --- a/src/pages/workspace/accounting/qbd/advanced/QuickbooksDesktopAccountingMethodPage.tsx +++ b/src/pages/workspace/accounting/qbd/advanced/QuickbooksDesktopAccountingMethodPage.tsx @@ -2,8 +2,8 @@ import {CONST as COMMON_CONST} from 'expensify-common'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -68,7 +68,7 @@ function QuickbooksDesktopAccountingMethodPage({policy}: WithPolicyConnectionsPr displayName="QuickbooksDesktopAccountingMethodPage" headerTitleAlreadyTranslated={translate('workspace.qbd.accountingMethods.label')} headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectAccountingMethod(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopCompanyCardExpenseAccountSelectCardPage.tsx b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopCompanyCardExpenseAccountSelectCardPage.tsx index fb9020742fc70..e59c3a88465f4 100644 --- a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopCompanyCardExpenseAccountSelectCardPage.tsx +++ b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopCompanyCardExpenseAccountSelectCardPage.tsx @@ -1,7 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; @@ -38,8 +38,8 @@ function QuickbooksDesktopCompanyCardExpenseAccountSelectCardPage({policy}: With const route = useRoute>(); const backTo = route.params?.backTo; - const data: MenuItem[] = useMemo( - () => [ + const sections = useMemo(() => { + const options: MenuItem[] = [ { text: translate(`workspace.qbd.accounts.${CONST.QUICKBOOKS_DESKTOP_NON_REIMBURSABLE_EXPORT_ACCOUNT_TYPE.CREDIT_CARD}`), value: CONST.QUICKBOOKS_DESKTOP_NON_REIMBURSABLE_EXPORT_ACCOUNT_TYPE.CREDIT_CARD, @@ -64,9 +64,9 @@ function QuickbooksDesktopCompanyCardExpenseAccountSelectCardPage({policy}: With accounts: payableAccounts ?? [], defaultVendor: vendors?.[0]?.id ?? CONST.INTEGRATION_ENTITY_MAP_TYPES.NONE, }, - ], - [translate, nonReimbursable, creditCardAccounts, bankAccounts, payableAccounts, vendors], - ); + ]; + return [{data: options}]; + }, [translate, nonReimbursable, creditCardAccounts, bankAccounts, payableAccounts, vendors]); const goBack = useCallback(() => { Navigation.goBack(backTo ?? (policyID && ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_COMPANY_CARD_EXPENSE_ACCOUNT.getRoute(policyID))); @@ -101,11 +101,11 @@ function QuickbooksDesktopCompanyCardExpenseAccountSelectCardPage({policy}: With featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksDesktopCompanyCardExpenseAccountSelectCardPage" title="workspace.accounting.exportAs" - data={data} + sections={sections} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExportCompanyCard(selection as MenuItem)} shouldSingleExecuteRowSelect - initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} + initiallyFocusedOptionKey={sections.at(0)?.data.find((mode) => mode.isSelected)?.keyForList} connectionName={CONST.POLICY.CONNECTIONS.NAME.QBD} onBackButtonPress={goBack} errors={getLatestErrorField(qbdConfig, CONST.QUICKBOOKS_DESKTOP_CONFIG.NON_REIMBURSABLE)} diff --git a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopCompanyCardExpenseAccountSelectPage.tsx b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopCompanyCardExpenseAccountSelectPage.tsx index 9bc0ef26c0e25..447b66db72a27 100644 --- a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopCompanyCardExpenseAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopCompanyCardExpenseAccountSelectPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -86,7 +86,7 @@ function QuickbooksDesktopCompanyCardExpenseAccountSelectPage({policy}: WithPoli displayName="QuickbooksDesktopCompanyCardExpenseAccountSelectPage" headerTitleAlreadyTranslated={getQBDNonReimbursableExportAccountType(translate, nonReimbursable)} headerContent={nonReimbursable ? {translate(`workspace.qbd.accounts.${nonReimbursable}AccountDescription`)} : null} - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} onSelectRow={selectExportAccount} shouldSingleExecuteRowSelect diff --git a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopExportDateSelectPage.tsx b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopExportDateSelectPage.tsx index a50c96055e473..59f5a2ab17393 100644 --- a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopExportDateSelectPage.tsx +++ b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopExportDateSelectPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; @@ -67,7 +67,7 @@ function QuickbooksDesktopExportDateSelectPage({policy}: WithPolicyConnectionsPr accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksDesktopExportDateSelectPage" - data={data} + sections={[{data}]} listItem={RadioListItem} headerContent={{translate('workspace.qbd.exportDate.description')}} onBackButtonPress={goBack} diff --git a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopNonReimbursableDefaultVendorSelectPage.tsx b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopNonReimbursableDefaultVendorSelectPage.tsx index 178ccdea04bd3..f2c153691d7b6 100644 --- a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopNonReimbursableDefaultVendorSelectPage.tsx +++ b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopNonReimbursableDefaultVendorSelectPage.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; @@ -29,8 +29,8 @@ function QuickbooksDesktopNonReimbursableDefaultVendorSelectPage({policy}: WithP const nonReimbursableBillDefaultVendor = qbdConfig?.export?.nonReimbursableBillDefaultVendor; const policyID = policy?.id ?? CONST.DEFAULT_NUMBER_ID.toString(); - const data: CardListItem[] = useMemo( - () => + const sections = useMemo(() => { + const data: CardListItem[] = vendors?.map((vendor) => ({ value: vendor.id, text: vendor.name, @@ -38,9 +38,9 @@ function QuickbooksDesktopNonReimbursableDefaultVendorSelectPage({policy}: WithP // We use the logical OR (||) here instead of ?? because `nonReimbursableBillDefaultVendor` can be an empty string // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing isSelected: vendor.id === (nonReimbursableBillDefaultVendor || vendors.at(0)?.id), - })) ?? [], - [nonReimbursableBillDefaultVendor, vendors], - ); + })) ?? []; + return data.length ? [{data}] : []; + }, [nonReimbursableBillDefaultVendor, vendors]); const selectVendor = useCallback( (row: CardListItem) => { @@ -73,11 +73,11 @@ function QuickbooksDesktopNonReimbursableDefaultVendorSelectPage({policy}: WithP featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksDesktopNonReimbursableDefaultVendorSelectPage" title="workspace.accounting.defaultVendor" - data={data} + sections={sections} listItem={RadioListItem} onSelectRow={selectVendor} shouldSingleExecuteRowSelect - initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} + initiallyFocusedOptionKey={sections.at(0)?.data.find((mode) => mode.isSelected)?.keyForList} listEmptyContent={listEmptyContent} connectionName={CONST.POLICY.CONNECTIONS.NAME.QBD} onBackButtonPress={() => Navigation.goBack()} diff --git a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopOutOfPocketExpenseAccountSelectPage.tsx b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopOutOfPocketExpenseAccountSelectPage.tsx index b4d6928a0f06a..e2b8874a46321 100644 --- a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopOutOfPocketExpenseAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopOutOfPocketExpenseAccountSelectPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -108,7 +108,7 @@ function QuickbooksDesktopOutOfPocketExpenseAccountSelectPage({policy}: WithPoli accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksDesktopOutOfPocketExpenseAccountSelectPage" - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} headerContent={{description}} onBackButtonPress={goBack} diff --git a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopOutOfPocketExpenseEntitySelectPage.tsx b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopOutOfPocketExpenseEntitySelectPage.tsx index 8a797b28a188b..925bc5a8b5226 100644 --- a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopOutOfPocketExpenseEntitySelectPage.tsx +++ b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopOutOfPocketExpenseEntitySelectPage.tsx @@ -1,7 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; @@ -70,7 +70,7 @@ function QuickbooksDesktopOutOfPocketExpenseEntitySelectPage({policy}: WithPolic [translate, reimbursable, policy?.connections?.quickbooksDesktop], ); - const filteredData = useMemo(() => data.filter((item) => item.isShown), [data]); + const sections = useMemo(() => [{data: data.filter((item) => item.isShown)}], [data]); const selectExportEntity = useCallback( (row: MenuItem) => { @@ -99,7 +99,7 @@ function QuickbooksDesktopOutOfPocketExpenseEntitySelectPage({policy}: WithPolic accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksDesktopOutOfPocketExpenseEntitySelectPage" - data={filteredData} + sections={sections} listItem={RadioListItem} onBackButtonPress={goBack} onSelectRow={(selection: SelectorType) => selectExportEntity(selection as MenuItem)} diff --git a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopPreferredExporterConfigurationPage.tsx b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopPreferredExporterConfigurationPage.tsx index d6d1efb0e4de9..1b4654134804e 100644 --- a/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopPreferredExporterConfigurationPage.tsx +++ b/src/pages/workspace/accounting/qbd/export/QuickbooksDesktopPreferredExporterConfigurationPage.tsx @@ -1,7 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; @@ -93,7 +93,7 @@ function QuickbooksDesktopPreferredExporterConfigurationPage({policy}: WithPolic accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksDesktopPreferredExporterConfigurationPage" - data={data} + sections={[{data}]} listItem={RadioListItem} headerContent={headerContent} onBackButtonPress={goBack} diff --git a/src/pages/workspace/accounting/qbd/import/QuickbooksDesktopClassesDisplayedAsPage.tsx b/src/pages/workspace/accounting/qbd/import/QuickbooksDesktopClassesDisplayedAsPage.tsx index f13f1be974fcc..81599d11292e9 100644 --- a/src/pages/workspace/accounting/qbd/import/QuickbooksDesktopClassesDisplayedAsPage.tsx +++ b/src/pages/workspace/accounting/qbd/import/QuickbooksDesktopClassesDisplayedAsPage.tsx @@ -1,12 +1,12 @@ import React, {useCallback} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import {updateQuickbooksDesktopSyncClasses} from '@libs/actions/connections/QuickbooksDesktop'; -import {getLatestErrorField} from '@libs/ErrorUtils'; -import {settingsPendingAction} from '@libs/PolicyUtils'; +import * as QuickbooksDesktop from '@libs/actions/connections/QuickbooksDesktop'; +import * as ErrorUtils from '@libs/ErrorUtils'; +import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections'; import withPolicyConnections from '@pages/workspace/withPolicyConnections'; @@ -21,7 +21,7 @@ type CardListItem = ListItem & { function QuickbooksDesktopClassesDisplayedAsPage({policy}: WithPolicyConnectionsProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const policyID = policy?.id; + const policyID = policy?.id ?? '-1'; const qbdConfig = policy?.connections?.quickbooksDesktop?.config; const data: CardListItem[] = [ @@ -44,7 +44,7 @@ function QuickbooksDesktopClassesDisplayedAsPage({policy}: WithPolicyConnections const selectDisplayedAs = useCallback( (row: CardListItem) => { if (row.value !== qbdConfig?.mappings?.classes) { - updateQuickbooksDesktopSyncClasses(policyID, row.value, qbdConfig?.mappings?.classes); + QuickbooksDesktop.updateQuickbooksDesktopSyncClasses(policyID, row.value, qbdConfig?.mappings?.classes); } Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES.getRoute(policyID)); }, @@ -57,15 +57,15 @@ function QuickbooksDesktopClassesDisplayedAsPage({policy}: WithPolicyConnections accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksDesktopClassesDisplayedAsPage" - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CLASSES.getRoute(policyID))} onSelectRow={selectDisplayedAs} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} title="workspace.common.displayedAs" connectionName={CONST.POLICY.CONNECTIONS.NAME.QBD} - pendingAction={settingsPendingAction([CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CLASSES], qbdConfig?.pendingFields)} - errors={getLatestErrorField(qbdConfig, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CLASSES)} + pendingAction={PolicyUtils.settingsPendingAction([CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CLASSES], qbdConfig?.pendingFields)} + errors={ErrorUtils.getLatestErrorField(qbdConfig, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CLASSES)} errorRowStyles={[styles.ph5, styles.pv3]} onClose={() => clearQBDErrorField(policyID, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CLASSES)} shouldSingleExecuteRowSelect diff --git a/src/pages/workspace/accounting/qbd/import/QuickbooksDesktopCustomersDisplayedAsPage.tsx b/src/pages/workspace/accounting/qbd/import/QuickbooksDesktopCustomersDisplayedAsPage.tsx index ff780be881748..65f025bf9daae 100644 --- a/src/pages/workspace/accounting/qbd/import/QuickbooksDesktopCustomersDisplayedAsPage.tsx +++ b/src/pages/workspace/accounting/qbd/import/QuickbooksDesktopCustomersDisplayedAsPage.tsx @@ -1,12 +1,12 @@ import React, {useCallback} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import {updateQuickbooksDesktopSyncCustomers} from '@libs/actions/connections/QuickbooksDesktop'; -import {getLatestErrorField} from '@libs/ErrorUtils'; -import {settingsPendingAction} from '@libs/PolicyUtils'; +import * as QuickbooksDesktop from '@libs/actions/connections/QuickbooksDesktop'; +import * as ErrorUtils from '@libs/ErrorUtils'; +import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections'; import withPolicyConnections from '@pages/workspace/withPolicyConnections'; @@ -21,7 +21,7 @@ type CardListItem = ListItem & { function QuickbooksDesktopCustomersDisplayedAsPage({policy}: WithPolicyConnectionsProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const policyID = policy?.id; + const policyID = policy?.id ?? '-1'; const qbdConfig = policy?.connections?.quickbooksDesktop?.config; const data: CardListItem[] = [ @@ -44,7 +44,7 @@ function QuickbooksDesktopCustomersDisplayedAsPage({policy}: WithPolicyConnectio const selectDisplayedAs = useCallback( (row: CardListItem) => { if (row.value !== qbdConfig?.mappings?.customers) { - updateQuickbooksDesktopSyncCustomers(policyID, row.value, qbdConfig?.mappings?.customers); + QuickbooksDesktop.updateQuickbooksDesktopSyncCustomers(policyID, row.value, qbdConfig?.mappings?.customers); } Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CUSTOMERS.getRoute(policyID)); }, @@ -57,15 +57,15 @@ function QuickbooksDesktopCustomersDisplayedAsPage({policy}: WithPolicyConnectio accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksDesktopCustomersDisplayedAsPage" - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_CUSTOMERS.getRoute(policyID))} onSelectRow={selectDisplayedAs} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} title="workspace.common.displayedAs" connectionName={CONST.POLICY.CONNECTIONS.NAME.QBD} - pendingAction={settingsPendingAction([CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CUSTOMERS], qbdConfig?.pendingFields)} - errors={getLatestErrorField(qbdConfig, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CUSTOMERS)} + pendingAction={PolicyUtils.settingsPendingAction([CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CUSTOMERS], qbdConfig?.pendingFields)} + errors={ErrorUtils.getLatestErrorField(qbdConfig, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CUSTOMERS)} errorRowStyles={[styles.ph5, styles.pv3]} onClose={() => clearQBDErrorField(policyID, CONST.QUICKBOOKS_DESKTOP_CONFIG.MAPPINGS.CUSTOMERS)} shouldSingleExecuteRowSelect diff --git a/src/pages/workspace/accounting/qbo/advanced/QuickbooksAccountSelectPage.tsx b/src/pages/workspace/accounting/qbo/advanced/QuickbooksAccountSelectPage.tsx index e0f8e2ef6e056..57ee1490caba4 100644 --- a/src/pages/workspace/accounting/qbo/advanced/QuickbooksAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/qbo/advanced/QuickbooksAccountSelectPage.tsx @@ -1,8 +1,8 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -82,7 +82,7 @@ function QuickbooksAccountSelectPage({policy}: WithPolicyConnectionsProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksAccountSelectPage" - data={qboOnlineSelectorOptions} + sections={qboOnlineSelectorOptions.length ? [{data: qboOnlineSelectorOptions}] : []} listItem={RadioListItem} headerContent={listHeaderComponent} onSelectRow={saveSelection} diff --git a/src/pages/workspace/accounting/qbo/advanced/QuickbooksAccountingMethodPage.tsx b/src/pages/workspace/accounting/qbo/advanced/QuickbooksAccountingMethodPage.tsx index a5ae2291733db..a98d83d984ffe 100644 --- a/src/pages/workspace/accounting/qbo/advanced/QuickbooksAccountingMethodPage.tsx +++ b/src/pages/workspace/accounting/qbo/advanced/QuickbooksAccountingMethodPage.tsx @@ -2,8 +2,8 @@ import {CONST as COMMON_CONST} from 'expensify-common'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -69,7 +69,7 @@ function QuickbooksAccountingMethodPage({policy, route}: WithPolicyConnectionsPr displayName="QuickbooksAccountingMethodPage" headerTitleAlreadyTranslated={translate('workspace.qbo.accountingMethods.label')} headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExpenseReportApprovalLevel(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/qbo/advanced/QuickbooksInvoiceAccountSelectPage.tsx b/src/pages/workspace/accounting/qbo/advanced/QuickbooksInvoiceAccountSelectPage.tsx index 06948484b3176..d2abfcb33d91f 100644 --- a/src/pages/workspace/accounting/qbo/advanced/QuickbooksInvoiceAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/qbo/advanced/QuickbooksInvoiceAccountSelectPage.tsx @@ -1,8 +1,8 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -83,7 +83,7 @@ function QuickbooksInvoiceAccountSelectPage({policy}: WithPolicyConnectionsProps accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksInvoiceAccountSelectPage" - data={qboOnlineSelectorOptions} + sections={qboOnlineSelectorOptions.length ? [{data: qboOnlineSelectorOptions}] : []} listItem={RadioListItem} headerContent={listHeaderComponent} onSelectRow={updateAccount} diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectCardPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectCardPage.tsx index 06845f56789bd..0ffe61b81159f 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectCardPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectCardPage.tsx @@ -1,7 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -37,7 +37,7 @@ function QuickbooksCompanyCardExpenseAccountSelectCardPage({policy}: WithPolicyC const route = useRoute>(); const backTo = route.params?.backTo; - const data: MenuItem[] = useMemo(() => { + const sections = useMemo(() => { const options: MenuItem[] = [ { text: translate(`workspace.qbo.accounts.credit_card`), @@ -66,7 +66,7 @@ function QuickbooksCompanyCardExpenseAccountSelectCardPage({policy}: WithPolicyC defaultVendor: vendors?.[0]?.id ?? CONST.INTEGRATION_ENTITY_MAP_TYPES.NONE, }); } - return options; + return [{data: options}]; }, [translate, qboConfig?.nonReimbursableExpensesExportDestination, isLocationEnabled, accountPayable, bankAccounts, creditCards, vendors]); const goBack = useCallback(() => { @@ -102,11 +102,11 @@ function QuickbooksCompanyCardExpenseAccountSelectCardPage({policy}: WithPolicyC featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksCompanyCardExpenseAccountSelectCardPage" title="workspace.accounting.exportAs" - data={data} + sections={sections} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExportCompanyCard(selection as MenuItem)} shouldSingleExecuteRowSelect - initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} + initiallyFocusedOptionKey={sections.at(0)?.data.find((mode) => mode.isSelected)?.keyForList} connectionName={CONST.POLICY.CONNECTIONS.NAME.QBO} onBackButtonPress={goBack} listFooterContent={ diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectPage.tsx index 08e0b0380dad5..596573fb0de91 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -101,7 +101,7 @@ function QuickbooksCompanyCardExpenseAccountSelectPage({policy}: WithPolicyConne {translate(`workspace.qbo.accounts.${qboConfig?.nonReimbursableExpensesExportDestination}AccountDescription`)} ) : null } - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} onSelectRow={selectExportAccount} shouldSingleExecuteRowSelect diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksExportDateSelectPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksExportDateSelectPage.tsx index 41e63071e89e2..68e6561ac8558 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksExportDateSelectPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksExportDateSelectPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; @@ -60,7 +60,7 @@ function QuickbooksExportDateSelectPage({policy}: WithPolicyConnectionsProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksExportDateSelectPage" - data={data} + sections={[{data}]} listItem={RadioListItem} headerContent={{translate('workspace.qbo.exportDate.description')}} onBackButtonPress={goBack} diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksExportInvoiceAccountSelectPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksExportInvoiceAccountSelectPage.tsx index d8621a0d09fa2..c095987c84cf9 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksExportInvoiceAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksExportInvoiceAccountSelectPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -82,7 +82,7 @@ function QuickbooksExportInvoiceAccountSelectPage({policy}: WithPolicyConnection accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksExportInvoiceAccountSelectPage" - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} headerContent={{translate('workspace.qbo.exportInvoicesDescription')}} onBackButtonPress={goBack} diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksNonReimbursableDefaultVendorSelectPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksNonReimbursableDefaultVendorSelectPage.tsx index 2250c2cbf2029..3073cabbb5dad 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksNonReimbursableDefaultVendorSelectPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksNonReimbursableDefaultVendorSelectPage.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; @@ -28,16 +28,16 @@ function QuickbooksNonReimbursableDefaultVendorSelectPage({policy}: WithPolicyCo const qboConfig = policy?.connections?.quickbooksOnline?.config; const policyID = policy?.id ?? CONST.DEFAULT_NUMBER_ID.toString(); - const data: CardListItem[] = useMemo( - () => + const sections = useMemo(() => { + const data: CardListItem[] = vendors?.map((vendor) => ({ value: vendor.id, text: vendor.name, keyForList: vendor.name, isSelected: vendor.id === qboConfig?.nonReimbursableBillDefaultVendor, - })) ?? [], - [qboConfig?.nonReimbursableBillDefaultVendor, vendors], - ); + })) ?? []; + return data.length ? [{data}] : []; + }, [qboConfig?.nonReimbursableBillDefaultVendor, vendors]); const selectVendor = useCallback( (row: CardListItem) => { @@ -70,11 +70,11 @@ function QuickbooksNonReimbursableDefaultVendorSelectPage({policy}: WithPolicyCo featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksNonReimbursableDefaultVendorSelectPage" title="workspace.accounting.defaultVendor" - data={data} + sections={sections} listItem={RadioListItem} onSelectRow={selectVendor} shouldSingleExecuteRowSelect - initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} + initiallyFocusedOptionKey={sections.at(0)?.data.find((mode) => mode.isSelected)?.keyForList} listEmptyContent={listEmptyContent} connectionName={CONST.POLICY.CONNECTIONS.NAME.QBO} onBackButtonPress={() => Navigation.goBack()} diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseAccountSelectPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseAccountSelectPage.tsx index 4e9b0aef55985..d7f705412c225 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseAccountSelectPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -120,7 +120,7 @@ function QuickbooksOutOfPocketExpenseAccountSelectPage({policy}: WithPolicyConne accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksOutOfPocketExpenseAccountSelectPage" - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} headerContent={{description}} onBackButtonPress={goBack} diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseEntitySelectPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseEntitySelectPage.tsx index 73a953ed30185..620a0919edb8f 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseEntitySelectPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseEntitySelectPage.tsx @@ -1,8 +1,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -85,7 +85,7 @@ function QuickbooksOutOfPocketExpenseEntitySelectPage({policy}: WithPolicyConnec [qboConfig?.reimbursableExpensesExportDestination, qboConfig?.syncLocations, translate, bankAccounts, accountPayable, journalEntryAccounts, isTaxesEnabled], ); - const filteredData = useMemo(() => data.filter((item) => item.isShown), [data]); + const sections = useMemo(() => [{data: data.filter((item) => item.isShown)}], [data]); const goBack = useCallback(() => { Navigation.goBack(backTo ?? (policyID && ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT_OUT_OF_POCKET_EXPENSES.getRoute(policyID))); }, [policyID, backTo]); @@ -129,7 +129,7 @@ function QuickbooksOutOfPocketExpenseEntitySelectPage({policy}: WithPolicyConnec accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksOutOfPocketExpenseEntitySelectPage" - data={filteredData} + sections={sections} listItem={RadioListItem} onBackButtonPress={goBack} onSelectRow={(selection: SelectorType) => selectExportEntity(selection as MenuItem)} diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksPreferredExporterConfigurationPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksPreferredExporterConfigurationPage.tsx index a9ec3f6ae3c21..27193e69485ba 100644 --- a/src/pages/workspace/accounting/qbo/export/QuickbooksPreferredExporterConfigurationPage.tsx +++ b/src/pages/workspace/accounting/qbo/export/QuickbooksPreferredExporterConfigurationPage.tsx @@ -1,7 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; @@ -86,7 +86,7 @@ function QuickbooksPreferredExporterConfigurationPage({policy}: WithPolicyConnec accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksPreferredExporterConfigurationPage" - data={data} + sections={[{data}]} listItem={RadioListItem} headerContent={headerContent} onBackButtonPress={goBack} diff --git a/src/pages/workspace/accounting/qbo/import/QuickbooksClassesDisplayedAsPage.tsx b/src/pages/workspace/accounting/qbo/import/QuickbooksClassesDisplayedAsPage.tsx index 962b562403c36..64203c9126d11 100644 --- a/src/pages/workspace/accounting/qbo/import/QuickbooksClassesDisplayedAsPage.tsx +++ b/src/pages/workspace/accounting/qbo/import/QuickbooksClassesDisplayedAsPage.tsx @@ -1,11 +1,11 @@ import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import {updateQuickbooksOnlineSyncClasses} from '@libs/actions/connections/QuickbooksOnline'; -import {getLatestErrorField} from '@libs/ErrorUtils'; +import * as QuickbooksOnline from '@libs/actions/connections/QuickbooksOnline'; +import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import {isControlPolicy, settingsPendingAction} from '@libs/PolicyUtils'; import type {WithPolicyProps} from '@pages/workspace/withPolicy'; @@ -21,7 +21,7 @@ type CardListItem = ListItem & { function QuickbooksClassesDisplayedAsPage({policy}: WithPolicyProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const policyID = policy?.id; + const policyID = policy?.id ?? '-1'; const qboConfig = policy?.connections?.quickbooksOnline?.config; const data: CardListItem[] = useMemo( @@ -51,7 +51,7 @@ function QuickbooksClassesDisplayedAsPage({policy}: WithPolicyProps) { ); return; } - updateQuickbooksOnlineSyncClasses(policyID, row.value, qboConfig?.syncClasses); + QuickbooksOnline.updateQuickbooksOnlineSyncClasses(policyID, row.value, qboConfig?.syncClasses); } Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CLASSES.getRoute(policyID)); }, @@ -64,7 +64,7 @@ function QuickbooksClassesDisplayedAsPage({policy}: WithPolicyProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksClassesDisplayedAsPage" - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CLASSES.getRoute(policyID))} onSelectRow={selectDisplayedAs} @@ -73,7 +73,7 @@ function QuickbooksClassesDisplayedAsPage({policy}: WithPolicyProps) { title="workspace.common.displayedAs" connectionName={CONST.POLICY.CONNECTIONS.NAME.QBO} pendingAction={settingsPendingAction([CONST.QUICKBOOKS_CONFIG.SYNC_CLASSES], qboConfig?.pendingFields)} - errors={getLatestErrorField(qboConfig, CONST.QUICKBOOKS_CONFIG.SYNC_CLASSES)} + errors={ErrorUtils.getLatestErrorField(qboConfig, CONST.QUICKBOOKS_CONFIG.SYNC_CLASSES)} errorRowStyles={[styles.ph5, styles.pv3]} onClose={() => clearQBOErrorField(policyID, CONST.QUICKBOOKS_CONFIG.SYNC_CLASSES)} /> diff --git a/src/pages/workspace/accounting/qbo/import/QuickbooksCustomersDisplayedAsPage.tsx b/src/pages/workspace/accounting/qbo/import/QuickbooksCustomersDisplayedAsPage.tsx index 8f9f47e7a43cf..25262ea524b47 100644 --- a/src/pages/workspace/accounting/qbo/import/QuickbooksCustomersDisplayedAsPage.tsx +++ b/src/pages/workspace/accounting/qbo/import/QuickbooksCustomersDisplayedAsPage.tsx @@ -1,11 +1,11 @@ import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import {updateQuickbooksOnlineSyncCustomers} from '@libs/actions/connections/QuickbooksOnline'; -import {getLatestErrorField} from '@libs/ErrorUtils'; +import * as QuickbooksOnline from '@libs/actions/connections/QuickbooksOnline'; +import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import {isControlPolicy, settingsPendingAction} from '@libs/PolicyUtils'; import type {WithPolicyProps} from '@pages/workspace/withPolicy'; @@ -21,7 +21,7 @@ type CardListItem = ListItem & { function QuickbooksCustomersDisplayedAsPage({policy}: WithPolicyProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const policyID = policy?.id; + const policyID = policy?.id ?? '-1'; const qboConfig = policy?.connections?.quickbooksOnline?.config; const data: CardListItem[] = useMemo( @@ -51,7 +51,7 @@ function QuickbooksCustomersDisplayedAsPage({policy}: WithPolicyProps) { ); return; } - updateQuickbooksOnlineSyncCustomers(policyID, row.value, qboConfig?.syncCustomers); + QuickbooksOnline.updateQuickbooksOnlineSyncCustomers(policyID, row.value, qboConfig?.syncCustomers); } Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CUSTOMERS.getRoute(policyID)); }, @@ -64,7 +64,7 @@ function QuickbooksCustomersDisplayedAsPage({policy}: WithPolicyProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksCustomersDisplayedAsPage" - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CUSTOMERS.getRoute(policyID))} onSelectRow={(selection) => selectDisplayedAs(selection as CardListItem)} @@ -73,7 +73,7 @@ function QuickbooksCustomersDisplayedAsPage({policy}: WithPolicyProps) { title="workspace.common.displayedAs" connectionName={CONST.POLICY.CONNECTIONS.NAME.QBO} pendingAction={settingsPendingAction([CONST.QUICKBOOKS_CONFIG.SYNC_CUSTOMERS], qboConfig?.pendingFields)} - errors={getLatestErrorField(qboConfig, CONST.QUICKBOOKS_CONFIG.SYNC_CUSTOMERS)} + errors={ErrorUtils.getLatestErrorField(qboConfig, CONST.QUICKBOOKS_CONFIG.SYNC_CUSTOMERS)} errorRowStyles={[styles.ph5, styles.pv3]} onClose={() => clearQBOErrorField(policyID, CONST.QUICKBOOKS_CONFIG.SYNC_CUSTOMERS)} /> diff --git a/src/pages/workspace/accounting/qbo/import/QuickbooksLocationsDisplayedAsPage.tsx b/src/pages/workspace/accounting/qbo/import/QuickbooksLocationsDisplayedAsPage.tsx index e475c8b512a83..71125294a6819 100644 --- a/src/pages/workspace/accounting/qbo/import/QuickbooksLocationsDisplayedAsPage.tsx +++ b/src/pages/workspace/accounting/qbo/import/QuickbooksLocationsDisplayedAsPage.tsx @@ -1,11 +1,11 @@ import React, {useCallback, useMemo} from 'react'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import {updateQuickbooksOnlineSyncLocations} from '@libs/actions/connections/QuickbooksOnline'; -import {getLatestErrorField} from '@libs/ErrorUtils'; +import * as QuickbooksOnline from '@libs/actions/connections/QuickbooksOnline'; +import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import {isControlPolicy, settingsPendingAction} from '@libs/PolicyUtils'; import type {WithPolicyProps} from '@pages/workspace/withPolicy'; @@ -21,7 +21,7 @@ type CardListItem = ListItem & { function QuickbooksLocationsDisplayedAsPage({policy}: WithPolicyProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const policyID = policy?.id; + const policyID = policy?.id ?? '-1'; const qboConfig = policy?.connections?.quickbooksOnline?.config; const data: CardListItem[] = useMemo(() => { @@ -58,7 +58,7 @@ function QuickbooksLocationsDisplayedAsPage({policy}: WithPolicyProps) { ); return; } - updateQuickbooksOnlineSyncLocations(policyID, row.value, qboConfig?.syncLocations); + QuickbooksOnline.updateQuickbooksOnlineSyncLocations(policyID, row.value, qboConfig?.syncLocations); } Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_LOCATIONS.getRoute(policyID)); }, @@ -71,7 +71,7 @@ function QuickbooksLocationsDisplayedAsPage({policy}: WithPolicyProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="QuickbooksLocationsDisplayedAsPage" - data={data} + sections={data.length ? [{data}] : []} listItem={RadioListItem} onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_LOCATIONS.getRoute(policyID))} onSelectRow={(selection) => selectDisplayedAs(selection as CardListItem)} @@ -80,7 +80,7 @@ function QuickbooksLocationsDisplayedAsPage({policy}: WithPolicyProps) { title="workspace.common.displayedAs" connectionName={CONST.POLICY.CONNECTIONS.NAME.QBO} pendingAction={settingsPendingAction([CONST.QUICKBOOKS_CONFIG.SYNC_LOCATIONS], qboConfig?.pendingFields)} - errors={getLatestErrorField(qboConfig, CONST.QUICKBOOKS_CONFIG.SYNC_LOCATIONS)} + errors={ErrorUtils.getLatestErrorField(qboConfig, CONST.QUICKBOOKS_CONFIG.SYNC_LOCATIONS)} errorRowStyles={[styles.ph5, styles.pv3]} onClose={() => clearQBOErrorField(policyID, CONST.QUICKBOOKS_CONFIG.SYNC_LOCATIONS)} /> diff --git a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx index d9b4e40ba34f2..09eec5343c909 100644 --- a/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx @@ -1,7 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; @@ -100,7 +100,7 @@ function XeroMapTrackingCategoryConfigurationPage({policy}: WithPolicyProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="XeroMapTrackingCategoryConfigurationPage" - data={optionsList} + sections={optionsList.length ? [{data: optionsList}] : []} listItem={RadioListItem} onSelectRow={updateMapping} initiallyFocusedOptionKey={optionsList.find((option) => option.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx index cd9c7084777ac..1fa9bf6754746 100644 --- a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx @@ -1,8 +1,8 @@ import React, {useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; @@ -84,7 +84,7 @@ function XeroOrganizationConfigurationPage({ accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="XeroOrganizationConfigurationPage" - data={sections} + sections={sections.length ? [{data: sections}] : []} listItem={RadioListItem} connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO} onSelectRow={saveSelection} diff --git a/src/pages/workspace/accounting/xero/advanced/XeroAccountingMethodPage.tsx b/src/pages/workspace/accounting/xero/advanced/XeroAccountingMethodPage.tsx index 4d9d131e85f20..381a084477c14 100644 --- a/src/pages/workspace/accounting/xero/advanced/XeroAccountingMethodPage.tsx +++ b/src/pages/workspace/accounting/xero/advanced/XeroAccountingMethodPage.tsx @@ -2,8 +2,8 @@ import {CONST as COMMON_CONST} from 'expensify-common'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -69,7 +69,7 @@ function XeroAccountingMethodPage({policy, route}: WithPolicyConnectionsProps) { displayName="XeroAccountingMethodPage" headerTitleAlreadyTranslated={translate('workspace.xero.accountingMethods.label')} headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExpenseReportApprovalLevel(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/xero/advanced/XeroBillPaymentAccountSelectorPage.tsx b/src/pages/workspace/accounting/xero/advanced/XeroBillPaymentAccountSelectorPage.tsx index b5ac786369f18..2ea33df13f9e4 100644 --- a/src/pages/workspace/accounting/xero/advanced/XeroBillPaymentAccountSelectorPage.tsx +++ b/src/pages/workspace/accounting/xero/advanced/XeroBillPaymentAccountSelectorPage.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -68,7 +68,7 @@ function XeroBillPaymentAccountSelectorPage({policy}: WithPolicyConnectionsProps accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="XeroBillPaymentAccountSelectorPage" - data={xeroSelectorOptions} + sections={xeroSelectorOptions.length ? [{data: xeroSelectorOptions}] : []} listItem={RadioListItem} connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO} shouldBeBlocked={!syncReimbursedReports} diff --git a/src/pages/workspace/accounting/xero/advanced/XeroInvoiceAccountSelectorPage.tsx b/src/pages/workspace/accounting/xero/advanced/XeroInvoiceAccountSelectorPage.tsx index b94b984094460..bb1e142113acb 100644 --- a/src/pages/workspace/accounting/xero/advanced/XeroInvoiceAccountSelectorPage.tsx +++ b/src/pages/workspace/accounting/xero/advanced/XeroInvoiceAccountSelectorPage.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -68,7 +68,7 @@ function XeroInvoiceAccountSelectorPage({policy}: WithPolicyConnectionsProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="XeroInvoiceAccountSelectorPage" - data={xeroSelectorOptions} + sections={xeroSelectorOptions.length ? [{data: xeroSelectorOptions}] : []} listItem={RadioListItem} connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO} shouldBeBlocked={!syncReimbursedReports} diff --git a/src/pages/workspace/accounting/xero/export/XeroBankAccountSelectPage.tsx b/src/pages/workspace/accounting/xero/export/XeroBankAccountSelectPage.tsx index 031e89d6a43dc..7f619f3d0f101 100644 --- a/src/pages/workspace/accounting/xero/export/XeroBankAccountSelectPage.tsx +++ b/src/pages/workspace/accounting/xero/export/XeroBankAccountSelectPage.tsx @@ -2,7 +2,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; import type {SelectorType} from '@components/SelectionScreen'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -84,7 +84,7 @@ function XeroBankAccountSelectPage({policy}: WithPolicyConnectionsProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="XeroBankAccountSelectPage" - data={xeroSelectorOptions} + sections={xeroSelectorOptions.length ? [{data: xeroSelectorOptions}] : []} listItem={RadioListItem} onSelectRow={updateBankAccount} initiallyFocusedOptionKey={initiallyFocusedOptionKey} diff --git a/src/pages/workspace/accounting/xero/export/XeroPreferredExporterSelectPage.tsx b/src/pages/workspace/accounting/xero/export/XeroPreferredExporterSelectPage.tsx index a502c94b767bc..152fd8ada4853 100644 --- a/src/pages/workspace/accounting/xero/export/XeroPreferredExporterSelectPage.tsx +++ b/src/pages/workspace/accounting/xero/export/XeroPreferredExporterSelectPage.tsx @@ -2,8 +2,8 @@ import {useRoute} from '@react-navigation/native'; import isEmpty from 'lodash/isEmpty'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import Text from '@components/Text'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; @@ -100,7 +100,7 @@ function XeroPreferredExporterSelectPage({policy}: WithPolicyConnectionsProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} displayName="XeroPreferredExporterSelectPage" - data={data} + sections={[{data}]} listItem={RadioListItem} headerContent={headerContent} onSelectRow={selectExporter} diff --git a/src/pages/workspace/accounting/xero/export/XeroPurchaseBillDateSelectPage.tsx b/src/pages/workspace/accounting/xero/export/XeroPurchaseBillDateSelectPage.tsx index 630798d09eba8..550ccbd8cc131 100644 --- a/src/pages/workspace/accounting/xero/export/XeroPurchaseBillDateSelectPage.tsx +++ b/src/pages/workspace/accounting/xero/export/XeroPurchaseBillDateSelectPage.tsx @@ -2,8 +2,8 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -69,7 +69,7 @@ function XeroPurchaseBillDateSelectPage({policy}: WithPolicyConnectionsProps) { displayName="XeroPurchaseBillDateSelectPage" title="workspace.xero.exportDate.label" headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectExportDate(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/accounting/xero/export/XeroPurchaseBillStatusSelectorPage.tsx b/src/pages/workspace/accounting/xero/export/XeroPurchaseBillStatusSelectorPage.tsx index f3d9547be48e2..ceb5b45e44302 100644 --- a/src/pages/workspace/accounting/xero/export/XeroPurchaseBillStatusSelectorPage.tsx +++ b/src/pages/workspace/accounting/xero/export/XeroPurchaseBillStatusSelectorPage.tsx @@ -3,8 +3,8 @@ import isEmpty from 'lodash/isEmpty'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; -import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; -import type {ListItem} from '@components/SelectionList/types'; +import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import type {ListItem} from '@components/SelectionListWithSections/types'; import SelectionScreen from '@components/SelectionScreen'; import type {SelectorType} from '@components/SelectionScreen'; import Text from '@components/Text'; @@ -81,7 +81,7 @@ function XeroPurchaseBillStatusSelectorPage({policy}: WithPolicyConnectionsProps displayName="XeroPurchaseBillStatusSelectorPage" title="workspace.xero.invoiceStatus.label" headerContent={headerContent} - data={data} + sections={[{data}]} listItem={RadioListItem} onSelectRow={(selection: SelectorType) => selectPurchaseBillStatus(selection as MenuListItem)} initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList} diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx index ab246a1d31089..b97eff30cd53f 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx @@ -105,7 +105,7 @@ function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCard } featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED} displayName="WorkspaceCompanyCardAccountSelectCardPage" - data={searchedListOptions ?? []} + sections={[{data: searchedListOptions ?? []}]} listItem={RadioListItem} textInputOptions={{ label: translate('common.search'),