Skip to content

Commit 4e0897a

Browse files
roryabrahamroryabraham
authored
Merge pull request Expensify#77913 from daledah/fix/76690-1
fix: refactor ConfirmModal usage to useConfirmModal in workspace tags pages
2 parents 6988822 + 095fe29 commit 4e0897a

5 files changed

Lines changed: 303 additions & 280 deletions

File tree

‎src/pages/workspace/tags/ImportTagsOptionsPage.tsx‎

Lines changed: 134 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import {useFocusEffect} from '@react-navigation/native';
22
import React, {useCallback, useMemo, useState} from 'react';
33
import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
4-
import ConfirmModal from '@components/ConfirmModal';
54
import DecisionModal from '@components/DecisionModal';
65
import HeaderWithBackButton from '@components/HeaderWithBackButton';
76
import MenuItem from '@components/MenuItem';
7+
import {ModalActions} from '@components/Modal/Global/ModalContext';
88
import ScreenWrapper from '@components/ScreenWrapper';
99
import Text from '@components/Text';
1010
import TextLink from '@components/TextLink';
11+
import useConfirmModal from '@hooks/useConfirmModal';
1112
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
1213
import useLocalize from '@hooks/useLocalize';
1314
import useOnyx from '@hooks/useOnyx';
@@ -49,10 +50,9 @@ function ImportTagsOptionsPage({route}: ImportTagsOptionsPageProps) {
4950
const isQuickSettingsFlow = !!backTo;
5051
const {translate} = useLocalize();
5152
const styles = useThemeStyles();
52-
const [isSwitchSingleToMultipleLevelTagWarningModalVisible, setIsSwitchSingleToMultipleLevelTagWarningModalVisible] = useState(false);
53+
const {showConfirmModal} = useConfirmModal();
5354
const expensifyIcons = useMemoizedLazyExpensifyIcons(['MultiTag', 'Tag']);
5455

55-
const [isOverridingMultiTag, setIsOverridingMultiTag] = useState(false);
5656
const [isDownloadFailureModalVisible, setIsDownloadFailureModalVisible] = useState(false);
5757
const [shouldRunPostUpgradeFlow, setShouldRunPostUpgradeFlow] = useState(false);
5858
const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {canBeMissing: true});
@@ -70,41 +70,52 @@ function ImportTagsOptionsPage({route}: ImportTagsOptionsPageProps) {
7070
return Object.values(singleLevelTags).some((tag) => tag.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
7171
}, [isMultiLevelTags, policyTagLists]);
7272

