Merge pull request Expensify#54619 from Shahidullah-Muffakir/fix/53693

Use invoiceTransferBankAccountID to determine default badge for a payment method on Invoices page

src/libs/API/parameters/AddPersonalBankAccountParams.ts

@@ -7,6 +7,8 @@ type AddPersonalBankAccountParams = {
     bank?: string;
     plaidAccountID: string;
     plaidAccessToken: string;
+    policyID?: string;
+    source?: string;
 };
 
 export default AddPersonalBankAccountParams;

src/libs/actions/BankAccounts.ts

@@ -73,11 +73,17 @@ function setPlaidEvent(eventName: string | null) {
 /**
  * Open the personal bank account setup flow, with an optional exitReportID to redirect to once the flow is finished.
  */
-function openPersonalBankAccountSetupView(exitReportID?: string, isUserValidated = true) {
+function openPersonalBankAccountSetupView(exitReportID?: string, policyID?: string, source?: string, isUserValidated = true) {
     clearPlaid().then(() => {
         if (exitReportID) {
             Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID});
         }
+        if (policyID) {
+            Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {policyID});
+        }
+        if (source) {
+            Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {source});
+        }
         if (!isUserValidated) {
             Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(Navigation.getActiveRoute(), ROUTES.SETTINGS_ADD_BANK_ACCOUNT));
         }
@@ -196,7 +202,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
  *
  * TODO: offline pattern for this command will have to be added later once the pattern B design doc is complete
  */
-function addPersonalBankAccount(account: PlaidBankAccount) {
+function addPersonalBankAccount(account: PlaidBankAccount, policyID?: string, source?: string) {
     const parameters: AddPersonalBankAccountParams = {
         addressName: account.addressName ?? '',
         routingNumber: account.routingNumber,
@@ -207,6 +213,12 @@ function addPersonalBankAccount(account: PlaidBankAccount) {
         plaidAccountID: account.plaidAccountID,
         plaidAccessToken: account.plaidAccessToken,
     };
+    if (policyID) {
+        parameters.policyID = policyID;
+    }
+    if (source) {
+        parameters.source = source;
+    }
 
     const onyxData: OnyxData = {
         optimisticData: [

src/pages/AddPersonalBankAccountPage.tsx

@@ -46,12 +46,15 @@ function AddPersonalBankAccountPage() {
 
     const submitBankAccountForm = useCallback(() => {
         const bankAccounts = plaidData?.bankAccounts ?? [];
+        const policyID = personalBankAccount?.policyID;
+        const source = personalBankAccount?.source;
+
         const selectedPlaidBankAccount = bankAccounts.find((bankAccount) => bankAccount.plaidAccountID === selectedPlaidAccountId);
 
         if (selectedPlaidBankAccount) {
-            BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount);
+            BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount, policyID, source);
         }
-    }, [plaidData, selectedPlaidAccountId]);
+    }, [plaidData, selectedPlaidAccountId, personalBankAccount]);
 
     const exitFlow = useCallback(
         (shouldContinue = false) => {

src/pages/home/report/PureReportActionItem.tsx

@@ -733,7 +733,9 @@ function PureReportActionItem({
                                 success
                                 style={[styles.w100, styles.requestPreviewBox]}
                                 text={translate('bankAccount.addBankAccount')}
-                                onPress={() => BankAccounts.openPersonalBankAccountSetupView(Navigation.getTopmostReportId() ?? linkedReport?.reportID, isUserValidated)}
+                                onPress={() =>
+                                    BankAccounts.openPersonalBankAccountSetupView(Navigation.getTopmostReportId() ?? linkedReport?.reportID, undefined, undefined, isUserValidated)
+                                }
                                 pressOnEnter
                                 large
                             />

src/pages/settings/Wallet/PaymentMethodList.tsx

@@ -146,22 +146,10 @@ function dismissError(item: PaymentMethodItem) {
     }
 }
 
-function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], item: PaymentMethod, walletLinkedAccountID: number, isDefault = false): boolean {
+function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], 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;
@@ -409,9 +397,7 @@ function PaymentMethodList({
                     badgeText={
                         shouldShowDefaultBadge(
                             filteredPaymentMethods,
-                            item,
-                            userWallet?.walletLinkedAccountID ?? CONST.DEFAULT_NUMBER_ID,
-                            invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault,
+                            invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.methodID === userWallet?.walletLinkedAccountID,
                         )
                             ? translate('paymentMethodList.defaultPaymentMethod')
                             : undefined

src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

@@ -57,7 +57,7 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
     // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens
     const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || shouldUseNarrowLayout;
     const shouldShowMakeDefaultButton = !paymentMethod.isSelectedPaymentMethodDefault;
-    const transferBankAccountID = policy?.invoice?.bankAccount?.transferBankAccountID;
+    const transferBankAccountID = policy?.invoice?.bankAccount?.transferBankAccountID ?? -1;
 
     /**
      * Set position of the payment menu
@@ -166,7 +166,7 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
     const addPaymentMethodTypePressed = (paymentType: string) => {
         hideAddPaymentMenu();
         if (paymentType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT || paymentType === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
-            BankAccounts.openPersonalBankAccountSetupView(undefined, isUserValidated);
+            BankAccounts.openPersonalBankAccountSetupView(undefined, policyID, 'invoice', isUserValidated);
             return;
         }
 

src/types/onyx/PersonalBankAccount.ts

@@ -21,6 +21,12 @@ type PersonalBankAccount = {
     /** Any reportID we should redirect to at the end of the flow */
     exitReportID?: string;
 
+    /** The policyID of the workspace for which the bank account is being added */
+    policyID?: string;
+
+    /** Where the bank account addition was started, e.g., from the Invoices page or Wallet page */
+    source?: string;
+
     /** If set, continue with the KYC flow after adding a PBA. This specifies the fallback route to use. */
     onSuccessFallbackRoute?: Route;
 };