Merge pull request Expensify#82799 from ShridharGoel/freezeCard5

[NoQA] Implement the frozen card indicator and the frozen-by text

Author: MariaHCD

assets/images/card-scarf.svg

@@ -1,14 +1,24 @@
+import type {StyleProp, ViewStyle} from 'react-native';
 import React from 'react';
 import {View} from 'react-native';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type IconAsset from '@src/types/utils/IconAsset';
 import ImageSVG from './ImageSVG';
 import Text from './Text';
 
-function CardPreview() {
+type CardPreviewProps = {
+    /** Optional overlay image rendered on top of the card. */
+    overlayImage?: IconAsset;
+
+    /** Styles for overlay container (absolute positioning, size, etc.). */
+    overlayContainerStyle?: StyleProp<ViewStyle>;
+};
+
+function CardPreview({overlayImage, overlayContainerStyle}: CardPreviewProps) {
     const styles = useThemeStyles();
     const lazyIllustrations = useMemoizedLazyIllustrations(['ExpensifyCardImage']);
 
@@ -19,21 +29,44 @@ function CardPreview() {
     const cardHolder = legalFirstName && legalLastName ? `${legalFirstName} ${legalLastName}` : (session?.email ?? '');
 
     return (
-        <View style={styles.walletCard}>
-            <ImageSVG
-                contentFit="contain"
-                src={lazyIllustrations.ExpensifyCardImage}
-                pointerEvents="none"
-                height={variables.cardPreviewHeight}
-                width={variables.cardPreviewWidth}
-            />
-            <Text
-                style={styles.walletCardHolder}
-                numberOfLines={1}
-                ellipsizeMode="tail"
-            >
-                {cardHolder}
-            </Text>
+        <View
+            style={[
+                styles.pRelative,
+                styles.alignSelfCenter,
+                {
+                    width: variables.cardPreviewWidth,
+                },
+            ]}
+        >
+            <View style={styles.walletCard}>
+                <ImageSVG
+                    contentFit="contain"
+                    src={lazyIllustrations.ExpensifyCardImage}
+                    pointerEvents="none"
+                    height={variables.cardPreviewHeight}
+                    width={variables.cardPreviewWidth}
+                />
+                <Text
+                    style={styles.walletCardHolder}
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                >
+                    {cardHolder}
+                </Text>
+            </View>
+            {!!overlayImage && (
+                <View
+                    pointerEvents="none"
+                    style={[styles.pAbsolute, overlayContainerStyle]}
+                >
+                    <ImageSVG
+                        src={overlayImage}
+                        contentFit="contain"
+                        width="100%"
+                        height="100%"
+                    />
+                </View>
+            )}
         </View>
     );
 }

src/components/CardPreview.tsx

@@ -2218,6 +2218,8 @@ ${amount} für ${merchant} – ${date}`,
         freezeDescription: 'Eine gesperrte Karte kann nicht für Käufe und Transaktionen verwendet werden. Du kannst sie jederzeit entsperren.',
         unfreezeDescription:
             'Durch das Entsperren dieser Karte werden Käufe und Transaktionen wieder zugelassen. Fahre nur fort, wenn du sicher bist, dass die Karte sicher verwendet werden kann.',
+        youFroze: ({date}: {date: string}) => `Du hast diese Karte am ${date} gesperrt.`,
+        frozenBy: ({person, date}: {person: string; date: string}) => `${person} hat diese Karte am ${date} gesperrt.`,
     },
     workflowsPage: {
         workflowTitle: 'Ausgaben',

src/languages/de.ts

@@ -2230,6 +2230,8 @@ const translations = {
         unfreezeCard: 'Unfreeze card',
         freezeDescription: 'A frozen card cannot be used for purchases and transactions. You can unfreeze it at any time.',
         unfreezeDescription: "Unfreezing this card will start allowing purchases and transactions again. Only proceed if you're sure the card is safe to use.",
+        youFroze: ({date}: {date: string}) => `You froze this card on ${date}.`,
+        frozenBy: ({person, date}: {person: string; date: string}) => `${person} froze this card on ${date}.`,
     },
     workflowsPage: {
         workflowTitle: 'Spend',

src/languages/en.ts

@@ -2052,6 +2052,8 @@ ${amount} para ${merchant} - ${date}`,
         unfreezeCard: 'Descongelar tarjeta',
         freezeDescription: 'Una tarjeta congelada no se puede usar para compras ni transacciones. Puedes descongelarla en cualquier momento.',
         unfreezeDescription: 'Al descongelar esta tarjeta se volverán a permitir compras y transacciones. Continúa solo si estás seguro de que la tarjeta es segura para usar.',
+        youFroze: ({date}: {date: string}) => `Congelaste esta tarjeta el ${date}.`,
+        frozenBy: ({person, date}: {person: string; date: string}) => `${person} congeló esta tarjeta el ${date}.`,
     },
     workflowsPage: {
         workflowTitle: 'Gasto',

src/languages/es.ts

@@ -2223,6 +2223,8 @@ ${amount} pour ${merchant} - ${date}`,
         freezeDescription: 'Une carte gelée ne peut pas être utilisée pour des achats ni des transactions. Vous pouvez la dégeler à tout moment.',
         unfreezeDescription:
             'Dégeler cette carte permettra à nouveau les achats et les transactions. Continuez uniquement si vous êtes sûr(e) que la carte peut être utilisée en toute sécurité.',
+        youFroze: ({date}: {date: string}) => `Vous avez gelé cette carte le ${date}.`,
+        frozenBy: ({person, date}: {person: string; date: string}) => `${person} a gelé cette carte le ${date}.`,
     },
     workflowsPage: {
         workflowTitle: 'Dépense',

src/languages/fr.ts

@@ -2212,6 +2212,8 @@ ${amount} per ${merchant} - ${date}`,
         unfreezeCard: 'Sblocca carta',
         freezeDescription: 'Una carta bloccata non può essere usata per acquisti e transazioni. Puoi sbloccarla in qualsiasi momento.',
         unfreezeDescription: 'Sbloccando questa carta torneranno ad essere consentiti acquisti e transazioni. Procedi solo se sei sicuro che la carta sia sicura da usare.',
+        youFroze: ({date}: {date: string}) => `Hai bloccato questa carta il ${date}.`,
+        frozenBy: ({person, date}: {person: string; date: string}) => `${person} ha bloccato questa carta il ${date}.`,
     },
     workflowsPage: {
         workflowTitle: 'Spesa',

src/languages/it.ts

@@ -2198,6 +2198,8 @@ ${date} の ${merchant} への ${amount}`,
         unfreezeCard: 'カードの一時停止を解除',
         freezeDescription: '一時停止したカードは購入や取引に使用できません。いつでも再開できます。',
         unfreezeDescription: 'このカードの一時停止を解除すると、購入と取引が再び可能になります。カードが安全に使用できると確信できる場合にのみ続行してください。',
+        youFroze: ({date}: {date: string}) => `${date}にこのカードを一時停止しました。`,
+        frozenBy: ({person, date}: {person: string; date: string}) => `${person}が${date}にこのカードを一時停止しました。`,
     },
     workflowsPage: {
         workflowTitle: '支出',

src/languages/ja.ts

@@ -2212,6 +2212,8 @@ ${amount} voor ${merchant} - ${date}`,
         unfreezeCard: 'Kaart deblokkeren',
         freezeDescription: 'Een geblokkeerde kaart kan niet worden gebruikt voor aankopen en transacties. Je kunt deze op elk moment deblokkeren.',
         unfreezeDescription: 'Door deze kaart te deblokkeren worden aankopen en transacties weer toegestaan. Ga alleen verder als je zeker weet dat de kaart veilig is om te gebruiken.',
+        youFroze: ({date}: {date: string}) => `Je hebt deze kaart op ${date} geblokkeerd.`,
+        frozenBy: ({person, date}: {person: string; date: string}) => `${person} heeft deze kaart op ${date} geblokkeerd.`,
     },
     workflowsPage: {
         workflowTitle: 'Uitgaven',

src/languages/nl.ts

@@ -2206,6 +2206,8 @@ ${amount} dla ${merchant} - ${date}`,
         unfreezeCard: 'Odmroź kartę',
         freezeDescription: 'Zamrożonej karty nie można używać do zakupów i transakcji. Możesz ją odmrozić w dowolnym momencie.',
         unfreezeDescription: 'Odmrożenie tej karty ponownie umożliwi zakupy i transakcje. Kontynuuj tylko wtedy, gdy masz pewność, że korzystanie z karty jest bezpieczne.',
+        youFroze: ({date}: {date: string}) => `Zamroziłeś tę kartę ${date}.`,
+        frozenBy: ({person, date}: {person: string; date: string}) => `${person} zamroził(a) tę kartę ${date}.`,
     },
     workflowsPage: {
         workflowTitle: 'Wydatki',