Update the Assigned Cards Section of the Wallet Page

src/ROUTES.ts

@@ -84,12 +84,12 @@ const ROUTES = {
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_WALLET: 'settings/wallet',
     SETTINGS_WALLET_DOMAINCARD: {
-        route: 'settings/wallet/card/:domain/:cardId',
-        getRoute: (domain: string, cardId: string) => `settings/wallet/card/${domain}/${cardId}` as const,
+        route: 'settings/wallet/card/:domain/:cardID',
+        getRoute: (domain: string, cardID: string) => `settings/wallet/card/${domain}/${cardID}` as const,
     },
     SETTINGS_REPORT_FRAUD: {
-        route: 'settings/wallet/card/:domain/:cardId/report-virtual-fraud',
-        getRoute: (domain: string, cardId: string) => `settings/wallet/card/${domain}/${cardId}/report-virtual-fraud` as const,
+        route: 'settings/wallet/card/:domain/:cardID/report-virtual-fraud',
+        getRoute: (domain: string, cardID: string) => `settings/wallet/card/${domain}/${cardID}/report-virtual-fraud` as const,
     },
     SETTINGS_WALLET_CARD_GET_PHYSICAL_NAME: {
         route: 'settings/wallet/card/:domain/get-physical/name',
@@ -118,12 +118,12 @@ const ROUTES = {
     SETTINGS_WALLET_TRANSFER_BALANCE: 'settings/wallet/transfer-balance',
     SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT: 'settings/wallet/choose-transfer-account',
     SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED: {
-        route: 'settings/wallet/card/:domain/:cardId/report-card-lost-or-damaged',
-        getRoute: (domain: string, cardId: string) => `settings/wallet/card/${domain}/${cardId}/report-card-lost-or-damaged` as const,
+        route: 'settings/wallet/card/:domain/:cardID/report-card-lost-or-damaged',
+        getRoute: (domain: string, cardID: string) => `settings/wallet/card/${domain}/${cardID}/report-card-lost-or-damaged` as const,
     },
     SETTINGS_WALLET_CARD_ACTIVATE: {
-        route: 'settings/wallet/card/:domain/:cardId/activate',
-        getRoute: (domain: string, cardId: string) => `settings/wallet/card/${domain}/${cardId}/activate` as const,
+        route: 'settings/wallet/card/:domain/:cardID/activate',
+        getRoute: (domain: string, cardID: string) => `settings/wallet/card/${domain}/${cardID}/activate` as const,
     },
     SETTINGS_LEGAL_NAME: 'settings/profile/legal-name',
     SETTINGS_DATE_OF_BIRTH: 'settings/profile/date-of-birth',

src/libs/Navigation/types.ts

@@ -114,20 +114,20 @@ type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.WALLET.DOMAIN_CARD]: {
         /** domain of selected card */
         domain: string;
-        /** cardId of selected card */
-        cardId: string;
+        /** cardID of selected card */
+        cardID: string;
     };
     [SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD]: {
         /** domain of selected card */
         domain: string;
-        /** cardId of selected card */
-        cardId: string;
+        /** cardID of selected card */
+        cardID: string;
     };
     [SCREENS.SETTINGS.WALLET.CARD_ACTIVATE]: {
         /** domain of selected card */
         domain: string;
-        /** cardId of selected card */
-        cardId: string;
+        /** cardID of selected card */
+        cardID: string;
     };
     [SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.NAME]: {
         /** domain of selected card */
@@ -268,8 +268,8 @@ type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.REPORT_CARD_LOST_OR_DAMAGED]: {
         /** domain of selected card */
         domain: string;
-        /** cardId of selected card */
-        cardId: string;
+        /** cardID of selected card */
+        cardID: string;
     };
     [SCREENS.KEYBOARD_SHORTCUTS]: undefined;
     [SCREENS.SETTINGS.EXIT_SURVEY.REASON]: undefined;

src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx

@@ -42,7 +42,7 @@ const MAGIC_INPUT_MIN_HEIGHT = 86;
 function ActivatePhysicalCardPage({
     cardList,
     route: {
-        params: {domain = '', cardId = ''},
+        params: {domain = '', cardID = ''},
     },
 }: ActivatePhysicalCardPageProps) {
     const theme = useTheme();
@@ -69,12 +69,15 @@ function ActivatePhysicalCardPage({
             return;
         }
 
-        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardId));
-    }, [cardId, cardList, domain, physicalCard?.isLoading, physicalCard?.state]);
+        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardID));
+    }, [cardID, cardList, domain, physicalCard?.isLoading, physicalCard?.state]);
 
     useEffect(
         () => () => {
-            CardSettings.clearCardListErrors(physicalCard?.cardID ?? 0);
+            if (!physicalCard?.cardID) {
+                return;
+            }
+            CardSettings.clearCardListErrors(physicalCard?.cardID);
         },
         [physicalCard?.cardID],
     );
