Skip to content

Commit 1f51f18

Browse files
roryabrahamroryabraham
authored
Merge pull request Expensify#87334 from daledah/follow-up/76690-3
Refactor ConfirmModal usage in workspace settings pages part 3
2 parents a7b268e + 68a0374 commit 1f51f18

4 files changed

Lines changed: 107 additions & 102 deletions

File tree

‎src/pages/workspace/distanceRates/PolicyDistanceRateDetailsPage.tsx‎

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import React, {useCallback, useMemo, useState} from 'react';
1+
import React, {useCallback, useMemo} from 'react';
22
import {View} from 'react-native';
33
import type {OnyxCollection} from 'react-native-onyx';
4-
import ConfirmModal from '@components/ConfirmModal';
54
import HeaderWithBackButton from '@components/HeaderWithBackButton';
65
import MenuItem from '@components/MenuItem';
76
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
7+
import {ModalActions} from '@components/Modal/Global/ModalContext';
88
import OfflineWithFeedback from '@components/OfflineWithFeedback';
99
import ScreenWrapper from '@components/ScreenWrapper';
1010
import ScrollView from '@components/ScrollView';
1111
import Switch from '@components/Switch';
1212
import Text from '@components/Text';
13+
import useConfirmModal from '@hooks/useConfirmModal';
1314
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
1415
import useLocalize from '@hooks/useLocalize';
1516
import useOnyx from '@hooks/useOnyx';
@@ -36,8 +37,7 @@ type PolicyDistanceRateDetailsPageProps = PlatformStackScreenProps<SettingsNavig
3637
function PolicyDistanceRateDetailsPage({route}: PolicyDistanceRateDetailsPageProps) {
3738
const styles = useThemeStyles();
3839
const {translate} = useLocalize();
39-
const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
40-
const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
40+
const {showConfirmModal} = useConfirmModal();
4141
const policyID = route.params.policyID;
4242
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`);
4343
const rateID = route.params.rateID;
@@ -120,18 +120,26 @@ function PolicyDistanceRateDetailsPage({route}: PolicyDistanceRateDetailsPagePro
120120
Navigation.navigate(ROUTES.WORKSPACE_DISTANCE_RATE_TAX_RATE_EDIT.getRoute(policyID, rateID));
121121
};
122122

123+
const showWarningModal = () => {
124+
showConfirmModal({
125+
title: translate('workspace.distanceRates.oopsNotSoFast'),
126+
prompt: translate('workspace.distanceRates.workspaceNeeds'),
127+
confirmText: translate('common.buttonConfirm'),
128+
shouldShowCancelButton: false,
129+
});
130+
};
131+
123132
const toggleRate = () => {
124133
if (!rate?.enabled || canDisableOrDeleteRate) {
125134
setPolicyDistanceRatesEnabled(policyID, customUnit, [{...rate, enabled: !rate?.enabled}]);
126135
} else {
127-
setIsWarningModalVisible(true);
136+
showWarningModal();
128137
}
129138
};
130139

131140
const deleteRate = () => {
132-
Navigation.goBack();
133141
deletePolicyDistanceRates(policyID, customUnit, [rateID], Array.from(eligibleTransactionIDs ?? []), transactionViolations);
134-
setIsDeleteModalVisible(false);
142+
Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack());
135143
};
136144

137145
const rateValueToDisplay = convertAmountToDisplayString(rate?.rate, currency);
@@ -250,33 +258,23 @@ function PolicyDistanceRateDetailsPage({route}: PolicyDistanceRateDetailsPagePro
250258
<MenuItem
251259
icon={icons.Trashcan}
252260
title={translate('common.delete')}
253-
onPress={() => {
254-
if (canDisableOrDeleteRate) {
255-
setIsDeleteModalVisible(true);
261+
onPress={async () => {
262+
if (!canDisableOrDeleteRate) {
263+
showWarningModal();
256264
return;
257265
}
258-
setIsWarningModalVisible(true);
266+
const {action} = await showConfirmModal({
267+
title: translate('workspace.distanceRates.deleteDistanceRate'),
268+
prompt: translate('workspace.distanceRates.areYouSureDelete', {count: 1}),
269+
confirmText: translate('common.delete'),
270+
cancelText: translate('common.cancel'),
271+
danger: true,
272+
});
273+
if (action === ModalActions.CONFIRM) {
274+
deleteRate();
275+
}
259276
}}
260277
/>
261-
<ConfirmModal
262-
onConfirm={() => setIsWarningModalVisible(false)}
263-
onCancel={() => setIsWarningModalVisible(false)}
264-
isVisible={isWarningModalVisible}
265-
title={translate('workspace.distanceRates.oopsNotSoFast')}
266-
prompt={translate('workspace.distanceRates.workspaceNeeds')}
267-
confirmText={translate('common.buttonConfirm')}
268-
shouldShowCancelButton={false}
269-
/>
270-
<ConfirmModal
271-
title={translate('workspace.distanceRates.deleteDistanceRate')}
272-
isVisible={isDeleteModalVisible}
273-
onConfirm={deleteRate}
274-
onCancel={() => setIsDeleteModalVisible(false)}
275-
prompt={translate('workspace.distanceRates.areYouSureDelete', {count: 1})}
276-
confirmText={translate('common.delete')}
277-
cancelText={translate('common.cancel')}
278-
danger
279-
/>
280278
</ScrollView>
281279
</ScreenWrapper>
282280
</AccessOrNotFoundWrapper>

‎src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React, {useCallback, useEffect, useMemo, useState} from 'react';
1+
import React, {useCallback, useEffect, useMemo} from 'react';
22
import {InteractionManager, View} from 'react-native';
33
import type {OnyxCollection} from 'react-native-onyx';
44
import ActivityIndicator from '@components/ActivityIndicator';
55
import Button from '@components/Button';
66
import type {DropdownOption, WorkspaceDistanceRatesBulkActionType} from '@components/ButtonWithDropdownMenu/types';
7-
import ConfirmModal from '@components/ConfirmModal';
87
import HeaderWithBackButton from '@components/HeaderWithBackButton';
98
import {loadIllustration} from '@components/Icon/IllustrationLoader';
109
import type {IllustrationName} from '@components/Icon/IllustrationLoader';
10+
import {ModalActions} from '@components/Modal/Global/ModalContext';
1111
import ScreenWrapper from '@components/ScreenWrapper';
1212
import SearchBar from '@components/SearchBar';
1313
import TableListItem from '@components/SelectionList/ListItem/TableListItem';
@@ -16,6 +16,7 @@ import SelectionListWithModal from '@components/SelectionListWithModal';
1616
import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
1717
import Switch from '@components/Switch';
1818
import Text from '@components/Text';
19+
import useConfirmModal from '@hooks/useConfirmModal';
1920
import useFilteredSelection from '@hooks/useFilteredSelection';
2021
import {useMemoizedLazyAsset, useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
2122
import useLocalize from '@hooks/useLocalize';
@@ -67,8 +68,7 @@ function PolicyDistanceRatesPage({
6768
const {shouldUseNarrowLayout} = useResponsiveLayout();
6869
const styles = useThemeStyles();
6970
const {translate, localeCompare} = useLocalize();
70-
const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
71-
const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
71+
const {showConfirmModal} = useConfirmModal();
7272
const policy = usePolicy(policyID);
7373
useWorkspaceDocumentTitle(policy?.name, 'workspace.common.distanceRates');
7474
const isMobileSelectionModeEnabled = useMobileSelectionMode();
@@ -200,6 +200,15 @@ function PolicyDistanceRatesPage({
200200
[customUnit?.rates],
201201
);
202202

203+
const showWarningModal = useCallback(() => {
204+
showConfirmModal({
205+
title: translate('workspace.distanceRates.oopsNotSoFast'),
206+
prompt: translate('workspace.distanceRates.workspaceNeeds'),
207+
confirmText: translate('common.buttonConfirm'),
208+
shouldShowCancelButton: false,
209+
});
210+
}, [showConfirmModal, translate]);
211+
203212
const updateDistanceRateEnabled = useCallback(
204213
(value: boolean, rateID: string) => {
205214
if (!customUnit) {
@@ -210,10 +219,10 @@ function PolicyDistanceRatesPage({
210219
if (!rate?.enabled || canDisableOrDeleteRate(rateID)) {
211220
setPolicyDistanceRatesEnabled(policyID, customUnit, [{...rate, enabled: value}]);
212221
} else {
213-
setIsWarningModalVisible(true);
222+
showWarningModal();
214223
}
215224
},
216-
[canDisableOrDeleteRate, customUnit, policyID],
225+
[canDisableOrDeleteRate, customUnit, policyID, showWarningModal],
217226
);
218227

219228
const unitTranslation = translate(`common.${customUnit?.attributes?.unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES}`);
@@ -314,7 +323,6 @@ function PolicyDistanceRatesPage({
314323
const transactionIDsAffected = selectedDistanceRates.flatMap((rateID) => eligibleTransactionsData?.rateIDToTransactionIDsMap?.[rateID] ?? []);
315324

316325
deletePolicyDistanceRates(policyID, customUnit, selectedDistanceRates, transactionIDsAffected, transactionViolations);
317-
setIsDeleteModalVisible(false);
318326

319327
// eslint-disable-next-line @typescript-eslint/no-deprecated
320328
InteractionManager.runAfterInteractions(() => {
@@ -363,7 +371,22 @@ function PolicyDistanceRatesPage({
363371
text: translate('workspace.distanceRates.deleteRates', {count: selectedDistanceRates.length}),
364372
value: CONST.POLICY.BULK_ACTION_TYPES.DELETE,
365373
icon: icons.Trashcan,
366-
onSelected: () => (canDisableOrDeleteSelectedRates ? setIsDeleteModalVisible(true) : setIsWarningModalVisible(true)),
374+
onSelected: async () => {
375+
if (!canDisableOrDeleteSelectedRates) {
376+
showWarningModal();
377+
return;
378+
}
379+
const {action} = await showConfirmModal({
380+
title: translate('workspace.distanceRates.deleteDistanceRate'),
381+
prompt: translate('workspace.distanceRates.areYouSureDelete', {count: selectedDistanceRates.length}),
382+
confirmText: translate('common.delete'),
383+
cancelText: translate('common.cancel'),
384+
danger: true,
385+
});
386+
if (action === ModalActions.CONFIRM) {
387+
deleteRates();
388+
}
389+
},
367390
},
368391
];
369392

@@ -373,7 +396,7 @@ function PolicyDistanceRatesPage({
373396
text: translate('workspace.distanceRates.disableRates', {count: enabledRates.length}),
374397
value: CONST.POLICY.BULK_ACTION_TYPES.DISABLE,
375398
icon: icons.Close,
376-
onSelected: () => (canDisableOrDeleteSelectedRates ? disableRates() : setIsWarningModalVisible(true)),
399+
onSelected: () => (canDisableOrDeleteSelectedRates ? disableRates() : showWarningModal()),
377400
});
378401
}
379402

@@ -526,25 +549,6 @@ function PolicyDistanceRatesPage({
526549
shouldShowRightCaret
527550
/>
528551
)}
529-
<ConfirmModal
530-
onConfirm={() => setIsWarningModalVisible(false)}
531-
onCancel={() => setIsWarningModalVisible(false)}
532-
isVisible={isWarningModalVisible}
533-
title={translate('workspace.distanceRates.oopsNotSoFast')}
534-
prompt={translate('workspace.distanceRates.workspaceNeeds')}
535-
confirmText={translate('common.buttonConfirm')}
536-
shouldShowCancelButton={false}
537-
/>
538-
<ConfirmModal
539-
title={translate('workspace.distanceRates.deleteDistanceRate')}
540-
isVisible={isDeleteModalVisible}
541-
onConfirm={deleteRates}
542-
onCancel={() => setIsDeleteModalVisible(false)}
543-
prompt={translate('workspace.distanceRates.areYouSureDelete', {count: selectedDistanceRates.length})}
544-
confirmText={translate('common.delete')}
545-
cancelText={translate('common.cancel')}
546-
danger
547-
/>
548552
</ScreenWrapper>
549553
</AccessOrNotFoundWrapper>
550554
);

‎src/pages/workspace/perDiem/WorkspacePerDiemDetailsPage.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React, {useState} from 'react';
2-
import ConfirmModal from '@components/ConfirmModal';
1+
import React from 'react';
32
import HeaderWithBackButton from '@components/HeaderWithBackButton';
43
import MenuItem from '@components/MenuItem';
54
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
5+
import {ModalActions} from '@components/Modal/Global/ModalContext';
66
import ScreenWrapper from '@components/ScreenWrapper';
77
import ScrollView from '@components/ScrollView';
8+
import useConfirmModal from '@hooks/useConfirmModal';
89
import {useCurrencyListActions} from '@hooks/useCurrencyList';
910
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
1011
import useLocalize from '@hooks/useLocalize';
@@ -30,11 +31,11 @@ function WorkspacePerDiemDetailsPage({route}: WorkspacePerDiemDetailsPageProps)
3031
const policyID = route.params.policyID;
3132
const rateID = route.params.rateID;
3233
const subRateID = route.params.subRateID;
33-
const [deletePerDiemConfirmModalVisible, setDeletePerDiemConfirmModalVisible] = useState(false);
3434
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
3535

3636
const styles = useThemeStyles();
3737
const {translate} = useLocalize();
38+
const {showConfirmModal} = useConfirmModal();
3839
const {getCurrencySymbol} = useCurrencyListActions();
3940
const customUnit = getPerDiemCustomUnit(policy);
4041

@@ -59,8 +60,7 @@ function WorkspacePerDiemDetailsPage({route}: WorkspacePerDiemDetailsPageProps)
5960
subRateID,
6061
},
6162
]);
62-
setDeletePerDiemConfirmModalVisible(false);
63-
Navigation.goBack();
63+
Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack());
6464
};
6565

6666
return (
@@ -76,16 +76,6 @@ function WorkspacePerDiemDetailsPage({route}: WorkspacePerDiemDetailsPageProps)
7676
testID="WorkspacePerDiemDetailsPage"
7777
>
7878
<HeaderWithBackButton title={translate('workspace.perDiem.editPerDiemRate')} />
79-
<ConfirmModal
80-
isVisible={deletePerDiemConfirmModalVisible}
81-
onConfirm={handleDeletePerDiemRate}
82-
onCancel={() => setDeletePerDiemConfirmModalVisible(false)}
83-
title={translate('workspace.perDiem.deletePerDiemRate')}
84-
prompt={translate('workspace.perDiem.areYouSureDelete', {count: 1})}
85-
confirmText={translate('common.delete')}
86-
cancelText={translate('common.cancel')}
87-
danger
88-
/>
8979
<ScrollView
9080
addBottomSafeAreaPadding
9181
contentContainerStyle={styles.flexGrow1}
@@ -118,7 +108,18 @@ function WorkspacePerDiemDetailsPage({route}: WorkspacePerDiemDetailsPageProps)
118108
<MenuItem
119109
icon={icons.Trashcan}
120110
title={translate('common.delete')}
121-
onPress={() => setDeletePerDiemConfirmModalVisible(true)}
111+
onPress={async () => {
112+
const {action} = await showConfirmModal({
113+
title: translate('workspace.perDiem.deletePerDiemRate'),
114+
prompt: translate('workspace.perDiem.areYouSureDelete', {count: 1}),
115+
confirmText: translate('common.delete'),
116+
cancelText: translate('common.cancel'),
117+
danger: true,
118+
});
119+
if (action === ModalActions.CONFIRM) {
120+
handleDeletePerDiemRate();
121+
}
122+
}}
122123
/>
123124
</ScrollView>
124125
</ScreenWrapper>

0 commit comments

Comments
 (0)