[OldDot Rules Migration] Category settings: Default categories

src/components/CategoryPicker.tsx

@@ -24,9 +24,12 @@ type CategoryPickerProps = CategoryPickerOnyxProps & {
     policyID: string;
     selectedCategory?: string;
     onSubmit: (item: ListItem) => void;
+
+    /** Whether SectionList should use custom ScrollView */
+    shouldUseCustomScrollView?: boolean;
 };
 
-function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, policyCategoriesDraft, onSubmit}: CategoryPickerProps) {
+function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, policyCategoriesDraft, onSubmit, shouldUseCustomScrollView = false}: CategoryPickerProps) {
     const {translate} = useLocalize();
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
 
@@ -84,6 +87,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
             ListItem={RadioListItem}
             initiallyFocusedOptionKey={selectedOptionKey ?? undefined}
             isRowMultilineSupported
+            shouldUseCustomScrollView={shouldUseCustomScrollView}
         />
     );
 }

src/components/SelectionList/BaseSelectionList.tsx

@@ -2,14 +2,15 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import isEmpty from 'lodash/isEmpty';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, SectionListData, SectionListRenderItemInfo} from 'react-native';
+import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, ScrollViewProps, SectionListData, SectionListRenderItemInfo} from 'react-native';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import Checkbox from '@components/Checkbox';
 import FixedFooter from '@components/FixedFooter';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import {PressableWithFeedback} from '@components/Pressable';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import ScrollView from '@components/ScrollView';
 import SectionList from '@components/SectionList';
 import ShowMoreButton from '@components/ShowMoreButton';
 import Text from '@components/Text';
