diff --git a/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx b/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx index 76b0f11b467a..fd958ebc181c 100644 --- a/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx +++ b/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx @@ -1,12 +1,14 @@ import React, {useState} from 'react'; +import type {SetOptional} from 'type-fest'; import BaseListItem from '@components/SelectionList/BaseListItem'; import type {BaseListItemProps, ListItem} from '@components/SelectionList/types'; import useThemeStyles from '@hooks/useThemeStyles'; -import blurActiveElement from '@libs/Accessibility/blurActiveElement'; import CategorySelector from '@pages/workspace/distanceRates/CategorySelector'; import * as Policy from '@userActions/Policy/Policy'; -function SpendCategorySelectorListItem({item, onSelectRow, isFocused}: BaseListItemProps) { +type SpendCategorySelectorListItemProps = SetOptional, 'onSelectRow'>; + +function SpendCategorySelectorListItem({item, onSelectRow = () => {}, isFocused}: SpendCategorySelectorListItemProps) { const styles = useThemeStyles(); const [isCategoryPickerVisible, setIsCategoryPickerVisible] = useState(false); const {policyID, groupID, categoryID} = item; @@ -21,10 +23,10 @@ function SpendCategorySelectorListItem({item, onSelectRo }; const setNewCategory = (selectedCategory: ListItem) => { - if (!selectedCategory.text) { + if (!selectedCategory.keyForList) { return; } - Policy.setWorkspaceDefaultSpendCategory(policyID, groupID, selectedCategory.text); + Policy.setWorkspaceDefaultSpendCategory(policyID, groupID, selectedCategory.keyForList); }; return ( @@ -48,9 +50,7 @@ function SpendCategorySelectorListItem({item, onSelectRo showPickerModal={() => setIsCategoryPickerVisible(true)} hidePickerModal={() => { setIsCategoryPickerVisible(false); - blurActiveElement(); }} - shouldUseCustomScrollView /> ); diff --git a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx index 03c01e5a7264..b84a28f00a24 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx @@ -3,7 +3,7 @@ import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; -import SelectionList from '@components/SelectionList'; +import ScrollView from '@components/ScrollView'; import type {ListItem} from '@components/SelectionList/types'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; @@ -37,28 +37,31 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet setWorkspaceRequiresCategory(policyID, value); }; - const {sections} = useMemo(() => { - if (!(currentPolicy && currentPolicy.mccGroup)) { - return {sections: [{data: []}]}; + const policyMccGroup = currentPolicy?.mccGroup; + const listItems = useMemo(() => { + let data: ListItem[] = []; + + if (policyMccGroup) { + data = Object.entries(policyMccGroup).map( + ([mccKey, mccGroup]) => + ({ + categoryID: mccGroup.category, + keyForList: mccKey, + groupID: mccKey, + policyID, + tabIndex: -1, + } as ListItem), + ); } - return { - sections: [ - { - data: Object.entries(currentPolicy.mccGroup).map( - ([mccKey, mccGroup]) => - ({ - categoryID: mccGroup.category, - keyForList: mccKey, - groupID: mccKey, - policyID, - tabIndex: -1, - } as ListItem), - ), - }, - ], - }; - }, [currentPolicy, policyID]); + return data.map((item) => ( + + )); + }, [policyMccGroup, policyID]); const hasEnabledOptions = OptionsListUtils.hasEnabledOptions(policyCategories ?? {}); const isToggleDisabled = !policy?.areCategoriesEnabled || !hasEnabledOptions || isConnectedToAccounting; @@ -89,18 +92,14 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet shouldPlaceSubtitleBelowSwitch /> - {!!currentPolicy && sections[0].data.length > 0 && ( - - {translate('workspace.categories.defaultSpendCategories')} - {translate('workspace.categories.spendCategoriesDescription')} - - } - sections={sections} - ListItem={SpendCategorySelectorListItem} - onSelectRow={() => {}} - /> + {!!currentPolicy && listItems && ( + <> + + {translate('workspace.categories.defaultSpendCategories')} + {translate('workspace.categories.spendCategoriesDescription')} + + {listItems} + )}