[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

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

@@ -63,17 +63,36 @@
       </ng-container>
     </dl>
     <ng-container *ngIf="userOrg.canEditSubscription">
-      <div class="tw-flex-col" *ngIf="subscription">
-        <strong class="tw-mb-1 tw-block">{{ "details" | i18n }}</strong>
+      <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>
-            <tr bitRow *ngFor="let i of subscription.items">
-              <td bitCell>
-                {{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} @
-                {{ i.amount | currency : "$" }}
-              </td>
-              <td bitCell>{{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}</td>
-            </tr>
+            <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 bitCell class="tw-text-right">
+                  {{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}
+                </td>
+              </tr>
+            </ng-container>
+            <ng-container *ngIf="!subscription && 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>

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,15 @@ 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");
+    }
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
@@ -81,6 +93,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 +345,21 @@ 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) {
+    // sort addon items to the bottom
+    return a.addonSubscriptionItem == b.addonSubscriptionItem
+      ? 0
+      : a.addonSubscriptionItem
+      ? 1
+      : -1;
+  }
+  return a.bitwardenProduct - b.bitwardenProduct;
+}

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"
   },
@@ -6847,5 +6850,8 @@
   },
   "passwordManager": {
     "message": "Password Manager"
+  },
+  "freeOrganization": {
+    "message": "Free Organization"
   }
 }

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