[PM-5011][PM-7284] migrate user subscription along with update license dialog (#8659)

* migrate user subscription along with update license dialog * migrate user subscription along with update license dialog
2024-11-24 12:06:15 +01:00 · 2024-05-28 21:23:54 +05:30 · 2024-05-28 21:23:54 +05:30 · 1b5faae7c3
commit 1b5faae7c3
parent 49b59840a8
5 changed files with 118 additions and 74 deletions
--- a/apps/web/src/app/billing/individual/user-subscription.component.html
+++ b/apps/web/src/app/billing/individual/user-subscription.component.html
@ -1,10 +1,10 @@
 <ng-container *ngIf="!firstLoaded && loading">
  <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="sub">
  <bit-callout
@ -19,19 +19,17 @@
    title="{{ 'pendingCancellation' | i18n }}"
    *ngIf="subscriptionMarkedForCancel"
  >
-    <p>{{ "subscriptionPendingCanceled" | i18n }}</p>
+    <p bitTypography="body1">{{ "subscriptionPendingCanceled" | i18n }}</p>
    <button
      bitButton
      type="button"
      buttonType="secondary"
      #reinstateBtn
-      class="btn-submit"
      (click)="reinstate()"
      [appApiAction]="reinstatePromise"
      [disabled]="$any(reinstateBtn).loading"
    >
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>{{ "reinstateSubscription" | i18n }}</span>
+      {{ "reinstateSubscription" | i18n }}
    </button>
  </bit-callout>
  <dl *ngIf="selfHosted">
@ -39,12 +37,12 @@
    <dd *ngIf="sub.expiration">{{ sub.expiration | date: "mediumDate" }}</dd>
    <dd *ngIf="!sub.expiration">{{ "neverExpires" | i18n }}</dd>
  </dl>
-  <div class="row" *ngIf="!selfHosted">
-    <div class="col-4">
+  <div class="tw-flex tw-w-full" *ngIf="!selfHosted">
+    <div class="tw-w-1/3">
      <dl>
        <dt>{{ "status" | i18n }}</dt>
        <dd>
-          <span class="text-capitalize">{{ (subscription && subscription.status) || "-" }}</span>
+          <span class="tw-capitalize">{{ (subscription && subscription.status) || "-" }}</span>
          <span bitBadge variant="warning" *ngIf="subscriptionMarkedForCancel">{{
            "pendingCancellation" | i18n
          }}</span>
@ -61,19 +59,19 @@
        </dd>
      </dl>
    </div>
-    <div class="col-8" *ngIf="subscription">
-      <strong class="d-block mb-1">{{ "details" | i18n }}</strong>
-      <table class="table">
-        <tbody>
+    <div class="tw-w-2/3" *ngIf="subscription">
+      <strong class="!tw-block tw-mb-1">{{ "details" | i18n }}</strong>
+      <bit-table>
+        <ng-template body>
          <tr *ngFor="let i of subscription.items">
-            <td>
+            <td bitCell>
              {{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} @
              {{ i.amount | currency: "$" }}
            </td>
-            <td>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
+            <td bitCell>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
          </tr>
-        </tbody>
-      </table>
+        </ng-template>
+      </bit-table>
    </div>
  </div>
  <ng-container *ngIf="selfHosted">
@ -91,27 +89,9 @@
        {{ "launchCloudSubscription" | i18n }}
      </a>
    </div>
-    <div class="card mt-3" *ngIf="showUpdateLicense">
-      <div class="card-body">
-        <button
-          type="button"
-          class="close"
-          appA11yTitle="{{ 'cancel' | i18n }}"
-          (click)="closeUpdateLicense(false)"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <h3 class="card-body-header">{{ "updateLicense" | i18n }}</h3>
-        <app-update-license
-          (onUpdated)="closeUpdateLicense(true)"
-          (onCanceled)="closeUpdateLicense(false)"
-        >
-        </app-update-license>
-      </div>
-    </div>
  </ng-container>
  <ng-container *ngIf="!selfHosted">
-    <div class="d-flex">
+    <div class="tw-flex tw-justify-between">
      <button
        bitButton
        type="button"
@ -126,43 +106,27 @@
        #cancelBtn
        type="button"
        buttonType="danger"
-        class="btn-submit tw-ml-auto"
+        class="tw-ml-auto"
        (click)="cancelSubscription()"
        [appApiAction]="cancelPromise"
        [disabled]="$any(cancelBtn).loading"
        *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
      >
-        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-        <span>{{ "cancelSubscription" | i18n }}</span>
+        {{ "cancelSubscription" | i18n }}
      </button>
    </div>
-    <h2 class="spaced-header">{{ "storage" | i18n }}</h2>
-    <p>{{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}</p>
-    <div class="progress">
-      <div
-        class="progress-bar bg-success"
-        role="progressbar"
-        [ngStyle]="{ width: storageProgressWidth + '%' }"
-        [attr.aria-valuenow]="storagePercentage"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      >
-        {{ storagePercentage / 100 | percent }}
-      </div>
-    </div>
+    <h3 bitTypography="h3" class="tw-mt-16">{{ "storage" | i18n }}</h3>
+    <p bitTypography="body1">
+      {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
+    </p>
+    <bit-progress [barWidth]="storagePercentage" bgColor="success" size="default"></bit-progress>
    <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-      <div class="mt-3">
-        <div class="d-flex">
-          <button bitButton type="button" buttonType="secondary" [bitAction]="adjustStorage(true)">
+      <div class="tw-mt-3">
+        <div class="tw-flex tw-gap-1">
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
            {{ "addStorage" | i18n }}
          </button>
-          <button
-            bitButton
-            type="button"
-            buttonType="secondary"
-            class="tw-ml-1"
-            [bitAction]="adjustStorage(false)"
-          >
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(false)">
            {{ "removeStorage" | i18n }}
          </button>
        </div>
--- a/apps/web/src/app/billing/individual/user-subscription.component.ts
+++ b/apps/web/src/app/billing/individual/user-subscription.component.ts
@ -20,6 +20,10 @@ import {
  OffboardingSurveyDialogResultType,
  openOffboardingSurvey,
 } from "../shared/offboarding-survey.component";
+import {
+  UpdateLicenseDialogComponent,
+  UpdateLicenseDialogResult,
+} from "../shared/update-license-dialog.component";

@Component({
  templateUrl: "user-subscription.component.html",
@ -131,21 +135,16 @@ export class UserSubscriptionComponent implements OnInit {
    });
  }

-  updateLicense() {
+  updateLicense = async () => {
    if (this.loading) {
      return;
    }
-    this.showUpdateLicense = true;
-  }
-
-  closeUpdateLicense(load: boolean) {
-    this.showUpdateLicense = 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();
-    }
+    const dialogRef = UpdateLicenseDialogComponent.open(this.dialogService);
+    const result = await lastValueFrom(dialogRef.closed);
+    if (result === UpdateLicenseDialogResult.Updated) {
+      await this.load();
    }
+  };

  adjustStorage = (add: boolean) => {
    return async () => {
--- a/apps/web/src/app/billing/shared/billing-shared.module.ts
+++ b/apps/web/src/app/billing/shared/billing-shared.module.ts
@ -12,6 +12,7 @@ import { PaymentMethodComponent } from "./payment-method.component";
 import { PaymentComponent } from "./payment.component";
 import { SecretsManagerSubscribeComponent } from "./sm-subscribe.component";
 import { TaxInfoComponent } from "./tax-info.component";
+import { UpdateLicenseDialogComponent } from "./update-license-dialog.component";
 import { UpdateLicenseComponent } from "./update-license.component";

@NgModule({
@ -24,6 +25,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
    PaymentMethodComponent,
    SecretsManagerSubscribeComponent,
    UpdateLicenseComponent,
+    UpdateLicenseDialogComponent,
    OffboardingSurveyComponent,
  ],
  exports: [
@ -34,6 +36,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
    BillingHistoryComponent,
    SecretsManagerSubscribeComponent,
    UpdateLicenseComponent,
+    UpdateLicenseDialogComponent,
    OffboardingSurveyComponent,
  ],
 })
--- a/apps/web/src/app/billing/shared/update-license-dialog.component.html
+++ b/apps/web/src/app/billing/shared/update-license-dialog.component.html
@ -0,0 +1,40 @@
+<form [formGroup]="updateLicenseForm" [bitSubmit]="submitLicenseDialog">
+  <bit-dialog dialogSize="default" [title]="'updateLicense' | i18n">
+    <ng-container bitDialogContent>
+      <bit-form-field>
+        <bit-label>{{ "licenseFile" | i18n }}</bit-label>
+        <div>
+          <button bitButton type="button" buttonType="secondary" (click)="fileSelector.click()">
+            {{ "chooseFile" | i18n }}
+          </button>
+          {{ licenseFile ? licenseFile.name : ("noFileChosen" | i18n) }}
+        </div>
+        <input
+          bitInput
+          #fileSelector
+          type="file"
+          formControlName="file"
+          (change)="setSelectedFile($event)"
+          hidden
+        />
+        <bit-hint>{{ "licenseFileDesc" | i18n: "bitwarden_premium_license.json" }}</bit-hint>
+      </bit-form-field>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button type="submit" buttonType="primary" bitButton bitFormButton>
+        {{ "submit" | i18n }}
+      </button>
+      <button
+        bitButton
+        *ngIf="showCancel"
+        bitFormButton
+        buttonType="secondary"
+        type="button"
+        bitDialogClose
+        [bitAction]="cancel"
+      >
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>
--- a/apps/web/src/app/billing/shared/update-license-dialog.component.ts
+++ b/apps/web/src/app/billing/shared/update-license-dialog.component.ts
@ -0,0 +1,38 @@
+import { Component } from "@angular/core";
+import { FormBuilder } 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 { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService } from "@bitwarden/components";
+
+import { UpdateLicenseComponent } from "./update-license.component";
+
+export enum UpdateLicenseDialogResult {
+  Updated = "updated",
+  Cancelled = "cancelled",
+}
+@Component({
+  templateUrl: "update-license-dialog.component.html",
+})
+export class UpdateLicenseDialogComponent extends UpdateLicenseComponent {
+  constructor(
+    apiService: ApiService,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    organizationApiService: OrganizationApiServiceAbstraction,
+    formBuilder: FormBuilder,
+  ) {
+    super(apiService, i18nService, platformUtilsService, organizationApiService, formBuilder);
+  }
+  async submitLicense() {
+    await this.submit();
+  }
+  submitLicenseDialog = async () => {
+    await this.submitLicense();
+  };
+  static open(dialogService: DialogService) {
+    return dialogService.open<UpdateLicenseDialogResult>(UpdateLicenseDialogComponent);
+  }
+}