diff --git a/src/pages/workspace/categories/CategorySettingsPage.tsx b/src/pages/workspace/categories/CategorySettingsPage.tsx index 22f2b4f02fbf..444e0e8a47d2 100644 --- a/src/pages/workspace/categories/CategorySettingsPage.tsx +++ b/src/pages/workspace/categories/CategorySettingsPage.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'; @@ -13,7 +14,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 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 ( 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())} /> + {!isThereAnyAccountingConnection && ( + setDeleteCategoryConfirmModalVisible(true)} + /> + )} diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRateDetailsPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRateDetailsPage.tsx index 7f604efd20ee..360cd1537bb7 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRateDetailsPage.tsx +++ b/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]} > - + )} + { + if (canDisableOrDeleteRate) { + setIsDeleteModalVisible(true); + return; + } + setIsWarningModalVisible(true); + }} + /> setIsWarningModalVisible(false)} isVisible={isWarningModalVisible} diff --git a/src/pages/workspace/tags/TagSettingsPage.tsx b/src/pages/workspace/tags/TagSettingsPage.tsx index a4f6940814dd..0041744f6413 100644 --- a/src/pages/workspace/tags/TagSettingsPage.tsx +++ b/src/pages/workspace/tags/TagSettingsPage.tsx @@ -5,7 +5,8 @@ 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'; @@ -13,7 +14,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 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 ( 0} shouldSetModalVisibility={false} - threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)} - threeDotsMenuItems={threeDotsMenuItems} /> + {shouldShowDeleteMenuItem && ( + setIsDeleteTagModalOpen(true)} + /> + )} diff --git a/src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx b/src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx index f6ac9b892cd9..66703679569f 100644 --- a/src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx @@ -1,10 +1,10 @@ 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'; @@ -12,7 +12,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 {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 ; } @@ -87,12 +73,7 @@ function WorkspaceEditTaxPage({ style={styles.mb5} > - 0} - threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)} - /> + Navigation.navigate(ROUTES.WORKSPACE_TAX_VALUE.getRoute(`${policyID}`, taxID))} /> + {shouldShowDeleteMenuItem && ( + setIsDeleteModalVisible(true)} + /> + )}