Merge pull request Expensify#89379 from ShridharGoel/cardUI

nkuoch · web-flow · commit d9d00ebd340a · 2026-05-19T18:44:42.000+02:00
Update Expensify card UI
diff --git a/src/components/CardPreview.tsx b/src/components/CardPreview.tsx
@@ -35,6 +35,7 @@ function CardPreview({overlayImage, overlayContainerStyle}: CardPreviewProps) {
                 styles.alignSelfCenter,
                 {
                     width: variables.cardPreviewWidth,
+                    ...(overlayImage ? {height: variables.cardScarfOverlayHeight} : {}),
                 },
             ]}
         >
diff --git a/src/components/FrozenCardHeader.tsx b/src/components/FrozenCardHeader.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -9,16 +10,18 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import Navigation from '@navigation/Navigation';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import Button from './Button';
-import Icon from './Icon';
 import Text from './Text';
 import TextLink from './TextLink';
 
 type FrozenCardHeaderProps = {
     cardPreview: React.ReactNode;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
     onUnfreezePress: () => void;
     onAskToUnfreezePress: () => void;
     canUnfreezeCard: boolean;
@@ -27,7 +30,7 @@ type FrozenCardHeaderProps = {
     frozenDate?: string;
 };
 
-function FrozenCardHeader({cardPreview, onUnfreezePress, onAskToUnfreezePress, canUnfreezeCard, isWorkspaceAdmin, frozenByAccountID, frozenDate}: FrozenCardHeaderProps) {
+function FrozenCardHeader({cardPreview, children, style, onUnfreezePress, onAskToUnfreezePress, canUnfreezeCard, isWorkspaceAdmin, frozenByAccountID, frozenDate}: FrozenCardHeaderProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -42,6 +45,12 @@ function FrozenCardHeader({cardPreview, onUnfreezePress, onAskToUnfreezePress, c
     const adminFrozenTextPrefix = translate('cardPage.frozenByAdminPrefix', {date: formattedDate});
     const frozenNeedsUnfreezePrefix = translate('cardPage.frozenByAdminNeedsUnfreezePrefix');
     const frozenNeedsUnfreezeSuffix = translate('cardPage.frozenByAdminNeedsUnfreezeSuffix');
+    const actionButtons = React.Children.toArray(children);
+    const shouldUseEqualButtonWidths = actionButtons.length > 0;
+    const equalButtonWrapperStyles = shouldUseEqualButtonWidths
+        ? [styles.flexGrow1, styles.flexShrink1, styles.flexBasis0, {minWidth: variables.cardDetailsActionButtonMinWidth}]
+        : undefined;
+    const equalButtonInnerStyles = shouldUseEqualButtonWidths ? styles.ph2 : undefined;
 
     let statusText: React.ReactNode;
 
@@ -81,23 +90,36 @@ function FrozenCardHeader({cardPreview, onUnfreezePress, onAskToUnfreezePress, c
     }
 
     return (
-        <View style={[styles.ph5, styles.pb5]}>
+        <View style={[styles.ph5, styles.pb5, style]}>
             {cardPreview}
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt9]}>
-                <Icon
-                    src={icons.FreezeCard}
-                    fill={theme.icon}
-                    small
-                />
-                <Text style={[styles.textLabel, styles.colorMuted, styles.ml2]}>{statusText}</Text>
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter, styles.mt2]}>
+                <Text style={[styles.textLabel, styles.colorMuted]}>{statusText}</Text>
+            </View>
+            <View style={[styles.flexRow, styles.flexWrap, styles.alignItemsCenter, styles.justifyContentCenter, styles.gap2, styles.mt6, styles.alignSelfStretch]}>
+                <View style={equalButtonWrapperStyles}>
+                    <Button
+                        medium
+                        text={translate(canUnfreezeCard ? 'cardPage.unfreezeCard' : 'cardPage.askToUnfreeze')}
+                        icon={icons.FreezeCard}
+                        iconFill={theme.icon}
+                        onPress={canUnfreezeCard ? onUnfreezePress : onAskToUnfreezePress}
+                        isDisabled={canUnfreezeCard && isOffline}
+                        innerStyles={equalButtonInnerStyles}
+                        style={shouldUseEqualButtonWidths ? styles.w100 : styles.alignSelfStart}
+                    />
+                </View>
+                {shouldUseEqualButtonWidths
+                    ? actionButtons.map((button, index) => (
+                          <View
+                              // eslint-disable-next-line react/no-array-index-key
+                              key={index}
+                              style={equalButtonWrapperStyles}
+                          >
+                              {button}
+                          </View>
+                      ))
+                    : children}
             </View>
-            <Button
-                medium
-                text={translate(canUnfreezeCard ? 'cardPage.unfreeze' : 'cardPage.askToUnfreeze')}
-                onPress={canUnfreezeCard ? onUnfreezePress : onAskToUnfreezePress}
-                isDisabled={canUnfreezeCard && isOffline}
-                style={[styles.mt4]}
-            />
         </View>
     );
 }
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -2475,6 +2475,7 @@ const translations: TranslationDeepObject<typeof en> = {
             expiration: 'Ablauf',
             cvv: 'CVV',
             address: 'Adresse',
+            reveal: 'Anzeigen',
             revealDetails: 'Details anzeigen',
             revealCvv: 'CVV anzeigen',
             copyCardNumber: 'Kartennummer kopieren',
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2545,6 +2545,7 @@ const translations = {
             expiration: 'Expiration',
             cvv: 'CVV',
             address: 'Address',
+            reveal: 'Reveal',
             revealDetails: 'Reveal details',
             revealCvv: 'Reveal CVV',
             copyCardNumber: 'Copy card number',
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -2360,6 +2360,7 @@ const translations: TranslationDeepObject<typeof en> = {
             expiration: 'Expiración',
             cvv: 'CVV',
             address: 'Dirección',
+            reveal: 'Revelar',
             revealDetails: 'Revelar detalles',
             revealCvv: 'Revelar CVV',
             copyCardNumber: 'Copiar número de la tarjeta',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -2481,6 +2481,7 @@ const translations: TranslationDeepObject<typeof en> = {
             expiration: 'Expiration',
             cvv: 'Cryptogramme visuel (CVV)',
             address: 'Adresse',
+            reveal: 'Afficher',
             revealDetails: 'Afficher les détails',
             revealCvv: 'Afficher le cryptogramme',
             copyCardNumber: 'Copier le numéro de carte',
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -2472,6 +2472,7 @@ const translations: TranslationDeepObject<typeof en> = {
             expiration: 'Scadenza',
             cvv: 'CVV',
             address: 'Indirizzo',
+            reveal: 'Mostra',
             revealDetails: 'Mostra dettagli',
             revealCvv: 'Mostra CVV',
             copyCardNumber: 'Copia numero carta',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -2449,6 +2449,7 @@ const translations: TranslationDeepObject<typeof en> = {
             expiration: '有効期限',
             cvv: 'CVV',
             address: '住所',
+            reveal: '表示',
             revealDetails: '詳細を表示',
             revealCvv: 'CVV を表示',
             copyCardNumber: 'カード番号をコピー',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -2469,6 +2469,7 @@ const translations: TranslationDeepObject<typeof en> = {
             expiration: 'Vervaldatum',
             cvv: 'CVV',
             address: 'Adres',
+            reveal: 'Weergeven',
             revealDetails: 'Details weergeven',
             revealCvv: 'CVV weergeven',
             copyCardNumber: 'Kaartnummer kopiëren',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -2467,6 +2467,7 @@ const translations: TranslationDeepObject<typeof en> = {
             expiration: 'Wygaśnięcie',
             cvv: 'CVV',
             address: 'Adres',
+            reveal: 'Pokaż',
             revealDetails: 'Pokaż szczegóły',
             revealCvv: 'Pokaż kod CVV',
             copyCardNumber: 'Skopiuj numer karty',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -2465,6 +2465,7 @@ const translations: TranslationDeepObject<typeof en> = {
             expiration: 'Validade',
             cvv: 'CVV',
             address: 'Endereço',
+            reveal: 'Revelar',
             revealDetails: 'Revelar detalhes',
             revealCvv: 'Revelar código CVV',
             copyCardNumber: 'Copiar número do cartão',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -2404,6 +2404,7 @@ const translations: TranslationDeepObject<typeof en> = {
             expiration: '到期日期',
             cvv: 'CVV',
             address: '地址',
+            reveal: '显示',
             revealDetails: '显示详细信息',
             revealCvv: '显示 CVV',
             copyCardNumber: '复制卡号',
diff --git a/src/libs/CardNavigationUtils.ts b/src/libs/CardNavigationUtils.ts
@@ -0,0 +1,14 @@
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import Navigation from './Navigation/Navigation';
+import {buildCannedSearchQuery} from './SearchQueryUtils';
+
+function navigateToCardTransactions(cardID: string) {
+    Navigation.navigate(
+        ROUTES.SEARCH_ROOT.getRoute({
+            query: buildCannedSearchQuery({type: CONST.SEARCH.DATA_TYPES.EXPENSE, status: CONST.SEARCH.STATUS.EXPENSE.ALL, cardID}),
+        }),
+    );
+}
+
+export default navigateToCardTransactions;
diff --git a/src/pages/settings/Wallet/CardDetailsActionButtons.tsx b/src/pages/settings/Wallet/CardDetailsActionButtons.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import type {ButtonProps} from '@components/Button';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+
+type CardDetailsActionButtonsProps = {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+
+const CardDetailsActionButtonsContext = React.createContext(false);
+
+function CardDetailsActionButtons({children, style}: CardDetailsActionButtonsProps) {
+    const styles = useThemeStyles();
+    const actionButtons = React.Children.toArray(children);
+    const shouldUseEqualButtonWidths = actionButtons.length > 1;
+
+    return (
+        <CardDetailsActionButtonsContext.Provider value={shouldUseEqualButtonWidths}>
+            <View
+                style={[
+                    styles.flexRow,
+                    styles.flexWrap,
+                    styles.alignItemsCenter,
+                    styles.justifyContentCenter,
+                    styles.ph5,
+                    styles.pt2,
+                    styles.mb6,
+                    styles.gap2,
+                    styles.alignSelfStretch,
+                    style,
+                ]}
+            >
+                {shouldUseEqualButtonWidths
+                    ? actionButtons.map((button, index) => (
+                          <View
+                              // eslint-disable-next-line react/no-array-index-key
+                              key={index}
+                              style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasis0, {minWidth: variables.cardDetailsActionButtonMinWidth}]}
+                          >
+                              {button}
+                          </View>
+                      ))
+                    : children}
+            </View>
+        </CardDetailsActionButtonsContext.Provider>
+    );
+}
+
+function CardDetailsActionButton({innerStyles, style, ...props}: ButtonProps) {
+    const styles = useThemeStyles();
+    const shouldUseEqualButtonWidths = React.useContext(CardDetailsActionButtonsContext);
+
+    return (
+        <Button
+            {...props}
+            innerStyles={[shouldUseEqualButtonWidths && styles.ph2, innerStyles]}
+            style={[shouldUseEqualButtonWidths && styles.w100, style]}
+        />
+    );
+}
+
+export default CardDetailsActionButtons;
+export {CardDetailsActionButton};
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx b/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
diff --git a/tests/ui/WalletExpensifyCardPageTest.tsx b/tests/ui/WalletExpensifyCardPageTest.tsx

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ function CardPreview({overlayImage, overlayContainerStyle}: CardPreviewProps) {`
`35`	`35`	`styles.alignSelfCenter,`
`36`	`36`	`{`
`37`	`37`	`width: variables.cardPreviewWidth,`
	`38`	`+ ...(overlayImage ? {height: variables.cardScarfOverlayHeight} : {}),`
`38`	`39`	`},`
`39`	`40`	`]}`
`40`	`41`	`>`