[AC-2960] Create new adjust-storage-dialog component without payment.component (#10793)

* Add adjust-storage-dialog-v2.component

* (No Logic) Rename old adjust-storage.component to adjust-storage-dialog.component

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

* Use adjust-storage-dialog-v2.component in adjustStorage methods when FF is on

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

@@ -0,0 +1,34 @@
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog [title]="title">
+    <ng-container bitDialogContent>
+      <p bitTypography="body1">{{ body }}</p>
+      <div class="tw-grid two-grid-cols-12">
+        <bit-form-field class="tw-col-span-7">
+          <bit-label>{{ storageFieldLabel }}</bit-label>
+          <input bitInput type="number" formControlName="storage" />
+          <bit-hint *ngIf="dialogParams.type === 'Add'">
+            <!-- Total: 10 GB × $0.50 = $5.00 /month -->
+            <strong>{{ "total" | i18n }}</strong>
+            {{ this.formGroup.value.storage }} GB &times; {{ this.price | currency: "$" }} =
+            {{ this.price * this.formGroup.value.storage | currency: "$" }} /
+            {{ this.cadence | i18n }}
+          </bit-hint>
+        </bit-form-field>
+      </div>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary">
+        {{ "submit" | i18n }}
+      </button>
+      <button
+        type="button"
+        bitButton
+        bitFormButton
+        buttonType="secondary"
+        [bitDialogClose]="ResultType.Closed"
+      >
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/billing/shared/adjust-storage-dialog/adjust-storage-dialog-v2.component.ts

@@ -0,0 +1,104 @@
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
+import { StorageRequest } from "@bitwarden/common/models/request/storage.request";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { DialogService, ToastService } from "@bitwarden/components";
+
+export interface AdjustStorageDialogV2Params {
+  price: number;
+  cadence: "month" | "year";
+  type: "Add" | "Remove";
+  organizationId?: string;
+}
+
+export enum AdjustStorageDialogV2ResultType {
+  Submitted = "submitted",
+  Closed = "closed",
+}
+
+@Component({
+  templateUrl: "./adjust-storage-dialog-v2.component.html",
+})
+export class AdjustStorageDialogV2Component {
+  protected formGroup = new FormGroup({
+    storage: new FormControl<number>(0, [
+      Validators.required,
+      Validators.min(0),
+      Validators.max(99),
+    ]),
+  });
+
+  protected organizationId?: string;
+  protected price: number;
+  protected cadence: "month" | "year";
+
+  protected title: string;
+  protected body: string;
+  protected storageFieldLabel: string;
+
+  protected ResultType = AdjustStorageDialogV2ResultType;
+
+  constructor(
+    private apiService: ApiService,
+    @Inject(DIALOG_DATA) protected dialogParams: AdjustStorageDialogV2Params,
+    private dialogRef: DialogRef<AdjustStorageDialogV2ResultType>,
+    private i18nService: I18nService,
+    private organizationApiService: OrganizationApiServiceAbstraction,
+    private toastService: ToastService,
+  ) {
+    this.price = this.dialogParams.price;
+    this.cadence = this.dialogParams.cadence;
+    this.organizationId = this.dialogParams.organizationId;
+    switch (this.dialogParams.type) {
+      case "Add":
+        this.title = this.i18nService.t("addStorage");
+        this.body = this.i18nService.t("storageAddNote");
+        this.storageFieldLabel = this.i18nService.t("gbStorageAdd");
+        break;
+      case "Remove":
+        this.title = this.i18nService.t("removeStorage");
+        this.body = this.i18nService.t("storageRemoveNote");
+        this.storageFieldLabel = this.i18nService.t("gbStorageRemove");
+        break;
+    }
+  }
+
+  submit = async () => {
+    const request = new StorageRequest();
+    switch (this.dialogParams.type) {
+      case "Add":
+        request.storageGbAdjustment = this.formGroup.value.storage;
+        break;
+      case "Remove":
+        request.storageGbAdjustment = this.formGroup.value.storage * -1;
+        break;
+    }
+
+    if (this.organizationId) {
+      await this.organizationApiService.updateStorage(this.organizationId, request);
+    } else {
+      await this.apiService.postAccountStorage(request);
+    }
+
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("adjustedStorage", request.storageGbAdjustment.toString()),
+    });
+
+    this.dialogRef.close(this.ResultType.Submitted);
+  };
+
+  static open = (
+    dialogService: DialogService,
+    dialogConfig: DialogConfig<AdjustStorageDialogV2Params>,
+  ) =>
+    dialogService.open<AdjustStorageDialogV2ResultType>(
+      AdjustStorageDialogV2Component,
+      dialogConfig,
+    );
+}

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

@@ -12,7 +12,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
-import { PaymentComponent } from "./payment/payment.component";
+import { PaymentComponent } from "../payment/payment.component";
 
 export interface AdjustStorageDialogData {
   storageGbPrice: number;
@@ -27,9 +27,9 @@ export enum AdjustStorageDialogResult {
 }
 
 @Component({
-  templateUrl: "adjust-storage.component.html",
+  templateUrl: "adjust-storage-dialog.component.html",
 })
-export class AdjustStorageComponent {
+export class AdjustStorageDialogComponent {
   storageGbPrice: number;
   add: boolean;
   organizationId: string;
@@ -126,5 +126,5 @@ export function openAdjustStorageDialog(
   dialogService: DialogService,
   config: DialogConfig<AdjustStorageDialogData>,
 ) {
-  return dialogService.open<AdjustStorageDialogResult>(AdjustStorageComponent, config);
+  return dialogService.open<AdjustStorageDialogResult>(AdjustStorageDialogComponent, config);
 }

apps/web/src/app/billing/shared/billing-shared.module.ts

@@ -6,7 +6,8 @@ import { SharedModule } from "../../shared";
 import { AddCreditDialogComponent } from "./add-credit-dialog.component";
 import { AdjustPaymentDialogV2Component } from "./adjust-payment-dialog/adjust-payment-dialog-v2.component";
 import { AdjustPaymentDialogComponent } from "./adjust-payment-dialog/adjust-payment-dialog.component";
-import { AdjustStorageComponent } from "./adjust-storage.component";
+import { AdjustStorageDialogV2Component } from "./adjust-storage-dialog/adjust-storage-dialog-v2.component";
+import { AdjustStorageDialogComponent } from "./adjust-storage-dialog/adjust-storage-dialog.component";
 import { BillingHistoryComponent } from "./billing-history.component";
 import { OffboardingSurveyComponent } from "./offboarding-survey.component";
 import { PaymentV2Component } from "./payment/payment-v2.component";
@@ -30,7 +31,7 @@ import { VerifyBankAccountComponent } from "./verify-bank-account/verify-bank-ac
   declarations: [
     AddCreditDialogComponent,
     AdjustPaymentDialogComponent,
-    AdjustStorageComponent,
+    AdjustStorageDialogComponent,
     BillingHistoryComponent,
     PaymentMethodComponent,
     SecretsManagerSubscribeComponent,
@@ -38,12 +39,13 @@ import { VerifyBankAccountComponent } from "./verify-bank-account/verify-bank-ac
     UpdateLicenseDialogComponent,
     OffboardingSurveyComponent,
     AdjustPaymentDialogV2Component,
+    AdjustStorageDialogV2Component,
   ],
   exports: [
     SharedModule,
     PaymentComponent,
     TaxInfoComponent,
-    AdjustStorageComponent,
+    AdjustStorageDialogComponent,
     BillingHistoryComponent,
     SecretsManagerSubscribeComponent,
     UpdateLicenseComponent,