[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-1423] Simply sort function

* [AC-1423] Remove header border

* [AC-1423] Make "Password Manager" the default fallback for product name

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>
@@ -40,47 +40,63 @@
     </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-mb-7 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>
+          <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">
     <button
       bitButton
@@ -108,24 +124,23 @@
   </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 +151,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>
@@ -179,11 +179,11 @@
     </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 +198,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 +212,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 }}

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

@@ -10,7 +10,9 @@ import { OrganizationService } from "@bitwarden/common/admin-console/abstraction
 import { OrganizationApiKeyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { PlanType } from "@bitwarden/common/billing/enums";
+import { BitwardenProductType } from "@bitwarden/common/billing/enums/bitwarden-product-type.enum";
 import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
+import { BillingSubscriptionItemResponse } from "@bitwarden/common/billing/models/response/subscription.response";
 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";
@@ -26,6 +28,7 @@ import {
 })
 export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy {
   sub: OrganizationSubscriptionResponse;
+  lineItems: BillingSubscriptionItemResponse[] = [];
   organizationId: string;
   userOrg: Organization;
   showChangePlan = false;
@@ -68,6 +71,17 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
       .subscribe();
   }
 
+  productName(product: BitwardenProductType) {
+    switch (product) {
+      case BitwardenProductType.PasswordManager:
+        return this.i18nService.t("passwordManager");
+      case BitwardenProductType.SecretsManager:
+        return this.i18nService.t("secretsManager");
+      default:
+        return this.i18nService.t("passwordManager");
+    }
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
@@ -81,6 +95,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     this.userOrg = this.organizationService.get(this.organizationId);
     if (this.userOrg.canViewSubscription) {
       this.sub = await this.organizationApiService.getSubscription(this.organizationId);
+      this.lineItems = this.sub?.subscription?.items?.sort(sortSubscriptionItems) ?? [];
     }
 
     const apiKeyResponse = await this.organizationApiService.getApiKeyInformation(
@@ -332,3 +347,23 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     return this.subscription == null && this.sub.planType === PlanType.Free && !this.showChangePlan;
   }
 }
+
+/**
+ * Helper to sort subscription items by product type and then by addon status
+ */
+function sortSubscriptionItems(
+  a: BillingSubscriptionItemResponse,
+  b: BillingSubscriptionItemResponse
+) {
+  if (a.bitwardenProduct == b.bitwardenProduct) {
+    if (a.addonSubscriptionItem == b.addonSubscriptionItem) {
+      return 0;
+    }
+    // sort addon items to the bottom
+    if (a.addonSubscriptionItem) {
+      return 1;
+    }
+    return -1;
+  }
+  return a.bitwardenProduct - b.bitwardenProduct;
+}

apps/web/src/app/billing/organizations/secrets-manager/enroll.component.html

@@ -1,6 +1,6 @@
 <form *ngIf="showSecretsManager" [formGroup]="formGroup" [bitSubmit]="submit">
-  <h2 class="spaced-header">{{ "secretsManagerBeta" | i18n }}</h2>
-  <p>{{ "secretsManagerSubscriptionDesc" | i18n }}</p>
+  <h2 bitTypography="h2" class="tw-mt-7">{{ "secretsManagerBeta" | i18n }}</h2>
+  <p bitTypography="body1">{{ "secretsManagerSubscriptionDesc" | i18n }}</p>
 
   <bit-form-control>
     <input type="checkbox" bitCheckbox formControlName="enabled" />

apps/web/src/app/shared/shared.module.ts

@@ -23,6 +23,7 @@ import {
   LinkModule,
   MenuModule,
   MultiSelectModule,
+  ProgressModule,
   RadioButtonModule,
   SelectModule,
   TableModule,
@@ -69,6 +70,7 @@ import "./locales";
     LinkModule,
     MenuModule,
     MultiSelectModule,
+    ProgressModule,
     RadioButtonModule,
     TableModule,
     TabsModule,
@@ -103,6 +105,7 @@ import "./locales";
     LinkModule,
     MenuModule,
     MultiSelectModule,
+    ProgressModule,
     RadioButtonModule,
     SelectModule,
     TableModule,

apps/web/src/locales/en/messages.json

@@ -6610,6 +6610,9 @@
   "changeKdfLoggedOutWarning": {
     "message": "Proceeding will log you out of all active sessions. You will need to log back in and complete two-step login setup. We recommend exporting your vault before changing your encryption settings to prevent data loss."
   },
+  "secretsManager": {
+    "message": "Secrets Manager"
+  },
   "secretsManagerBeta": {
     "message": "Secrets Manager Beta"
   },
@@ -6902,5 +6905,11 @@
   },
   "removeMembersWithoutMasterPasswordWarning": {
     "message": "Removing members who do not have master passwords without setting one for them may restrict access to their full account."
+  },
+  "passwordManager": {
+    "message": "Password Manager"
+  },
+  "freeOrganization": {
+    "message": "Free Organization"
   }
 }

