[PM 5023] migrate payment component (#8345)

* payment component migration

* payment component migration

* payment component migration

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

@@ -1,68 +1,36 @@
-<div class="mb-4 text-lg" *ngIf="showOptions && showMethods">
+<div [formGroup]="paymentForm">
-  <div class="form-check form-check-inline mr-4">
+  <div class="tw-mb-4 tw-text-lg" *ngIf="showOptions && showMethods">
-    <input
+    <bit-radio-group formControlName="method">
-      class="form-check-input"
+      <bit-radio-button id="method-card" [value]="paymentMethodType.Card">
-      type="radio"
+        <bit-label>
-      name="Method"
+          <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>
-      id="method-card"
+          {{ "creditCard" | i18n }}</bit-label
-      [value]="paymentMethodType.Card"
-      [(ngModel)]="method"
-      (change)="changeMethod()"
-    />
-    <label class="form-check-label" for="method-card">
-      <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i> {{ "creditCard" | i18n }}</label
         >
-  </div>
+      </bit-radio-button>
-  <div class="form-check form-check-inline mr-4" *ngIf="!hideBank">
+      <bit-radio-button id="method-bank" [value]="paymentMethodType.BankAccount" *ngIf="!hideBank">
-    <input
+        <bit-label>
-      class="form-check-input"
+          <i class="bwi bwi-fw bwi-bank" aria-hidden="true"></i>
-      type="radio"
+          {{ "bankAccount" | i18n }}</bit-label
-      name="Method"
-      id="method-bank"
-      [value]="paymentMethodType.BankAccount"
-      [(ngModel)]="method"
-      (change)="changeMethod()"
-    />
-    <label class="form-check-label" for="method-bank">
-      <i class="bwi bwi-fw bwi-bank" aria-hidden="true"></i> {{ "bankAccount" | i18n }}</label
         >
-  </div>
+      </bit-radio-button>
-  <div class="form-check form-check-inline" *ngIf="!hidePaypal">
+      <bit-radio-button id="method-paypal" [value]="paymentMethodType.PayPal" *ngIf="!hidePaypal">
-    <input
+        <bit-label> <i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i> PayPal</bit-label>
-      class="form-check-input"
+      </bit-radio-button>
-      type="radio"
+      <bit-radio-button id="method-credit" [value]="paymentMethodType.Credit" *ngIf="!hideCredit">
-      name="Method"
+        <bit-label>
-      id="method-paypal"
+          <i class="bwi bwi-fw bwi-dollar" aria-hidden="true"></i>
-      [value]="paymentMethodType.PayPal"
+          {{ "accountCredit" | i18n }}</bit-label
-      [(ngModel)]="method"
-      (change)="changeMethod()"
-    />
-    <label class="form-check-label" for="method-paypal">
-      <i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i> PayPal</label
         >
+      </bit-radio-button>
+    </bit-radio-group>
   </div>
-  <div class="form-check form-check-inline" *ngIf="!hideCredit">
+  <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
-    <input
+    <div class="tw-grid tw-grid-cols-12 tw-gap-4 tw-mb-4">
-      class="form-check-input"
+      <div [ngClass]="trialFlow ? 'tw-col-span-5' : 'tw-col-span-4'">
-      type="radio"
-      name="Method"
-      id="method-credit"
-      [value]="paymentMethodType.Credit"
-      [(ngModel)]="method"
-      (change)="changeMethod()"
-    />
-    <label class="form-check-label" for="method-credit">
-      <i class="bwi bwi-fw bwi-dollar" aria-hidden="true"></i> {{ "accountCredit" | i18n }}</label
-    >
-  </div>
-</div>
-<ng-container *ngIf="showMethods && method === paymentMethodType.Card">
-  <div class="row">
-    <div [ngClass]="trialFlow ? 'col-5' : 'col-4'" class="form-group">
         <label for="stripe-card-number-element">{{ "number" | i18n }}</label>
         <div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
       </div>
-    <div *ngIf="!trialFlow" class="form-group col-8 d-flex align-items-end">
+      <div *ngIf="!trialFlow" class="tw-col-span-8 tw-flex tw-items-end">
         <img
           src="../../images/cards.png"
           alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
@@ -70,12 +38,12 @@
           height="32"
         />
       </div>
-    <div [ngClass]="trialFlow ? 'col-3' : 'col-4'" class="form-group">
+      <div [ngClass]="trialFlow ? 'tw-col-span-3' : 'tw-col-span-4'">
         <label for="stripe-card-expiry-element">{{ "expiration" | i18n }}</label>
         <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
       </div>
-    <div class="form-group col-4">
+      <div class="tw-col-span-4">
-      <div class="d-flex">
+        <div class="tw-flex">
           <label for="stripe-card-cvc-element">
             {{ "securityCode" | i18n }}
           </label>
@@ -93,71 +61,53 @@
         <div id="stripe-card-cvc-element" class="form-control stripe-form-control"></div>
       </div>
     </div>
-</ng-container>
+  </ng-container>
-<ng-container *ngIf="showMethods && method === paymentMethodType.BankAccount">
+  <ng-container *ngIf="showMethods && method === paymentMethodType.BankAccount">
     <app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
       {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
     </app-callout>
-  <div class="row">
+    <div class="tw-grid tw-grid-cols-12 tw-gap-4" formGroupName="bank">
-    <div class="form-group col-6">
+      <bit-form-field class="tw-col-span-6">
-      <label for="routing_number">{{ "routingNumber" | i18n }}</label>
+        <bit-label>{{ "routingNumber" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="routing_number" required appInputVerbatim />
+      </bit-form-field>
+      <bit-form-field class="tw-col-span-6">
+        <bit-label>{{ "accountNumber" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="account_number" required appInputVerbatim />
+      </bit-form-field>
+      <bit-form-field class="tw-col-span-6">
+        <bit-label>{{ "accountHolderName" | i18n }}</bit-label>
         <input
-        id="routing_number"
+          bitInput
-        class="form-control"
           type="text"
-        name="routing_number"
+          formControlName="account_holder_name"
-        [(ngModel)]="bank.routing_number"
           required
           appInputVerbatim
         />
+      </bit-form-field>
+
+      <bit-form-field class="tw-col-span-6">
+        <bit-label>{{ "bankAccountType" | i18n }}</bit-label>
+        <bit-select formControlName="account_holder_type" required>
+          <bit-option value="" label="-- {{ 'select' | i18n }} --"></bit-option>
+          <bit-option value="company" label="{{ 'bankAccountTypeCompany' | i18n }}"></bit-option>
+          <bit-option
+            value="individual"
+            label="{{ 'bankAccountTypeIndividual' | i18n }}"
+          ></bit-option>
+        </bit-select>
+      </bit-form-field>
     </div>
-    <div class="form-group col-6">
+  </ng-container>
-      <label for="account_number">{{ "accountNumber" | i18n }}</label>
+  <ng-container *ngIf="showMethods && method === paymentMethodType.PayPal">
-      <input
+    <div class="tw-mb-3">
-        id="account_number"
+      <div id="bt-dropin-container" class="tw-mb-1"></div>
-        class="form-control"
+      <small class="tw-text-muted">{{ "paypalClickSubmit" | i18n }}</small>
-        type="text"
-        name="account_number"
-        [(ngModel)]="bank.account_number"
-        required
-        appInputVerbatim
-      />
     </div>
-    <div class="form-group col-6">
+  </ng-container>
-      <label for="account_holder_name">{{ "accountHolderName" | i18n }}</label>
+  <ng-container *ngIf="showMethods && method === paymentMethodType.Credit">
-      <input
-        id="account_holder_name"
-        class="form-control"
-        type="text"
-        name="account_holder_name"
-        [(ngModel)]="bank.account_holder_name"
-        required
-      />
-    </div>
-    <div class="form-group col-6">
-      <label for="account_holder_type">{{ "bankAccountType" | i18n }}</label>
-      <select
-        id="account_holder_type"
-        class="form-control"
-        name="account_holder_type"
-        [(ngModel)]="bank.account_holder_type"
-        required
-      >
-        <option value="">-- {{ "select" | i18n }} --</option>
-        <option value="company">{{ "bankAccountTypeCompany" | i18n }}</option>
-        <option value="individual">{{ "bankAccountTypeIndividual" | i18n }}</option>
-      </select>
-    </div>
-  </div>
-</ng-container>
-<ng-container *ngIf="showMethods && method === paymentMethodType.PayPal">
-  <div class="mb-3">
-    <div id="bt-dropin-container" class="mb-1"></div>
-    <small class="text-muted">{{ "paypalClickSubmit" | i18n }}</small>
-  </div>
-</ng-container>
-<ng-container *ngIf="showMethods && method === paymentMethodType.Credit">
     <app-callout type="note">
       {{ "makeSureEnoughCredit" | i18n }}
     </app-callout>
-</ng-container>
+  </ng-container>
+</div>

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

@@ -1,4 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { Subject, takeUntil } from "rxjs";
 
 import { AbstractThemingService } from "@bitwarden/angular/platform/services/theming/theming.service.abstraction";
@@ -17,23 +18,34 @@ import { SharedModule } from "../../shared";
 export class PaymentComponent implements OnInit, OnDestroy {
   @Input() showMethods = true;
   @Input() showOptions = true;
-  @Input() method = PaymentMethodType.Card;
   @Input() hideBank = false;
   @Input() hidePaypal = false;
   @Input() hideCredit = false;
   @Input() trialFlow = false;
 
+  @Input()
+  set method(value: PaymentMethodType) {
+    this._method = value;
+    this.paymentForm?.controls.method.setValue(value, { emitEvent: false });
+  }
+
+  get method(): PaymentMethodType {
+    return this._method;
+  }
+  private _method: PaymentMethodType = PaymentMethodType.Card;
+
   private destroy$ = new Subject<void>();
-
+  protected paymentForm = new FormGroup({
-  bank: any = {
+    method: new FormControl(this.method),
-    routing_number: null,
+    bank: new FormGroup({
-    account_number: null,
+      routing_number: new FormControl(null, [Validators.required]),
-    account_holder_name: null,
+      account_number: new FormControl(null, [Validators.required]),
-    account_holder_type: "",
+      account_holder_name: new FormControl(null, [Validators.required]),
-    currency: "USD",
+      account_holder_type: new FormControl("", [Validators.required]),
-    country: "US",
+      currency: new FormControl("USD"),
-  };
+      country: new FormControl("US"),
-
+    }),
+  });
   paymentMethodType = PaymentMethodType;
 
   private btScript: HTMLScriptElement;
@@ -85,7 +97,6 @@ export class PaymentComponent implements OnInit, OnDestroy {
       invalid: "is-invalid",
     };
   }
-
   async ngOnInit() {
     if (!this.showOptions) {
       this.hidePaypal = this.method !== PaymentMethodType.PayPal;
@@ -97,6 +108,13 @@ export class PaymentComponent implements OnInit, OnDestroy {
     if (!this.hidePaypal) {
       window.document.head.appendChild(this.btScript);
     }
+    this.paymentForm
+      .get("method")
+      .valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe((v) => {
+        this.method = v;
+        this.changeMethod();
+      });
   }
 
   ngOnDestroy() {
@@ -140,7 +158,6 @@ export class PaymentComponent implements OnInit, OnDestroy {
 
   changeMethod() {
     this.btInstance = null;
-
     if (this.method === PaymentMethodType.PayPal) {
       window.setTimeout(() => {
         (window as any).braintree.dropin.create(
@@ -209,7 +226,9 @@ export class PaymentComponent implements OnInit, OnDestroy {
               }
             });
         } else {
-          this.stripe.createToken("bank_account", this.bank).then((result: any) => {
+          this.stripe
+            .createToken("bank_account", this.paymentForm.get("bank").value)
+            .then((result: any) => {
               if (result.error) {
                 reject(result.error.message);
               } else if (result.token && result.token.id != null) {