diff --git a/src/pages/settings/Wallet/PersonalCards/AddNewCardPage.tsx b/src/pages/settings/Wallet/PersonalCards/AddNewCardPage.tsx index 8ba691a8bd68..9e139591a2ab 100644 --- a/src/pages/settings/Wallet/PersonalCards/AddNewCardPage.tsx +++ b/src/pages/settings/Wallet/PersonalCards/AddNewCardPage.tsx @@ -1,7 +1,8 @@ -import React, {useEffect, useState} from 'react'; +import React, {useEffect} from 'react'; import {View} from 'react-native'; -import ConfirmModal from '@components/ConfirmModal'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; +import {ModalActions} from '@components/Modal/Global/ModalContext'; +import useConfirmModal from '@hooks/useConfirmModal'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; @@ -25,7 +26,7 @@ function AddPersonalNewCardPage() { const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); const [betas] = useOnyx(ONYXKEYS.BETAS); const {currentStep} = addNewPersonalCardFeed ?? {}; - const [isModalVisible, setIsModalVisible] = useState(false); + const {showConfirmModal} = useConfirmModal(); const {translate} = useLocalize(); const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails(); const isAddCardFeedLoading = isLoadingOnyxValue(addNewPersonalCardFeedMetadata); @@ -61,31 +62,31 @@ function AddPersonalNewCardPage() { CurrentStep = ; break; case CONST.PERSONAL_CARDS.STEP.PLAID_CONNECTION: - CurrentStep = setIsModalVisible(true)} />; + CurrentStep = ( + { + showConfirmModal({ + title: translate('workspace.companyCards.addNewCard.exitModal.title'), + success: true, + confirmText: translate('workspace.companyCards.addNewCard.exitModal.confirmText'), + cancelText: translate('workspace.companyCards.addNewCard.exitModal.cancelText'), + prompt: translate('workspace.companyCards.addNewCard.exitModal.prompt'), + }).then((result) => { + if (result.action !== ModalActions.CONFIRM) { + return; + } + navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, false, betas); + }); + }} + /> + ); break; default: CurrentStep = ; break; } - return ( - <> - {CurrentStep} - setIsModalVisible(false)} - onConfirm={() => { - setIsModalVisible(false); - navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, false, betas); - }} - /> - - ); + return {CurrentStep}; } export default AddPersonalNewCardPage; diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx index eefe6ea61bef..2cc559060edb 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx @@ -1,13 +1,13 @@ import {format, parseISO} from 'date-fns'; import {Str} from 'expensify-common'; -import React, {useMemo, useRef, useState} from 'react'; +import React, {useMemo, useRef} from 'react'; import {View} from 'react-native'; import ActivityIndicator from '@components/ActivityIndicator'; -import ConfirmModal from '@components/ConfirmModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ImageSVG from '@components/ImageSVG'; import MenuItem from '@components/MenuItem'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import {ModalActions} from '@components/Modal/Global/ModalContext'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PlaidCardFeedIcon from '@components/PlaidCardFeedIcon'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -15,6 +15,7 @@ import ScrollView from '@components/ScrollView'; import useCardFeeds from '@hooks/useCardFeeds'; import useCardsList from '@hooks/useCardsList'; import {useCompanyCardFeedIcons} from '@hooks/useCompanyCardIcons'; +import useConfirmModal from '@hooks/useConfirmModal'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -57,7 +58,6 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag const [shouldUseStagingServer = isUsingStagingApi()] = useOnyx(ONYXKEYS.SHOULD_USE_STAGING_SERVER); const policy = usePolicy(policyID); const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID; - const [isUnassignModalVisible, setIsUnassignModalVisible] = useState(false); const isUnassigningRef = useRef(false); const {translate, getLocalDateFromDatetime} = useLocalize(); const styles = useThemeStyles(); @@ -69,6 +69,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag const {isOffline} = useNetwork(); const accountingIntegrations = Object.values(CONST.POLICY.CONNECTIONS.NAME); const connectedIntegration = getConnectedIntegration(policy, accountingIntegrations) ?? connectionSyncProgress?.connectionName; + const {showConfirmModal} = useConfirmModal(); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [allBankCards, allBankCardsMetadata] = useCardsList(feedName); @@ -94,12 +95,11 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag const plaidUrl = getPlaidInstitutionIconUrl(feedName); const unassignCard = () => { - setIsUnassignModalVisible(false); if (card) { isUnassigningRef.current = true; unassignWorkspaceCompanyCard(domainOrWorkspaceAccountID, bank, card); } - Navigation.goBack(); + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack()); }; const updateCard = () => { @@ -293,20 +293,24 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag icon={expensifyIcons.RemoveMembers} title={translate('workspace.moreFeatures.companyCards.unassignCard')} style={styles.mb1} - onPress={() => setIsUnassignModalVisible(true)} + onPress={() => { + showConfirmModal({ + shouldSetModalVisibility: false, + title: translate('workspace.moreFeatures.companyCards.unassignCard'), + prompt: translate('workspace.moreFeatures.companyCards.unassignCardDescription'), + confirmText: translate('workspace.moreFeatures.companyCards.unassign'), + cancelText: translate('common.cancel'), + danger: true, + }).then((result) => { + if (result.action !== ModalActions.CONFIRM) { + return; + } + + unassignCard(); + }); + }} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.UNASSIGN_CARD} /> - setIsUnassignModalVisible(false)} - shouldSetModalVisibility={false} - prompt={translate('workspace.moreFeatures.companyCards.unassignCardDescription')} - confirmText={translate('workspace.moreFeatures.companyCards.unassign')} - cancelText={translate('common.cancel')} - danger - /> diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx index be282822f2f8..868c51a02ecd 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx @@ -1,16 +1,17 @@ import {isUserValidatedSelector} from '@selectors/Account'; -import React, {useMemo, useState} from 'react'; +import React, {useMemo} from 'react'; import {InteractionManager, View} from 'react-native'; -import ConfirmModal from '@components/ConfirmModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import MenuItem from '@components/MenuItem'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import {ModalActions} from '@components/Modal/Global/ModalContext'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; import useCardFeeds from '@hooks/useCardFeeds'; import useCardsList from '@hooks/useCardsList'; +import useConfirmModal from '@hooks/useConfirmModal'; import {useCurrencyListState} from '@hooks/useCurrencyList'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; @@ -42,7 +43,6 @@ function WorkspaceCompanyCardsSettingsPage({ const {translate} = useLocalize(); const policy = usePolicy(policyID); const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID; - const [deleteCompanyCardConfirmModalVisible, setDeleteCompanyCardConfirmModalVisible] = useState(false); const [cardFeeds] = useCardFeeds(policyID); const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`); @@ -52,6 +52,7 @@ function WorkspaceCompanyCardsSettingsPage({ const selectedFeed = useMemo(() => getSelectedFeed(lastSelectedFeed, cardFeeds), [cardFeeds, lastSelectedFeed]); const feed = selectedFeed ? getCompanyCardFeed(selectedFeed) : undefined; + const {showConfirmModal} = useConfirmModal(); const [cardsList] = useCardsList(selectedFeed); const icons = useMemoizedLazyExpensifyIcons(['Sync', 'Trashcan']); @@ -84,7 +85,6 @@ function WorkspaceCompanyCardsSettingsPage({ }; const deleteCompanyCardFeed = () => { - setDeleteCompanyCardConfirmModalVisible(false); Navigation.goBack(); if (feed) { const {cardList, ...cards} = cardsList ?? {}; @@ -176,19 +176,22 @@ function WorkspaceCompanyCardsSettingsPage({ setDeleteCompanyCardConfirmModalVisible(true)} + onPress={() => { + showConfirmModal({ + title: feedName && translate('workspace.moreFeatures.companyCards.removeCardFeedTitle', feedName), + prompt: translate('workspace.moreFeatures.companyCards.removeCardFeedDescription'), + confirmText: translate('common.delete'), + cancelText: translate('common.cancel'), + danger: true, + }).then((result) => { + if (result.action !== ModalActions.CONFIRM) { + return; + } + deleteCompanyCardFeed(); + }); + }} /> - setDeleteCompanyCardConfirmModalVisible(false)} - title={feedName && translate('workspace.moreFeatures.companyCards.removeCardFeedTitle', feedName)} - prompt={translate('workspace.moreFeatures.companyCards.removeCardFeedDescription')} - confirmText={translate('common.delete')} - cancelText={translate('common.cancel')} - danger - /> diff --git a/src/pages/workspace/reports/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reports/ReportFieldsListValuesPage.tsx index 0fc24aeb7dab..58667c290e4e 100644 --- a/src/pages/workspace/reports/ReportFieldsListValuesPage.tsx +++ b/src/pages/workspace/reports/ReportFieldsListValuesPage.tsx @@ -3,9 +3,9 @@ import {InteractionManager, View} from 'react-native'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; -import ConfirmModal from '@components/ConfirmModal'; import EmptyStateComponent from '@components/EmptyStateComponent'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import {ModalActions} from '@components/Modal/Global/ModalContext'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import SearchBar from '@components/SearchBar'; @@ -15,6 +15,7 @@ import SelectionListWithModal from '@components/SelectionListWithModal'; import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader'; import Switch from '@components/Switch'; import Text from '@components/Text'; +import useConfirmModal from '@hooks/useConfirmModal'; import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; @@ -74,9 +75,9 @@ function ReportFieldsListValuesPage({ const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT); const isMobileSelectionModeEnabled = useMobileSelectionMode(); const illustrations = useMemoizedLazyIllustrations(['FolderWithPapers']); + const {showConfirmModal} = useConfirmModal(); const [selectedValues, setSelectedValues] = useState>({}); - const [deleteValuesConfirmModalVisible, setDeleteValuesConfirmModalVisible] = useState(false); const hasAccountingConnections = hasAccountingConnectionsPolicyUtils(policy); const canSelectMultiple = isSmallScreenWidth ? isMobileSelectionModeEnabled : true; @@ -187,8 +188,6 @@ function ReportFieldsListValuesPage({ }); } - setDeleteValuesConfirmModalVisible(false); - // eslint-disable-next-line @typescript-eslint/no-deprecated InteractionManager.runAfterInteractions(() => { setSelectedValues({}); @@ -225,7 +224,21 @@ function ReportFieldsListValuesPage({ icon: icons.Trashcan, text: translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValue' : 'workspace.reportFields.deleteValues'), value: CONST.POLICY.BULK_ACTION_TYPES.DELETE, - onSelected: () => setDeleteValuesConfirmModalVisible(true), + onSelected: () => { + showConfirmModal({ + danger: true, + title: translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValue' : 'workspace.reportFields.deleteValues'), + prompt: translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValuePrompt' : 'workspace.reportFields.deleteValuesPrompt'), + confirmText: translate('common.delete'), + cancelText: translate('common.cancel'), + }).then((result) => { + if (result.action !== ModalActions.CONFIRM) { + return; + } + + handleDeleteValues(); + }); + }, }); } const enabledValues = selectedValuesArray.filter((valueName) => { @@ -404,16 +417,6 @@ function ReportFieldsListValuesPage({ shouldShowRightCaret /> )} - setDeleteValuesConfirmModalVisible(false)} - title={translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValue' : 'workspace.reportFields.deleteValues')} - prompt={translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValuePrompt' : 'workspace.reportFields.deleteValuesPrompt')} - confirmText={translate('common.delete')} - cancelText={translate('common.cancel')} - danger - /> );