Fix input errors on provider setup (#14799)

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

@@ -101,6 +101,15 @@ export class PaymentComponent implements OnInit, OnDestroy {
     this.submitted.emit(type);
   };
 
+  validate = () => {
+    if (!this.usingBankAccount) {
+      return true;
+    }
+
+    this.formGroup.controls.bankInformation.markAllAsTouched();
+    return this.formGroup.controls.bankInformation.valid;
+  };
+
   /**
    * Tokenize the payment method information entered by the user against one of our payment providers.
    *

apps/web/src/locales/en/messages.json

@@ -10611,5 +10611,8 @@
   },
   "verifyProviderBankAccountWithStatementDescriptorWarning": {
     "message": "Payment with a bank account is only available to customers in the United States. You will be required to verify your bank account. We will make a micro-deposit within the next 1-2 business days. Enter the statement descriptor code from this deposit on the provider's subscription page to verify the bank account. Failure to verify the bank account will result in a missed payment and your subscription being suspended."
+  },
+  "clickPayWithPayPal": {
+    "message": "Please click the Pay with PayPal button to add your payment method."
   }
 }

bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts

@@ -9,6 +9,7 @@ import { first, takeUntil } from "rxjs/operators";
 import { ManageTaxInformationComponent } from "@bitwarden/angular/billing/components";
 import { ProviderApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/provider/provider-api.service.abstraction";
 import { ProviderSetupRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-setup.request";
+import { PaymentMethodType } from "@bitwarden/common/billing/enums";
 import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@@ -118,7 +119,10 @@ export class SetupComponent implements OnInit, OnDestroy {
     try {
       this.formGroup.markAllAsTouched();
 
-      if (!this.taxInformationComponent.validate() || !this.formGroup.valid) {
+      const paymentValid = this.paymentComponent.validate();
+      const taxInformationValid = this.taxInformationComponent.validate();
+
+      if (!paymentValid || !taxInformationValid || !this.formGroup.valid) {
         return;
       }
 
@@ -162,8 +166,20 @@ export class SetupComponent implements OnInit, OnDestroy {
 
       await this.router.navigate(["/providers", provider.id]);
     } catch (e) {
-      e.message = this.i18nService.translate(e.message) || e.message;
-      this.validationService.showError(e);
+      if (
+        this.paymentComponent.selected === PaymentMethodType.PayPal &&
+        typeof e === "string" &&
+        e === "No payment method is available."
+      ) {
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t("clickPayWithPayPal"),
+        });
+      } else {
+        e.message = this.i18nService.translate(e.message) || e.message;
+        this.validationService.showError(e);
+      }
     }
   };
 }

libs/angular/src/billing/components/manage-tax-information/manage-tax-information.component.ts

@@ -65,12 +65,8 @@ export class ManageTaxInformationComponent implements OnInit, OnDestroy {
   };
 
   validate(): boolean {
-    if (this.formGroup.dirty) {
-      this.formGroup.markAllAsTouched();
-      return this.formGroup.valid;
-    } else {
-      return this.formGroup.valid;
-    }
+    this.formGroup.markAllAsTouched();
+    return this.formGroup.valid;
   }
 
   markAllAsTouched() {