Merge pull request Expensify#89801 from nabi-ebrahimi/fix/travel-cvv-font-size

rlinoz · web-flow · commit 9dac396f42c9 · 2026-05-14T13:26:41.000-03:00
Fix: Increase font size of Travel CVV field
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -2476,6 +2476,7 @@ const translations: TranslationDeepObject<typeof en> = {
             revealDetails: 'Details anzeigen',
             revealCvv: 'CVV anzeigen',
             copyCardNumber: 'Kartennummer kopieren',
+            copyCvv: 'CVV kopieren',
             updateAddress: 'Adresse aktualisieren',
         },
         cardAddedToWallet: ({platform}: {platform: 'Google' | 'Apple'}) => `Zu ${platform} Wallet hinzugefügt`,
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2546,6 +2546,7 @@ const translations = {
             revealDetails: 'Reveal details',
             revealCvv: 'Reveal CVV',
             copyCardNumber: 'Copy card number',
+            copyCvv: 'Copy CVV',
             updateAddress: 'Update address',
         },
         cardAddedToWallet: ({platform}: {platform: 'Google' | 'Apple'}) => `Added to ${platform} Wallet`,
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -2372,6 +2372,7 @@ const translations: TranslationDeepObject<typeof en> = {
             revealDetails: 'Revelar detalles',
             revealCvv: 'Revelar CVV',
             copyCardNumber: 'Copiar número de la tarjeta',
+            copyCvv: 'Copiar CVV',
             updateAddress: 'Actualizar dirección',
         },
         cardAddedToWallet: ({platform}) => `Añadida a ${platform} Wallet`,
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -2482,6 +2482,7 @@ const translations: TranslationDeepObject<typeof en> = {
             revealDetails: 'Afficher les détails',
             revealCvv: 'Afficher le cryptogramme',
             copyCardNumber: 'Copier le numéro de carte',
+            copyCvv: 'Copier le CVV',
             updateAddress: 'Mettre à jour l’adresse',
         },
         cardAddedToWallet: ({platform}: {platform: 'Google' | 'Apple'}) => `Ajouté au portefeuille ${platform}`,
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -2473,6 +2473,7 @@ const translations: TranslationDeepObject<typeof en> = {
             revealDetails: 'Mostra dettagli',
             revealCvv: 'Mostra CVV',
             copyCardNumber: 'Copia numero carta',
+            copyCvv: 'Copia CVV',
             updateAddress: 'Aggiorna indirizzo',
         },
         cardAddedToWallet: ({platform}: {platform: 'Google' | 'Apple'}) => `Aggiunto al portafoglio ${platform}`,
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -2450,6 +2450,7 @@ const translations: TranslationDeepObject<typeof en> = {
             revealDetails: '詳細を表示',
             revealCvv: 'CVV を表示',
             copyCardNumber: 'カード番号をコピー',
+            copyCvv: 'CVV をコピー',
             updateAddress: '住所を更新',
         },
         cardAddedToWallet: ({platform}: {platform: 'Google' | 'Apple'}) => `${platform}ウォレットに追加しました`,
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -2470,6 +2470,7 @@ const translations: TranslationDeepObject<typeof en> = {
             revealDetails: 'Details weergeven',
             revealCvv: 'CVV weergeven',
             copyCardNumber: 'Kaartnummer kopiëren',
+            copyCvv: 'CVV kopiëren',
             updateAddress: 'Adres bijwerken',
         },
         cardAddedToWallet: ({platform}: {platform: 'Google' | 'Apple'}) => `Toegevoegd aan ${platform}-wallet`,
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -2468,6 +2468,7 @@ const translations: TranslationDeepObject<typeof en> = {
             revealDetails: 'Pokaż szczegóły',
             revealCvv: 'Pokaż kod CVV',
             copyCardNumber: 'Skopiuj numer karty',
+            copyCvv: 'Skopiuj CVV',
             updateAddress: 'Zaktualizuj adres',
         },
         cardAddedToWallet: ({platform}: {platform: 'Google' | 'Apple'}) => `Dodano do portfela ${platform}`,
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -2466,6 +2466,7 @@ const translations: TranslationDeepObject<typeof en> = {
             revealDetails: 'Revelar detalhes',
             revealCvv: 'Revelar código CVV',
             copyCardNumber: 'Copiar número do cartão',
+            copyCvv: 'Copiar CVV',
             updateAddress: 'Atualizar endereço',
         },
         cardAddedToWallet: ({platform}: {platform: 'Google' | 'Apple'}) => `Adicionado à carteira ${platform}`,
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -2405,6 +2405,7 @@ const translations: TranslationDeepObject<typeof en> = {
             revealDetails: '显示详细信息',
             revealCvv: '显示 CVV',
             copyCardNumber: '复制卡号',
+            copyCvv: '复制 CVV',
             updateAddress: '更新地址',
         },
         cardAddedToWallet: ({platform}: {platform: 'Google' | 'Apple'}) => `已添加到 ${platform} 钱包`,
