[AC-1939] Manage provider payment information (#9415)

* Added select-payment-method.component in shared lib

Because we're going to be implementing the same functionality for providers and orgs/users, I wanted to start moving some of this shared functionality into libs so it can be accessed in both web and bit-web. Additionally, the Stripe and Braintree functionality has been moved into their own services for more central management.

* Added generalized manage-tax-information component to shared lib

* Added generalized add-account-credit-dialog component to shared libs

* Added generalized verify-bank-account component to shared libs

* Added dialog for selection of provider payment method

* Added provider-payment-method component

* Added provider-payment-method component to provider layout

libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts

@@ -1,3 +1,9 @@
+import { PaymentMethodType } from "@bitwarden/common/billing/enums";
+import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
+import { TokenizedPaymentMethodRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-method.request";
+import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
+import { PaymentInformationResponse } from "@bitwarden/common/billing/models/response/payment-information.response";
+
 import { SubscriptionCancellationRequest } from "../../billing/models/request/subscription-cancellation.request";
 import { OrganizationBillingMetadataResponse } from "../../billing/models/response/organization-billing-metadata.response";
 import { OrganizationBillingStatusResponse } from "../../billing/models/response/organization-billing-status.response";
@@ -13,23 +19,50 @@ export abstract class BillingApiServiceAbstraction {
     organizationId: string,
     request: SubscriptionCancellationRequest,
   ) => Promise<void>;
+
   cancelPremiumUserSubscription: (request: SubscriptionCancellationRequest) => Promise<void>;
+
   createClientOrganization: (
     providerId: string,
     request: CreateClientOrganizationRequest,
   ) => Promise<void>;
+
+  createSetupIntent: (paymentMethodType: PaymentMethodType) => Promise<string>;
+
   getBillingStatus: (id: string) => Promise<OrganizationBillingStatusResponse>;
+
   getOrganizationBillingMetadata: (
     organizationId: string,
   ) => Promise<OrganizationBillingMetadataResponse>;
+
   getOrganizationSubscription: (
     organizationId: string,
   ) => Promise<OrganizationSubscriptionResponse>;
+
   getPlans: () => Promise<ListResponse<PlanResponse>>;
+
+  getProviderPaymentInformation: (providerId: string) => Promise<PaymentInformationResponse>;
+
   getProviderSubscription: (providerId: string) => Promise<ProviderSubscriptionResponse>;
+
   updateClientOrganization: (
     providerId: string,
     organizationId: string,
     request: UpdateClientOrganizationRequest,
   ) => Promise<any>;
+
+  updateProviderPaymentMethod: (
+    providerId: string,
+    request: TokenizedPaymentMethodRequest,
+  ) => Promise<void>;
+
+  updateProviderTaxInformation: (
+    providerId: string,
+    request: ExpandedTaxInfoUpdateRequest,
+  ) => Promise<void>;
+
+  verifyProviderBankAccount: (
+    providerId: string,
+    request: VerifyBankAccountRequest,
+  ) => Promise<void>;
 }

libs/common/src/billing/abstractions/index.ts

@@ -0,0 +1,7 @@
+export * from "./account/billing-account-profile-state.service";
+export * from "./billilng-api.service.abstraction";
+export * from "./organization-billing.service";
+export * from "./payment-method-warnings-service.abstraction";
+export * from "./payment-processors/braintree.service.abstraction";
+export * from "./payment-processors/stripe.service.abstraction";
+export * from "./provider-billing.service.abstraction";

libs/common/src/billing/abstractions/payment-processors/braintree.service.abstraction.ts

@@ -0,0 +1,28 @@
+export abstract class BraintreeServiceAbstraction {
+  /**
+   * Utilizes the Braintree SDK to create a [Braintree drop-in]{@link https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html} instance attached to the container ID specified as part of the {@link loadBraintree} method.
+   */
+  createDropin: () => void;
+
+  /**
+   * Loads the Bitwarden dropin.js script in the <head> element of the current page.
+   * This script attaches the Braintree SDK to the window.
+   * @param containerId - The ID of the HTML element where the Braintree drop-in will be loaded at.
+   * @param autoCreateDropin - Specifies whether the Braintree drop-in should be created when dropin.js loads.
+   */
+  loadBraintree: (containerId: string, autoCreateDropin: boolean) => void;
+
+  /**
+   * Invokes the Braintree [requestPaymentMethod]{@link https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#requestPaymentMethod} method
+   * in order to generate a payment method token using the active Braintree drop-in.
+   */
+  requestPaymentMethod: () => Promise<string>;
+
+  /**
+   * Removes the following elements from the <head> of the current page:
+   * - The Bitwarden dropin.js script
+   * - Any <script> elements that contain the word "paypal"
+   * - The Braintree drop-in stylesheet
+   */
+  unloadBraintree: () => void;
+}

libs/common/src/billing/abstractions/payment-processors/stripe.service.abstraction.ts

@@ -0,0 +1,45 @@
+import { BankAccount } from "@bitwarden/common/billing/models/domain";
+
+export abstract class StripeServiceAbstraction {
+  /**
+   * Loads [Stripe JS]{@link https://docs.stripe.com/js} in the <head> element of the current page and mounts
+   * Stripe credit card [elements]{@link https://docs.stripe.com/js/elements_object/create} into the HTML elements with the provided element IDS.
+   * We do this to avoid having to load the Stripe JS SDK on every page of the Web Vault given many pages contain sensitive information.
+   * @param elementIds - The ID attributes of the HTML elements used to load the Stripe JS credit card elements.
+   */
+  loadStripe: (
+    elementIds: { cardNumber: string; cardExpiry: string; cardCvc: string },
+    autoMount: boolean,
+  ) => void;
+
+  /**
+   * Re-mounts previously created Stripe credit card [elements]{@link https://docs.stripe.com/js/elements_object/create} into the HTML elements
+   * specified during the {@link loadStripe} call. This is useful for when those HTML elements are removed from the DOM by Angular.
+   */
+  mountElements: () => void;
+
+  /**
+   * Creates a Stripe [SetupIntent]{@link https://docs.stripe.com/api/setup_intents} and uses the resulting client secret
+   * to invoke the Stripe JS [confirmUsBankAccountSetup]{@link https://docs.stripe.com/js/setup_intents/confirm_us_bank_account_setup} method,
+   * thereby creating and storing a Stripe [PaymentMethod]{@link https://docs.stripe.com/api/payment_methods}.
+   * @returns The ID of the newly created PaymentMethod.
+   */
+  setupBankAccountPaymentMethod: (
+    clientSecret: string,
+    bankAccount: BankAccount,
+  ) => Promise<string>;
+
+  /**
+   * Creates a Stripe [SetupIntent]{@link https://docs.stripe.com/api/setup_intents} and uses the resulting client secret
+   * to invoke the Stripe JS [confirmCardSetup]{@link https://docs.stripe.com/js/setup_intents/confirm_card_setup} method,
+   * thereby creating and storing a Stripe [PaymentMethod]{@link https://docs.stripe.com/api/payment_methods}.
+   * @returns The ID of the newly created PaymentMethod.
+   */
+  setupCardPaymentMethod: (clientSecret: string) => Promise<string>;
+
+  /**
+   * Removes {@link https://docs.stripe.com/js} from the <head> element of the current page as well as all
+   * Stripe-managed <iframe> elements.
+   */
+  unloadStripe: () => void;
+}