@@ -93,8 +96,8 @@ function ActivatePhysicalCardPage({
     const onCodeInput = (text: string) => {
         setFormError('');
 
-        if (cardError) {
-            CardSettings.clearCardListErrors(physicalCard?.cardID ?? 0);
+        if (cardError && physicalCard?.cardID) {
+            CardSettings.clearCardListErrors(physicalCard?.cardID);
         }
 
         setLastFourDigits(text);
@@ -118,7 +121,7 @@ function ActivatePhysicalCardPage({
     return (
         <IllustratedHeaderPageLayout
             title={translate('activateCardPage.activateCard')}
-            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardId))}
+            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardID))}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
             illustration={LottieAnimations.Magician}
             scrollViewContainerStyles={[styles.mnh100]}

src/pages/settings/Wallet/ExpensifyCardPage.tsx

@@ -78,22 +78,22 @@ function ExpensifyCardPage({
     privatePersonalDetails,
     loginList,
     route: {
-        params: {domain = '', cardId = ''},
+        params: {domain = '', cardID = ''},
     },
 }: ExpensifyCardPageProps) {
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
-    const shouldDisplayCardDomain = !cardList?.[cardId].nameValuePairs?.issuedBy;
-    const pageTitle = shouldDisplayCardDomain ? translate('cardPage.expensifyCard') : cardList?.[cardId].nameValuePairs?.cardTitle ?? translate('cardPage.expensifyCard');
+    const shouldDisplayCardDomain = !cardList?.[cardID].nameValuePairs?.issuedBy;
+    const pageTitle = shouldDisplayCardDomain ? translate('cardPage.expensifyCard') : cardList?.[cardID].nameValuePairs?.cardTitle ?? translate('cardPage.expensifyCard');
 
     const [isNotFound, setIsNotFound] = useState(false);
     const cardsToShow = useMemo(() => {
         if (shouldDisplayCardDomain) {
             return CardUtils.getDomainCards(cardList)[domain].filter((card) => !card.nameValuePairs?.issuedBy);
         }
-        return [cardList?.[cardId]];
-    }, [shouldDisplayCardDomain, cardList, cardId, domain]);
+        return [cardList?.[cardID]];
+    }, [shouldDisplayCardDomain, cardList, cardID, domain]);
     useEffect(() => {
         setIsNotFound(!cardsToShow);
     }, [cardList, cardsToShow]);
@@ -104,30 +104,30 @@ function ExpensifyCardPage({
     const [isCardDetailsLoading, setIsCardDetailsLoading] = useState<Record<number, boolean>>({});
     const [cardsDetailsErrors, setCardsDetailsErrors] = useState<Record<number, string>>({});
 
-    const handleRevealDetails = (revealedCardId: number) => {
+    const handleRevealDetails = (revealedcardID: number) => {
         setIsCardDetailsLoading((prevState: Record<number, boolean>) => ({
             ...prevState,
-            [revealedCardId]: true,
+            [revealedcardID]: true,
         }));
         // We can't store the response in Onyx for security reasons.
         // That is why this action is handled manually and the response is stored in a local state
         // Hence eslint disable here.
         // eslint-disable-next-line rulesdir/no-thenable-actions-in-views
-        Card.revealVirtualCardDetails(revealedCardId)
+        Card.revealVirtualCardDetails(revealedcardID)
             .then((value) => {
-                setCardsDetails((prevState: Record<number, TCardDetails | null>) => ({...prevState, [revealedCardId]: value as TCardDetails}));
+                setCardsDetails((prevState: Record<number, TCardDetails | null>) => ({...prevState, [revealedcardID]: value as TCardDetails}));
                 setCardsDetailsErrors((prevState) => ({
                     ...prevState,
-                    [revealedCardId]: '',
+                    [revealedcardID]: '',
                 }));
             })
             .catch((error) => {
                 setCardsDetailsErrors((prevState) => ({
                     ...prevState,
-                    [revealedCardId]: error,
+                    [revealedcardID]: error,
                 }));
             })
-            .finally(() => setIsCardDetailsLoading((prevState: Record<number, boolean>) => ({...prevState, [revealedCardId]: false})));
+            .finally(() => setIsCardDetailsLoading((prevState: Record<number, boolean>) => ({...prevState, [revealedcardID]: false})));
     };
 
     const hasDetectedDomainFraud = cardsToShow?.some((card) => card?.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN);
@@ -249,7 +249,7 @@ function ExpensifyCardPage({
                                             titleStyle={styles.walletCardMenuItem}
                                             icon={Expensicons.Flag}
                                             shouldShowRightIcon
-                                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(domain, cardId))}
+                                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(domain, cardID))}
                                         />
                                     </>
                                 ))}
