Skip to content

fix: refactor ConfirmModal usage to useConfirmModal in workspace tags pages #77913

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
roryabraham merged 16 commits into from
Feb 13, 2026
+303 −280
Merged

fix: refactor ConfirmModal usage to useConfirmModal in workspace tags pages #77913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
98867e6
fix: refactor ConfirmModal usage to useConfirmModal in workspace tags…
daledah Dec 17, 2025
12c8346
resolve comments
daledah Dec 18, 2025
3820a2a
resolve conflict
daledah Dec 18, 2025
2ebf8a7
fix test
daledah Dec 18, 2025
f87288f
remove useCallback and useMemo function
daledah Dec 19, 2025
1b41ef2
fix lint
daledah Dec 19, 2025
b257104
merge main
daledah Dec 22, 2025
9158d3d
fix lint
daledah Jan 8, 2026
f0fe47b
resolve conflict
daledah Jan 8, 2026
1f01edc
Merge branch 'main' into fix/76690-1
daledah Jan 13, 2026
c2cdd7b
resolve conflict
daledah Jan 26, 2026
f5732d5
resolve commets
daledah Jan 26, 2026
2b827b5
Merge branch 'main' into fix/76690-1
daledah Jan 28, 2026
d632377
fix navigate to import page
daledah Jan 28, 2026
32281a4
Merge branch 'main' into fix/76690-1
daledah Feb 3, 2026
095fe29
remove useless useCallback
daledah Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
252 changes: 134 additions & 118 deletions src/pages/workspace/tags/ImportTagsOptionsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import {useFocusEffect} from '@react-navigation/native';
import React, {useCallback, useMemo, useState} from 'react';
import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
import ConfirmModal from '@components/ConfirmModal';
import DecisionModal from '@components/DecisionModal';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import MenuItem from '@components/MenuItem';
import {ModalActions} from '@components/Modal/Global/ModalContext';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import TextLink from '@components/TextLink';
import useConfirmModal from '@hooks/useConfirmModal';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
Expand Down Expand Up @@ -49,10 +50,9 @@ function ImportTagsOptionsPage({route}: ImportTagsOptionsPageProps) {
const isQuickSettingsFlow = !!backTo;
const {translate} = useLocalize();
const styles = useThemeStyles();
const [isSwitchSingleToMultipleLevelTagWarningModalVisible, setIsSwitchSingleToMultipleLevelTagWarningModalVisible] = useState(false);
const {showConfirmModal} = useConfirmModal();
const expensifyIcons = useMemoizedLazyExpensifyIcons(['MultiTag', 'Tag']);

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

const startMultiLevelTagImportFlow = useCallback(() => {
setImportedSpreadsheetIsImportingMultiLevelTags(true);
if (hasVisibleTags) {
if (isMultiLevelTags) {
setIsOverridingMultiTag(true);
} else {
setIsSwitchSingleToMultipleLevelTagWarningModalVisible(true);
}
} else {
Navigation.navigate(
isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo)) : ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
);
}
}, [hasVisibleTags, policyID, isQuickSettingsFlow, backTo, isMultiLevelTags]);

