feat 22876 allow users to update the card address via update address link

src/ROUTES.ts

@@ -71,22 +71,26 @@ export default {
     SETTINGS_ABOUT: 'settings/about',
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_WALLET: 'settings/wallet',
-    SETTINGS_WALLET_DOMAINCARDS: {
+    SETTINGS_WALLET_DOMAINCARD: {
         route: '/settings/wallet/card/:domain',
         getRoute: (domain: string) => `/settings/wallet/card/${domain}`,
     },
     SETTINGS_REPORT_FRAUD: {
-        route: '/settings/wallet/cards/:domain/report-virtual-fraud',
-        getRoute: (domain: string) => `/settings/wallet/cards/${domain}/report-virtual-fraud`,
+        route: '/settings/wallet/card/:domain/report-virtual-fraud',
+        getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-virtual-fraud`,
     },
     SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card',
     SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account',
     SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments',
+    SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS: {
+        route: 'settings/wallet/card/:domain/digital-details/update-address',
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/digital-details/update-address`,
+    },
     SETTINGS_WALLET_TRANSFER_BALANCE: 'settings/wallet/transfer-balance',
     SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT: 'settings/wallet/choose-transfer-account',
     SETTINGS_WALLET_CARD_ACTIVATE: {
-        route: 'settings/wallet/cards/:domain/activate',
-        getRoute: (domain: string) => `settings/wallet/cards/${domain}/activate`,
+        route: 'settings/wallet/card/:domain/activate',
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/activate`,
     },
     SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details',
     SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name',

src/languages/en.ts

@@ -848,6 +848,7 @@ export default {
             address: 'Address',
             revealDetails: 'Reveal details',
             copyCardNumber: 'Copy card number',
+            updateAddress: 'Update address',
         },
     },
     reportFraudPage: {
@@ -1013,7 +1014,7 @@ export default {
         legalName: 'Legal name',
         legalFirstName: 'Legal first name',
         legalLastName: 'Legal last name',
-        homeAddress: 'Home address',
+        address: 'Address',
         error: {
             dateShouldBeBefore: ({dateString}: DateShouldBeBeforeParams) => `Date should be before ${dateString}.`,
             dateShouldBeAfter: ({dateString}: DateShouldBeAfterParams) => `Date should be after ${dateString}.`,

src/languages/es.ts

@@ -844,6 +844,7 @@ export default {
             address: 'Dirección',
             revealDetails: 'Revelar detalles',
             copyCardNumber: 'Copiar número de la tarjeta',
+            updateAddress: 'Actualizar dirección',
         },
     },
     reportFraudPage: {
@@ -1011,7 +1012,7 @@ export default {
         legalName: 'Nombre completo',
         legalFirstName: 'Nombre legal',
         legalLastName: 'Apellidos legales',
-        homeAddress: 'Domicilio',
+        address: 'Dirección',
         error: {
             dateShouldBeBefore: ({dateString}: DateShouldBeBeforeParams) => `La fecha debe ser anterior a ${dateString}.`,
             dateShouldBeAfter: ({dateString}: DateShouldBeAfterParams) => `La fecha debe ser posterior a ${dateString}.`,

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -143,6 +143,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({
     Settings_App_Download_Links: () => require('../../../pages/settings/AppDownloadLinks').default,
     Settings_Lounge_Access: () => require('../../../pages/settings/Profile/LoungeAccessPage').default,
     Settings_Wallet: () => require('../../../pages/settings/Wallet/WalletPage').default,
+    Settings_Wallet_Cards_Digital_Details_Update_Address: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default,
     Settings_Wallet_DomainCards: () => require('../../../pages/settings/Wallet/ExpensifyCardPage').default,
     Settings_Wallet_ReportVirtualCardFraud: () => require('../../../pages/settings/Wallet/ReportVirtualCardFraudPage').default,
     Settings_Wallet_Card_Activate: () => require('../../../pages/settings/Wallet/ActivatePhysicalCardPage').default,

src/libs/Navigation/linkingConfig.js

@@ -70,7 +70,7 @@ export default {
                                 exact: true,
                             },
                             Settings_Wallet_DomainCards: {
-                                path: ROUTES.SETTINGS_WALLET_DOMAINCARDS.route,
+                                path: ROUTES.SETTINGS_WALLET_DOMAINCARD.route,
                                 exact: true,
                             },
                             Settings_Wallet_ReportVirtualCardFraud: {
@@ -93,6 +93,10 @@ export default {
                                 path: ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.route,
                                 exact: true,
                             },
+                            Settings_Wallet_Cards_Digital_Details_Update_Address: {
+                                path: ROUTES.SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS.route,
+                                exact: true,
+                            },
                             Settings_Add_Debit_Card: {
                                 path: ROUTES.SETTINGS_ADD_DEBIT_CARD,
                                 exact: true,

src/pages/settings/Profile/PersonalDetails/AddressPage.js

@@ -166,7 +166,7 @@ function AddressPage({privatePersonalDetails, route}) {
             testID={AddressPage.displayName}
         >
             <HeaderWithBackButton
-                title={translate('privatePersonalDetails.homeAddress')}
+                title={translate('privatePersonalDetails.address')}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
             />

src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js

@@ -91,7 +91,7 @@ function PersonalDetailsInitialPage(props) {
                         />
                         <MenuItemWithTopDescription
                             title={PersonalDetailsUtils.getFormattedAddress(props.privatePersonalDetails)}
-                            description={props.translate('privatePersonalDetails.homeAddress')}
+                            description={props.translate('privatePersonalDetails.address')}
                             shouldShowRightIcon
                             onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)}
                         />

src/pages/settings/Wallet/ActivatePhysicalCardPage.js

@@ -78,7 +78,7 @@ function ActivatePhysicalCardPage({
             return;
         }
 
-        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain));
+        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain));
     }, [cardID, cardList, domain, physicalCard.isLoading]);
 
     useEffect(
@@ -131,7 +131,7 @@ function ActivatePhysicalCardPage({
     return (
         <IllustratedHeaderPageLayout
             title={translate('activateCardPage.activateCard')}
-            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain))}
+            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain))}
             backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.PREFERENCES]}
             illustration={LottieAnimations.Magician}
             scrollViewContainerStyles={[styles.mnh100]}

src/pages/settings/Wallet/ExpensifyCardPage.js

@@ -92,6 +92,7 @@ function ExpensifyCardPage({
                                         pan="1234123412341234"
                                         expiration="11/02/2024"
                                         cvv="321"
+                                        domain={domain}
                                     />
                                 ) : (
                                     <MenuItemWithTopDescription

src/pages/settings/Wallet/ReportVirtualCardFraudPage.js

@@ -63,7 +63,7 @@ function ReportVirtualCardFraudPage({
             return;
         }
 
-        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain));
+        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain));
     }, [domain, formData.isLoading, prevIsLoading, virtualCard.errors]);
 
     if (_.isEmpty(virtualCard)) {
@@ -74,7 +74,7 @@ function ReportVirtualCardFraudPage({
         <ScreenWrapper testID={ReportVirtualCardFraudPage.displayName}>
             <HeaderWithBackButton
                 title={translate('reportFraudPage.title')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain))}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain))}
             />
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <Text style={[styles.baseFontStyle, styles.mh5]}>{translate('reportFraudPage.description')}</Text>

src/pages/settings/Wallet/WalletPage/CardDetails.js

@@ -11,6 +11,9 @@ import ONYXKEYS from '../../../../ONYXKEYS';
 import * as PersonalDetailsUtils from '../../../../libs/PersonalDetailsUtils';
 import PressableWithDelayToggle from '../../../../components/Pressable/PressableWithDelayToggle';
 import styles from '../../../../styles/styles';
+import TextLink from '../../../../components/TextLink';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
 
 const propTypes = {
     /** Card number */
@@ -33,6 +36,9 @@ const propTypes = {
             country: PropTypes.string,
         }),
     }),
+
+    /** Domain name */
+    domain: PropTypes.string.isRequired,
 };
 
 const defaultProps = {
@@ -51,7 +57,7 @@ const defaultProps = {
     },
 };
 
-function CardDetails({pan, expiration, cvv, privatePersonalDetails}) {
+function CardDetails({pan, expiration, cvv, privatePersonalDetails, domain}) {
     usePrivatePersonalDetails();
     const {translate} = useLocalize();
 
@@ -92,6 +98,12 @@ function CardDetails({pan, expiration, cvv, privatePersonalDetails}) {
                 title={PersonalDetailsUtils.getFormattedAddress(privatePersonalDetails)}
                 interactive={false}
             />
+            <TextLink
+                style={[styles.link, styles.mh5, styles.mb3]}
+                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS.getRoute(domain))}
+            >
+                {translate('cardPage.cardDetails.updateAddress')}
+            </TextLink>
         </>
     );
 }