[Details Revamp] Remove Delete Action from Collect Workspace Settings Pages

src/pages/workspace/categories/CategorySettingsPage.tsx

@@ -6,14 +6,14 @@ import type {OnyxEntry} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
@@ -37,7 +37,6 @@ type CategorySettingsPageProps = CategorySettingsPageOnyxProps & StackScreenProp
 function CategorySettingsPage({route, policyCategories, navigation}: CategorySettingsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {windowWidth} = useWindowDimensions();
     const [deleteCategoryConfirmModalVisible, setDeleteCategoryConfirmModalVisible] = useState(false);
     const backTo = route.params?.backTo;
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`);
@@ -75,14 +74,6 @@ function CategorySettingsPage({route, policyCategories, navigation}: CategorySet
     };
 
     const isThereAnyAccountingConnection = Object.keys(policy?.connections ?? {}).length !== 0;
-    const threeDotsMenuItems = [];
-    if (!isThereAnyAccountingConnection) {
-        threeDotsMenuItems.push({
-            icon: Expensicons.Trashcan,
-            text: translate('workspace.categories.deleteCategory'),
-            onSelected: () => setDeleteCategoryConfirmModalVisible(true),
-        });
-    }
 
     return (
         <AccessOrNotFoundWrapper
@@ -96,10 +87,7 @@ function CategorySettingsPage({route, policyCategories, navigation}: CategorySet
                 testID={CategorySettingsPage.displayName}
             >
                 <HeaderWithBackButton
-                    shouldShowThreeDotsButton={threeDotsMenuItems.length > 0}
                     title={route.params.categoryName}
-                    threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
-                    threeDotsMenuItems={threeDotsMenuItems}
                     onBackButtonPress={() => (backTo ? Navigation.goBack(ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(route.params.policyID, backTo)) : Navigation.goBack())}
                 />
                 <ConfirmModal
@@ -138,6 +126,13 @@ function CategorySettingsPage({route, policyCategories, navigation}: CategorySet
                             shouldShowRightIcon
                         />
                     </OfflineWithFeedback>
+                    {!isThereAnyAccountingConnection && (
+                        <MenuItem
+                            icon={Expensicons.Trashcan}
+                            title={translate('common.delete')}
+                            onPress={() => setDeleteCategoryConfirmModalVisible(true)}
+                        />
+                    )}
                 </View>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>

src/pages/workspace/distanceRates/PolicyDistanceRateDetailsPage.tsx

@@ -6,6 +6,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -14,7 +15,6 @@ import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -39,7 +39,6 @@ type PolicyDistanceRateDetailsPageProps = PolicyDistanceRateDetailsPageOnyxProps
 function PolicyDistanceRateDetailsPage({policy, route}: PolicyDistanceRateDetailsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {windowWidth} = useWindowDimensions();
     const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
     const policyID = route.params.policyID;
@@ -91,20 +90,6 @@ function PolicyDistanceRateDetailsPage({policy, route}: PolicyDistanceRateDetail
     const taxClaimableValueToDisplay = taxClaimablePercentage && rate.rate ? CurrencyUtils.convertAmountToDisplayString(taxClaimablePercentage * rate.rate, currency) : '';
     const unitToDisplay = translate(`common.${customUnit?.attributes?.unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES}`);
 
-    const threeDotsMenuItems = [
-        {
-            icon: Expensicons.Trashcan,
-            text: translate('workspace.distanceRates.deleteDistanceRate'),
-            onSelected: () => {
-                if (canDisableOrDeleteRate) {
-                    setIsDeleteModalVisible(true);
-                    return;
-                }
-                setIsWarningModalVisible(true);
-            },
-        },
-    ];
-
     const clearErrorFields = (fieldName: keyof Rate) => {
         DistanceRate.clearPolicyDistanceRateErrorFields(policyID, customUnit.customUnitID, rateID, {...errorFields, [fieldName]: null});
     };
@@ -120,12 +105,7 @@ function PolicyDistanceRateDetailsPage({policy, route}: PolicyDistanceRateDetail
                 includeSafeAreaPaddingBottom={false}
                 style={[styles.defaultModalContainer]}
             >
-                <HeaderWithBackButton
-                    title={`${rateValueToDisplay} / ${translate(`common.${customUnit?.attributes?.unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES}`)}`}
-                    shouldShowThreeDotsButton
-                    threeDotsMenuItems={threeDotsMenuItems}
-                    threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
-                />
+                <HeaderWithBackButton title={`${rateValueToDisplay} / ${translate(`common.${customUnit?.attributes?.unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES}`)}`} />
                 <ScrollView contentContainerStyle={styles.flexGrow1}>
                     <OfflineWithFeedback
                         errors={ErrorUtils.getLatestErrorField(rate ?? {}, 'enabled')}
@@ -189,6 +169,17 @@ function PolicyDistanceRateDetailsPage({policy, route}: PolicyDistanceRateDetail
                             />
                         </OfflineWithFeedback>
                     )}
+                    <MenuItem
+                        icon={Expensicons.Trashcan}
+                        title={translate('common.delete')}
+                        onPress={() => {
+                            if (canDisableOrDeleteRate) {
+                                setIsDeleteModalVisible(true);
+                                return;
+                            }
+                            setIsWarningModalVisible(true);
+                        }}
+                    />
                     <ConfirmModal
                         onConfirm={() => setIsWarningModalVisible(false)}
                         isVisible={isWarningModalVisible}

src/pages/workspace/tags/TagSettingsPage.tsx

@@ -5,15 +5,15 @@ import {useOnyx, withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import {Trashcan} from '@components/Icon/Expensicons';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -41,8 +41,6 @@ function TagSettingsPage({route, policyTags, navigation}: TagSettingsPageProps)
     const policyTag = useMemo(() => PolicyUtils.getTagList(policyTags, route.params.orderWeight), [policyTags, route.params.orderWeight]);
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`);
 
