[PM-5020] Adjust Storage component migration (#8301)

* Migrated Add Storage component * PM-5020 Addressed review comments for Adjust Storage component * PM-5020 Changes done in dialog css * PM-5020 Latest review comments addressed * PM-5020 Add storage submit action changes done * PM-5020 Moved the paragraph to top of dialog content
2024-04-17 01:10:10 +05:30 · 2024-04-17 01:10:10 +05:30 · 9ecf384176
parent cf2fefaead
commit 9ecf384176
6 changed files with 180 additions and 160 deletions
--- a/apps/web/src/app/billing/individual/user-subscription.component.html
+++ b/apps/web/src/app/billing/individual/user-subscription.component.html
@ -170,8 +170,8 @@
    </div>
    <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
      <div class="mt-3">
-        <div class="d-flex" *ngIf="!showAdjustStorage">
-          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
+        <div class="d-flex">
+          <button bitButton type="button" buttonType="secondary" [bitAction]="adjustStorage(true)">
            {{ "addStorage" | i18n }}
          </button>
          <button
@ -179,18 +179,11 @@
            type="button"
            buttonType="secondary"
            class="tw-ml-1"
-            (click)="adjustStorage(false)"
+            [bitAction]="adjustStorage(false)"
          >
            {{ "removeStorage" | i18n }}
          </button>
        </div>
-        <app-adjust-storage
-          [storageGbPrice]="4"
-          [add]="adjustStorageAdd"
-          (onAdjusted)="closeStorage(true)"
-          (onCanceled)="closeStorage(false)"
-          *ngIf="showAdjustStorage"
-        ></app-adjust-storage>
      </div>
    </ng-container>
  </ng-container>
--- a/apps/web/src/app/billing/individual/user-subscription.component.ts
+++ b/apps/web/src/app/billing/individual/user-subscription.component.ts
@ -12,6 +12,10 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService } from "@bitwarden/components";