diff --git a/src/pages/settings/Wallet/TravelCVVPage/TravelCVVPage.tsx b/src/pages/settings/Wallet/TravelCVVPage/TravelCVVPage.tsx
@@ -1,22 +1,21 @@
 import {useNavigationState} from '@react-navigation/native';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import RESIZE_MODES from '@components/Image/resizeModes';
-import ImageSVG from '@components/ImageSVG';
 import {useLockedAccountActions, useLockedAccountState} from '@components/LockedAccountModalProvider';
-import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import {resetValidateActionCodeSent} from '@libs/actions/User';
+import Clipboard from '@libs/Clipboard';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -31,9 +30,10 @@ import {useTravelCVVActions, useTravelCVVState} from './TravelCVVContextProvider
  */
 function TravelCVVPage() {
     const styles = useThemeStyles();
+    const [isCopyButtonActive, setCopyButtonInactive] = useThrottledButtonState();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
-    const illustrations = useMemoizedLazyIllustrations(['TravelCVV']);
+    const icons = useMemoizedLazyExpensifyIcons(['Copy', 'Checkmark']);
 
     const [account, accountMetadata] = useOnyx(ONYXKEYS.ACCOUNT);
     const [, lockAccountDetailsMetadata] = useOnyx(ONYXKEYS.NVP_PRIVATE_LOCK_ACCOUNT_DETAILS);
@@ -43,6 +43,11 @@ function TravelCVVPage() {
     // Get CVV from context - shared with TravelCVVVerifyAccountPage
     const {cvv} = useTravelCVVState();
     const {setCvv} = useTravelCVVActions();
+    const hasRevealedCVV = !!cvv;
+
+    const CVV_LENGTH = cvv?.length ?? 3;
+    const MASKED_CVV = '•'.repeat(CVV_LENGTH);
+    const cvvDigits = (cvv ?? MASKED_CVV).split('');
 
     // Clear CVV when the page unmounts (e.g. backdrop close) so it doesn't
     // remain visible the next time the page is opened
@@ -94,7 +99,7 @@ function TravelCVVPage() {
         Navigation.navigate(ROUTES.SETTINGS_WALLET_TRAVEL_CVV_VERIFY_ACCOUNT);
     }, [isLoadingAccount, isLoadingLockAccountDetails, cvv, isSignedInAsDelegate, isOffline, isAccountLocked, isVerifyAccountInStack]);
 
-    const handleRevealDetailsPress = useCallback(() => {
+    const handleRevealDetailsPress = () => {
         if (isAccountLocked) {
             showLockedAccountModal();
             return;
@@ -105,7 +110,32 @@ function TravelCVVPage() {
         resetValidateActionCodeSent();
         // Navigate to the verify account page
         Navigation.navigate(ROUTES.SETTINGS_WALLET_TRAVEL_CVV_VERIFY_ACCOUNT);
-    }, [isAccountLocked, showLockedAccountModal]);
+    };
+
+    let actionButton: React.ReactNode = null;
+    if (hasRevealedCVV) {
+        actionButton = (
+            <Button
+                icon={isCopyButtonActive ? icons.Copy : icons.Checkmark}
+                text={isCopyButtonActive ? translate('cardPage.cardDetails.copyCvv') : translate('common.copied')}
+                onPress={() => {
+                    Clipboard.setString(cvv);
+                    setCopyButtonInactive();
+                }}
+                style={[styles.mt10, styles.alignSelfCenter]}
+            />
+        );
+    } else if (!cvv && !isSignedInAsDelegate) {
+        actionButton = (
+            <Button
+                text={translate('cardPage.cardDetails.revealDetails')}
+                onPress={handleRevealDetailsPress}
+                isDisabled={isOffline}
+                style={[styles.mt10, styles.alignSelfCenter]}
+                success
+            />
+        );
+    }
 
     return (
         <ScreenWrapper
@@ -117,37 +147,24 @@ function TravelCVVPage() {
                 shouldShowBackButton
             />
             <FullPageOfflineBlockingView>
-                <ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph5]}>
-                    <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.pt3, styles.pb5]}>
-                        <ImageSVG
-                            src={illustrations.TravelCVV}
-                            contentFit={RESIZE_MODES.contain}
-                            style={styles.travelCCVIllustration}
-                        />
+                <ScrollView contentContainerStyle={[styles.ph5]}>
+                    <View style={[styles.mt5, styles.mb8]}>
+                        <Text style={[styles.textNormal, styles.textSupporting]}>{translate('walletPage.travelCVV.description')}</Text>
                     </View>
 
-                    <View style={[styles.mt5, styles.mb12]}>
-                        <Text style={[styles.textNormal, styles.textSupporting]}>{translate('walletPage.travelCVV.description')}</Text>
+                    <View style={[styles.mt0Half, styles.flexRow, styles.justifyContentCenter, styles.gap1]}>
+                        {cvvDigits.map((digit, index) => (
+                            <View
+                                // eslint-disable-next-line react/no-array-index-key -- CVV digits are a fixed-length display-only array that is never reordered
+                                key={`cvv-${digit}-${index}`}
+                                style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.travelCVVDigitBox]}
+                            >
+                                <Text style={[styles.textXLargeThemeText]}>{digit}</Text>
+                            </View>
+                        ))}
                     </View>
 