libs/common/src/admin-console/models/data/organization.data.ts

@@ -22,6 +22,7 @@ export class OrganizationData {
   useCustomPermissions: boolean;
   useResetPassword: boolean;
   useSecretsManager: boolean;
+  usePasswordManager: boolean;
   useActivateAutofillPolicy: boolean;
   selfHost: boolean;
   usersGetPremium: boolean;
@@ -74,6 +75,7 @@ export class OrganizationData {
     this.useCustomPermissions = response.useCustomPermissions;
     this.useResetPassword = response.useResetPassword;
     this.useSecretsManager = response.useSecretsManager;
+    this.usePasswordManager = response.usePasswordManager;
     this.useActivateAutofillPolicy = response.useActivateAutofillPolicy;
     this.selfHost = response.selfHost;
     this.usersGetPremium = response.usersGetPremium;

libs/common/src/admin-console/models/domain/organization.ts

@@ -31,6 +31,7 @@ export class Organization {
   useCustomPermissions: boolean;
   useResetPassword: boolean;
   useSecretsManager: boolean;
+  usePasswordManager: boolean;
   useActivateAutofillPolicy: boolean;
   selfHost: boolean;
   usersGetPremium: boolean;
@@ -87,6 +88,7 @@ export class Organization {
     this.useCustomPermissions = obj.useCustomPermissions;
     this.useResetPassword = obj.useResetPassword;
     this.useSecretsManager = obj.useSecretsManager;
+    this.usePasswordManager = obj.usePasswordManager;
     this.useActivateAutofillPolicy = obj.useActivateAutofillPolicy;
     this.selfHost = obj.selfHost;
     this.usersGetPremium = obj.usersGetPremium;

libs/common/src/admin-console/models/response/profile-organization.response.ts

@@ -19,6 +19,7 @@ export class ProfileOrganizationResponse extends BaseResponse {
   useCustomPermissions: boolean;
   useResetPassword: boolean;
   useSecretsManager: boolean;
+  usePasswordManager: boolean;
   useActivateAutofillPolicy: boolean;
   selfHost: boolean;
   usersGetPremium: boolean;
@@ -65,6 +66,7 @@ export class ProfileOrganizationResponse extends BaseResponse {
     this.useCustomPermissions = this.getResponseProperty("UseCustomPermissions") ?? false;
     this.useResetPassword = this.getResponseProperty("UseResetPassword");
     this.useSecretsManager = this.getResponseProperty("UseSecretsManager");
+    this.usePasswordManager = this.getResponseProperty("UsePasswordManager");
     this.useActivateAutofillPolicy = this.getResponseProperty("UseActivateAutofillPolicy");
     this.selfHost = this.getResponseProperty("SelfHost");
     this.usersGetPremium = this.getResponseProperty("UsersGetPremium");

libs/common/src/billing/enums/bitwarden-product-type.enum.ts

@@ -0,0 +1,4 @@
+export enum BitwardenProductType {
+  PasswordManager = 0,
+  SecretsManager = 1,
+}

libs/common/src/billing/models/response/subscription.response.ts

@@ -1,4 +1,5 @@
 import { BaseResponse } from "../../../models/response/base.response";
+import { BitwardenProductType } from "../../enums/bitwarden-product-type.enum";
 
 export class SubscriptionResponse extends BaseResponse {
   storageName: string;
@@ -62,6 +63,8 @@ export class BillingSubscriptionItemResponse extends BaseResponse {
   quantity: number;
   interval: string;
   sponsoredSubscriptionItem: boolean;
+  addonSubscriptionItem: boolean;
+  bitwardenProduct: BitwardenProductType;
 
   constructor(response: any) {
     super(response);
@@ -70,6 +73,8 @@ export class BillingSubscriptionItemResponse extends BaseResponse {
     this.quantity = this.getResponseProperty("Quantity");
     this.interval = this.getResponseProperty("Interval");
     this.sponsoredSubscriptionItem = this.getResponseProperty("SponsoredSubscriptionItem");
+    this.addonSubscriptionItem = this.getResponseProperty("AddonSubscriptionItem");
+    this.bitwardenProduct = this.getResponseProperty("BitwardenProduct");
   }
 }