diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 8d8835d5e826..efef547fe252 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -304,6 +304,16 @@ const DYNAMIC_ROUTES = { path: 'imported', entryScreens: [SCREENS.WORKSPACE.CATEGORIES], }, + SPEND_CATEGORY_SELECTOR: { + path: 'spend-category-selector/:groupID', + entryScreens: [SCREENS.WORKSPACE.CATEGORIES_SETTINGS, SCREENS.SETTINGS_CATEGORIES.SETTINGS_CATEGORIES_SETTINGS], + getRoute: (groupID: string) => `spend-category-selector/${groupID}` as const, + }, + DEFAULT_CATEGORY_SELECTOR: { + path: 'default-category-selector/:customUnitID', + entryScreens: [SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS, SCREENS.WORKSPACE.PER_DIEM_SETTINGS], + getRoute: (customUnitID: string) => `default-category-selector/${customUnitID}` as const, + }, WORKSPACE_INVITE: { path: 'invite', entryScreens: [SCREENS.WORKSPACE.PROFILE, SCREENS.WORKSPACE.MEMBERS], diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 2698b3034b9b..f9b805710206 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -786,6 +786,8 @@ const SCREENS = { CATEGORIES_SETTINGS: 'Categories_Settings', DYNAMIC_CATEGORIES_IMPORT: 'Dynamic_Categories_Import', DYNAMIC_CATEGORIES_IMPORTED: 'Dynamic_Categories_Imported', + DYNAMIC_SPEND_CATEGORY_SELECTOR: 'Dynamic_Spend_Category_Selector', + DYNAMIC_DEFAULT_CATEGORY_SELECTOR: 'Dynamic_Default_Category_Selector', MORE_FEATURES: 'Workspace_More_Features', MEMBER_DETAILS: 'Workspace_Member_Details', MEMBER_DETAILS_ROLE: 'Workspace_Member_Details_Role', diff --git a/src/components/CategorySelector/CategorySelectorModal.tsx b/src/components/CategorySelector/CategorySelectorModal.tsx deleted file mode 100644 index c44295a773b3..000000000000 --- a/src/components/CategorySelector/CategorySelectorModal.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import CategoryPicker from '@components/CategoryPicker'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import Modal from '@components/Modal'; -import ScreenWrapper from '@components/ScreenWrapper'; -import type {ListItem} from '@components/SelectionList/types'; -import useThemeStyles from '@hooks/useThemeStyles'; -import CONST from '@src/CONST'; - -type CategorySelectorModalProps = { - /** The ID of the associated policy */ - policyID: string; - - /** Whether the modal is visible */ - isVisible: boolean; - - /** Selected category */ - currentCategory: string; - - /** Function to call when the user selects a category */ - onCategorySelected: (value: ListItem) => void; - - /** Function to call when the user closes the category selector modal */ - onClose: () => void; - - /** Label to display on field */ - label: string; -}; - -function CategorySelectorModal({policyID, isVisible, currentCategory, onCategorySelected, onClose, label}: CategorySelectorModalProps) { - const styles = useThemeStyles(); - - return ( - - - - - - - ); -} - -export default CategorySelectorModal; diff --git a/src/components/CategorySelector/index.tsx b/src/components/CategorySelector/index.tsx deleted file mode 100644 index 55c7d563dbc5..000000000000 --- a/src/components/CategorySelector/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import type {StyleProp, ViewStyle} from 'react-native'; -import {View} from 'react-native'; -import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; -import type {ListItem} from '@components/SelectionList/types'; -import useThemeStyles from '@hooks/useThemeStyles'; -import {getDecodedCategoryName} from '@libs/CategoryUtils'; -import CONST from '@src/CONST'; -import CategorySelectorModal from './CategorySelectorModal'; - -type CategorySelectorProps = { - /** The ID of the associated policy */ - policyID: string; - - /** Function to call when the user selects a category */ - setNewCategory: (value: ListItem) => void; - - /** Currently selected category */ - defaultValue?: string; - - /** Label to display on field */ - label: string; - - /** Any additional styles to apply */ - wrapperStyle: StyleProp; - - /** Whether item is focused or active */ - focused?: boolean; - - /** Whether category item picker is visible */ - isPickerVisible: boolean; - - /** Callback to show category picker */ - showPickerModal: () => void; - - /** Callback to hide category picker */ - hidePickerModal: () => void; -}; - -function CategorySelector({defaultValue = '', wrapperStyle, label, setNewCategory, policyID, focused, isPickerVisible, showPickerModal, hidePickerModal}: CategorySelectorProps) { - const styles = useThemeStyles(); - - const updateCategoryInput = (categoryItem: ListItem) => { - setNewCategory(categoryItem); - hidePickerModal(); - }; - - const decodedCategoryName = getDecodedCategoryName(defaultValue); - const descStyle = decodedCategoryName.length === 0 ? styles.textNormal : null; - - return ( - - - - - ); -} - -export default CategorySelector; diff --git a/src/components/CustomUnitDefaultCategorySelector/index.tsx b/src/components/CustomUnitDefaultCategorySelector/index.tsx new file mode 100644 index 000000000000..6f79867cd269 --- /dev/null +++ b/src/components/CustomUnitDefaultCategorySelector/index.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import type {StyleProp, ViewStyle} from 'react-native'; +import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import useThemeStyles from '@hooks/useThemeStyles'; +import {getDecodedCategoryName} from '@libs/CategoryUtils'; +import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute'; +import Navigation from '@libs/Navigation/Navigation'; +import CONST from '@src/CONST'; +import {DYNAMIC_ROUTES} from '@src/ROUTES'; + +type CustomUnitDefaultCategorySelectorProps = { + /** Currently selected category */ + defaultValue?: string; + + /** Label to display on field */ + label: string; + + /** Any additional styles to apply */ + wrapperStyle: StyleProp; + + /** Whether item is focused or active */ + focused?: boolean; + + /** The custom unit ID to update when selecting a category */ + customUnitID: string; +}; + +function CustomUnitDefaultCategorySelector({defaultValue = '', wrapperStyle, label, focused, customUnitID}: CustomUnitDefaultCategorySelectorProps) { + const styles = useThemeStyles(); + + const decodedCategoryName = getDecodedCategoryName(defaultValue); + const descStyle = decodedCategoryName.length === 0 ? styles.textNormal : null; + + const onPress = () => { + Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.DEFAULT_CATEGORY_SELECTOR.getRoute(customUnitID))); + }; + + return ( + + ); +} + +export default CustomUnitDefaultCategorySelector; diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 8604d51daef1..9d174a73cbc3 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -525,6 +525,8 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/workspace/categories/WorkspaceCategoriesSettingsPage').default, [SCREENS.WORKSPACE.DYNAMIC_CATEGORIES_IMPORT]: () => require('../../../../pages/workspace/categories/ImportCategoriesPage').default, [SCREENS.WORKSPACE.DYNAMIC_CATEGORIES_IMPORTED]: () => require('../../../../pages/workspace/categories/ImportedCategoriesPage').default, + [SCREENS.WORKSPACE.DYNAMIC_SPEND_CATEGORY_SELECTOR]: () => require('../../../../pages/workspace/categories/DynamicSpendCategorySelectorPage').default, + [SCREENS.WORKSPACE.DYNAMIC_DEFAULT_CATEGORY_SELECTOR]: () => require('../../../../pages/workspace/categories/DynamicDefaultCategorySelectorPage').default, [SCREENS.WORKSPACE.UPGRADE]: () => require('../../../../pages/workspace/upgrade/WorkspaceUpgradePage').default, [SCREENS.WORKSPACE.DOWNGRADE]: () => require('../../../../pages/workspace/downgrade/WorkspaceDowngradePage').default, [SCREENS.WORKSPACE.PAY_AND_DOWNGRADE]: () => require('../../../../pages/workspace/downgrade/PayAndDowngradePage').default, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index dd3ab9ad391c..9d9c860d9e71 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -996,6 +996,8 @@ const config: LinkingOptions['config'] = { }, [SCREENS.WORKSPACE.DYNAMIC_CATEGORIES_IMPORT]: DYNAMIC_ROUTES.WORKSPACE_CATEGORIES_IMPORT.path, [SCREENS.WORKSPACE.DYNAMIC_CATEGORIES_IMPORTED]: DYNAMIC_ROUTES.WORKSPACE_CATEGORIES_IMPORTED.path, + [SCREENS.WORKSPACE.DYNAMIC_SPEND_CATEGORY_SELECTOR]: DYNAMIC_ROUTES.SPEND_CATEGORY_SELECTOR.path, + [SCREENS.WORKSPACE.DYNAMIC_DEFAULT_CATEGORY_SELECTOR]: DYNAMIC_ROUTES.DEFAULT_CATEGORY_SELECTOR.path, [SCREENS.WORKSPACE.WORKFLOWS_PAYER]: { path: ROUTES.WORKSPACE_WORKFLOWS_PAYER.route, }, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 54c1f01fe720..f06d846f0b48 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -438,6 +438,14 @@ type SettingsNavigatorParamList = { // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md backTo?: Routes; }; + [SCREENS.WORKSPACE.DYNAMIC_SPEND_CATEGORY_SELECTOR]: { + policyID: string; + groupID: string; + }; + [SCREENS.WORKSPACE.DYNAMIC_DEFAULT_CATEGORY_SELECTOR]: { + policyID: string; + customUnitID: string; + }; [SCREENS.WORKSPACE.DYNAMIC_CATEGORIES_IMPORT]: { policyID: string; }; diff --git a/src/pages/workspace/categories/DynamicDefaultCategorySelectorPage.tsx b/src/pages/workspace/categories/DynamicDefaultCategorySelectorPage.tsx new file mode 100644 index 000000000000..5dd84768f837 --- /dev/null +++ b/src/pages/workspace/categories/DynamicDefaultCategorySelectorPage.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import CategoryPicker from '@components/CategoryPicker'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import type {ListItem} from '@components/SelectionList/types'; +import useDynamicBackPath from '@hooks/useDynamicBackPath'; +import useLocalize from '@hooks/useLocalize'; +import useOnyx from '@hooks/useOnyx'; +import useThemeStyles from '@hooks/useThemeStyles'; +import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; +import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; +import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; +import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; +import {setPolicyCustomUnitDefaultCategory} from '@userActions/Policy/Category'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import {DYNAMIC_ROUTES} from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; + +type DynamicDefaultCategorySelectorPageProps = PlatformStackScreenProps; + +function DynamicDefaultCategorySelectorPage({route}: DynamicDefaultCategorySelectorPageProps) { + const {policyID, customUnitID} = route.params; + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(policyID)}`); + const currentCategory = policy?.customUnits?.[customUnitID]?.defaultCategory ?? ''; + const backPath = useDynamicBackPath(DYNAMIC_ROUTES.DEFAULT_CATEGORY_SELECTOR.path); + + const onCategorySelected = (selectedCategory: ListItem) => { + if (!selectedCategory.searchText) { + return; + } + if (currentCategory === selectedCategory.searchText) { + Navigation.goBack(backPath); + return; + } + setPolicyCustomUnitDefaultCategory(policyID, customUnitID, currentCategory, selectedCategory.searchText); + Navigation.goBack(backPath); + }; + + return ( + + + Navigation.goBack(backPath)} + /> + + + + ); +} + +export default DynamicDefaultCategorySelectorPage; diff --git a/src/pages/workspace/categories/DynamicSpendCategorySelectorPage.tsx b/src/pages/workspace/categories/DynamicSpendCategorySelectorPage.tsx new file mode 100644 index 000000000000..9d4aa2db8d4b --- /dev/null +++ b/src/pages/workspace/categories/DynamicSpendCategorySelectorPage.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import CategoryPicker from '@components/CategoryPicker'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import type {ListItem} from '@components/SelectionList/types'; +import useDynamicBackPath from '@hooks/useDynamicBackPath'; +import useOnyx from '@hooks/useOnyx'; +import useThemeStyles from '@hooks/useThemeStyles'; +import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; +import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; +import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; +import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; +import {setWorkspaceDefaultSpendCategory} from '@userActions/Policy/Policy'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import {DYNAMIC_ROUTES} from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; + +type DynamicSpendCategorySelectorPageProps = PlatformStackScreenProps; + +function DynamicSpendCategorySelectorPage({route}: DynamicSpendCategorySelectorPageProps) { + const {policyID, groupID} = route.params; + const styles = useThemeStyles(); + const backPath = useDynamicBackPath(DYNAMIC_ROUTES.SPEND_CATEGORY_SELECTOR.path); + + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(policyID)}`); + const label = groupID.charAt(0).toUpperCase() + groupID.slice(1); + const currentCategory = policy?.mccGroup?.[groupID]?.category ?? ''; + + const onCategorySelected = (selectedCategory: ListItem) => { + if (!selectedCategory.keyForList) { + return; + } + if (currentCategory === selectedCategory.keyForList) { + Navigation.goBack(backPath); + return; + } + setWorkspaceDefaultSpendCategory(policyID, groupID, selectedCategory.keyForList, policy?.mccGroup); + Navigation.goBack(backPath); + }; + + return ( + + + Navigation.goBack(backPath)} + /> + + + + ); +} + +export default DynamicSpendCategorySelectorPage; diff --git a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx index 15332777af63..c27d257f9a1a 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx @@ -1,6 +1,5 @@ -import React, {useCallback, useMemo, useState} from 'react'; +import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; -import CategorySelectorModal from '@components/CategorySelector/CategorySelectorModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; @@ -11,6 +10,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import usePolicyData from '@hooks/usePolicyData'; import useThemeStyles from '@hooks/useThemeStyles'; +import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; @@ -21,11 +21,10 @@ import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnec import withPolicyConnections from '@pages/workspace/withPolicyConnections'; import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow'; import {setWorkspaceRequiresCategory} from '@userActions/Policy/Category'; -import {clearPolicyErrorField, setWorkspaceDefaultSpendCategory} from '@userActions/Policy/Policy'; +import {clearPolicyErrorField} from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; -import ROUTES from '@src/ROUTES'; +import ROUTES, {DYNAMIC_ROUTES} from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; -import KeyboardUtils from '@src/utils/keyboard'; type WorkspaceCategoriesSettingsPageProps = WithPolicyConnectionsProps & ( @@ -40,9 +39,6 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet const policyData = usePolicyData(policyID); const isConnectedToAccounting = Object.keys(policy?.connections ?? {}).length > 0; const currentConnectionName = getCurrentConnectionName(policy); - const [isSelectorModalVisible, setIsSelectorModalVisible] = useState(false); - const [categoryID, setCategoryID] = useState(); - const [groupID, setGroupID] = useState(); const isQuickSettingsFlow = route.name === SCREENS.SETTINGS_CATEGORIES.SETTINGS_CATEGORIES_SETTINGS; const toggleSubtitle = isConnectedToAccounting && currentConnectionName ? translate('workspace.categories.needCategoryForExportToIntegration', currentConnectionName) : undefined; @@ -72,27 +68,12 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet const hasEnabledCategories = hasEnabledOptions(policyData.categories); const isToggleDisabled = !policy?.areCategoriesEnabled || !hasEnabledCategories || isConnectedToAccounting; - const setNewCategory = (selectedCategory: ListItem, currentGroupID: string) => { - if (!selectedCategory.keyForList) { - return; - } - if (categoryID !== selectedCategory.keyForList) { - setWorkspaceDefaultSpendCategory(policyID, currentGroupID, selectedCategory.keyForList, policy?.mccGroup); - } - - KeyboardUtils.dismiss({ - afterTransition: () => setIsSelectorModalVisible(false), - }); - }; - const onSelectItem = (item: ListItem) => { - if (!item.groupID || !item.categoryID) { + if (!item.groupID) { return; } - setIsSelectorModalVisible(true); - setCategoryID(item.categoryID); - setGroupID(item.groupID); + Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.SPEND_CATEGORY_SELECTOR.getRoute(item.groupID))); }; const selectionListHeaderContent = ( @@ -149,16 +130,6 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet )} - {!!categoryID && !!groupID && ( - setIsSelectorModalVisible(false)} - onCategorySelected={(selectedCategory) => setNewCategory(selectedCategory, groupID)} - label={groupID[0].toUpperCase() + groupID.slice(1)} - /> - )} ); diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx index 755f2dd5b9c9..7649cc3f801d 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx @@ -1,13 +1,12 @@ -import React, {useState} from 'react'; +import React from 'react'; import {View} from 'react-native'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; -import CategorySelector from '@components/CategorySelector'; +import CustomUnitDefaultCategorySelector from '@components/CustomUnitDefaultCategorySelector'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import RenderHTML from '@components/RenderHTML'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; -import type {ListItem} from '@components/SelectionList/types'; import Switch from '@components/Switch'; import Text from '@components/Text'; import type {UnitItemType} from '@components/UnitPicker'; @@ -21,7 +20,6 @@ import {hasEnabledOptions} from '@libs/OptionsListUtils'; import {getDistanceRateCustomUnit} from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; -import {setPolicyCustomUnitDefaultCategory} from '@userActions/Policy/Category'; import {clearPolicyDistanceRatesErrorFields, setPolicyDistanceRatesUnit} from '@userActions/Policy/DistanceRate'; import {enableDistanceRequestTax} from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; @@ -39,7 +37,6 @@ function PolicyDistanceRatesSettingsPage({route}: PolicyDistanceRatesSettingsPag const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`); const styles = useThemeStyles(); - const [isCategoryPickerVisible, setIsCategoryPickerVisible] = useState(false); const {translate} = useLocalize(); const customUnit = getDistanceRateCustomUnit(policy); const isDistanceTrackTaxEnabled = !!customUnit?.attributes?.taxEnabled; @@ -59,14 +56,6 @@ function PolicyDistanceRatesSettingsPage({route}: PolicyDistanceRatesSettingsPag setPolicyDistanceRatesUnit(policyID, customUnit, {...customUnit, attributes}); }; - const setNewCategory = (category: ListItem) => { - if (!category.searchText || !customUnit || defaultCategory === category.searchText) { - return; - } - - setPolicyCustomUnitDefaultCategory(policyID, customUnit.customUnitID, customUnit.defaultCategory, category.searchText); - }; - const clearErrorFields = (fieldName: keyof CustomUnit) => { if (!customUnit?.customUnitID) { return; @@ -117,22 +106,18 @@ function PolicyDistanceRatesSettingsPage({route}: PolicyDistanceRatesSettingsPag /> )} - {!!policy?.areCategoriesEnabled && hasEnabledOptions(policyCategories ?? {}) && ( + {!!policy?.areCategoriesEnabled && hasEnabledOptions(policyCategories ?? {}) && !!customUnit?.customUnitID && ( clearErrorFields('defaultCategory')} > - setIsCategoryPickerVisible(true)} - hidePickerModal={() => setIsCategoryPickerVisible(false)} + customUnitID={customUnit.customUnitID} /> )} diff --git a/src/pages/workspace/perDiem/WorkspacePerDiemSettingsPage.tsx b/src/pages/workspace/perDiem/WorkspacePerDiemSettingsPage.tsx index 220f6ff9fd46..b28edbdb05ca 100644 --- a/src/pages/workspace/perDiem/WorkspacePerDiemSettingsPage.tsx +++ b/src/pages/workspace/perDiem/WorkspacePerDiemSettingsPage.tsx @@ -1,12 +1,11 @@ -import React, {useState} from 'react'; +import React from 'react'; import {View} from 'react-native'; import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; -import CategorySelector from '@components/CategorySelector'; +import CustomUnitDefaultCategorySelector from '@components/CustomUnitDefaultCategorySelector'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; -import type {ListItem} from '@components/SelectionList/types'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -17,7 +16,6 @@ import {hasEnabledOptions} from '@libs/OptionsListUtils'; import {getPerDiemCustomUnit} from '@libs/PolicyUtils'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; -import {setPolicyCustomUnitDefaultCategory} from '@userActions/Policy/Category'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; @@ -31,7 +29,6 @@ function WorkspacePerDiemSettingsPage({route}: WorkspacePerDiemSettingsPageProps const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`); const styles = useThemeStyles(); - const [isCategoryPickerVisible, setIsCategoryPickerVisible] = useState(false); const {translate} = useLocalize(); const customUnit = getPerDiemCustomUnit(policy); const customUnitID = customUnit?.customUnitID; @@ -41,14 +38,6 @@ function WorkspacePerDiemSettingsPage({route}: WorkspacePerDiemSettingsPageProps const FullPageBlockingView = !customUnit ? FullPageOfflineBlockingView : View; - const setNewCategory = (category: ListItem) => { - if (!category.searchText || !customUnit || defaultCategory === category.searchText || !customUnitID) { - return; - } - - setPolicyCustomUnitDefaultCategory(policyID, customUnitID, customUnit.defaultCategory, category.searchText); - }; - const clearErrorFields = (fieldName: keyof CustomUnit) => { if (!customUnitID) { return; @@ -77,22 +66,18 @@ function WorkspacePerDiemSettingsPage({route}: WorkspacePerDiemSettingsPageProps contentContainerStyle={styles.flexGrow1} keyboardShouldPersistTaps="always" > - {!!policy?.areCategoriesEnabled && hasEnabledOptions(policyCategories ?? {}) && ( + {!!policy?.areCategoriesEnabled && hasEnabledOptions(policyCategories ?? {}) && !!customUnitID && ( clearErrorFields('defaultCategory')} > - setIsCategoryPickerVisible(true)} - hidePickerModal={() => setIsCategoryPickerVisible(false)} + customUnitID={customUnitID} /> )}