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 (