From 839e379b203613a0b6dce452d5e998c5f5125443 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Fri, 25 Oct 2024 00:04:20 +0530 Subject: [PATCH 01/12] Ensure only latest bank account shows default badge when adding multiple accounts --- src/pages/settings/Wallet/PaymentMethodList.tsx | 14 ++++++++++++-- src/types/onyx/AccountData.ts | 3 +++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 23d0b5ab6550..8d5f2d66b521 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -149,11 +149,21 @@ function dismissError(item: PaymentMethodItem) { } } -function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], isDefault = false): boolean { +function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], isDefault = false, item: PaymentMethod): boolean { if (!isDefault) { return false; } + // Find all payment methods that are marked as default + const defaultPaymentMethods = filteredPaymentMethods.filter((method): method is PaymentMethod & {accountData: AccountData} => Boolean(method.isDefault)); + // If there are two or more default payment methods, find the most recently created one + if (defaultPaymentMethods.length > 1) { + // Sort default payment methods by creation date to find the most recent + const mostRecentDefaultMethod = defaultPaymentMethods.reduce((latest, current) => (new Date(current.accountData.created) > new Date(latest.accountData.created) ? current : latest)); + + // Return true only if the methodID matches the most recently created default account + return mostRecentDefaultMethod.methodID === item.methodID; + } const defaultablePaymentMethodCount = filteredPaymentMethods.filter( (method) => method.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT || method.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD, ).length; @@ -401,7 +411,7 @@ function PaymentMethodList({ iconWidth={item.iconWidth ?? item.iconSize} iconStyles={item.iconStyles} badgeText={ - shouldShowDefaultBadge(filteredPaymentMethods, invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault) + shouldShowDefaultBadge(filteredPaymentMethods, invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault, item) ? translate('paymentMethodList.defaultPaymentMethod') : undefined } diff --git a/src/types/onyx/AccountData.ts b/src/types/onyx/AccountData.ts index 6bb69cd78dc4..438f62dacec6 100644 --- a/src/types/onyx/AccountData.ts +++ b/src/types/onyx/AccountData.ts @@ -50,6 +50,9 @@ type AccountData = { /** The debit card ID */ fundID?: number; + + /** Date that the account was created */ + created: string; }; export default AccountData; From 5a2b5c59694fa03f83d49ff0a42c8ad2700e1119 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Fri, 25 Oct 2024 00:41:03 +0530 Subject: [PATCH 02/12] Resolve linter errors by moving default parameters and replacing Boolean() with git status --- src/pages/settings/Wallet/PaymentMethodList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 8d5f2d66b521..1d11bebcba89 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -149,12 +149,12 @@ function dismissError(item: PaymentMethodItem) { } } -function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], isDefault = false, item: PaymentMethod): boolean { +function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: PaymentMethod, isDefault = false): boolean { if (!isDefault) { return false; } // Find all payment methods that are marked as default - const defaultPaymentMethods = filteredPaymentMethods.filter((method): method is PaymentMethod & {accountData: AccountData} => Boolean(method.isDefault)); + const defaultPaymentMethods = filteredPaymentMethods.filter((method): method is PaymentMethod & {accountData: AccountData} => !!method.isDefault); // If there are two or more default payment methods, find the most recently created one if (defaultPaymentMethods.length > 1) { From 88e26ec52f96316a1288949445820ae9accedf91 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Fri, 25 Oct 2024 01:53:11 +0530 Subject: [PATCH 03/12] fixed type errors --- src/pages/settings/Wallet/PaymentMethodList.tsx | 8 +++++--- src/types/onyx/AccountData.ts | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 1d11bebcba89..bb339aa7cf5d 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -154,12 +154,14 @@ function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: P return false; } // Find all payment methods that are marked as default - const defaultPaymentMethods = filteredPaymentMethods.filter((method): method is PaymentMethod & {accountData: AccountData} => !!method.isDefault); + const defaultPaymentMethods = filteredPaymentMethods.filter((method): method is PaymentMethod => !!method.isDefault); // If there are two or more default payment methods, find the most recently created one if (defaultPaymentMethods.length > 1) { // Sort default payment methods by creation date to find the most recent - const mostRecentDefaultMethod = defaultPaymentMethods.reduce((latest, current) => (new Date(current.accountData.created) > new Date(latest.accountData.created) ? current : latest)); + const mostRecentDefaultMethod = defaultPaymentMethods.reduce((latest, current) => + new Date((current.accountData ?? {}).created as string) > new Date((latest.accountData ?? {}).created as string) ? current : latest, + ); // Return true only if the methodID matches the most recently created default account return mostRecentDefaultMethod.methodID === item.methodID; @@ -411,7 +413,7 @@ function PaymentMethodList({ iconWidth={item.iconWidth ?? item.iconSize} iconStyles={item.iconStyles} badgeText={ - shouldShowDefaultBadge(filteredPaymentMethods, invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault, item) + shouldShowDefaultBadge(filteredPaymentMethods, item, invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault) ? translate('paymentMethodList.defaultPaymentMethod') : undefined } diff --git a/src/types/onyx/AccountData.ts b/src/types/onyx/AccountData.ts index 438f62dacec6..8adaddd09b2d 100644 --- a/src/types/onyx/AccountData.ts +++ b/src/types/onyx/AccountData.ts @@ -52,7 +52,7 @@ type AccountData = { fundID?: number; /** Date that the account was created */ - created: string; + created?: string; }; export default AccountData; From 5a638084d739991b0723aef79984c4da2200a33c Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Fri, 25 Oct 2024 02:00:38 +0530 Subject: [PATCH 04/12] Use optional chaining and non-null assertions in payment method --- src/pages/settings/Wallet/PaymentMethodList.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index bb339aa7cf5d..c4328a411432 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -160,8 +160,10 @@ function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: P if (defaultPaymentMethods.length > 1) { // Sort default payment methods by creation date to find the most recent const mostRecentDefaultMethod = defaultPaymentMethods.reduce((latest, current) => - new Date((current.accountData ?? {}).created as string) > new Date((latest.accountData ?? {}).created as string) ? current : latest, - ); + new Date(current.accountData?.created!) > new Date(latest.accountData?.created!) + ? current + : latest + ); // Return true only if the methodID matches the most recently created default account return mostRecentDefaultMethod.methodID === item.methodID; From 1551d767176307f7a22c5ae63b2574bc9349d7a9 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Fri, 25 Oct 2024 02:07:15 +0530 Subject: [PATCH 05/12] address linting issues --- src/pages/settings/Wallet/PaymentMethodList.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index c4328a411432..d30f6db0db02 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -160,10 +160,8 @@ function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: P if (defaultPaymentMethods.length > 1) { // Sort default payment methods by creation date to find the most recent const mostRecentDefaultMethod = defaultPaymentMethods.reduce((latest, current) => - new Date(current.accountData?.created!) > new Date(latest.accountData?.created!) - ? current - : latest - ); + new Date(current.accountData?.created ?? 0) > new Date(latest.accountData?.created ?? 0) ? current : latest, + ); // Return true only if the methodID matches the most recently created default account return mostRecentDefaultMethod.methodID === item.methodID; From 9fd23d127810163c405dd437ff78e708c8736c9b Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Thu, 7 Nov 2024 01:41:50 +0530 Subject: [PATCH 06/12] Store ID of latest added payment method in Onyx --- src/ONYXKEYS.ts | 4 ++++ src/libs/actions/BankAccounts.ts | 5 +++++ src/pages/settings/Wallet/PaymentMethodList.tsx | 14 +++++--------- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 427e05052ae3..44cf35bc928b 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -243,6 +243,9 @@ const ONYXKEYS = { /** User's Expensify Wallet */ USER_WALLET: 'userWallet', + /** The method ID of the latest added payment method.*/ + LATEST_ADDED_BANK_ACCOUNT_PLAID_ID: 'latestAddedBankAccountPlaidID', + /** User's metadata that will be used to segmentation */ USER_METADATA: 'userMetadata', @@ -935,6 +938,7 @@ type OnyxValuesMapping = { [ONYXKEYS.NVP_PRIVATE_BILLING_DISPUTE_PENDING]: number; [ONYXKEYS.NVP_PRIVATE_BILLING_STATUS]: OnyxTypes.BillingStatus; [ONYXKEYS.USER_WALLET]: OnyxTypes.UserWallet; + [ONYXKEYS.LATEST_ADDED_BANK_ACCOUNT_PLAID_ID]: string; [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido; [ONYXKEYS.WALLET_ADDITIONAL_DETAILS]: OnyxTypes.WalletAdditionalDetails; [ONYXKEYS.WALLET_TERMS]: OnyxTypes.WalletTerms; diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index 6679a6e4b9ea..c1a6003fd8d7 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -237,6 +237,11 @@ function addPersonalBankAccount(account: PlaidBankAccount) { currentStep: CONST.WALLET.STEP.ADDITIONAL_DETAILS, }, }, + { + onyxMethod: Onyx.METHOD.SET, + key: ONYXKEYS.LATEST_ADDED_BANK_ACCOUNT_PLAID_ID, + value: account.plaidAccountID, + }, ], failureData: [ { diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index d30f6db0db02..cf8d8f622525 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -149,22 +149,17 @@ function dismissError(item: PaymentMethodItem) { } } -function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: PaymentMethod, isDefault = false): boolean { +function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: PaymentMethod, latestAddedBankAccountPlaidID = '', isDefault = false): boolean { if (!isDefault) { return false; } // Find all payment methods that are marked as default const defaultPaymentMethods = filteredPaymentMethods.filter((method): method is PaymentMethod => !!method.isDefault); - // If there are two or more default payment methods, find the most recently created one + // If there are two or more default payment methods, show the default badge only for the most recently added default account. if (defaultPaymentMethods.length > 1) { - // Sort default payment methods by creation date to find the most recent - const mostRecentDefaultMethod = defaultPaymentMethods.reduce((latest, current) => - new Date(current.accountData?.created ?? 0) > new Date(latest.accountData?.created ?? 0) ? current : latest, - ); - // Return true only if the methodID matches the most recently created default account - return mostRecentDefaultMethod.methodID === item.methodID; + return item.accountData?.additionalData?.plaidAccountID === latestAddedBankAccountPlaidID; } const defaultablePaymentMethodCount = filteredPaymentMethods.filter( (method) => method.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT || method.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD, @@ -208,6 +203,7 @@ function PaymentMethodList({ const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); const [bankAccountList = {}, bankAccountListResult] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); + const [latestAddedBankAccountPlaidID] = useOnyx(ONYXKEYS.LATEST_ADDED_BANK_ACCOUNT_PLAID_ID); const isLoadingBankAccountList = isLoadingOnyxValue(bankAccountListResult); const [cardList = {}, cardListResult] = useOnyx(ONYXKEYS.CARD_LIST); const isLoadingCardList = isLoadingOnyxValue(cardListResult); @@ -413,7 +409,7 @@ function PaymentMethodList({ iconWidth={item.iconWidth ?? item.iconSize} iconStyles={item.iconStyles} badgeText={ - shouldShowDefaultBadge(filteredPaymentMethods, item, invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault) + shouldShowDefaultBadge(filteredPaymentMethods, item, latestAddedBankAccountPlaidID, invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault) ? translate('paymentMethodList.defaultPaymentMethod') : undefined } From 3dd07e9423684e9ecb39d53d2632f4d5837ec051 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Thu, 7 Nov 2024 01:57:30 +0530 Subject: [PATCH 07/12] Fix linting issues --- src/ONYXKEYS.ts | 2 +- src/libs/actions/BankAccounts.ts | 2 +- src/pages/settings/Wallet/PaymentMethodList.tsx | 9 +++++++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index d5ecf3dd2ce2..d9673ca5893c 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -247,7 +247,7 @@ const ONYXKEYS = { /** User's Expensify Wallet */ USER_WALLET: 'userWallet', - /** The method ID of the latest added payment method.*/ + /** The method ID of the latest added payment method */ LATEST_ADDED_BANK_ACCOUNT_PLAID_ID: 'latestAddedBankAccountPlaidID', /** User's metadata that will be used to segmentation */ diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index c1a6003fd8d7..422c5640e174 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -241,7 +241,7 @@ function addPersonalBankAccount(account: PlaidBankAccount) { onyxMethod: Onyx.METHOD.SET, key: ONYXKEYS.LATEST_ADDED_BANK_ACCOUNT_PLAID_ID, value: account.plaidAccountID, - }, + }, ], failureData: [ { diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 16e2465c0c86..b58c813262d1 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -412,7 +412,12 @@ function PaymentMethodList({ iconWidth={item.iconWidth ?? item.iconSize} iconStyles={item.iconStyles} badgeText={ - shouldShowDefaultBadge(filteredPaymentMethods, item, latestAddedBankAccountPlaidID, invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault) + shouldShowDefaultBadge( + filteredPaymentMethods, + item, + latestAddedBankAccountPlaidID, + invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault, + ) ? translate('paymentMethodList.defaultPaymentMethod') : undefined } @@ -429,7 +434,7 @@ 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, latestAddedBankAccountPlaidID], ); return ( From c18e9dacfe6c2ed7c04726a66d53d5bb2ea89799 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Thu, 7 Nov 2024 02:03:55 +0530 Subject: [PATCH 08/12] Fix Prettier formatting issues --- src/pages/settings/Wallet/PaymentMethodList.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index b58c813262d1..e80e95322afd 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -434,7 +434,18 @@ function PaymentMethodList({ ), - [styles.ph6, styles.paymentMethod, styles.badgeBordered, filteredPaymentMethods, invoiceTransferBankAccountID, translate, listItemStyle, shouldShowSelectedState, selectedMethodID, latestAddedBankAccountPlaidID], + [ + styles.ph6, + styles.paymentMethod, + styles.badgeBordered, + filteredPaymentMethods, + invoiceTransferBankAccountID, + translate, + listItemStyle, + shouldShowSelectedState, + selectedMethodID, + latestAddedBankAccountPlaidID, + ], ); return ( From d2c4f0105e011924706ce2692685e3a2ca936c7d Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Thu, 7 Nov 2024 02:08:12 +0530 Subject: [PATCH 09/12] Fix linting issue --- src/types/onyx/AccountData.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/types/onyx/AccountData.ts b/src/types/onyx/AccountData.ts index 8adaddd09b2d..6bb69cd78dc4 100644 --- a/src/types/onyx/AccountData.ts +++ b/src/types/onyx/AccountData.ts @@ -50,9 +50,6 @@ type AccountData = { /** The debit card ID */ fundID?: number; - - /** Date that the account was created */ - created?: string; }; export default AccountData; From 65237d3f7c86b07398269f7d992d5a5e00a20c8e Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Thu, 14 Nov 2024 14:36:11 +0530 Subject: [PATCH 10/12] using userWallet.walletLinkedAccountID show the Default badge only for latest added payment method --- src/ONYXKEYS.ts | 4 ---- src/libs/actions/BankAccounts.ts | 5 ----- src/pages/settings/Wallet/PaymentMethodList.tsx | 17 ++++++++++------- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 0c42aff2d07f..b4510a2faeed 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -247,9 +247,6 @@ const ONYXKEYS = { /** User's Expensify Wallet */ USER_WALLET: 'userWallet', - /** The method ID of the latest added payment method */ - LATEST_ADDED_BANK_ACCOUNT_PLAID_ID: 'latestAddedBankAccountPlaidID', - /** User's metadata that will be used to segmentation */ USER_METADATA: 'userMetadata', @@ -953,7 +950,6 @@ type OnyxValuesMapping = { [ONYXKEYS.NVP_PRIVATE_BILLING_DISPUTE_PENDING]: number; [ONYXKEYS.NVP_PRIVATE_BILLING_STATUS]: OnyxTypes.BillingStatus; [ONYXKEYS.USER_WALLET]: OnyxTypes.UserWallet; - [ONYXKEYS.LATEST_ADDED_BANK_ACCOUNT_PLAID_ID]: string; [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido; [ONYXKEYS.WALLET_ADDITIONAL_DETAILS]: OnyxTypes.WalletAdditionalDetails; [ONYXKEYS.WALLET_TERMS]: OnyxTypes.WalletTerms; diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index 422c5640e174..6679a6e4b9ea 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -237,11 +237,6 @@ function addPersonalBankAccount(account: PlaidBankAccount) { currentStep: CONST.WALLET.STEP.ADDITIONAL_DETAILS, }, }, - { - onyxMethod: Onyx.METHOD.SET, - key: ONYXKEYS.LATEST_ADDED_BANK_ACCOUNT_PLAID_ID, - value: account.plaidAccountID, - }, ], failureData: [ { diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 9249df45b2b8..0a6c611d68ae 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -147,17 +147,20 @@ function dismissError(item: PaymentMethodItem) { } } -function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: PaymentMethod, latestAddedBankAccountPlaidID = '', 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): method is PaymentMethod => !!method.isDefault); + const defaultPaymentMethods = filteredPaymentMethods.filter((method: PaymentMethod) => !!method.isDefault); // If there are two or more default payment methods, show the default badge only for the most recently added default account. if (defaultPaymentMethods.length > 1) { - // Return true only if the methodID matches the most recently created default account - return item.accountData?.additionalData?.plaidAccountID === latestAddedBankAccountPlaidID; + if (item.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) { + return item.accountData?.bankAccountID === walletLinkedAccountID; + } else 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, @@ -201,7 +204,7 @@ function PaymentMethodList({ const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); const [bankAccountList = {}, bankAccountListResult] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); - const [latestAddedBankAccountPlaidID] = useOnyx(ONYXKEYS.LATEST_ADDED_BANK_ACCOUNT_PLAID_ID); + const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); const isLoadingBankAccountList = isLoadingOnyxValue(bankAccountListResult); const [cardList = {}, cardListResult] = useOnyx(ONYXKEYS.CARD_LIST); const isLoadingCardList = isLoadingOnyxValue(cardListResult); @@ -415,7 +418,7 @@ function PaymentMethodList({ shouldShowDefaultBadge( filteredPaymentMethods, item, - latestAddedBankAccountPlaidID, + userWallet?.walletLinkedAccountID ?? 0, invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault, ) ? translate('paymentMethodList.defaultPaymentMethod') @@ -444,7 +447,7 @@ function PaymentMethodList({ listItemStyle, shouldShowSelectedState, selectedMethodID, - latestAddedBankAccountPlaidID, + userWallet?.walletLinkedAccountID, ], ); From 66fbabfbcd31593ac36d201c2fb6156c62eff7d6 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Thu, 14 Nov 2024 14:42:55 +0530 Subject: [PATCH 11/12] ESLint: remove unnecessary 'else' after 'return' --- src/pages/settings/Wallet/PaymentMethodList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 0a6c611d68ae..24a6462b744b 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -158,7 +158,8 @@ function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: P if (defaultPaymentMethods.length > 1) { if (item.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) { return item.accountData?.bankAccountID === walletLinkedAccountID; - } else if (item.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD) { + } + if (item.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD) { return item.accountData?.fundID === walletLinkedAccountID; } } From f529168558e2b60007b7f0a83a30be0b0d3b4bbe Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Thu, 14 Nov 2024 15:06:11 +0530 Subject: [PATCH 12/12] Update comment for clarity --- src/pages/settings/Wallet/PaymentMethodList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 24a6462b744b..1fcf50ae5dd2 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -154,7 +154,7 @@ function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: P // Find all payment methods that are marked as default const defaultPaymentMethods = filteredPaymentMethods.filter((method: PaymentMethod) => !!method.isDefault); - // If there are two or more default payment methods, show the default badge only for the most recently added default account. + // 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;