-    const {windowWidth} = useWindowDimensions();
-
     const [isDeleteTagModalOpen, setIsDeleteTagModalOpen] = React.useState(false);
 
     const currentPolicyTag =
@@ -75,14 +73,8 @@ function TagSettingsPage({route, policyTags, navigation}: TagSettingsPageProps)
 
     const isThereAnyAccountingConnection = Object.keys(policy?.connections ?? {}).length !== 0;
     const isMultiLevelTags = PolicyUtils.isMultiLevelTags(policyTags);
-    const threeDotsMenuItems = [];
-    if (!isThereAnyAccountingConnection && !isMultiLevelTags) {
-        threeDotsMenuItems.push({
-            icon: Trashcan,
-            text: translate('workspace.tags.deleteTag'),
-            onSelected: () => setIsDeleteTagModalOpen(true),
-        });
-    }
+
+    const shouldShowDeleteMenuItem = !isThereAnyAccountingConnection && !isMultiLevelTags;
 
     return (
         <AccessOrNotFoundWrapper
@@ -97,10 +89,7 @@ function TagSettingsPage({route, policyTags, navigation}: TagSettingsPageProps)
             >
                 <HeaderWithBackButton
                     title={PolicyUtils.getCleanedTagName(route.params.tagName)}
-                    shouldShowThreeDotsButton={threeDotsMenuItems.length > 0}
                     shouldSetModalVisibility={false}
-                    threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
-                    threeDotsMenuItems={threeDotsMenuItems}
                 />
                 <ConfirmModal
                     title={translate('workspace.tags.deleteTag')}
@@ -139,6 +128,13 @@ function TagSettingsPage({route, policyTags, navigation}: TagSettingsPageProps)
                             shouldShowRightIcon
                         />
                     </OfflineWithFeedback>
+                    {shouldShowDeleteMenuItem && (
+                        <MenuItem
+                            icon={Expensicons.Trashcan}
+                            title={translate('common.delete')}
+                            onPress={() => setIsDeleteTagModalOpen(true)}
+                        />
+                    )}
                 </View>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>

src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx

@@ -1,18 +1,17 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useMemo, useState} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import type {ThreeDotsMenuItem} from '@components/HeaderWithBackButton/types';
 import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import {clearTaxRateFieldError, deletePolicyTaxes, setPolicyTaxesEnabled} from '@libs/actions/TaxRate';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -37,11 +36,12 @@ function WorkspaceEditTaxPage({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const currentTaxRate = PolicyUtils.getTaxByID(policy, taxID);
-    const {windowWidth} = useWindowDimensions();
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
     const canEdit = policy && PolicyUtils.canEditTaxRate(policy, taxID);
     const hasAccountingConnections = PolicyUtils.hasAccountingConnections(policy);
 
+    const shouldShowDeleteMenuItem = canEdit && !hasAccountingConnections;
+
     const toggleTaxRate = () => {
         if (!currentTaxRate) {
             return;
@@ -58,20 +58,6 @@ function WorkspaceEditTaxPage({
         Navigation.goBack();
     };
 
-    const threeDotsMenuItems: ThreeDotsMenuItem[] = useMemo(
-        () =>
-            canEdit && !hasAccountingConnections
-                ? [
-                      {
-                          icon: Expensicons.Trashcan,
-                          text: translate('common.delete'),
-                          onSelected: () => setIsDeleteModalVisible(true),
-                      },
-                  ]
-                : [],
-        [translate, canEdit, hasAccountingConnections],
-    );
-
     if (!currentTaxRate) {
         return <NotFoundPage />;
     }
@@ -87,12 +73,7 @@ function WorkspaceEditTaxPage({
                 style={styles.mb5}
             >
                 <View style={[styles.h100, styles.flex1]}>
-                    <HeaderWithBackButton
-                        title={currentTaxRate?.name}
-                        threeDotsMenuItems={threeDotsMenuItems}
-                        shouldShowThreeDotsButton={threeDotsMenuItems.length > 0}
-                        threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
-                    />
+                    <HeaderWithBackButton title={currentTaxRate?.name} />
                     <OfflineWithFeedback
                         errors={ErrorUtils.getLatestErrorField(currentTaxRate, 'isDisabled')}
                         pendingAction={currentTaxRate?.pendingFields?.isDisabled}
@@ -141,6 +122,13 @@ function WorkspaceEditTaxPage({
                             onPress={() => Navigation.navigate(ROUTES.WORKSPACE_TAX_VALUE.getRoute(`${policyID}`, taxID))}
                         />
                     </OfflineWithFeedback>
+                    {shouldShowDeleteMenuItem && (
+                        <MenuItem
+                            icon={Expensicons.Trashcan}
+                            title={translate('common.delete')}
+                            onPress={() => setIsDeleteModalVisible(true)}
+                        />
+                    )}
                 </View>
                 <ConfirmModal
                     title={translate('workspace.taxes.actions.delete')}