From 0c2e8c15dc900ef522d93d1add30215100c21a4d Mon Sep 17 00:00:00 2001
From: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com>
Date: Thu, 9 May 2024 21:01:00 +0530
Subject: [PATCH] [PM 5012] migrate adjust subscription component (#8239)

* adjust subscription component migration

* adjust subscription component migration

* adjust subscription component migration
---
 .../adjust-subscription.component.html        | 96 +++++++++---------
 .../adjust-subscription.component.ts          | 99 ++++++++++++-------
 2 files changed, 106 insertions(+), 89 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/adjust-subscription.component.html b/apps/web/src/app/billing/organizations/adjust-subscription.component.html
index f0200da638..9fe8d20540 100644
--- a/apps/web/src/app/billing/organizations/adjust-subscription.component.html
+++ b/apps/web/src/app/billing/organizations/adjust-subscription.component.html
@@ -1,65 +1,57 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-  <div>
-    <div class="row">
-      <div class="form-group col-8">
-        <label for="newSeatCount">{{ "subscriptionSeats" | i18n }}</label>
-        <input
-          id="newSeatCount"
-          class="form-control"
-          type="number"
-          name="NewSeatCount"
-          [(ngModel)]="newSeatCount"
-          min="0"
-          step="1"
-          required
-        />
-        <small class="d-block text-muted mb-4">
+<form [formGroup]="adjustSubscriptionForm" [bitSubmit]="submit">
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+    <div class="tw-col-span-8">
+      <bit-form-field>
+        <bit-label>{{ "subscriptionSeats" | i18n }}</bit-label>
+        <input bitInput formControlName="newSeatCount" type="number" min="0" step="1" />
+        <bit-hint>
           <strong>{{ "total" | i18n }}:</strong> {{ additionalSeatCount || 0 }} &times;
           {{ seatPrice | currency: "$" }} = {{ adjustedSeatTotal | currency: "$" }} /
-          {{ interval | i18n }}
-        </small>
-      </div>
+          {{ interval | i18n }}</bit-hint
+        >
+      </bit-form-field>
     </div>
-    <div class="row mb-4">
-      <div class="form-group col-sm">
-        <div class="form-check">
-          <input
-            id="limitSubscription"
-            class="form-check-input"
-            type="checkbox"
-            name="LimitSubscription"
-            [(ngModel)]="limitSubscription"
-            (change)="limitSubscriptionChanged()"
-          />
-          <label for="limitSubscription">{{ "limitSubscription" | i18n }}</label>
-        </div>
-        <small class="d-block text-muted">{{ "limitSubscriptionDesc" | i18n }}</small>
-      </div>
-    </div>
-    <div class="row mb-4" [hidden]="!limitSubscription">
-      <div class="form-group col-sm">
-        <label for="maxAutoscaleSeats">{{ "maxSeatLimit" | i18n }}</label>
+  </div>
+  <div>
+    <bit-form-control>
+      <input
+        bitCheckbox
+        formControlName="limitSubscription"
+        type="checkbox"
+        (change)="limitSubscriptionChanged()"
+      />
+      <bit-label>{{ "limitSubscription" | i18n }}</bit-label>
+      <bit-hint> {{ "limitSubscriptionDesc" | i18n }}</bit-hint>
+    </bit-form-control>
+  </div>
+  <div
+    class="tw-grid tw-grid-cols-12 tw-gap-4 tw-mb-4"
+    [hidden]="!adjustSubscriptionForm.value.limitSubscription"
+  >
+    <div class="tw-col-span-8">
+      <bit-form-field>
+        <bit-label>{{ "maxSeatLimit" | i18n }}</bit-label>
         <input
-          id="maxAutoscaleSeats"
-          class="form-control col-8"
+          bitInput
+          formControlName="newMaxSeats"
           type="number"
-          name="MaxAutoscaleSeats"
-          [(ngModel)]="newMaxSeats"
-          [min]="newSeatCount == null ? 1 : newSeatCount"
+          [min]="
+            adjustSubscriptionForm.value.newSeatCount == null
+              ? 1
+              : adjustSubscriptionForm.value.newSeatCount
+          "
           step="1"
-          [required]="limitSubscription"
         />
-        <small class="d-block text-muted">
+        <bit-hint>
           <strong>{{ "maxSeatCost" | i18n }}:</strong> {{ additionalMaxSeatCount || 0 }} &times;
           {{ seatPrice | currency: "$" }} = {{ maxSeatTotal | currency: "$" }} /
-          {{ interval | i18n }}
-        </small>
-      </div>
+          {{ interval | i18n }}</bit-hint
+        >
+      </bit-form-field>
     </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>{{ "save" | i18n }}</span>
-    </button>
   </div>
+  <button bitButton buttonType="primary" bitFormButton type="submit">
+    {{ "save" | i18n }}
+  </button>
 </form>
 <app-payment [showMethods]="false"></app-payment>
diff --git a/apps/web/src/app/billing/organizations/adjust-subscription.component.ts b/apps/web/src/app/billing/organizations/adjust-subscription.component.ts
index 4290a1281b..b843c79cb9 100644
--- a/apps/web/src/app/billing/organizations/adjust-subscription.component.ts
+++ b/apps/web/src/app/billing/organizations/adjust-subscription.component.ts
@@ -1,77 +1,102 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { Subject, takeUntil } from "rxjs";
 
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { OrganizationSubscriptionUpdateRequest } from "@bitwarden/common/billing/models/request/organization-subscription-update.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";
 
 @Component({
   selector: "app-adjust-subscription",
   templateUrl: "adjust-subscription.component.html",
 })
-export class AdjustSubscription {
+export class AdjustSubscription implements OnInit, OnDestroy {
   @Input() organizationId: string;
   @Input() maxAutoscaleSeats: number;
   @Input() currentSeatCount: number;
   @Input() seatPrice = 0;
   @Input() interval = "year";
   @Output() onAdjusted = new EventEmitter();
+  private destroy$ = new Subject<void>();
 
-  formPromise: Promise<void>;
-  limitSubscription: boolean;
-  newSeatCount: number;
-  newMaxSeats: number;
-
+  adjustSubscriptionForm = this.formBuilder.group({
+    newSeatCount: [0, [Validators.min(0)]],
+    limitSubscription: [false],
+    newMaxSeats: [0, [Validators.min(0)]],
+  });
+  get limitSubscription(): boolean {
+    return this.adjustSubscriptionForm.value.limitSubscription;
+  }
   constructor(
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private logService: LogService,
     private organizationApiService: OrganizationApiServiceAbstraction,
+    private formBuilder: FormBuilder,
   ) {}
 
   ngOnInit() {
-    this.limitSubscription = this.maxAutoscaleSeats != null;
-    this.newSeatCount = this.currentSeatCount;
-    this.newMaxSeats = this.maxAutoscaleSeats;
+    this.adjustSubscriptionForm.patchValue({
+      newSeatCount: this.currentSeatCount,
+      limitSubscription: this.maxAutoscaleSeats != null,
+      newMaxSeats: this.maxAutoscaleSeats,
+    });
+    this.adjustSubscriptionForm
+      .get("limitSubscription")
+      .valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe((value: boolean) => {
+        if (value) {
+          this.adjustSubscriptionForm
+            .get("newMaxSeats")
+            .addValidators([
+              Validators.min(
+                this.adjustSubscriptionForm.value.newSeatCount == null
+                  ? 1
+                  : this.adjustSubscriptionForm.value.newSeatCount,
+              ),
+              Validators.required,
+            ]);
+        }
+        this.adjustSubscriptionForm.get("newMaxSeats").updateValueAndValidity();
+      });
   }
 
-  async submit() {
-    try {
-      const request = new OrganizationSubscriptionUpdateRequest(
-        this.additionalSeatCount,
-        this.newMaxSeats,
-      );
-      this.formPromise = this.organizationApiService.updatePasswordManagerSeats(
-        this.organizationId,
-        request,
-      );
-
-      await this.formPromise;
-
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("subscriptionUpdated"),
-      );
-    } catch (e) {
-      this.logService.error(e);
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+  submit = async () => {
+    this.adjustSubscriptionForm.markAllAsTouched();
+    if (this.adjustSubscriptionForm.invalid) {
+      return;
     }
+    const request = new OrganizationSubscriptionUpdateRequest(
+      this.additionalSeatCount,
+      this.adjustSubscriptionForm.value.newMaxSeats,
+    );
+    await this.organizationApiService.updatePasswordManagerSeats(this.organizationId, request);
+
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("subscriptionUpdated"));
+
     this.onAdjusted.emit();
-  }
+  };
 
   limitSubscriptionChanged() {
-    if (!this.limitSubscription) {
-      this.newMaxSeats = null;
+    if (!this.adjustSubscriptionForm.value.limitSubscription) {
+      this.adjustSubscriptionForm.value.newMaxSeats = null;
     }
   }
 
   get additionalSeatCount(): number {
-    return this.newSeatCount ? this.newSeatCount - this.currentSeatCount : 0;
+    return this.adjustSubscriptionForm.value.newSeatCount
+      ? this.adjustSubscriptionForm.value.newSeatCount - this.currentSeatCount
+      : 0;
   }
 
   get additionalMaxSeatCount(): number {
-    return this.newMaxSeats ? this.newMaxSeats - this.currentSeatCount : 0;
+    return this.adjustSubscriptionForm.value.newMaxSeats
+      ? this.adjustSubscriptionForm.value.newMaxSeats - this.currentSeatCount
+      : 0;
   }
 
   get adjustedSeatTotal(): number {