[AC-2959] ACH Direct Debit POC (#10746)

* (No Logic) Fix typo in billing-api-service.abstraction file name

* (Cleanup) Remove payment method components and API methods from provider portal

Product team decided not to have a payment method page in the provider portal for consolidated billing. This just removes all the unused components and API methods.

* Add organization endpoints to support new payment method behavior

* Add payment-v2.component

This component existed in the libs folder because we used it for the provider portal, but since we've removed payment functionality from the provider portal, I moved it into web in this commit.

* (No Logic) Move existing payment.component into new payment component folder

* Add verify-bank-account.component

This component existed in the libs folder because we used it for the provider portal, but since we've removed payment functionality from the provider portal, I moved it into web in this commit.

* Add adjust-payment-dialog-v2.component

* (No Logic) Move existing adjust-payment-dialog.component into new adjust-payment-dialog component folder

* Add organization-payment-method.component

* Add feature flag: AC-2476-deprecate-stripe-sources-api

* Pivot organization payment method route on new feature flag

* Fix broken test

libs/angular/src/billing/components/index.ts

@@ -2,5 +2,3 @@ export * from "./add-account-credit-dialog/add-account-credit-dialog.component";
 export * from "./invoices/invoices.component";
 export * from "./invoices/no-invoices.component";
 export * from "./manage-tax-information/manage-tax-information.component";
-export * from "./select-payment-method/select-payment-method.component";
-export * from "./verify-bank-account/verify-bank-account.component";

libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html

@@ -1,151 +0,0 @@
-<form [formGroup]="formGroup" [bitSubmit]="submit">
-  <div class="tw-mb-4 tw-text-lg">
-    <bit-radio-group formControlName="paymentMethod">
-      <bit-radio-button id="card-payment-method" [value]="PaymentMethodType.Card">
-        <bit-label>
-          <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>
-          {{ "creditCard" | i18n }}
-        </bit-label>
-      </bit-radio-button>
-      <bit-radio-button
-        id="bank-payment-method"
-        [value]="PaymentMethodType.BankAccount"
-        *ngIf="showBankAccount"
-      >
-        <bit-label>
-          <i class="bwi bwi-fw bwi-bank" aria-hidden="true"></i>
-          {{ "bankAccount" | i18n }}
-        </bit-label>
-      </bit-radio-button>
-      <bit-radio-button
-        id="paypal-payment-method"
-        [value]="PaymentMethodType.PayPal"
-        *ngIf="showPayPal"
-      >
-        <bit-label>
-          <i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i>
-          {{ "payPal" | i18n }}
-        </bit-label>
-      </bit-radio-button>
-      <bit-radio-button
-        id="credit-payment-method"
-        [value]="PaymentMethodType.Credit"
-        *ngIf="showAccountCredit"
-      >
-        <bit-label>
-          <i class="bwi bwi-fw bwi-dollar" aria-hidden="true"></i>
-          {{ "accountCredit" | i18n }}
-        </bit-label>
-      </bit-radio-button>
-    </bit-radio-group>
-  </div>
-  <!-- Card -->
-  <ng-container *ngIf="usingCard">
-    <div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4">
-      <div class="tw-col-span-1">
-        <label for="stripe-card-number">{{ "number" | i18n }}</label>
-        <div id="stripe-card-number" class="form-control stripe-form-control"></div>
-      </div>
-      <div class="tw-col-span-1 tw-flex tw-items-end">
-        <img
-          src="../../images/cards.png"
-          alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
-          class="tw-max-w-full"
-        />
-      </div>
-      <div class="tw-col-span-1">
-        <label for="stripe-card-expiry">{{ "expiration" | i18n }}</label>
-        <div id="stripe-card-expiry" class="form-control stripe-form-control"></div>
-      </div>
-      <div class="tw-col-span-1">
-        <div class="tw-flex">
-          <label for="stripe-card-cvc">
-            {{ "securityCode" | i18n }}
-          </label>
-          <a
-            href="https://www.cvvnumber.com/cvv.html"
-            tabindex="-1"
-            target="_blank"
-            rel="noreferrer"
-            class="ml-auto"
-            appA11yTitle="{{ 'learnMore' | i18n }}"
-          >
-            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-          </a>
-        </div>
-        <div id="stripe-card-cvc" class="form-control stripe-form-control"></div>
-      </div>
-    </div>
-  </ng-container>
-  <!-- Bank Account -->
-  <ng-container *ngIf="showBankAccount && usingBankAccount">
-    <app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
-      {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
-    </app-callout>
-    <div class="tw-grid tw-grid-cols-2 tw-gap-4" formGroupName="bankInformation">
-      <bit-form-field class="tw-col-span-1" disableMargin>
-        <bit-label>{{ "routingNumber" | i18n }}</bit-label>
-        <input
-          bitInput
-          id="routingNumber"
-          type="text"
-          formControlName="routingNumber"
-          required
-          appInputVerbatim
-        />
-      </bit-form-field>
-      <bit-form-field class="tw-col-span-1" disableMargin>
-        <bit-label>{{ "accountNumber" | i18n }}</bit-label>
-        <input
-          bitInput
-          id="accountNumber"
-          type="text"
-          formControlName="accountNumber"
-          required
-          appInputVerbatim
-        />
-      </bit-form-field>
-      <bit-form-field class="tw-col-span-1" disableMargin>
-        <bit-label>{{ "accountHolderName" | i18n }}</bit-label>
-        <input
-          id="accountHolderName"
-          bitInput
-          type="text"
-          formControlName="accountHolderName"
-          required
-          appInputVerbatim
-        />
-      </bit-form-field>
-      <bit-form-field class="tw-col-span-1" disableMargin>
-        <bit-label>{{ "bankAccountType" | i18n }}</bit-label>
-        <bit-select id="accountHolderType" formControlName="accountHolderType" 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>
-  </ng-container>
-  <!-- PayPal -->
-  <ng-container *ngIf="showPayPal && usingPayPal">
-    <div class="tw-mb-3">
-      <div id="braintree-container" class="tw-mb-1 tw-content-center"></div>
-      <small class="tw-text-muted">{{ "paypalClickSubmit" | i18n }}</small>
-    </div>
-  </ng-container>
-  <!-- Account Credit -->
-  <ng-container *ngIf="showAccountCredit && usingAccountCredit">
-    <app-callout type="info">
-      {{ "makeSureEnoughCredit" | i18n }}
-    </app-callout>
-  </ng-container>
-  <button *ngIf="!!onSubmit" bitButton bitFormButton buttonType="primary" type="submit">
-    {{ "submit" | i18n }}
-  </button>
-</form>

libs/angular/src/billing/components/select-payment-method/select-payment-method.component.ts

@@ -1,159 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
-import { FormBuilder, Validators } from "@angular/forms";
-import { Subject } from "rxjs";
-import { takeUntil } from "rxjs/operators";
-
-import {
-  BillingApiServiceAbstraction,
-  BraintreeServiceAbstraction,
-  StripeServiceAbstraction,
-} from "@bitwarden/common/billing/abstractions";
-import { PaymentMethodType } from "@bitwarden/common/billing/enums";
-import { TokenizedPaymentMethod } from "@bitwarden/common/billing/models/domain";
-
-@Component({
-  selector: "app-select-payment-method",
-  templateUrl: "./select-payment-method.component.html",
-})
-export class SelectPaymentMethodComponent implements OnInit, OnDestroy {
-  @Input() protected showAccountCredit: boolean = true;
-  @Input() protected showBankAccount: boolean = true;
-  @Input() protected showPayPal: boolean = true;
-  @Input() private startWith: PaymentMethodType = PaymentMethodType.Card;
-  @Input() protected onSubmit: (tokenizedPaymentMethod: TokenizedPaymentMethod) => Promise<void>;
-
-  private destroy$ = new Subject<void>();
-
-  protected formGroup = this.formBuilder.group({
-    paymentMethod: [this.startWith],
-    bankInformation: this.formBuilder.group({
-      routingNumber: ["", [Validators.required]],
-      accountNumber: ["", [Validators.required]],
-      accountHolderName: ["", [Validators.required]],
-      accountHolderType: ["", [Validators.required]],
-    }),
-  });
-  protected PaymentMethodType = PaymentMethodType;
-
-  constructor(
-    private billingApiService: BillingApiServiceAbstraction,
-    private braintreeService: BraintreeServiceAbstraction,
-    private formBuilder: FormBuilder,
-    private stripeService: StripeServiceAbstraction,
-  ) {}
-
-  async tokenizePaymentMethod(): Promise<TokenizedPaymentMethod> {
-    const type = this.selected;
-
-    if (this.usingStripe) {
-      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,
-        };
-      }
-
-      if (this.usingCard) {
-        const token = await this.stripeService.setupCardPaymentMethod(clientSecret);
-        return {
-          type,
-          token,
-        };
-      }
-    }
-
-    if (this.usingPayPal) {
-      const token = await this.braintreeService.requestPaymentMethod();
-      return {
-        type,
-        token,
-      };
-    }
-
-    return null;
-  }
-
-  submit = async () => {
-    const tokenizedPaymentMethod = await this.tokenizePaymentMethod();
-    await this.onSubmit(tokenizedPaymentMethod);
-  };
-
-  ngOnInit(): void {
-    this.stripeService.loadStripe(
-      {
-        cardNumber: "#stripe-card-number",
-        cardExpiry: "#stripe-card-expiry",
-        cardCvc: "#stripe-card-cvc",
-      },
-      this.startWith === PaymentMethodType.Card,
-    );
-
-    if (this.showPayPal) {
-      this.braintreeService.loadBraintree(
-        "#braintree-container",
-        this.startWith === PaymentMethodType.PayPal,
-      );
-    }
-
-    this.formGroup
-      .get("paymentMethod")
-      .valueChanges.pipe(takeUntil(this.destroy$))
-      .subscribe((type) => {
-        this.onPaymentMethodChange(type);
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-    this.stripeService.unloadStripe();
-    if (this.showPayPal) {
-      this.braintreeService.unloadBraintree();
-    }
-  }
-
-  private onPaymentMethodChange(type: PaymentMethodType): void {
-    switch (type) {
-      case PaymentMethodType.Card: {
-        this.stripeService.mountElements();
-        break;
-      }
-      case PaymentMethodType.PayPal: {
-        this.braintreeService.createDropin();
-        break;
-      }
-    }
-  }
-
-  private get selected(): PaymentMethodType {
-    return this.formGroup.value.paymentMethod;
-  }
-
-  protected get usingAccountCredit(): boolean {
-    return this.selected === PaymentMethodType.Credit;
-  }
-
-  protected get usingBankAccount(): boolean {
-    return this.selected === PaymentMethodType.BankAccount;
-  }
-
-  protected get usingCard(): boolean {
-    return this.selected === PaymentMethodType.Card;
-  }
-
-  protected get usingPayPal(): boolean {
-    return this.selected === PaymentMethodType.PayPal;
-  }
-
-  private get usingStripe(): boolean {
-    return this.usingBankAccount || this.usingCard;
-  }
-}

libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.html

@@ -1,18 +0,0 @@
-<app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
-  <p>{{ "verifyBankAccountDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}</p>
-  <form [formGroup]="formGroup" [bitSubmit]="submit">
-    <bit-form-field class="tw-mr-2 tw-w-40">
-      <bit-label>{{ "amountX" | i18n: "1" }}</bit-label>
-      <input bitInput type="number" step="1" placeholder="xx" formControlName="amount1" />
-      <span bitPrefix>$0.</span>
-    </bit-form-field>
-    <bit-form-field class="tw-mr-2 tw-w-40">
-      <bit-label>{{ "amountX" | i18n: "2" }}</bit-label>
-      <input bitInput type="number" step="1" placeholder="xx" formControlName="amount2" />
-      <span bitPrefix>$0.</span>
-    </bit-form-field>
-    <button type="submit" bitButton bitFormButton buttonType="primary">
-      {{ "submit" | i18n }}
-    </button>
-  </form>
-</app-callout>

libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.ts

@@ -1,33 +0,0 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { FormBuilder, FormControl, Validators } from "@angular/forms";
-
-@Component({
-  selector: "app-verify-bank-account",
-  templateUrl: "./verify-bank-account.component.html",
-})
-export class VerifyBankAccountComponent {
-  @Input() onSubmit?: (amount1: number, amount2: number) => Promise<void>;
-  @Output() verificationSubmitted = new EventEmitter();
-
-  protected formGroup = this.formBuilder.group({
-    amount1: new FormControl<number>(null, [
-      Validators.required,
-      Validators.min(0),
-      Validators.max(99),
-    ]),
-    amount2: new FormControl<number>(null, [
-      Validators.required,
-      Validators.min(0),
-      Validators.max(99),
-    ]),
-  });
-
-  constructor(private formBuilder: FormBuilder) {}
-
-  submit = async () => {
-    if (this.onSubmit) {
-      await this.onSubmit(this.formGroup.value.amount1, this.formGroup.value.amount2);
-    }
-    this.verificationSubmitted.emit();
-  };
-}

libs/angular/src/jslib.module.ts

@@ -7,8 +7,6 @@ import {
   InvoicesComponent,
   NoInvoicesComponent,
   ManageTaxInformationComponent,
-  SelectPaymentMethodComponent,
-  VerifyBankAccountComponent,
 } from "@bitwarden/angular/billing/components";
 import {
   AsyncActionsModule,
@@ -116,8 +114,6 @@ import { IconComponent } from "./vault/components/icon.component";
     InvoicesComponent,
     NoInvoicesComponent,
     ManageTaxInformationComponent,
-    SelectPaymentMethodComponent,
-    VerifyBankAccountComponent,
     TwoFactorIconComponent,
   ],
   exports: [
@@ -153,8 +149,6 @@ import { IconComponent } from "./vault/components/icon.component";
     InvoicesComponent,
     NoInvoicesComponent,
     ManageTaxInformationComponent,
-    SelectPaymentMethodComponent,
-    VerifyBankAccountComponent,
     TwoFactorIconComponent,
   ],
   providers: [