From ce2ec07f74f251f01fb39f330284b6cf8e716148 Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Fri, 17 Jan 2025 18:32:29 +0100
Subject: [PATCH] [PM-17138][Defect] Submitting blank payment method is
 displaying unreadable validation message for Bank Account and Account Credit
 (#12937)

* Changes to display descriptive message for bank account

* resolve message for invalid message display

* Add the paymentMethodType credit

---------

Co-authored-by: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>
---
 .../organization-plans.component.ts           |  1 +
 .../shared/payment/payment-v2.component.ts    | 32 +++++++++++++------
 .../manage-tax-information.component.ts       |  4 +++
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/organization-plans.component.ts b/apps/web/src/app/billing/organizations/organization-plans.component.ts
index edc29b16049..94e8637e8a3 100644
--- a/apps/web/src/app/billing/organizations/organization-plans.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-plans.component.ts
@@ -605,6 +605,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
 
   submit = async () => {
     if (this.taxComponent && !this.taxComponent.validate()) {
+      this.taxComponent.markAllAsTouched();
       return;
     }
 
diff --git a/apps/web/src/app/billing/shared/payment/payment-v2.component.ts b/apps/web/src/app/billing/shared/payment/payment-v2.component.ts
index 10cf7ccb702..f65a5743c35 100644
--- a/apps/web/src/app/billing/shared/payment/payment-v2.component.ts
+++ b/apps/web/src/app/billing/shared/payment/payment-v2.component.ts
@@ -113,16 +113,21 @@ export class PaymentV2Component implements OnInit, OnDestroy {
       const clientSecret = await this.billingApiService.createSetupIntent(type);
 
       if (this.usingBankAccount) {
-        const token = await this.stripeService.setupBankAccountPaymentMethod(clientSecret, {
-          accountHolderName: this.formGroup.value.bankInformation.accountHolderName,
-          routingNumber: this.formGroup.value.bankInformation.routingNumber,
-          accountNumber: this.formGroup.value.bankInformation.accountNumber,
-          accountHolderType: this.formGroup.value.bankInformation.accountHolderType,
-        });
-        return {
-          type,
-          token,
-        };
+        this.formGroup.markAllAsTouched();
+        if (this.formGroup.valid) {
+          const token = await this.stripeService.setupBankAccountPaymentMethod(clientSecret, {
+            accountHolderName: this.formGroup.value.bankInformation.accountHolderName,
+            routingNumber: this.formGroup.value.bankInformation.routingNumber,
+            accountNumber: this.formGroup.value.bankInformation.accountNumber,
+            accountHolderType: this.formGroup.value.bankInformation.accountHolderType,
+          });
+          return {
+            type,
+            token,
+          };
+        } else {
+          throw "Invalid input provided, Please ensure all required fields are filled out correctly and try again.";
+        }
       }
 
       if (this.usingCard) {
@@ -142,6 +147,13 @@ export class PaymentV2Component implements OnInit, OnDestroy {
       };
     }
 
+    if (this.usingAccountCredit) {
+      return {
+        type: PaymentMethodType.Credit,
+        token: null,
+      };
+    }
+
     return null;
   }
 
diff --git a/libs/angular/src/billing/components/manage-tax-information/manage-tax-information.component.ts b/libs/angular/src/billing/components/manage-tax-information/manage-tax-information.component.ts
index 13a6d2d0cc3..885afb1ae67 100644
--- a/libs/angular/src/billing/components/manage-tax-information/manage-tax-information.component.ts
+++ b/libs/angular/src/billing/components/manage-tax-information/manage-tax-information.component.ts
@@ -72,6 +72,10 @@ export class ManageTaxInformationComponent implements OnInit, OnDestroy {
     }
   }
 
+  markAllAsTouched() {
+    this.formGroup.markAllAsTouched();
+  }
+
   async ngOnInit() {
     if (this.startWith) {
       this.formGroup.controls.country.setValue(this.startWith.country);