[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>
-      <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>