useFocusEffect(
useCallback(() => {
if (!shouldRunPostUpgradeFlow || !isControlPolicy(policy)) {
return;
}

startMultiLevelTagImportFlow();
setShouldRunPostUpgradeFlow(false);
}, [shouldRunPostUpgradeFlow, policy, startMultiLevelTagImportFlow]),
const overrideMultiTagPrompt = useMemo(
() => (
<Text>
{translate('workspace.tags.overrideMultiTagWarning.prompt1')}
<>
{translate('workspace.tags.overrideMultiTagWarning.prompt2')}
<TextLink
onPress={() => {
if (isMultiLevelTags) {
downloadMultiLevelTagsCSV(
policyID,
() => {
close(() => {
setIsDownloadFailureModalVisible(true);
});
},
hasDependentTags,
translate,
);
} else {
downloadTagsCSV(
policyID,
() => {
close(() => {
setIsDownloadFailureModalVisible(true);
});
},
translate,
);
}
}}
>
{translate('workspace.tags.overrideMultiTagWarning.prompt3')}
</TextLink>
{translate('workspace.tags.overrideMultiTagWarning.prompt4')}
</>
</Text>
),
[translate, isMultiLevelTags, policyID, hasDependentTags],
);

if (hasAccountingConnections) {
return <NotFoundPage />;
}

const overrideMultiTagPrompt = (
<Text>
{translate('workspace.tags.overrideMultiTagWarning.prompt1')}
<>
{translate('workspace.tags.overrideMultiTagWarning.prompt2')}
const switchSingleToMultiLevelTagPrompt = useMemo(
() => (
<Text>
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt1')}
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt2')}
<TextLink
onPress={() => {
if (isMultiLevelTags) {
Expand All @@ -131,51 +142,79 @@ function ImportTagsOptionsPage({route}: ImportTagsOptionsPageProps) {
}
}}
>
{translate('workspace.tags.overrideMultiTagWarning.prompt3')}
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt3')}
</TextLink>
{translate('workspace.tags.overrideMultiTagWarning.prompt4')}
</>
</Text>
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt4')}
<TextLink href={CONST.IMPORT_SPREADSHEET.TAGS_ARTICLE_LINK}>{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt5')}</TextLink>
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt6')}
</Text>
),
[translate, policyID, hasDependentTags, isMultiLevelTags],
);

const switchSingleToMultiLevelTagPrompt = (
<Text>
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt1')}
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt2')}
<TextLink
onPress={() => {
if (isMultiLevelTags) {
downloadMultiLevelTagsCSV(
policyID,
() => {
close(() => {
setIsDownloadFailureModalVisible(true);
});
},
hasDependentTags,
translate,
);
} else {
downloadTagsCSV(
policyID,
() => {
close(() => {
setIsDownloadFailureModalVisible(true);
});
},
translate,
const startMultiLevelTagImportFlow = useCallback(async () => {
setImportedSpreadsheetIsImportingMultiLevelTags(true);
if (hasVisibleTags) {
if (isMultiLevelTags) {
const {action} = await showConfirmModal({
title: translate('workspace.tags.overrideMultiTagWarning.title'),
prompt: overrideMultiTagPrompt,
confirmText: translate('workspace.tags.overrideMultiTagWarning.title'),
cancelText: translate('common.cancel'),
danger: true,
});
if (action === ModalActions.CONFIRM) {
Navigation.navigate(
isQuickSettingsFlow
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
);
} else {
setImportedSpreadsheetIsImportingMultiLevelTags(false);
}
} else {
const {action} = await showConfirmModal({
title: translate('workspace.tags.switchSingleToMultiLevelTagWarning.title'),
prompt: switchSingleToMultiLevelTagPrompt,
confirmText: translate('workspace.tags.switchSingleToMultiLevelTagWarning.title'),
cancelText: translate('common.cancel'),
danger: true,
});
if (action === ModalActions.CONFIRM) {
cleanPolicyTags(policyID);
Navigation.setNavigationActionToMicrotaskQueue(() => {
Navigation.navigate(
isQuickSettingsFlow
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
);
}
}}
>
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt3')}
</TextLink>
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt4')}
<TextLink href={CONST.IMPORT_SPREADSHEET.TAGS_ARTICLE_LINK}>{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt5')}</TextLink>
{translate('workspace.tags.switchSingleToMultiLevelTagWarning.prompt6')}
</Text>
});
} else {
setImportedSpreadsheetIsImportingMultiLevelTags(false);
}
}
} else {
Navigation.navigate(
isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo)) : ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
);
}
}, [hasVisibleTags, isMultiLevelTags, showConfirmModal, translate, overrideMultiTagPrompt, isQuickSettingsFlow, policyID, backTo, switchSingleToMultiLevelTagPrompt]);

useFocusEffect(
useCallback(() => {
if (!shouldRunPostUpgradeFlow || !isControlPolicy(policy)) {
return;
}

startMultiLevelTagImportFlow();
setShouldRunPostUpgradeFlow(false);
}, [shouldRunPostUpgradeFlow, policy, startMultiLevelTagImportFlow]),
);

if (hasAccountingConnections) {
return <NotFoundPage />;
}

return (
<AccessOrNotFoundWrapper
policyID={policyID}
Expand All @@ -200,10 +239,28 @@ function ImportTagsOptionsPage({route}: ImportTagsOptionsPageProps) {
title={translate('workspace.tags.tagLevel.singleLevel')}
icon={expensifyIcons.Tag}
shouldShowRightIcon
onPress={() => {
onPress={async () => {
setImportedSpreadsheetIsImportingMultiLevelTags(false);
if (hasVisibleTags && isMultiLevelTags) {
setIsSwitchSingleToMultipleLevelTagWarningModalVisible(true);
const {action} = await showConfirmModal({
title: translate('workspace.tags.switchSingleToMultiLevelTagWarning.title'),
prompt: switchSingleToMultiLevelTagPrompt,
confirmText: translate('workspace.tags.switchSingleToMultiLevelTagWarning.title'),
cancelText: translate('common.cancel'),
danger: true,
});
if (action === ModalActions.CONFIRM) {
cleanPolicyTags(policyID);
Navigation.setNavigationActionToMicrotaskQueue(() => {
Navigation.navigate(
isQuickSettingsFlow
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
);
});
} else {
setImportedSpreadsheetIsImportingMultiLevelTags(false);
}
} else {
Navigation.navigate(
isQuickSettingsFlow
Expand Down Expand Up @@ -238,47 +295,6 @@ function ImportTagsOptionsPage({route}: ImportTagsOptionsPageProps) {
isVisible={isDownloadFailureModalVisible}
onClose={() => setIsDownloadFailureModalVisible(false)}
/>
<ConfirmModal
isVisible={isSwitchSingleToMultipleLevelTagWarningModalVisible}
onConfirm={() => {
cleanPolicyTags(policyID);
setIsSwitchSingleToMultipleLevelTagWarningModalVisible(false);
Navigation.navigate(
isQuickSettingsFlow
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
);
}}
title={translate('workspace.tags.switchSingleToMultiLevelTagWarning.title')}
prompt={switchSingleToMultiLevelTagPrompt}
confirmText={translate('workspace.tags.switchSingleToMultiLevelTagWarning.title')}
danger
cancelText={translate('common.cancel')}
onCancel={() => {
setIsSwitchSingleToMultipleLevelTagWarningModalVisible(false);
setImportedSpreadsheetIsImportingMultiLevelTags(false);
}}
/>
<ConfirmModal
isVisible={isOverridingMultiTag}
onConfirm={() => {
setIsOverridingMultiTag(false);
Navigation.navigate(
isQuickSettingsFlow
? ROUTES.SETTINGS_TAGS_IMPORT.getRoute(policyID, ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo))
: ROUTES.WORKSPACE_TAGS_IMPORT.getRoute(policyID),
);
}}
title={translate('workspace.tags.overrideMultiTagWarning.title')}
prompt={overrideMultiTagPrompt}
confirmText={translate('workspace.tags.overrideMultiTagWarning.title')}
danger
cancelText={translate('common.cancel')}
onCancel={() => {
setIsOverridingMultiTag(false);
setImportedSpreadsheetIsImportingMultiLevelTags(false);
}}
/>
</AccessOrNotFoundWrapper>
);
}
Expand Down
Loading
Loading