[AC-1486] Feature: SM Billing Round 1 (#5747)

* [AC-1423] Update organization subscription cloud page (#5614)

* [AC-1423] Add ProgressModule to shared.module.ts

* [AC-1423] Update cloud subscription page styles

- Remove bootstrap styles
- Use CL components where applicable
- Use CL typography directives
- Update heading levels to prepare for new SM sections

* [AC-1423] Add usePasswordManager boolean to organization domain

* [AC-1423] Introduce BitwardenProductType enum

* [AC-1423] Update Organization subscription line items

- Add product type prefix
- Indent addon services like additional storage and service accounts
- Show line items for free plans

* [AC-1420] Add Secrets Manager subscribe component (#5617)

* [AC-1418] Add secrets manager manage subscription component (#5661)

* add additional properties (#5743)

* Allow autoscale limits to be removed, update naming (#5781)

* [AC-1488] Store Organization.SmServiceAccounts as total not additional (#5784)

* Allow autoscale limits to be removed, update naming

* Display additional service accounts only

* [AC-1531] Fix SM subscribe component not showing in free org billing tab (#5848)

---------

Co-authored-by: Shane Melton <smelton@bitwarden.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
Co-authored-by: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Co-authored-by: Rui Tome <rtome@bitwarden.com>

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html

@@ -1,5 +1,5 @@
-<div class="page-header">
-  <h1>
+<div class="tw-mb-2">
+  <h1 bitTypography="h1">
     {{ "subscription" | i18n }}
     <small *ngIf="firstLoaded && loading">
       <i
@@ -7,7 +7,7 @@
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </small>
   </h1>
 </div>
@@ -21,7 +21,7 @@
   [providerName]="userOrg.providerName"
 ></app-org-subscription-hidden>
 
-<ng-container *ngIf="sub">
+<ng-container *ngIf="sub && firstLoaded">
   <bit-callout
     type="warning"
     title="{{ 'canceled' | i18n }}"
@@ -40,92 +40,111 @@
     </button>
   </bit-callout>
 
-  <div class="row">
-    <div class="col-4">
-      <dl>
-        <dt>{{ "billingPlan" | i18n }}</dt>
-        <dd>{{ sub.plan.name }}</dd>
-        <ng-container *ngIf="subscription">
-          <dt>{{ "status" | i18n }}</dt>
-          <dd>
-            <span class="text-capitalize">{{
-              isSponsoredSubscription ? "sponsored" : subscription.status || "-"
-            }}</span>
-            <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
-              "pendingCancellation" | i18n
-            }}</span>
-          </dd>
-          <dt [ngClass]="{ 'tw-text-danger': isExpired }">
-            {{ "subscriptionExpiration" | i18n }}
-          </dt>
-          <dd [ngClass]="{ 'tw-text-danger': isExpired }">
-            {{ nextInvoice ? (nextInvoice.date | date : "mediumDate") : "-" }}
-          </dd>
-        </ng-container>
-      </dl>
-    </div>
-    <ng-container *ngIf="userOrg.canEditSubscription">
-      <div class="col-8" *ngIf="subscription">
-        <strong class="d-block mb-1">{{ "details" | i18n }}</strong>
-        <table class="table">
-          <tbody>
-            <tr *ngFor="let i of subscription.items">
-              <td>
+  <dl class="tw-grid tw-grid-flow-col tw-grid-rows-2">
+    <dt>{{ "billingPlan" | i18n }}</dt>
+    <dd>{{ sub.plan.name }}</dd>
+    <ng-container *ngIf="subscription">
+      <dt>{{ "status" | i18n }}</dt>
+      <dd>
+        <span class="tw-capitalize">{{
+          isSponsoredSubscription ? "sponsored" : subscription.status || "-"
+        }}</span>
+        <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
+          "pendingCancellation" | i18n
+        }}</span>
+      </dd>
+      <dt [ngClass]="{ 'tw-text-danger': isExpired }">
+        {{ "subscriptionExpiration" | i18n }}
+      </dt>
+      <dd [ngClass]="{ 'tw-text-danger': isExpired }">
+        {{ nextInvoice ? (nextInvoice.date | date : "mediumDate") : "-" }}
+      </dd>
+    </ng-container>
+  </dl>
+  <ng-container *ngIf="userOrg.canEditSubscription">
+    <div class="tw-flex-col">
+      <strong class="tw-block tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300">{{
+        "details" | i18n
+      }}</strong>
+      <bit-table>
+        <ng-template body>
+          <ng-container *ngIf="subscription">
+            <tr bitRow *ngFor="let i of lineItems">
+              <td bitCell [ngClass]="{ 'tw-pl-20': i.addonSubscriptionItem }">
+                <span *ngIf="!i.addonSubscriptionItem"
+                  >{{ productName(i.bitwardenProduct) }} -</span
+                >
                 {{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} @
                 {{ i.amount | currency : "$" }}
               </td>
-              <td>{{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}</td>
+              <td bitCell class="tw-text-right">
+                {{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}
+              </td>
             </tr>
-          </tbody>
-        </table>
-      </div>
-    </ng-container>
-  </div>
-  <ng-container *ngIf="userOrg.canEditSubscription">
-    <button
-      bitButton
-      buttonType="secondary"
-      type="button"
-      (click)="changePlan()"
-      *ngIf="showChangePlanButton"
-    >
-      {{ "changeBillingPlan" | i18n }}
-    </button>
-    <app-change-plan
-      [organizationId]="organizationId"
-      (onChanged)="closeChangePlan()"
-      (onCanceled)="closeChangePlan()"
-      *ngIf="showChangePlan"
-    ></app-change-plan>
+          </ng-container>
+          <ng-container *ngIf="userOrg.isFreeOrg">
+            <tr bitRow *ngIf="userOrg.usePasswordManager">
+              <td bitCell>{{ "passwordManager" | i18n }} - {{ "freeOrganization" | i18n }}</td>
+              <td bitCell class="tw-text-right">{{ "free" | i18n }}</td>
+            </tr>
+            <tr bitRow *ngIf="userOrg.useSecretsManager">
+              <td bitCell>{{ "secretsManager" | i18n }} - {{ "freeOrganization" | i18n }}</td>
+              <td bitCell class="tw-text-right">{{ "free" | i18n }}</td>
+            </tr>
+          </ng-container>
+        </ng-template>
+      </bit-table>
+    </div>
   </ng-container>
 
   <ng-container *ngIf="userOrg.canEditSubscription">
-    <sm-enroll
-      *ngIf="isAdmin"
-      [enabled]="sub?.useSecretsManager"
-      [organizationId]="organizationId"
-    ></sm-enroll>
+    <div class="tw-mt-7">
+      <button
+        bitButton
+        buttonType="secondary"
+        type="button"
+        (click)="changePlan()"
+        *ngIf="showChangePlanButton"
+      >
+        {{ "changeBillingPlan" | i18n }}
+      </button>
+      <app-change-plan
+        [organizationId]="organizationId"
+        (onChanged)="closeChangePlan()"
+        (onCanceled)="closeChangePlan()"
+        *ngIf="showChangePlan"
+      ></app-change-plan>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="showSecretsManagerSubscribe">
+    <div class="tw-mt-7">
+      <sm-subscribe-standalone
+        [plan]="sub.secretsManagerPlan"
+        [organization]="userOrg"
+        (onSubscribe)="subscriptionAdjusted()"
+      ></sm-subscribe-standalone>
+    </div>
   </ng-container>
 
   <ng-container *ngIf="userOrg.canEditSubscription">
-    <h2 class="spaced-header">{{ "manageSubscription" | i18n }}</h2>
-    <p class="mb-4">{{ subscriptionDesc }}</p>
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "manageSubscription" | i18n }}</h2>
+    <p bitTypography="body1">{{ subscriptionDesc }}</p>
     <ng-container
       *ngIf="
         subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel
       "
     >
-      <div class="mt-3">
-        <app-adjust-subscription
-          [seatPrice]="seatPrice"
-          [organizationId]="organizationId"
-          [interval]="billingInterval"
-          [currentSeatCount]="seats"
-          [maxAutoscaleSeats]="maxAutoscaleSeats"
-          (onAdjusted)="subscriptionAdjusted()"
-        >
-        </app-adjust-subscription>
-      </div>
+      <h3 bitTypography="h3" class="tw-mt-7">{{ "passwordManager" | i18n }}</h3>
+      <app-adjust-subscription
+        [seatPrice]="seatPrice"
+        [organizationId]="organizationId"
+        [interval]="billingInterval"
+        [currentSeatCount]="seats"
+        [maxAutoscaleSeats]="maxAutoscaleSeats"
+        (onAdjusted)="subscriptionAdjusted()"
+      >
+      </app-adjust-subscription>
     </ng-container>
     <button
       bitButton
@@ -136,33 +155,18 @@
     >
       {{ "removeSponsorship" | i18n }}
     </button>
-    <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>
+    <h4 bitTypography="h4" class="tw-mt-9">{{ "storage" | i18n }}</h4>
+    <p bitTypography="body1">
+      {{ "subscriptionStorage" | i18n : sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
+    </p>
+    <bit-progress [barWidth]="storagePercentage" bgColor="success"></bit-progress>
     <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-      <div class="mt-3">
-        <div class="d-flex" *ngIf="!showAdjustStorage">
+      <div class="tw-mt-3">
+        <div class="tw-flex tw-space-x-2" *ngIf="!showAdjustStorage">
           <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(true)">
             {{ "addStorage" | i18n }}
           </button>
-          <button
-            bitButton
-            buttonType="secondary"
-            type="button"
-            class="ml-1"
-            (click)="adjustStorage(false)"
-          >
+          <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(false)">
             {{ "removeStorage" | i18n }}
           </button>
         </div>
@@ -177,13 +181,21 @@
         ></app-adjust-storage>
       </div>
     </ng-container>
+    <ng-container *ngIf="showAdjustSecretsManager">
+      <h3 bitTypography="h3" class="tw-mt-9">{{ "secretsManager" | i18n }}</h3>
+      <app-sm-adjust-subscription
+        [organizationId]="organizationId"
+        [options]="smOptions"
+        (onAdjusted)="subscriptionAdjusted()"
+      ></app-sm-adjust-subscription>
+    </ng-container>
   </ng-container>
 
-  <h2 class="spaced-header">{{ "selfHostingTitle" | i18n }}</h2>
-  <p class="mb-4">
+  <h2 bitTypography="h2" class="tw-mt-7">{{ "selfHostingTitle" | i18n }}</h2>
+  <p bitTypography="body1">
     {{ "selfHostingEnterpriseOrganizationSectionCopy" | i18n }}
   </p>
-  <div class="d-flex">
+  <div class="tw-flex tw-space-x-2">
     <button
       bitButton
       buttonType="secondary"
@@ -198,14 +210,13 @@
       bitButton
       buttonType="secondary"
       type="button"
-      class="ml-1"
       (click)="manageBillingSync()"
       *ngIf="canManageBillingSync"
     >
       {{ (hasBillingSyncToken ? "manageBillingSync" : "setUpBillingSync") | i18n }}
     </button>
   </div>
-  <div class="mt-3" *ngIf="showDownloadLicense">
+  <div class="tw-mt-3" *ngIf="showDownloadLicense">
     <app-download-license
       [organizationId]="organizationId"
       (onDownloaded)="closeDownloadLicense()"
@@ -213,17 +224,16 @@
     ></app-download-license>
   </div>
   <ng-container *ngIf="userOrg.canEditSubscription">
-    <h2 class="spaced-header">{{ "additionalOptions" | i18n }}</h2>
-    <p class="mb-4">
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "additionalOptions" | i18n }}</h2>
+    <p bitTypography="body1">
       {{ "additionalOptionsDesc" | i18n }}
     </p>
-    <div class="d-flex">
+    <div class="tw-flex tw-space-x-2">
       <button
         bitButton
         buttonType="danger"
         [bitAction]="cancel"
         type="button"
-        class="ml-1"
         *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
       >
         {{ "cancelSubscription" | i18n }}