diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index ae9ac11f917e7..51fe3c927117c 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -177,6 +177,9 @@ type MenuItemBaseProps = ForwardedFSClassProps &
/** A description text to show under the title */
description?: string;
+ /** Optional component to render before the description text (e.g. a badge pill) */
+ descriptionAddon?: ReactNode;
+
/** Text to show below menu item. This text is not interactive */
helperText?: string;
@@ -497,6 +500,7 @@ function MenuItem({
furtherDetailsStyle,
furtherDetailsComponent,
description,
+ descriptionAddon,
helperText,
helperTextStyle,
errorText,
@@ -955,16 +959,29 @@ function MenuItem({
)}
)}
- {!!description && !shouldShowDescriptionOnTop && (
+ {!shouldShowDescriptionOnTop && !descriptionAddon && !!description && (
{description}
)}
+ {!shouldShowDescriptionOnTop && !!descriptionAddon && (
+
+ {descriptionAddon}
+ {!!description && (
+
+ {description}
+
+ )}
+
+ )}
{!!furtherDetails && (
-
+
{!!furtherDetailsIcon && (
= {
enableWallet: 'Wallet aktivieren',
addBankAccountToSendAndReceive: 'Füge ein Bankkonto hinzu, um Zahlungen zu senden oder zu empfangen.',
addDebitOrCreditCard: 'Debit- oder Kreditkarte hinzufügen',
+ cardInactive: 'Inaktiv',
assignedCards: 'Zugewiesene Karten',
assignedCardsDescription: 'Transaktionen von diesen Karten werden automatisch synchronisiert.',
expensifyCard: 'Expensify Karte',
diff --git a/src/languages/en.ts b/src/languages/en.ts
index ea41723001910..4c1c1ef23ceda 100644
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2310,6 +2310,7 @@ const translations = {
enableWallet: 'Enable wallet',
addBankAccountToSendAndReceive: 'Add a bank account to make or receive payments.',
addDebitOrCreditCard: 'Add debit or credit card',
+ cardInactive: 'Inactive',
assignedCards: 'Assigned cards',
assignedCardsDescription: 'Transactions from these cards sync automatically.',
expensifyCard: 'Expensify Card',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index fab0d5ec0ecc5..4dac4d2800ba8 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2135,6 +2135,7 @@ const translations: TranslationDeepObject = {
enableWallet: 'Habilitar billetera',
addBankAccountToSendAndReceive: 'Añade una cuenta bancaria para hacer o recibir pagos.',
addDebitOrCreditCard: 'Añadir tarjeta de débito o crédito',
+ cardInactive: 'Inactiva',
assignedCards: 'Tarjetas asignadas',
assignedCardsDescription: 'Las transacciones de estas tarjetas se sincronizan automáticamente.',
expensifyCard: 'Tarjeta Expensify',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index cdd84323b33ce..ba87a1ceff2dd 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -2268,6 +2268,7 @@ const translations: TranslationDeepObject = {
enableWallet: 'Activer le portefeuille',
addBankAccountToSendAndReceive: 'Ajoutez un compte bancaire pour effectuer ou recevoir des paiements.',
addDebitOrCreditCard: 'Ajouter une carte de débit ou de crédit',
+ cardInactive: 'Inactif',
assignedCards: 'Cartes assignées',
assignedCardsDescription: 'Les transactions de ces cartes se synchronisent automatiquement.',
expensifyCard: 'Carte Expensify',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index 77ddcd87941dc..c313b6528a5cb 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -2258,6 +2258,7 @@ const translations: TranslationDeepObject = {
enableWallet: 'Abilita portafoglio',
addBankAccountToSendAndReceive: 'Aggiungi un conto bancario per effettuare o ricevere pagamenti.',
addDebitOrCreditCard: 'Aggiungi carta di debito o di credito',
+ cardInactive: 'Inattivo',
assignedCards: 'Carte assegnate',
assignedCardsDescription: 'Le transazioni di queste carte si sincronizzano automaticamente.',
expensifyCard: 'Carta Expensify',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index df3c49a88ab34..a42dcea199d09 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -2245,6 +2245,7 @@ const translations: TranslationDeepObject = {
enableWallet: 'ウォレットを有効にする',
addBankAccountToSendAndReceive: '支払いや入金を行うには銀行口座を追加してください。',
addDebitOrCreditCard: 'デビットカードまたはクレジットカードを追加',
+ cardInactive: '非アクティブ',
assignedCards: '割り当て済みカード',
assignedCardsDescription: 'これらのカードからの取引は自動的に同期されます。',
expensifyCard: 'Expensify カード',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 0258ad7e7da8c..9953e74fc7512 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -2256,6 +2256,7 @@ const translations: TranslationDeepObject = {
enableWallet: 'Portemonnee inschakelen',
addBankAccountToSendAndReceive: 'Voeg een bankrekening toe om betalingen te doen of te ontvangen.',
addDebitOrCreditCard: 'Debet- of creditcard toevoegen',
+ cardInactive: 'Inactief',
assignedCards: 'Toegewezen kaarten',
assignedCardsDescription: 'Transacties van deze kaarten worden automatisch gesynchroniseerd.',
expensifyCard: 'Expensify Kaart',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index d9617682efe9d..e6ffef4cac3e4 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -2256,6 +2256,7 @@ const translations: TranslationDeepObject = {
enableWallet: 'Włącz portfel',
addBankAccountToSendAndReceive: 'Dodaj konto bankowe, aby wysyłać lub odbierać płatności.',
addDebitOrCreditCard: 'Dodaj kartę debetową lub kredytową',
+ cardInactive: 'Nieaktywne',
assignedCards: 'Przypisane karty',
assignedCardsDescription: 'Transakcje z tych kart synchronizują się automatycznie.',
expensifyCard: 'Karta Expensify',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 5d4aec900dae3..34b549790bb33 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -2252,6 +2252,7 @@ const translations: TranslationDeepObject = {
enableWallet: 'Ativar carteira',
addBankAccountToSendAndReceive: 'Adicione uma conta bancária para fazer ou receber pagamentos.',
addDebitOrCreditCard: 'Adicionar cartão de débito ou crédito',
+ cardInactive: 'Inativo',
assignedCards: 'Cartões atribuídos',
assignedCardsDescription: 'As transações desses cartões são sincronizadas automaticamente.',
expensifyCard: 'Cartão Expensify',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index ecc478ec7836d..87b7bebe8ec9b 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -2213,6 +2213,7 @@ const translations: TranslationDeepObject = {
enableWallet: '启用钱包',
addBankAccountToSendAndReceive: '添加银行账户以进行或接收付款。',
addDebitOrCreditCard: '添加借记卡或信用卡',
+ cardInactive: '未激活',
assignedCards: '已分配的卡片',
assignedCardsDescription: '这些银行卡的交易会自动同步。',
expensifyCard: 'Expensify 卡',
diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx
index 7a859e19b612f..bb61bdb958a61 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.tsx
+++ b/src/pages/settings/Wallet/PaymentMethodList.tsx
@@ -309,6 +309,7 @@ function PaymentMethodList({
iconWidth: variables.cardIconWidth,
iconHeight: variables.cardIconHeight,
isMethodActive: activePaymentMethodID === card.cardID,
+ isSuspended: card.state === CONST.EXPENSIFY_CARD.STATE.STATE_SUSPENDED && !card.nameValuePairs?.frozen,
onPress: cardOnPress,
});
continue;
@@ -372,6 +373,7 @@ function PaymentMethodList({
iconStyles: [styles.cardIcon],
iconWidth: variables.cardIconWidth,
iconHeight: variables.cardIconHeight,
+ isSuspended: card.state === CONST.EXPENSIFY_CARD.STATE.STATE_SUSPENDED && !card.nameValuePairs?.frozen,
isCardFrozen: isCardFrozen(card),
});
}
diff --git a/src/pages/settings/Wallet/PaymentMethodListItem.tsx b/src/pages/settings/Wallet/PaymentMethodListItem.tsx
index bfc065c0223f3..a2c1e51524ded 100644
--- a/src/pages/settings/Wallet/PaymentMethodListItem.tsx
+++ b/src/pages/settings/Wallet/PaymentMethodListItem.tsx
@@ -2,6 +2,7 @@ import React, {useMemo, useRef} from 'react';
import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
import {View} from 'react-native';
import type {ValueOf} from 'type-fest';
+import Badge from '@components/Badge';
import Icon from '@components/Icon';
import MenuItem from '@components/MenuItem';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -42,6 +43,7 @@ type PaymentMethodItem = PaymentMethod & {
errors?: Errors;
iconRight?: IconAsset;
isMethodActive?: boolean;
+ isSuspended?: boolean;
cardID?: number;
plaidUrl?: string;
onThreeDotsMenuPress?: (e: GestureResponderEvent | KeyboardEvent | undefined) => void;
@@ -127,21 +129,32 @@ function PaymentMethodListItem({item, shouldShowDefaultBadge, threeDotsMenuItems
if (isInSetupState) {
return translate('common.actionRequired');
}
- if (item.isCardFrozen) {
- return translate('cardPage.frozen');
- }
return shouldShowDefaultBadge ? translate('paymentMethodList.defaultPaymentMethod') : undefined;
- }, [isInSetupState, item.isCardFrozen, shouldShowDefaultBadge, translate]);
+ }, [isInSetupState, shouldShowDefaultBadge, translate]);
- const badgeIcon = useMemo(() => {
- if (isInSetupState) {
- return icons.DotIndicator;
- }
+ const descriptionAddon = useMemo(() => {
if (item.isCardFrozen) {
- return icons.FreezeCard;
+ return (
+
+ );
+ }
+ if (item.isSuspended) {
+ return (
+
+ );
}
return undefined;
- }, [icons.DotIndicator, icons.FreezeCard, isInSetupState, item.isCardFrozen]);
+ }, [item.isCardFrozen, item.isSuspended, icons.FreezeCard, styles, translate]);
return (