+import {
+  AdjustStorageDialogResult,
+  openAdjustStorageDialog,
+} from "../shared/adjust-storage.component";
 import {
  OffboardingSurveyDialogResultType,
  openOffboardingSurvey,
@ -24,7 +28,6 @@ export class UserSubscriptionComponent implements OnInit {
  loading = false;
  firstLoaded = false;
  adjustStorageAdd = true;
-  showAdjustStorage = false;
  showUpdateLicense = false;
  sub: SubscriptionResponse;
  selfHosted = false;
@ -144,19 +147,20 @@ export class UserSubscriptionComponent implements OnInit {
    }
  }

-  adjustStorage(add: boolean) {
-    this.adjustStorageAdd = add;
-    this.showAdjustStorage = true;
-  }
-
-  closeStorage(load: boolean) {
-    this.showAdjustStorage = false;
-    if (load) {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.load();
-    }
-  }
+  adjustStorage = (add: boolean) => {
+    return async () => {
+      const dialogRef = openAdjustStorageDialog(this.dialogService, {
+        data: {
+          storageGbPrice: 4,
+          add: add,
+        },
+      });
+      const result = await lastValueFrom(dialogRef.closed);
+      if (result === AdjustStorageDialogResult.Adjusted) {
+        await this.load();
+      }
+    };
+  };

  get subscriptionMarkedForCancel() {
    return (
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@ -175,23 +175,24 @@
      <bit-progress [barWidth]="storagePercentage" bgColor="success"></bit-progress>
      <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
        <div class="tw-mt-3">
-          <div class="tw-flex tw-space-x-2" *ngIf="!showAdjustStorage">
-            <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(true)">
+          <div class="tw-flex tw-space-x-2">
+            <button
+              bitButton
+              buttonType="secondary"
+              type="button"
+              [bitAction]="adjustStorage(true)"
+            >
              {{ "addStorage" | i18n }}
            </button>
-            <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(false)">
+            <button
+              bitButton
+              buttonType="secondary"
+              type="button"
+              [bitAction]="adjustStorage(false)"
+            >
              {{ "removeStorage" | i18n }}
            </button>
          </div>
-          <app-adjust-storage
-            [storageGbPrice]="storageGbPrice"
-            [add]="adjustStorageAdd"
-            [organizationId]="organizationId"
-            [interval]="billingInterval"
-            (onAdjusted)="closeStorage(true)"
-            (onCanceled)="closeStorage(false)"
-            *ngIf="showAdjustStorage"
-          ></app-adjust-storage>
        </div>
      </ng-container>
      <ng-container *ngIf="showAdjustSecretsManager">
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
@ -18,6 +18,10 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService } from "@bitwarden/components";

+import {
+  AdjustStorageDialogResult,
+  openAdjustStorageDialog,
+} from "../shared/adjust-storage.component";
 import {
  OffboardingSurveyDialogResultType,
  openOffboardingSurvey,
@ -36,8 +40,6 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
  userOrg: Organization;
  showChangePlan = false;
  showDownloadLicense = false;
-  adjustStorageAdd = true;
-  showAdjustStorage = false;
  hasBillingSyncToken: boolean;
  showAdjustSecretsManager = false;
  showSecretsManagerSubscribe = false;
@ -361,19 +363,22 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
    this.load();
  }

-  adjustStorage(add: boolean) {
-    this.adjustStorageAdd = add;
-    this.showAdjustStorage = true;
-  }
-
-  closeStorage(load: boolean) {
-    this.showAdjustStorage = false;
-    if (load) {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.load();
-    }
-  }
+  adjustStorage = (add: boolean) => {
+    return async () => {
+      const dialogRef = openAdjustStorageDialog(this.dialogService, {
+        data: {
+          storageGbPrice: this.storageGbPrice,
+          add: add,
+          organizationId: this.organizationId,
+          interval: this.billingInterval,
+        },
+      });
+      const result = await lastValueFrom(dialogRef.closed);
+      if (result === AdjustStorageDialogResult.Adjusted) {
+        await this.load();
+      }
+    };
+  };

  removeSponsorship = async () => {
    const confirmed = await this.dialogService.openSimpleDialog({
--- a/apps/web/src/app/billing/shared/adjust-storage.component.html
+++ b/apps/web/src/app/billing/shared/adjust-storage.component.html
@ -1,43 +1,35 @@
-<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-  <div class="card-body">
-    <button type="button" class="close" appA11yTitle="{{ 'cancel' | i18n }}" (click)="cancel()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-    <h3 class="card-body-header">{{ (add ? "addStorage" : "removeStorage") | i18n }}</h3>
-    <div class="row">
-      <div class="form-group col-6">
-        <label for="storageAdjustment">{{
-          (add ? "gbStorageAdd" : "gbStorageRemove") | i18n
-        }}</label>
-        <input
-          id="storageAdjustment"
-          class="form-control"
-          type="number"
-          name="StorageGbAdjustment"
-          [(ngModel)]="storageAdjustment"
-          min="0"
-          max="99"
-          step="1"
-          required
-        />
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog dialogSize="default" [title]="(add ? 'addStorage' : 'removeStorage') | i18n">
+    <ng-container bitDialogContent>
+      <p bitTypography="body1">{{ (add ? "storageAddNote" : "storageRemoveNote") | i18n }}</p>
+      <div class="tw-grid tw-grid-cols-12">
+        <bit-form-field class="tw-col-span-7">
+          <bit-label>{{ (add ? "gbStorageAdd" : "gbStorageRemove") | i18n }}</bit-label>
+          <input bitInput type="number" formControlName="storageAdjustment" />
+          <bit-hint *ngIf="add">
+            <strong>{{ "total" | i18n }}:</strong>
+            {{ formGroup.get("storageAdjustment").value || 0 }} GB &times;
+            {{ storageGbPrice | currency: "$" }} = {{ adjustedStorageTotal | currency: "$" }} /{{
+              interval | i18n
+            }}
+          </bit-hint>
+        </bit-form-field>
      </div>
-    </div>
-    <div *ngIf="add" class="mb-3">
-      <strong>{{ "total" | i18n }}:</strong> {{ storageAdjustment || 0 }} GB &times;
-      {{ storageGbPrice | currency: "$" }} = {{ adjustedStorageTotal | currency: "$" }} /{{
-        interval | i18n
-      }}
-    </div>
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>{{ "submit" | i18n }}</span>
-    </button>
-    <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
-      {{ "cancel" | i18n }}
-    </button>
-    <small class="d-block text-muted mt-3">
-      {{ (add ? "storageAddNote" : "storageRemoveNote") | i18n }}
-    </small>
-  </div>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary">
+        {{ "submit" | i18n }}
+      </button>
+      <button
+        type="button"
+        bitButton
+        bitFormButton
+        buttonType="secondary"
+        [bitDialogClose]="DialogResult.Cancelled"
+      >
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
 </form>
 <app-payment [showMethods]="false"></app-payment>
--- a/apps/web/src/app/billing/shared/adjust-storage.component.ts
+++ b/apps/web/src/app/billing/shared/adjust-storage.component.ts
@ -1,4 +1,6 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { Component, Inject, ViewChild } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";

 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@ -8,27 +10,45 @@ import { StorageRequest } from "@bitwarden/common/models/request/storage.request
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService } from "@bitwarden/components";

 import { PaymentComponent } from "./payment.component";

+export interface AdjustStorageDialogData {
+  storageGbPrice: number;
+  add: boolean;
+  organizationId?: string;
+  interval?: string;
+}
+
+export enum AdjustStorageDialogResult {
+  Adjusted = "adjusted",
+  Cancelled = "cancelled",
+}
+
@Component({
-  selector: "app-adjust-storage",
  templateUrl: "adjust-storage.component.html",
 })
 export class AdjustStorageComponent {
-  @Input() storageGbPrice = 0;
-  @Input() add = true;
-  @Input() organizationId: string;
-  @Input() interval = "year";
-  @Output() onAdjusted = new EventEmitter<number>();
-  @Output() onCanceled = new EventEmitter();
+  storageGbPrice: number;
+  add: boolean;
+  organizationId: string;
+  interval: string;

  @ViewChild(PaymentComponent, { static: true }) paymentComponent: PaymentComponent;

-  storageAdjustment = 0;
-  formPromise: Promise<PaymentResponse | void>;
+  protected DialogResult = AdjustStorageDialogResult;
+  protected formGroup = new FormGroup({
+    storageAdjustment: new FormControl(0, [
+      Validators.required,
+      Validators.min(0),
+      Validators.max(99),
+    ]),
+  });

  constructor(
+    private dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) protected data: AdjustStorageDialogData,
    private apiService: ApiService,
    private i18nService: I18nService,
    private platformUtilsService: PlatformUtilsService,
@ -36,69 +56,74 @@ export class AdjustStorageComponent {
    private activatedRoute: ActivatedRoute,
    private logService: LogService,
    private organizationApiService: OrganizationApiServiceAbstraction,
-  ) {}
+  ) {
+    this.storageGbPrice = data.storageGbPrice;
+    this.add = data.add;
+    this.organizationId = data.organizationId;
+    this.interval = data.interval || "year";
+  }

-  async submit() {
-    try {
-      const request = new StorageRequest();
-      request.storageGbAdjustment = this.storageAdjustment;
-      if (!this.add) {
-        request.storageGbAdjustment *= -1;
-      }
-
-      let paymentFailed = false;
-      const action = async () => {
-        let response: Promise<PaymentResponse>;
-        if (this.organizationId == null) {
-          response = this.formPromise = this.apiService.postAccountStorage(request);
-        } else {
-          response = this.formPromise = this.organizationApiService.updateStorage(
-            this.organizationId,
-            request,
-          );
-        }
-        const result = await response;
-        if (result != null && result.paymentIntentClientSecret != null) {
-          try {
-            await this.paymentComponent.handleStripeCardPayment(
-              result.paymentIntentClientSecret,
-              null,
-            );
-          } catch {
-            paymentFailed = true;
-          }
-        }
-      };
-      this.formPromise = action();
-      await this.formPromise;
-      this.onAdjusted.emit(this.storageAdjustment);
-      if (paymentFailed) {
-        this.platformUtilsService.showToast(
-          "warning",
-          null,
-          this.i18nService.t("couldNotChargeCardPayInvoice"),
-          { timeout: 10000 },
-        );
-        // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        this.router.navigate(["../billing"], { relativeTo: this.activatedRoute });
-      } else {
-        this.platformUtilsService.showToast(
-          "success",
-          null,
-          this.i18nService.t("adjustedStorage", request.storageGbAdjustment.toString()),
-        );
-      }
-    } catch (e) {
-      this.logService.error(e);
+  submit = async () => {
+    const request = new StorageRequest();
+    request.storageGbAdjustment = this.formGroup.value.storageAdjustment;
+    if (!this.add) {
+      request.storageGbAdjustment *= -1;
    }
-  }

-  cancel() {
-    this.onCanceled.emit();
-  }
+    let paymentFailed = false;
+    const action = async () => {
+      let response: Promise<PaymentResponse>;
+      if (this.organizationId == null) {
+        response = this.apiService.postAccountStorage(request);
+      } else {
+        response = this.organizationApiService.updateStorage(this.organizationId, request);
+      }
+      const result = await response;
+      if (result != null && result.paymentIntentClientSecret != null) {
+        try {
+          await this.paymentComponent.handleStripeCardPayment(
+            result.paymentIntentClientSecret,
+            null,
+          );
+        } catch {
+          paymentFailed = true;
+        }
+      }
+    };
+    await action();
+    this.dialogRef.close(AdjustStorageDialogResult.Adjusted);
+    if (paymentFailed) {
+      this.platformUtilsService.showToast(
+        "warning",
+        null,
+        this.i18nService.t("couldNotChargeCardPayInvoice"),
+        { timeout: 10000 },
+      );
+      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.router.navigate(["../billing"], { relativeTo: this.activatedRoute });
+    } else {
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("adjustedStorage", request.storageGbAdjustment.toString()),
+      );
+    }
+  };

  get adjustedStorageTotal(): number {
-    return this.storageGbPrice * this.storageAdjustment;
+    return this.storageGbPrice * this.formGroup.value.storageAdjustment;
  }
 }
+
+/**
+ * Strongly typed helper to open an AdjustStorageDialog
+ * @param dialogService Instance of the dialog service that will be used to open the dialog
+ * @param config Configuration for the dialog
+ */
+export function openAdjustStorageDialog(
+  dialogService: DialogService,
+  config: DialogConfig<AdjustStorageDialogData>,
+) {
+  return dialogService.open<AdjustStorageDialogResult>(AdjustStorageComponent, config);
+}