@@ -73,6 +74,7 @@ function BaseSelectionList<TItem extends ListItem>(
         shouldStopPropagation = false,
         shouldShowTooltips = true,
         shouldUseDynamicMaxToRenderPerBatch = false,
+        shouldUseCustomScrollView = false,
         rightHandSideComponent,
         isLoadingNewOptions = false,
         onLayout,
@@ -423,6 +425,9 @@ function BaseSelectionList<TItem extends ListItem>(
         </>
     );
 
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    const scrollComponent = shouldUseCustomScrollView ? (props: ScrollViewProps) => <ScrollView {...props} /> : undefined;
+
     const renderItem = ({item, index, section}: SectionListRenderItemInfo<TItem, SectionWithIndexOffset<TItem>>) => {
         const normalizedIndex = index + (section?.indexOffset ?? 0);
         const isDisabled = !!section.isDisabled || item.isDisabled;
@@ -701,6 +706,7 @@ function BaseSelectionList<TItem extends ListItem>(
                             {!listHeaderContent && header()}
                             <SectionList
                                 removeClippedSubviews={removeClippedSubviews}
+                                renderScrollComponent={scrollComponent}
                                 ref={listRef}
                                 sections={slicedSections}
                                 stickySectionHeadersEnabled={false}

src/components/SelectionList/types.ts

@@ -125,6 +125,15 @@ type ListItem = {
     /** ID of the report */
     reportID?: string;
 
+    /** ID of the policy */
+    policyID?: string;
+
+    /** ID of the group */
+    groupID?: string;
+
+    /** ID of the category */
+    categoryID?: string;
+
     /** Whether this option should show subscript */
     shouldShowSubscript?: boolean | null;
 
@@ -416,6 +425,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */
     shouldUseDynamicMaxToRenderPerBatch?: boolean;
 
+    /** Whether SectionList should use custom ScrollView */
+    shouldUseCustomScrollView?: boolean;
+
     /** Whether keyboard shortcuts should be disabled */
     disableKeyboardShortcuts?: boolean;
 

src/languages/en.ts

@@ -2823,6 +2823,8 @@ export default {
             disableCategory: 'Disable category',
             enableCategories: 'Enable categories',
             enableCategory: 'Enable category',
+            defaultSpendCategories: 'Default spend categories',
+            spendCategoriesDescription: 'Customize how merchant spend is categorized for credit card transactions and scanned receipts.',
             deleteFailureMessage: 'An error occurred while deleting the category, please try again.',
             categoryName: 'Category name',
             requiresCategory: 'Members must categorize all expenses',

src/languages/es.ts

@@ -2871,6 +2871,8 @@ export default {
             disableCategory: 'Desactivar categoría',
             enableCategories: 'Activar categorías',
             enableCategory: 'Activar categoría',
+            defaultSpendCategories: 'Categorías de gasto predeterminadas',
+            spendCategoriesDescription: 'Personaliza cómo se categorizan los gastos de los comerciantes para las transacciones con tarjeta de crédito y los recibos escaneados.',
             deleteFailureMessage: 'Se ha producido un error al intentar eliminar la categoría. Por favor, inténtalo más tarde.',
             categoryName: 'Nombre de la categoría',
             requiresCategory: 'Los miembros deben clasificar todos los gastos',

src/libs/API/parameters/SetWorkspaceDefaultSpendCategoryParams.ts

@@ -0,0 +1,7 @@
+type SetWorkspaceDefaultSpendCategoryParams = {
+    policyID: string;
+    groupID: string;
+    category: string;
+};
+
+export default SetWorkspaceDefaultSpendCategoryParams;

src/libs/API/parameters/index.ts

@@ -178,6 +178,7 @@ export type {default as SetWorkspaceAutoReportingMonthlyOffsetParams} from './Se
 export type {default as SetWorkspaceApprovalModeParams} from './SetWorkspaceApprovalModeParams';
 export type {default as SetWorkspacePayerParams} from './SetWorkspacePayerParams';
 export type {default as SetWorkspaceReimbursementParams} from './SetWorkspaceReimbursementParams';
+export type {default as SetWorkspaceDefaultSpendCategoryParams} from './SetWorkspaceDefaultSpendCategoryParams';
 export type {default as SetPolicyRequiresTag} from './SetPolicyRequiresTag';
 export type {default as SetPolicyTagsRequired} from './SetPolicyTagsRequired';
 export type {default as RenamePolicyTaglistParams} from './RenamePolicyTaglistParams';

src/libs/API/types.ts

@@ -14,6 +14,7 @@ const WRITE_COMMANDS = {
     SET_WORKSPACE_APPROVAL_MODE: 'SetWorkspaceApprovalMode',
     SET_WORKSPACE_PAYER: 'SetWorkspacePayer',
     SET_WORKSPACE_REIMBURSEMENT: 'SetWorkspaceReimbursement',
+    SET_WORKSPACE_DEFAULT_SPEND_CATEGORY: 'SetPolicyDefaultSpendCategory',
     DISMISS_REFERRAL_BANNER: 'DismissReferralBanner',
     UPDATE_PREFERRED_LOCALE: 'UpdatePreferredLocale',
     OPEN_APP: 'OpenApp',
@@ -540,6 +541,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.SET_WORKSPACE_APPROVAL_MODE]: Parameters.SetWorkspaceApprovalModeParams;
     [WRITE_COMMANDS.SET_WORKSPACE_PAYER]: Parameters.SetWorkspacePayerParams;
     [WRITE_COMMANDS.SET_WORKSPACE_REIMBURSEMENT]: Parameters.SetWorkspaceReimbursementParams;
+    [WRITE_COMMANDS.SET_WORKSPACE_DEFAULT_SPEND_CATEGORY]: Parameters.SetWorkspaceDefaultSpendCategoryParams;
     [WRITE_COMMANDS.SWITCH_TO_OLD_DOT]: Parameters.SwitchToOldDotParams;
     [WRITE_COMMANDS.TRACK_EXPENSE]: Parameters.TrackExpenseParams;
     [WRITE_COMMANDS.ENABLE_POLICY_CATEGORIES]: Parameters.EnablePolicyCategoriesParams;

src/libs/actions/Policy/Policy.ts

@@ -3454,6 +3454,46 @@ function upgradeToCorporate(policyID: string, featureName: string) {
     API.write(WRITE_COMMANDS.UPGRADE_TO_CORPORATE, parameters, {optimisticData, successData, failureData});
 }
 
+function setWorkspaceDefaultSpendCategory(policyID: string, groupID: string, category: string) {
+    const policy = getPolicy(policyID);
+    if (!policy) {
+        return;
+    }
+
+    const {mccGroup} = policy;
+
+    const optimisticData: OnyxUpdate[] = mccGroup
+        ? [
+              {
+                  onyxMethod: Onyx.METHOD.MERGE,
+                  key: `policy_${policyID}`,
+                  value: {
+                      mccGroup: {
+                          ...mccGroup,
+                          [groupID]: {
+                              category,
+                              groupID,
+                          },
+                      },
+                  },
+              },
+          ]
+        : [];
+
+    const failureData: OnyxUpdate[] = mccGroup
+        ? [
+              {
+                  onyxMethod: Onyx.METHOD.MERGE,
+                  key: `policy_${policyID}`,
+                  value: {
+                      mccGroup,
+                  },
+              },
+          ]
+        : [];
+
+    API.write(WRITE_COMMANDS.SET_WORKSPACE_DEFAULT_SPEND_CATEGORY, {policyID, groupID, category}, {optimisticData, successData: [], failureData});
+}
 /**
  * Call the API to set the receipt required amount for the given policy
  * @param policyID - id of the policy to set the receipt required amount
@@ -3841,6 +3881,7 @@ export {
     openWorkspaceReimburseView,
     setPolicyIDForReimburseView,
     clearOnyxDataForReimburseView,
+    setWorkspaceDefaultSpendCategory,
     setRateForReimburseView,
     setUnitForReimburseView,
     generateDefaultWorkspaceName,

src/pages/workspace/categories/SpendCategorySelectorListItem.tsx

@@ -0,0 +1,61 @@
+import React, {useState} from 'react';
+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>) {
+    const styles = useThemeStyles();
+    const [isCategoryPickerVisible, setIsCategoryPickerVisible] = useState(false);
+    const {policyID, groupID, categoryID} = item;
+
+    if (!policyID || !groupID) {
+        return;
+    }
+
+    const onSelect = (data: TItem) => {
+        setIsCategoryPickerVisible(true);
+        onSelectRow(data);
+    };
+
+    const setNewCategory = (selectedCategory: ListItem) => {
+        if (!selectedCategory.text) {
+            return;
+        }
+        Policy.setWorkspaceDefaultSpendCategory(policyID, groupID, selectedCategory.text);
+    };
+
+    return (
+        <BaseListItem
+            item={item}
+            wrapperStyle={[isFocused && styles.sidebarLinkActive]}
+            pressableStyle={[styles.mt2]}
+            onSelectRow={onSelect}
+            isFocused={isFocused}
+            showTooltip
+            keyForList={item.keyForList}
+        >
+            <CategorySelector
+                wrapperStyle={[styles.ph5]}
+                focused={isFocused}
+                policyID={policyID}
+                label={groupID[0].toUpperCase() + groupID.slice(1)}
+                defaultValue={categoryID}
+                setNewCategory={setNewCategory}
+                isPickerVisible={isCategoryPickerVisible}
+                showPickerModal={() => setIsCategoryPickerVisible(true)}
+                hidePickerModal={() => {
+                    setIsCategoryPickerVisible(false);
+                    blurActiveElement();
+                }}
+                shouldUseCustomScrollView
+            />
+        </BaseListItem>
+    );
+}
+
+SpendCategorySelectorListItem.displayName = 'SpendCategorySelectorListItem';
+
+export default SpendCategorySelectorListItem;

src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 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 type {ListItem} from '@components/SelectionList/types';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
@@ -15,6 +18,7 @@ import {setWorkspaceRequiresCategory} from '@userActions/Policy/Category';
 import * as Policy from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import SpendCategorySelectorListItem from './SpendCategorySelectorListItem';
 
 type WorkspaceCategoriesSettingsPageProps = WithPolicyConnectionsProps;
 
@@ -24,6 +28,7 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet
     const isConnectedToAccounting = Object.keys(policy?.connections ?? {}).length > 0;
     const policyID = route.params.policyID ?? '-1';
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`);
+    const [currentPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
     const currentConnectionName = PolicyUtils.getCurrentConnectionName(policy);
 
     const toggleSubtitle = isConnectedToAccounting && currentConnectionName ? `${translate('workspace.categories.needCategoryForExportToIntegration')} ${currentConnectionName}.` : undefined;
@@ -32,7 +37,32 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet
         setWorkspaceRequiresCategory(policyID, value);
     };
 
+    const {sections} = useMemo(() => {
+        if (!(currentPolicy && currentPolicy.mccGroup)) {
+            return {sections: [{data: []}]};
+        }
+
+        return {
+            sections: [
+                {
+                    data: Object.entries(currentPolicy.mccGroup).map(
+                        ([mccKey, mccGroup]) =>
+                            ({
+                                categoryID: mccGroup.category,
+                                keyForList: mccKey,
+                                groupID: mccKey,
+                                policyID,
+                                tabIndex: -1,
+                            } as ListItem),
+                    ),
+                },
+            ],
+        };
+    }, [currentPolicy, policyID]);
+
     const hasEnabledOptions = OptionsListUtils.hasEnabledOptions(policyCategories ?? {});
+    const isToggleDisabled = !policy?.areCategoriesEnabled || !hasEnabledOptions || isConnectedToAccounting;
+
     return (
         <AccessOrNotFoundWrapper
             policyID={policyID}
@@ -45,20 +75,33 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet
                 testID={WorkspaceCategoriesSettingsPage.displayName}
             >
                 <HeaderWithBackButton title={translate('common.settings')} />
-                <View style={styles.flexGrow1}>
-                    <ToggleSettingOptionRow
-                        title={translate('workspace.categories.requiresCategory')}
-                        subtitle={toggleSubtitle}
-                        switchAccessibilityLabel={translate('workspace.categories.requiresCategory')}
-                        isActive={policy?.requiresCategory ?? false}
-                        onToggle={updateWorkspaceRequiresCategory}
-                        pendingAction={policy?.pendingFields?.requiresCategory}
-                        disabled={!policy?.areCategoriesEnabled || !hasEnabledOptions || isConnectedToAccounting}
-                        wrapperStyle={[styles.mt2, styles.mh4]}
-                        errors={policy?.errorFields?.requiresCategory ?? undefined}
-                        onCloseError={() => Policy.clearPolicyErrorField(policy?.id ?? '-1', 'requiresCategory')}
-                        shouldPlaceSubtitleBelowSwitch
-                    />
+                <ToggleSettingOptionRow
+                    title={translate('workspace.categories.requiresCategory')}
+                    subtitle={toggleSubtitle}
+                    switchAccessibilityLabel={translate('workspace.categories.requiresCategory')}
+                    isActive={policy?.requiresCategory ?? false}
+                    onToggle={updateWorkspaceRequiresCategory}
+                    pendingAction={policy?.pendingFields?.requiresCategory}
+                    disabled={isToggleDisabled}
+                    wrapperStyle={[styles.pv2, styles.mh5]}
+                    errors={policy?.errorFields?.requiresCategory ?? undefined}
+                    onCloseError={() => Policy.clearPolicyErrorField(policy?.id ?? '-1', 'requiresCategory')}
+                    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={() => {}}
+                        />
+                    )}
                 </View>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>

src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx

@@ -25,9 +25,12 @@ type CategorySelectorModalProps = {
 
     /** Label to display on field */
     label: string;
+
+    /** Whether SectionList should use custom ScrollView */
+    shouldUseCustomScrollView: boolean;
 };
 
-function CategorySelectorModal({policyID, isVisible, currentCategory, onCategorySelected, onClose, label}: CategorySelectorModalProps) {
+function CategorySelectorModal({policyID, isVisible, currentCategory, onCategorySelected, onClose, label, shouldUseCustomScrollView}: CategorySelectorModalProps) {
     const styles = useThemeStyles();
 
     return (
@@ -54,6 +57,7 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory
                     policyID={policyID}
                     selectedCategory={currentCategory}
                     onSubmit={onCategorySelected}
+                    shouldUseCustomScrollView={shouldUseCustomScrollView}
                 />
             </ScreenWrapper>
         </Modal>