Merge pull request #51437 from Shahidullah-Muffakir/fix/50829

Ensure only latest bank account shows default badge
Expensify · Nov 14, 2024 · b0d785c · b0d785c
2 parents 04d85d8 + c11ac70
commit b0d785c
Showing 1 changed file with 31 additions and 3 deletions.
diff --git 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({
             </OfflineWithFeedback>
         ),
 
-        [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 (