-                    <MenuItemWithTopDescription
-                        description={translate('cardPage.cardDetails.cvv')}
-                        title={cvv ?? '•••'}
-                        interactive={false}
-                        wrapperStyle={[styles.pt0, styles.ph0]}
-                        titleStyle={styles.walletCardNumber}
-                        copyable={!!cvv}
-                        shouldShowRightComponent
-                        rightComponent={
-                            !isSignedInAsDelegate && !cvv ? (
-                                <Button
-                                    text={translate('cardPage.cardDetails.revealDetails')}
-                                    onPress={handleRevealDetailsPress}
-                                    isDisabled={isOffline}
-                                />
-                            ) : undefined
-                        }
-                    />
+                    {actionButton}
                 </ScrollView>
             </FullPageOfflineBlockingView>
         </ScreenWrapper>
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -563,6 +563,11 @@ const staticStyles = (theme: ThemeColors) =>
             fontSize: variables.fontSizeXLarge,
         },
 
+        textXLargeThemeText: {
+            color: theme.text,
+            fontSize: variables.fontSizeXLarge,
+        },
+
         textXXLarge: {
             fontSize: variables.fontSizeXXLarge,
         },
@@ -5364,9 +5369,12 @@ const staticStyles = (theme: ThemeColors) =>
             height: 170,
         },
 
-        travelCCVIllustration: {
-            width: 240,
-            height: 100,
+        travelCVVDigitBox: {
+            width: variables.componentSizeLarge,
+            height: variables.componentSizeLarge,
+            borderWidth: 1,
+            borderColor: theme.border,
+            borderRadius: variables.componentBorderRadiusMedium,
         },
 
         travelInvoicingIcon: {
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
@@ -335,6 +335,10 @@ export default {
         marginTop: 36,
     },
 
+    mt10: {
+        marginTop: 40,
+    },
+
     mt11: {
         marginTop: 44,
     },