@@ -269,7 +269,7 @@ function ExpensifyCardPage({
                                                 title={translate('reportCardLostOrDamaged.report')}
                                                 icon={Expensicons.Flag}
                                                 shouldShowRightIcon
-                                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(domain, cardId))}
+                                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(domain, cardID))}
                                             />
                                         </>
                                     );
@@ -282,7 +282,7 @@ function ExpensifyCardPage({
                             success
                             large
                             style={[styles.w100, styles.p5]}
-                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(domain, cardId))}
+                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(domain, cardID))}
                             text={translate('activateCardPage.activatePhysicalCard')}
                         />
                     )}

src/pages/settings/Wallet/ReportCardLostPage.tsx

@@ -76,14 +76,14 @@ function ReportCardLostPage({
     },
     cardList = {},
     route: {
-        params: {domain = '', cardId = ''},
+        params: {domain = '', cardID = ''},
     },
     formData,
 }: ReportCardLostPageProps) {
     const styles = useThemeStyles();
     usePrivatePersonalDetails();
 
-    const physicalCard = cardList?.[cardId];
+    const physicalCard = cardList?.[cardID];
 
     const {translate} = useLocalize();
 
@@ -101,8 +101,8 @@ function ReportCardLostPage({
             return;
         }
 
-        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardId));
-    }, [domain, formData?.isLoading, prevIsLoading, physicalCard?.errors, cardId]);
+        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardID));
+    }, [domain, formData?.isLoading, prevIsLoading, physicalCard?.errors, cardID]);
 
     useEffect(() => {
         if (formData?.isLoading && isEmptyObject(physicalCard?.errors)) {

src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx

@@ -34,15 +34,15 @@ type ReportVirtualCardFraudPageProps = ReportVirtualCardFraudPageOnyxProps & Sta
 
 function ReportVirtualCardFraudPage({
     route: {
-        params: {domain = '', cardId = ''},
+        params: {domain = '', cardID = ''},
     },
     cardList,
     formData,
 }: ReportVirtualCardFraudPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const virtualCard = cardList?.[cardId];
+    const virtualCard = cardList?.[cardID];
     const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard?.errors ?? {});
 
     const prevIsLoading = usePrevious(formData?.isLoading);
@@ -55,8 +55,8 @@ function ReportVirtualCardFraudPage({
             return;
         }
 
-        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardId));
-    }, [cardId, domain, formData?.isLoading, prevIsLoading, virtualCard?.errors]);
+        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardID));
+    }, [cardID, domain, formData?.isLoading, prevIsLoading, virtualCard?.errors]);
 
     if (isEmptyObject(virtualCard)) {
         return <NotFoundPage />;
@@ -66,7 +66,7 @@ function ReportVirtualCardFraudPage({
         <ScreenWrapper testID={ReportVirtualCardFraudPage.displayName}>
             <HeaderWithBackButton
                 title={translate('reportFraudPage.title')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardId))}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain, cardID))}
             />
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <Text style={[styles.webViewStyles.baseFontStyle, styles.mh5]}>{translate('reportFraudPage.description')}</Text>