[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

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">
+        <div class="d-flex">
-          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
+          <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>

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) {
+  adjustStorage = (add: boolean) => {
-    this.adjustStorageAdd = add;
+    return async () => {
-    this.showAdjustStorage = true;
+      const dialogRef = openAdjustStorageDialog(this.dialogService, {
-  }
+        data: {
-
+          storageGbPrice: 4,
-  closeStorage(load: boolean) {
+          add: add,
-    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.
+      const result = await lastValueFrom(dialogRef.closed);
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      if (result === AdjustStorageDialogResult.Adjusted) {
-      this.load();
+        await this.load();
-    }
       }
+    };
+  };
 
   get subscriptionMarkedForCancel() {
     return (

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">
+          <div class="tw-flex tw-space-x-2">
-            <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(true)">
+            <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">

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) {
+  adjustStorage = (add: boolean) => {
-    this.adjustStorageAdd = add;
+    return async () => {
-    this.showAdjustStorage = true;
+      const dialogRef = openAdjustStorageDialog(this.dialogService, {
-  }
+        data: {
-
+          storageGbPrice: this.storageGbPrice,
-  closeStorage(load: boolean) {
+          add: add,
-    this.showAdjustStorage = false;
+          organizationId: this.organizationId,
-    if (load) {
+          interval: this.billingInterval,
-      // 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();
+      const result = await lastValueFrom(dialogRef.closed);
-    }
+      if (result === AdjustStorageDialogResult.Adjusted) {
+        await this.load();
       }
+    };
+  };
 
   removeSponsorship = async () => {
     const confirmed = await this.dialogService.openSimpleDialog({

apps/web/src/app/billing/shared/adjust-storage.component.html

@@ -1,43 +1,35 @@
-<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+<form [formGroup]="formGroup" [bitSubmit]="submit">
-  <div class="card-body">
+  <bit-dialog dialogSize="default" [title]="(add ? 'addStorage' : 'removeStorage') | i18n">
-    <button type="button" class="close" appA11yTitle="{{ 'cancel' | i18n }}" (click)="cancel()">
+    <ng-container bitDialogContent>
-      <span aria-hidden="true">&times;</span>
+      <p bitTypography="body1">{{ (add ? "storageAddNote" : "storageRemoveNote") | i18n }}</p>
-    </button>
+      <div class="tw-grid tw-grid-cols-12">
-    <h3 class="card-body-header">{{ (add ? "addStorage" : "removeStorage") | i18n }}</h3>
+        <bit-form-field class="tw-col-span-7">
-    <div class="row">
+          <bit-label>{{ (add ? "gbStorageAdd" : "gbStorageRemove") | i18n }}</bit-label>
-      <div class="form-group col-6">
+          <input bitInput type="number" formControlName="storageAdjustment" />
-        <label for="storageAdjustment">{{
+          <bit-hint *ngIf="add">
-          (add ? "gbStorageAdd" : "gbStorageRemove") | i18n
+            <strong>{{ "total" | i18n }}:</strong>
-        }}</label>
+            {{ formGroup.get("storageAdjustment").value || 0 }} GB &times;
-        <input
-          id="storageAdjustment"
-          class="form-control"
-          type="number"
-          name="StorageGbAdjustment"
-          [(ngModel)]="storageAdjustment"
-          min="0"
-          max="99"
-          step="1"
-          required
-        />
-      </div>
-    </div>
-    <div *ngIf="add" class="mb-3">
-      <strong>{{ "total" | i18n }}:</strong> {{ storageAdjustment || 0 }} GB &times;
             {{ storageGbPrice | currency: "$" }} = {{ adjustedStorageTotal | currency: "$" }} /{{
               interval | i18n
             }}
+          </bit-hint>
+        </bit-form-field>
       </div>
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+    </ng-container>
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <ng-container bitDialogFooter>
-      <span>{{ "submit" | i18n }}</span>
+      <button type="submit" bitButton bitFormButton buttonType="primary">
+        {{ "submit" | i18n }}
       </button>
-    <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
+      <button
+        type="button"
+        bitButton
+        bitFormButton
+        buttonType="secondary"
+        [bitDialogClose]="DialogResult.Cancelled"
+      >
         {{ "cancel" | i18n }}
       </button>
-    <small class="d-block text-muted mt-3">
+    </ng-container>
-      {{ (add ? "storageAddNote" : "storageRemoveNote") | i18n }}
+  </bit-dialog>
-    </small>
-  </div>
 </form>
 <app-payment [showMethods]="false"></app-payment>

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;
+  storageGbPrice: number;
-  @Input() add = true;
+  add: boolean;
-  @Input() organizationId: string;
+  organizationId: string;
-  @Input() interval = "year";
+  interval: string;
-  @Output() onAdjusted = new EventEmitter<number>();
-  @Output() onCanceled = new EventEmitter();
 
   @ViewChild(PaymentComponent, { static: true }) paymentComponent: PaymentComponent;
 
-  storageAdjustment = 0;
+  protected DialogResult = AdjustStorageDialogResult;
-  formPromise: Promise<PaymentResponse | void>;
+  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,12 +56,16 @@ 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() {
+  submit = async () => {
-    try {
     const request = new StorageRequest();
-      request.storageGbAdjustment = this.storageAdjustment;
+    request.storageGbAdjustment = this.formGroup.value.storageAdjustment;
     if (!this.add) {
       request.storageGbAdjustment *= -1;
     }
@@ -50,12 +74,9 @@ export class AdjustStorageComponent {
     const action = async () => {
       let response: Promise<PaymentResponse>;
       if (this.organizationId == null) {
-          response = this.formPromise = this.apiService.postAccountStorage(request);
+        response = this.apiService.postAccountStorage(request);
       } else {
-          response = this.formPromise = this.organizationApiService.updateStorage(
+        response = this.organizationApiService.updateStorage(this.organizationId, request);
-            this.organizationId,
-            request,
-          );
       }
       const result = await response;
       if (result != null && result.paymentIntentClientSecret != null) {
@@ -69,9 +90,8 @@ export class AdjustStorageComponent {
         }
       }
     };
-      this.formPromise = action();
+    await action();
-      await this.formPromise;
+    this.dialogRef.close(AdjustStorageDialogResult.Adjusted);
-      this.onAdjusted.emit(this.storageAdjustment);
     if (paymentFailed) {
       this.platformUtilsService.showToast(
         "warning",
@@ -89,16 +109,21 @@ export class AdjustStorageComponent {
         this.i18nService.t("adjustedStorage", request.storageGbAdjustment.toString()),
       );
     }
-    } catch (e) {
+  };
-      this.logService.error(e);
-    }
-  }
-
-  cancel() {
-    this.onCanceled.emit();
-  }
 
   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);
+}