73-
const startMultiLevelTagImportFlow = useCallback(() => {
74-
setImportedSpreadsheetIsImportingMultiLevelTags(true);
75-
if (hasVisibleTags) {
76-
if (isMultiLevelTags) {
77-
setIsOverridingMultiTag(true);
78-
} else {
79-
setIsSwitchSingleToMultipleLevelTagWarningModalVisible(true);
80-
}
81-
} else {
82-
Navigation.navigate(
83-
isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo)) : ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
84-
);
85-
}
86-
}, [hasVisibleTags, policyID, isQuickSettingsFlow, backTo, isMultiLevelTags]);
87-
88-
useFocusEffect(
89-
useCallback(() => {
90-
if (!shouldRunPostUpgradeFlow || !isControlPolicy(policy)) {
91-
return;
92-
}
93-
94-
startMultiLevelTagImportFlow();
95-
setShouldRunPostUpgradeFlow(false);
96-
}, [shouldRunPostUpgradeFlow, policy, startMultiLevelTagImportFlow]),
73+
const overrideMultiTagPrompt = useMemo(
74+
() => (
75+
<Text>
76+
{translate('workspace.tags.overrideMultiTagWarning.prompt1')}
77+
<>
78+
{translate('workspace.tags.overrideMultiTagWarning.prompt2')}
79+
<TextLink
80+
onPress={() => {
81+
if (isMultiLevelTags) {
82+
downloadMultiLevelTagsCSV(
83+
policyID,
84+
() => {
85+
close(() => {
86+
setIsDownloadFailureModalVisible(true);
87+
});
88+
},
89+
hasDependentTags,
90+
translate,
91+
);
92+
} else {
93+
downloadTagsCSV(
94+
policyID,
95+
() => {
96+
close(() => {
97+
setIsDownloadFailureModalVisible(true);
98+
});
99+
},
100+
translate,
101+
);
102+
}
103+
}}
104+
>
105+
{translate('workspace.tags.overrideMultiTagWarning.prompt3')}
106+
</TextLink>
107+
{translate('workspace.tags.overrideMultiTagWarning.prompt4')}
108+
</>
109+
</Text>
110+
),
111+
[translate, isMultiLevelTags, policyID, hasDependentTags],
97112
);
98113

99-
if (hasAccountingConnections) {
100-
return <NotFoundPage />;
101-
}
102-
103-
const overrideMultiTagPrompt = (
104-
<Text>
105-
{translate('workspace.tags.overrideMultiTagWarning.prompt1')}
106-
<>
107-
{translate('workspace.tags.overrideMultiTagWarning.prompt2')}
114+
const switchSingleToMultiLevelTagPrompt = useMemo(
115+
() => (
116+
<Text>
117+
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt1')}
118+
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt2')}
108119
<TextLink
109120
onPress={() => {
110121
if (isMultiLevelTags) {
@@ -131,51 +142,79 @@ function ImportTagsOptionsPage({route}: ImportTagsOptionsPageProps) {
131142
}
132143
}}
133144
>
134-
{translate('workspace.tags.overrideMultiTagWarning.prompt3')}
145+
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt3')}
135146
</TextLink>
136-
{translate('workspace.tags.overrideMultiTagWarning.prompt4')}
137-
</>
138-
</Text>
147+
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt4')}
148+
<TextLink href={CONST.IMPORT_SPREADSHEET.TAGS_ARTICLE_LINK}>{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt5')}</TextLink>
149+
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt6')}
150+
</Text>
151+
),
152+
[translate, policyID, hasDependentTags, isMultiLevelTags],
139153
);
140154

141-
const switchSingleToMultiLevelTagPrompt = (
142-
<Text>
143-
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt1')}
144-
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt2')}
145-
<TextLink
146-
onPress={() => {
147-
if (isMultiLevelTags) {
148-
downloadMultiLevelTagsCSV(
149-
policyID,
150-
() => {
151-
close(() => {
152-
setIsDownloadFailureModalVisible(true);
153-
});
154-
},
155-
hasDependentTags,
156-
translate,
157-
);
158-
} else {
159-
downloadTagsCSV(
160-
policyID,
161-
() => {
162-
close(() => {
163-
setIsDownloadFailureModalVisible(true);
164-
});
165-
},
166-
translate,
155+
const startMultiLevelTagImportFlow = useCallback(async () => {
156+
setImportedSpreadsheetIsImportingMultiLevelTags(true);
157+
if (hasVisibleTags) {
158+
if (isMultiLevelTags) {
159+
const {action} = await showConfirmModal({
160+
title: translate('workspace.tags.overrideMultiTagWarning.title'),
161+
prompt: overrideMultiTagPrompt,
162+
confirmText: translate('workspace.tags.overrideMultiTagWarning.title'),
163+
cancelText: translate('common.cancel'),
164+
danger: true,
165+
});
166+
if (action === ModalActions.CONFIRM) {
167+
Navigation.navigate(
168+
isQuickSettingsFlow
169+
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
170+
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
171+
);
172+
} else {
173+
setImportedSpreadsheetIsImportingMultiLevelTags(false);
174+
}
175+
} else {
176+
const {action} = await showConfirmModal({
177+
title: translate('workspace.tags.switchSingleToMultiLevelTagWarning.title'),
178+
prompt: switchSingleToMultiLevelTagPrompt,
179+
confirmText: translate('workspace.tags.switchSingleToMultiLevelTagWarning.title'),
180+
cancelText: translate('common.cancel'),
181+
danger: true,
182+
});
183+
if (action === ModalActions.CONFIRM) {
184+
cleanPolicyTags(policyID);
185+
Navigation.setNavigationActionToMicrotaskQueue(() => {
186+
Navigation.navigate(
187+
isQuickSettingsFlow
188+
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
189+
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
167190
);
168-
}
169-
}}
170-
>
171-
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt3')}
172-
</TextLink>
173-
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt4')}
174-
<TextLink href={CONST.IMPORT_SPREADSHEET.TAGS_ARTICLE_LINK}>{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt5')}</TextLink>
175-
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt6')}
176-
</Text>
191+
});
192+
} else {
193+
setImportedSpreadsheetIsImportingMultiLevelTags(false);
194+
}
195+
}
196+
} else {
197+
Navigation.navigate(
198+
isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo)) : ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
199+
);
200+
}
201+
}, [hasVisibleTags, isMultiLevelTags, showConfirmModal, translate, overrideMultiTagPrompt, isQuickSettingsFlow, policyID, backTo, switchSingleToMultiLevelTagPrompt]);
202+
203+
useFocusEffect(
204+
useCallback(() => {
205+
if (!shouldRunPostUpgradeFlow || !isControlPolicy(policy)) {
206+
return;
207+
}
208+
209+
startMultiLevelTagImportFlow();
210+
setShouldRunPostUpgradeFlow(false);
211+
}, [shouldRunPostUpgradeFlow, policy, startMultiLevelTagImportFlow]),
177212
);
178213

214+
if (hasAccountingConnections) {
215+
return <NotFoundPage />;
216+
}
217+
179218
return (
180219
<AccessOrNotFoundWrapper
181220
policyID={policyID}
@@ -200,10 +239,28 @@ function ImportTagsOptionsPage({route}: ImportTagsOptionsPageProps) {
200239
title={translate('workspace.tags.tagLevel.singleLevel')}
201240
icon={expensifyIcons.Tag}
202241
shouldShowRightIcon
203-
onPress={() => {
242+
onPress={async () => {
204243
setImportedSpreadsheetIsImportingMultiLevelTags(false);
205244
if (hasVisibleTags && isMultiLevelTags) {
206-
setIsSwitchSingleToMultipleLevelTagWarningModalVisible(true);
245+
const {action} = await showConfirmModal({
246+
title: translate('workspace.tags.switchSingleToMultiLevelTagWarning.title'),
247+
prompt: switchSingleToMultiLevelTagPrompt,
248+
confirmText: translate('workspace.tags.switchSingleToMultiLevelTagWarning.title'),
249+
cancelText: translate('common.cancel'),
250+
danger: true,
251+
});
252+
if (action === ModalActions.CONFIRM) {
253+
cleanPolicyTags(policyID);
254+
Navigation.setNavigationActionToMicrotaskQueue(() => {
255+
Navigation.navigate(
256+
isQuickSettingsFlow
257+
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
258+
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
259+
);
260+
});
261+
} else {
262+
setImportedSpreadsheetIsImportingMultiLevelTags(false);
263+
}
207264
} else {
208265
Navigation.navigate(
209266
isQuickSettingsFlow
@@ -238,47 +295,6 @@ function ImportTagsOptionsPage({route}: ImportTagsOptionsPageProps) {
238295
isVisible={isDownloadFailureModalVisible}
239296
onClose={() => setIsDownloadFailureModalVisible(false)}
240297
/>
241-
<ConfirmModal
242-
isVisible={isSwitchSingleToMultipleLevelTagWarningModalVisible}
243-
onConfirm={() => {
244-
cleanPolicyTags(policyID);
245-
setIsSwitchSingleToMultipleLevelTagWarningModalVisible(false);
246-
Navigation.navigate(
247-
isQuickSettingsFlow
248-
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
249-
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
250-
);
251-
}}
252-
title={translate('workspace.tags.switchSingleToMultiLevelTagWarning.title')}
253-
prompt={switchSingleToMultiLevelTagPrompt}
254-
confirmText={translate('workspace.tags.switchSingleToMultiLevelTagWarning.title')}
255-
danger
256-
cancelText={translate('common.cancel')}
257-
onCancel={() => {
258-
setIsSwitchSingleToMultipleLevelTagWarningModalVisible(false);
259-
setImportedSpreadsheetIsImportingMultiLevelTags(false);
260-
}}
261-
/>
262-
<ConfirmModal
263-
isVisible={isOverridingMultiTag}
264-
onConfirm={() => {
265-
setIsOverridingMultiTag(false);
266-
Navigation.navigate(
267-
isQuickSettingsFlow
268-
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
269-
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
270-
);
271-
}}
272-
title={translate('workspace.tags.overrideMultiTagWarning.title')}
273-
prompt={overrideMultiTagPrompt}
274-
confirmText={translate('workspace.tags.overrideMultiTagWarning.title')}
275-
danger
276-
cancelText={translate('common.cancel')}
277-
onCancel={() => {
278-
setIsOverridingMultiTag(false);
279-
setImportedSpreadsheetIsImportingMultiLevelTags(false);
280-
}}
281-
/>
282298
</AccessOrNotFoundWrapper>
283299
);
284300
}

0 commit comments

Comments
 (0)