diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 65a2acf0a3b1..6913b166100e 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -147,11 +147,22 @@ function dismissError(item: PaymentMethodItem) { } } -function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], isDefault = false): boolean { +function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: PaymentMethod, walletLinkedAccountID: number, isDefault = false): boolean { if (!isDefault) { return false; } + // Find all payment methods that are marked as default + const defaultPaymentMethods = filteredPaymentMethods.filter((method: PaymentMethod) => !!method.isDefault); + // If there is more than one payment method, show the default badge only for the most recently added default account. + if (defaultPaymentMethods.length > 1) { + if (item.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) { + return item.accountData?.bankAccountID === walletLinkedAccountID; + } + if (item.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD) { + return item.accountData?.fundID === walletLinkedAccountID; + } + } const defaultablePaymentMethodCount = filteredPaymentMethods.filter( (method) => method.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT || method.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD, ).length; @@ -194,6 +205,7 @@ function PaymentMethodList({ const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); const [bankAccountList = {}, bankAccountListResult] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); + const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); const isLoadingBankAccountList = isLoadingOnyxValue(bankAccountListResult); const [cardList = {}, cardListResult] = useOnyx(ONYXKEYS.CARD_LIST); const isLoadingCardList = isLoadingOnyxValue(cardListResult); @@ -406,7 +418,12 @@ function PaymentMethodList({ iconWidth={item.iconWidth ?? item.iconSize} iconStyles={item.iconStyles} badgeText={ - shouldShowDefaultBadge(filteredPaymentMethods, invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault) + shouldShowDefaultBadge( + filteredPaymentMethods, + item, + userWallet?.walletLinkedAccountID ?? 0, + invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault, + ) ? translate('paymentMethodList.defaultPaymentMethod') : undefined } @@ -423,7 +440,18 @@ function PaymentMethodList({ ), - [styles.ph6, styles.paymentMethod, styles.badgeBordered, filteredPaymentMethods, invoiceTransferBankAccountID, translate, listItemStyle, shouldShowSelectedState, selectedMethodID], + [ + styles.ph6, + styles.paymentMethod, + styles.badgeBordered, + filteredPaymentMethods, + invoiceTransferBankAccountID, + translate, + listItemStyle, + shouldShowSelectedState, + selectedMethodID, + userWallet?.walletLinkedAccountID, + ], ); return (