Merge pull request #48708 from software-mansion-labs/@BartoszGrajdek/spend-sub-categories-fix

[CP Staging] Select subcategory as the default spend category

(cherry picked from commit c96425c)

(CP triggered by mountiny)

Author: lakchote

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<TItem extends ListItem>({item, onSelectRow, isFocused}: BaseListItemProps<TItem>) {
+type SpendCategorySelectorListItemProps<TItem extends ListItem> = SetOptional<BaseListItemProps<TItem>, 'onSelectRow'>;
+
+function SpendCategorySelectorListItem<TItem extends ListItem>({item, onSelectRow = () => {}, isFocused}: SpendCategorySelectorListItemProps<TItem>) {
     const styles = useThemeStyles();
     const [isCategoryPickerVisible, setIsCategoryPickerVisible] = useState(false);
     const {policyID, groupID, categoryID} = item;
@@ -21,10 +23,10 @@ function SpendCategorySelectorListItem<TItem extends ListItem>({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<TItem extends ListItem>({item, onSelectRo
                 showPickerModal={() => setIsCategoryPickerVisible(true)}
                 hidePickerModal={() => {
                     setIsCategoryPickerVisible(false);
-                    blurActiveElement();
                 }}
-                shouldUseCustomScrollView
             />
         </BaseListItem>
     );

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) => (
+            <SpendCategorySelectorListItem
+                key={item.keyForList}
+                item={item}
+                showTooltip
+            />
+        ));
+    }, [policyMccGroup, policyID]);
 
     const hasEnabledOptions = OptionsListUtils.hasEnabledOptions(policyCategories ?? {});
     const isToggleDisabled = !policy?.areCategoriesEnabled || !hasEnabledOptions || isConnectedToAccounting;
@@ -89,18 +92,14 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet
                     shouldPlaceSubtitleBelowSwitch
                 />
                 <View style={[styles.containerWithSpaceBetween]}>
-                    {!!currentPolicy && sections[0].data.length > 0 && (
-                        <SelectionList
-                            headerContent={
-                                <View style={[styles.mh5, styles.mt2, styles.mb1]}>
-                                    <Text style={[styles.headerText]}>{translate('workspace.categories.defaultSpendCategories')}</Text>
-                                    <Text style={[styles.mt1, styles.lh20]}>{translate('workspace.categories.spendCategoriesDescription')}</Text>
-                                </View>
-                            }
-                            sections={sections}
-                            ListItem={SpendCategorySelectorListItem}
-                            onSelectRow={() => {}}
-                        />
+                    {!!currentPolicy && listItems && (
+                        <>
+                            <View style={[styles.mh5, styles.mt2, styles.mb1]}>
+                                <Text style={[styles.headerText]}>{translate('workspace.categories.defaultSpendCategories')}</Text>
+                                <Text style={[styles.mt1, styles.lh20]}>{translate('workspace.categories.spendCategoriesDescription')}</Text>
+                            </View>
+                            <ScrollView>{listItems}</ScrollView>
+                        </>
                     )}
                 </View>
             </ScreenWrapper>