diff --git a/src/ROUTES.ts b/src/ROUTES.ts index bad346a8f0d03..bf4ed40ec6f39 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -268,6 +268,14 @@ const ROUTES = { route: 'settings/card/:cardID?', getRoute: (cardID: string) => `settings/card/${cardID}` as const, }, + SETTINGS_DOMAIN_CARD_UPDATE_ADDRESS: { + route: 'settings/card/:cardID/update-address', + getRoute: (cardID: string) => `settings/card/${cardID}/update-address` as const, + }, + SETTINGS_DOMAIN_CARD_CONFIRM_MAGIC_CODE: { + route: 'settings/card/:cardID/confirm-magic-code', + getRoute: (cardID: string) => `settings/card/${cardID}/confirm-magic-code` as const, + }, SETTINGS_REPORT_FRAUD: { route: 'settings/wallet/card/:cardID/report-virtual-fraud', getRoute: (cardID: string) => `settings/wallet/card/${cardID}/report-virtual-fraud` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index cab8d814b911d..5811bf7e08f62 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -355,6 +355,8 @@ const SCREENS = { DOMAIN_CARD: { DOMAIN_CARD_DETAIL: 'Domain_Card_Detail', DOMAIN_CARD_REPORT_FRAUD: 'Domain_Card_Report_Fraud', + DOMAIN_CARD_UPDATE_ADDRESS: 'Domain_Card_Update_Address', + DOMAIN_CARD_CONFIRM_MAGIC_CODE: 'Domain_Card_Confirm_Magic_Code', }, SETTINGS_TAGS: { diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index d2565562b587c..bdc9bebdbf545 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -294,6 +294,8 @@ const ExpensifyCardModalStackNavigator = createModalStackNavigator({ const DomainCardModalStackNavigator = createModalStackNavigator({ [SCREENS.DOMAIN_CARD.DOMAIN_CARD_DETAIL]: () => require('../../../../pages/settings/Wallet/ExpensifyCardPage/index').default, [SCREENS.DOMAIN_CARD.DOMAIN_CARD_REPORT_FRAUD]: () => require('../../../../pages/settings/Wallet/ReportVirtualCardFraudPage').default, + [SCREENS.DOMAIN_CARD.DOMAIN_CARD_UPDATE_ADDRESS]: () => require('../../../../pages/settings/Profile/PersonalDetails/PersonalAddressPage').default, + [SCREENS.DOMAIN_CARD.DOMAIN_CARD_CONFIRM_MAGIC_CODE]: () => require('../../../../pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardVerifyAccountPage').default, }); const ReportParticipantsModalStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 0efb1dacd98fa..e1715460f988d 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -1254,6 +1254,12 @@ const config: LinkingOptions['config'] = { [SCREENS.DOMAIN_CARD.DOMAIN_CARD_REPORT_FRAUD]: { path: ROUTES.SETTINGS_DOMAIN_CARD_REPORT_FRAUD.route, }, + [SCREENS.DOMAIN_CARD.DOMAIN_CARD_UPDATE_ADDRESS]: { + path: ROUTES.SETTINGS_DOMAIN_CARD_UPDATE_ADDRESS.route, + }, + [SCREENS.DOMAIN_CARD.DOMAIN_CARD_CONFIRM_MAGIC_CODE]: { + path: ROUTES.SETTINGS_DOMAIN_CARD_CONFIRM_MAGIC_CODE.route, + }, }, }, [SCREENS.RIGHT_MODAL.REPORT_DESCRIPTION]: { diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 8e41ba3e4f303..cb9a675d63b00 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -1291,6 +1291,18 @@ type SettingsNavigatorParamList = { }; } & ReimbursementAccountNavigatorParamList; +type DomainCardNavigatorParamList = { + [SCREENS.DOMAIN_CARD.DOMAIN_CARD_DETAIL]: { + cardID: string; + }; + [SCREENS.DOMAIN_CARD.DOMAIN_CARD_REPORT_FRAUD]: { + cardID: string; + }; + [SCREENS.DOMAIN_CARD.DOMAIN_CARD_CONFIRM_MAGIC_CODE]: { + cardID: string; + }; +}; + type TwoFactorAuthNavigatorParamList = { [SCREENS.TWO_FACTOR_AUTH.ROOT]: { // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md @@ -2706,6 +2718,7 @@ export type { BackToParams, DebugParamList, DetailsNavigatorParamList, + DomainCardNavigatorParamList, EditRequestNavigatorParamList, EnablePaymentsNavigatorParamList, ExplanationModalNavigatorParamList, diff --git a/src/pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardVerifyAccountPage.tsx b/src/pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardVerifyAccountPage.tsx index 400738ad077ba..a6197df8b4c08 100644 --- a/src/pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardVerifyAccountPage.tsx +++ b/src/pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardVerifyAccountPage.tsx @@ -6,27 +6,34 @@ import {revealVirtualCardDetails} from '@libs/actions/Card'; import {requestValidateCodeAction, resetValidateActionCodeSent} from '@libs/actions/User'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; -import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; +import type {DomainCardNavigatorParamList, SettingsNavigatorParamList} from '@libs/Navigation/types'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type SCREENS from '@src/SCREENS'; +import SCREENS from '@src/SCREENS'; import type {ExpensifyCardDetails} from '@src/types/onyx/Card'; import type {Errors} from '@src/types/onyx/OnyxCommon'; import useExpensifyCardContext from './useExpensifyCardContext'; -type ExpensifyCardVerifyAccountPageProps = PlatformStackScreenProps; +type ExpensifyCardVerifyAccountPageProps = + | PlatformStackScreenProps + | PlatformStackScreenProps; -function ExpensifyCardVerifyAccountPage({ - route: { - params: {cardID = ''}, - }, -}: ExpensifyCardVerifyAccountPageProps) { +function ExpensifyCardVerifyAccountPage({route}: ExpensifyCardVerifyAccountPageProps) { + const {cardID} = route.params; const {translate} = useLocalize(); const [validateError, setValidateError] = useState({}); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: false}); const primaryLogin = account?.primaryLogin ?? ''; const {setIsCardDetailsLoading, setCardsDetails, setCardsDetailsErrors} = useExpensifyCardContext(); + const navigateBack = () => { + if (route.name === SCREENS.DOMAIN_CARD.DOMAIN_CARD_CONFIRM_MAGIC_CODE) { + Navigation.goBack(ROUTES.SETTINGS_DOMAIN_CARD_DETAIL.getRoute(cardID)); + return; + } + Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID)); + }; + const handleRevealCardDetails = (validateCode: string) => { setIsCardDetailsLoading((prevState: Record) => ({ ...prevState, @@ -43,7 +50,7 @@ function ExpensifyCardVerifyAccountPage({ ...prevState, [cardID]: '', })); - Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID)); + navigateBack(); }) .catch((error: string) => { // Displaying magic code errors is handled in the modal, no need to set it on the card @@ -68,7 +75,7 @@ function ExpensifyCardVerifyAccountPage({ clearError={() => setValidateError({})} onClose={() => { resetValidateActionCodeSent(); - Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID)); + navigateBack(); }} /> ); diff --git a/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx b/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx index 7b77e8751e2d8..3f6c59d26598b 100644 --- a/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx +++ b/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx @@ -23,7 +23,7 @@ import {formatCardExpiration, getDomainCards, maskCard, maskPin} from '@libs/Car import {convertToDisplayString, getCurrencyKeyByCountryCode} from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; -import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; +import type {DomainCardNavigatorParamList, SettingsNavigatorParamList} from '@libs/Navigation/types'; import {buildCannedSearchQuery} from '@libs/SearchQueryUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import RedDotCardSection from '@pages/settings/Wallet/RedDotCardSection'; @@ -34,12 +34,14 @@ import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type SCREENS from '@src/SCREENS'; +import SCREENS from '@src/SCREENS'; import type {CurrencyList} from '@src/types/onyx'; import {getEmptyObject} from '@src/types/utils/EmptyObject'; import useExpensifyCardContext from './useExpensifyCardContext'; -type ExpensifyCardPageProps = PlatformStackScreenProps; +type ExpensifyCardPageProps = + | PlatformStackScreenProps + | PlatformStackScreenProps; type PossibleTitles = 'cardPage.smartLimit.title' | 'cardPage.monthlyLimit.title' | 'cardPage.fixedLimit.title'; @@ -61,11 +63,8 @@ function getLimitTypeTranslationKeys(limitType: ValueOf()] = useOnyx(ONYXKEYS.CURRENCY_LIST, {canBeMissing: true}); @@ -199,7 +198,13 @@ function ExpensifyCardPage({ pan={cardsDetails[card.cardID]?.pan} expiration={formatCardExpiration(cardsDetails[card.cardID]?.expiration ?? '')} cvv={cardsDetails[card.cardID]?.cvv} - domain={domain} + onUpdateAddressPress={() => { + if (route.name === SCREENS.DOMAIN_CARD.DOMAIN_CARD_DETAIL) { + Navigation.navigate(ROUTES.SETTINGS_DOMAIN_CARD_UPDATE_ADDRESS.getRoute(String(card.cardID))); + return; + } + Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS.getRoute(domain)); + }} /> ) : ( <> @@ -218,6 +223,10 @@ function ExpensifyCardPage({ showLockedAccountModal(); return; } + if (route.name === SCREENS.DOMAIN_CARD.DOMAIN_CARD_DETAIL) { + Navigation.navigate(ROUTES.SETTINGS_DOMAIN_CARD_CONFIRM_MAGIC_CODE.getRoute(String(card.cardID))); + return; + } Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAIN_CARD_CONFIRM_MAGIC_CODE.getRoute(String(card.cardID))); }} isDisabled={isCardDetailsLoading[card.cardID] || isOffline} @@ -244,6 +253,10 @@ function ExpensifyCardPage({ showLockedAccountModal(); return; } + if (route.name === SCREENS.DOMAIN_CARD.DOMAIN_CARD_DETAIL) { + Navigation.navigate(ROUTES.SETTINGS_DOMAIN_CARD_REPORT_FRAUD.getRoute(String(card.cardID))); + return; + } Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(String(card.cardID))); }} /> @@ -254,10 +267,7 @@ function ExpensifyCardPage({ travelCards.map((card) => ( {!!cardsDetails[card.cardID] && cardsDetails[card.cardID]?.cvv ? ( - + ) : ( <> ; +type ReportVirtualCardFraudPageProps = + | PlatformStackScreenProps + | PlatformStackScreenProps; -function ReportVirtualCardFraudPage({ - route: { - params: {cardID = '', backTo}, - }, -}: ReportVirtualCardFraudPageProps) { +function ReportVirtualCardFraudPage({route}: ReportVirtualCardFraudPageProps) { + const {cardID = ''} = route.params; const styles = useThemeStyles(); const {translate} = useLocalize(); const [cardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: false}); @@ -52,7 +51,13 @@ function ReportVirtualCardFraudPage({ Navigation.goBack(backTo)} + onBackButtonPress={() => { + if (route.name === SCREENS.DOMAIN_CARD.DOMAIN_CARD_REPORT_FRAUD) { + Navigation.goBack(ROUTES.SETTINGS_DOMAIN_CARD_DETAIL.getRoute(cardID)); + return; + } + Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID)); + }} /> {translate('reportFraudPage.description')} diff --git a/src/pages/settings/Wallet/WalletPage/CardDetails.tsx b/src/pages/settings/Wallet/WalletPage/CardDetails.tsx index 5af5265009511..2c882ed2d19f1 100644 --- a/src/pages/settings/Wallet/WalletPage/CardDetails.tsx +++ b/src/pages/settings/Wallet/WalletPage/CardDetails.tsx @@ -5,11 +5,9 @@ import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; -import Navigation from '@libs/Navigation/Navigation'; import {getFormattedAddress} from '@libs/PersonalDetailsUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; import type {PrivatePersonalDetails} from '@src/types/onyx'; const defaultPrivatePersonalDetails: PrivatePersonalDetails = { @@ -34,11 +32,11 @@ type CardDetailsProps = { /** 3 digit code */ cvv?: string; - /** Domain name */ - domain: string; + /** Callback to navigate to update address page */ + onUpdateAddressPress?: () => void; }; -function CardDetails({pan = '', expiration = '', cvv = '', domain}: CardDetailsProps) { +function CardDetails({pan = '', expiration = '', cvv = '', onUpdateAddressPress}: CardDetailsProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS, {canBeMissing: true}); @@ -81,7 +79,7 @@ function CardDetails({pan = '', expiration = '', cvv = '', domain}: CardDetailsP /> Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS.getRoute(domain))} + onPress={() => onUpdateAddressPress?.()} > {translate('cardPage.cardDetails.updateAddress')}