[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>

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;
     }
 

apps/web/src/app/billing/shared/payment/payment-v2.component.ts

@@ -113,6 +113,8 @@ export class PaymentV2Component implements OnInit, OnDestroy {
       const clientSecret = await this.billingApiService.createSetupIntent(type);
 
       if (this.usingBankAccount) {
+        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,
@@ -123,6 +125,9 @@ export class PaymentV2Component implements OnInit, OnDestroy {
             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;
   }
 

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);