[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

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>
+      {{ "reinstateSubscription" | i18n }}
-      <span>{{ "reinstateSubscription" | i18n }}</span>
     </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="tw-flex tw-w-full" *ngIf="!selfHosted">
-    <div class="col-4">
+    <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">
+    <div class="tw-w-2/3" *ngIf="subscription">
-      <strong class="d-block mb-1">{{ "details" | i18n }}</strong>
+      <strong class="!tw-block tw-mb-1">{{ "details" | i18n }}</strong>
-      <table class="table">
+      <bit-table>
-        <tbody>
+        <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>
+        </ng-template>
-      </table>
+      </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>
+        {{ "cancelSubscription" | i18n }}
-        <span>{{ "cancelSubscription" | i18n }}</span>
       </button>
     </div>
-    <h2 class="spaced-header">{{ "storage" | i18n }}</h2>
+    <h3 bitTypography="h3" class="tw-mt-16">{{ "storage" | i18n }}</h3>
-    <p>{{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}</p>
+    <p bitTypography="body1">
-    <div class="progress">
+      {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
-      <div
+    </p>
-        class="progress-bar bg-success"
+    <bit-progress [barWidth]="storagePercentage" bgColor="success" size="default"></bit-progress>
-        role="progressbar"
-        [ngStyle]="{ width: storageProgressWidth + '%' }"
-        [attr.aria-valuenow]="storagePercentage"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      >
-        {{ storagePercentage / 100 | percent }}
-      </div>
-    </div>
     <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-      <div class="mt-3">
+      <div class="tw-mt-3">
-        <div class="d-flex">
+        <div class="tw-flex tw-gap-1">
-          <button bitButton type="button" buttonType="secondary" [bitAction]="adjustStorage(true)">
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
             {{ "addStorage" | i18n }}
           </button>
-          <button
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(false)">
-            bitButton
-            type="button"
-            buttonType="secondary"
-            class="tw-ml-1"
-            [bitAction]="adjustStorage(false)"
-          >
             {{ "removeStorage" | i18n }}
           </button>
         </div>

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

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,
   ],
 })

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>

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);
+  }
+}