[PM-21881] Manage payment details outside of checkout (#15458)

* Add billable-entity * Add payment types * Add billing.client * Update stripe.service * Add payment method components * Add address.pipe * Add billing address components * Add account credit components * Add component index * Add feature flag * Re-work organization warnings code * Add organization-payment-details.component * Backfill translations * Set up organization FF routing * Add account-payment-details.component * Set up account FF routing * Add provider-payment-details.component * Set up provider FF routing * Use inline component templates for re-usable payment components * Remove errant rebase file * Removed public accessibility modifier * Fix failing test
2025-12-14 07:13:32 +00:00 · 2025-07-10 08:32:40 -05:00
parent 8c3c5ab861
commit a53b1e9ffb
60 changed files with 4268 additions and 151 deletions
--- a/apps/web/src/app/billing/payment/components/change-payment-method-dialog.component.ts
+++ b/apps/web/src/app/billing/payment/components/change-payment-method-dialog.component.ts
@@ -0,0 +1,113 @@
+import { DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject, ViewChild } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { DialogConfig, DialogRef, DialogService, ToastService } from "@bitwarden/components";
+
+import { SharedModule } from "../../../shared";
+import { BillingClient } from "../../services";
+import { BillableEntity } from "../../types";
+import { MaskedPaymentMethod } from "../types";
+
+import { EnterPaymentMethodComponent } from "./enter-payment-method.component";
+
+type DialogParams = {
+  owner: BillableEntity;
+};
+
+type DialogResult =
+  | { type: "cancelled" }
+  | { type: "error" }
+  | { type: "success"; paymentMethod: MaskedPaymentMethod };
+
+@Component({
+  template: `
+    <form [formGroup]="formGroup" [bitSubmit]="submit">
+      <bit-dialog>
+        <span bitDialogTitle class="tw-font-semibold">
+          {{ "changePaymentMethod" | i18n }}
+        </span>
+        <div bitDialogContent>
+          <app-enter-payment-method [group]="formGroup" [includeBillingAddress]="true">
+          </app-enter-payment-method>
+        </div>
+        <ng-container bitDialogFooter>
+          <button bitButton bitFormButton buttonType="primary" type="submit">
+            {{ "save" | i18n }}
+          </button>
+          <button
+            bitButton
+            buttonType="secondary"
+            type="button"
+            [bitDialogClose]="{ type: 'cancelled' }"
+          >
+            {{ "cancel" | i18n }}
+          </button>
+        </ng-container>
+      </bit-dialog>
+    </form>
+  `,
+  standalone: true,
+  imports: [EnterPaymentMethodComponent, SharedModule],
+  providers: [BillingClient],
+})
+export class ChangePaymentMethodDialogComponent {
+  @ViewChild(EnterPaymentMethodComponent)
+  private enterPaymentMethodComponent!: EnterPaymentMethodComponent;
+  protected formGroup = EnterPaymentMethodComponent.getFormGroup();
+
+  constructor(
+    private billingClient: BillingClient,
+    @Inject(DIALOG_DATA) protected dialogParams: DialogParams,
+    private dialogRef: DialogRef<DialogResult>,
+    private i18nService: I18nService,
+    private toastService: ToastService,
+  ) {}
+
+  submit = async () => {
+    this.formGroup.markAllAsTouched();
+
+    if (!this.formGroup.valid) {
+      return;
+    }
+
+    const paymentMethod = await this.enterPaymentMethodComponent.tokenize();
+    const billingAddress =
+      this.formGroup.value.type !== "payPal"
+        ? this.formGroup.controls.billingAddress.getRawValue()
+        : null;
+
+    const result = await this.billingClient.updatePaymentMethod(
+      this.dialogParams.owner,
+      paymentMethod,
+      billingAddress,
+    );
+
+    switch (result.type) {
+      case "success": {
+        this.toastService.showToast({
+          variant: "success",
+          title: "",
+          message: this.i18nService.t("paymentMethodUpdated"),
+        });
+        this.dialogRef.close({
+          type: "success",
+          paymentMethod: result.value,
+        });
+        break;
+      }
+      case "error": {
+        this.toastService.showToast({
+          variant: "error",
+          title: "",
+          message: result.message,
+        });
+        this.dialogRef.close({ type: "error" });
+        break;
+      }
+    }
+  };
+
+  static open = (dialogService: DialogService, dialogConfig: DialogConfig<DialogParams>) =>
+    dialogService.open<DialogResult>(ChangePaymentMethodDialogComponent, dialogConfig);
+}