[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/accounts/trial-initiation/billing.component.ts

@@ -1,18 +1,7 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { UntypedFormBuilder, FormGroup } from "@angular/forms";
+import { FormGroup } from "@angular/forms";
-import { Router } from "@angular/router";
 
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
-import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { ProductType } from "@bitwarden/common/enums";
-import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 
 import { OrganizationPlansComponent } from "../../settings/organization-plans.component";
 
@@ -24,36 +13,6 @@ export class BillingComponent extends OrganizationPlansComponent {
   @Input() orgInfoForm: FormGroup;
   @Output() previousStep = new EventEmitter();
 
-  constructor(
-    apiService: ApiService,
-    i18nService: I18nService,
-    platformUtilsService: PlatformUtilsService,
-    cryptoService: CryptoService,
-    router: Router,
-    syncService: SyncService,
-    policyService: PolicyService,
-    organizationService: OrganizationService,
-    logService: LogService,
-    messagingService: MessagingService,
-    formBuilder: UntypedFormBuilder,
-    organizationApiService: OrganizationApiServiceAbstraction
-  ) {
-    super(
-      apiService,
-      i18nService,
-      platformUtilsService,
-      cryptoService,
-      router,
-      syncService,
-      policyService,
-      organizationService,
-      logService,
-      messagingService,
-      formBuilder,
-      organizationApiService
-    );
-  }
-
   async ngOnInit() {
     const additionalSeats = this.product == ProductType.Families ? 0 : 1;
     this.formGroup.patchValue({

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

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
   <div>
     <div class="row">
-      <div class="form-group col-6">
+      <div class="form-group col-8">
         <label for="newSeatCount">{{ "subscriptionSeats" | i18n }}</label>
         <input
           id="newSeatCount"
@@ -41,7 +41,7 @@
         <label for="maxAutoscaleSeats">{{ "maxSeatLimit" | i18n }}</label>
         <input
           id="maxAutoscaleSeats"
-          class="form-control col-6"
+          class="form-control col-8"
           type="number"
           name="MaxAutoscaleSeats"
           [(ngModel)]="newMaxSeats"

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

@@ -40,7 +40,7 @@ export class AdjustSubscription {
     try {
       const seatAdjustment = this.newSeatCount - this.currentSeatCount;
       const request = new OrganizationSubscriptionUpdateRequest(seatAdjustment, this.newMaxSeats);
-      this.formPromise = this.organizationApiService.updateSubscription(
+      this.formPromise = this.organizationApiService.updatePasswordManagerSeats(
         this.organizationId,
         request
       );

apps/web/src/app/billing/organizations/organization-billing.module.ts

@@ -12,7 +12,7 @@ import { OrganizationBillingRoutingModule } from "./organization-billing-routing
 import { OrganizationBillingTabComponent } from "./organization-billing-tab.component";
 import { OrganizationSubscriptionCloudComponent } from "./organization-subscription-cloud.component";
 import { OrganizationSubscriptionSelfhostComponent } from "./organization-subscription-selfhost.component";
-import { SecretsManagerEnrollComponent } from "./secrets-manager/enroll.component";
+import { SecretsManagerBillingModule } from "./secrets-manager/sm-billing.module";
 import { SubscriptionHiddenComponent } from "./subscription-hidden.component";
 
 @NgModule({
@@ -21,6 +21,7 @@ import { SubscriptionHiddenComponent } from "./subscription-hidden.component";
     LooseComponentsModule,
     OrganizationBillingRoutingModule,
     UserVerificationModule,
+    SecretsManagerBillingModule,
   ],
   declarations: [
     AdjustSubscription,
@@ -32,7 +33,6 @@ import { SubscriptionHiddenComponent } from "./subscription-hidden.component";
     OrganizationSubscriptionSelfhostComponent,
     OrganizationSubscriptionCloudComponent,
     SubscriptionHiddenComponent,
-    SecretsManagerEnrollComponent,
   ],
 })
 export class OrganizationBillingModule {}

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

@@ -1,5 +1,5 @@
-<div class="page-header">
+<div class="tw-mb-2">
-  <h1>
+  <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,15 +40,13 @@
     </button>
   </bit-callout>
 
-  <div class="row">
+  <dl class="tw-grid tw-grid-flow-col tw-grid-rows-2">
-    <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">{{
+        <span class="tw-capitalize">{{
           isSponsoredSubscription ? "sponsored" : subscription.status || "-"
         }}</span>
         <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
@@ -63,25 +61,44 @@
       </dd>
     </ng-container>
   </dl>
-    </div>
   <ng-container *ngIf="userOrg.canEditSubscription">
-      <div class="col-8" *ngIf="subscription">
+    <div class="tw-flex-col">
-        <strong class="d-block mb-1">{{ "details" | i18n }}</strong>
+      <strong class="tw-block tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300">{{
-        <table class="table">
+        "details" | i18n
-          <tbody>
+      }}</strong>
-            <tr *ngFor="let i of subscription.items">
+      <bit-table>
-              <td>
+        <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>
+          </ng-container>
-        </table>
+          <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>
-  </div>
+
   <ng-container *ngIf="userOrg.canEditSubscription">
+    <div class="tw-mt-7">
       <button
         bitButton
         buttonType="secondary"
@@ -97,25 +114,28 @@
         (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">
-    <sm-enroll
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "manageSubscription" | i18n }}</h2>
-      *ngIf="isAdmin"
+    <p bitTypography="body1">{{ subscriptionDesc }}</p>
-      [enabled]="sub?.useSecretsManager"
-      [organizationId]="organizationId"
-    ></sm-enroll>
-  </ng-container>
-
-  <ng-container *ngIf="userOrg.canEditSubscription">
-    <h2 class="spaced-header">{{ "manageSubscription" | i18n }}</h2>
-    <p class="mb-4">{{ subscriptionDesc }}</p>
     <ng-container
       *ngIf="
         subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel
       "
     >
-      <div class="mt-3">
+      <h3 bitTypography="h3" class="tw-mt-7">{{ "passwordManager" | i18n }}</h3>
       <app-adjust-subscription
         [seatPrice]="seatPrice"
         [organizationId]="organizationId"
@@ -125,7 +145,6 @@
         (onAdjusted)="subscriptionAdjusted()"
       >
       </app-adjust-subscription>
-      </div>
     </ng-container>
     <button
       bitButton
@@ -136,33 +155,18 @@
     >
       {{ "removeSponsorship" | i18n }}
     </button>
-    <h2 class="spaced-header">{{ "storage" | i18n }}</h2>
+    <h4 bitTypography="h4" class="tw-mt-9">{{ "storage" | i18n }}</h4>
-    <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"></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" *ngIf="!showAdjustStorage">
+        <div class="tw-flex tw-space-x-2" *ngIf="!showAdjustStorage">
           <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(true)">
             {{ "addStorage" | i18n }}
           </button>
-          <button
+          <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(false)">
-            bitButton
-            buttonType="secondary"
-            type="button"
-            class="ml-1"
-            (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>
+  <h2 bitTypography="h2" class="tw-mt-7">{{ "selfHostingTitle" | i18n }}</h2>
-  <p class="mb-4">
+  <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>
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "additionalOptions" | i18n }}</h2>
-    <p class="mb-4">
+    <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

@@ -9,8 +9,11 @@ import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-conso
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.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, PlanType } from "@bitwarden/common/billing/enums";
 import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
+import { BillingSubscriptionItemResponse } from "@bitwarden/common/billing/models/response/subscription.response";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 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";
@@ -19,6 +22,7 @@ import {
   BillingSyncApiKeyComponent,
   BillingSyncApiModalData,
 } from "./billing-sync-api-key.component";
+import { SecretsManagerSubscriptionOptions } from "./secrets-manager/sm-adjust-subscription.component";
 
 @Component({
   selector: "app-org-subscription-cloud",
@@ -26,6 +30,7 @@ import {
 })
 export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy {
   sub: OrganizationSubscriptionResponse;
+  lineItems: BillingSubscriptionItemResponse[] = [];
   organizationId: string;
   userOrg: Organization;
   showChangePlan = false;
@@ -33,6 +38,9 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
   adjustStorageAdd = true;
   showAdjustStorage = false;
   hasBillingSyncToken: boolean;
+  showAdjustSecretsManager = false;
+
+  showSecretsManagerSubscribe = false;
 
   firstLoaded = false;
   loading: boolean;
@@ -48,7 +56,8 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     private organizationService: OrganizationService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private route: ActivatedRoute,
-    private dialogService: DialogServiceAbstraction
+    private dialogService: DialogServiceAbstraction,
+    private configService: ConfigServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -68,6 +77,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 +101,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(
@@ -90,7 +111,28 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
       (i) => i.keyType === OrganizationApiKeyType.BillingSync
     );
 
+    this.showSecretsManagerSubscribe =
+      this.userOrg.canEditSubscription &&
+      !this.userOrg.useSecretsManager &&
+      !this.subscription?.cancelled &&
+      !this.subscriptionMarkedForCancel;
+
+    this.showAdjustSecretsManager =
+      this.userOrg.canEditSubscription &&
+      this.userOrg.useSecretsManager &&
+      this.subscription != null &&
+      this.sub.secretsManagerPlan?.hasAdditionalSeatsOption &&
+      !this.subscription.cancelled &&
+      !this.subscriptionMarkedForCancel;
+
     this.loading = false;
+
+    // Remove the remaining lines when the sm-ga-billing flag is deleted
+    const smBillingEnabled = await this.configService.getFeatureFlagBool(
+      FeatureFlag.SecretsManagerBilling
+    );
+    this.showSecretsManagerSubscribe = this.showSecretsManagerSubscribe && smBillingEnabled;
+    this.showAdjustSecretsManager = this.showAdjustSecretsManager && smBillingEnabled;
   }
 
   get subscription() {
@@ -138,6 +180,20 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     return this.sub.seats;
   }
 
+  get smOptions(): SecretsManagerSubscriptionOptions {
+    return {
+      seatCount: this.sub.smSeats,
+      maxAutoscaleSeats: this.sub.maxAutoscaleSmSeats,
+      seatPrice: this.sub.secretsManagerPlan.seatPrice,
+      maxAutoscaleServiceAccounts: this.sub.maxAutoscaleSmServiceAccounts,
+      additionalServiceAccounts:
+        this.sub.smServiceAccounts - this.sub.secretsManagerPlan.baseServiceAccount,
+      interval: this.sub.secretsManagerPlan.isAnnual ? "year" : "month",
+      additionalServiceAccountPrice: this.sub.secretsManagerPlan.additionalPricePerServiceAccount,
+      baseServiceAccountCount: this.sub.secretsManagerPlan.baseServiceAccount,
+    };
+  }
+
   get maxAutoscaleSeats() {
     return this.sub.maxAutoscaleSeats;
   }
@@ -332,3 +388,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,13 +0,0 @@
-<form *ngIf="showSecretsManager" [formGroup]="formGroup" [bitSubmit]="submit">
-  <h2 class="spaced-header">{{ "secretsManagerBeta" | i18n }}</h2>
-  <p>{{ "secretsManagerSubscriptionDesc" | i18n }}</p>
-
-  <bit-form-control>
-    <input type="checkbox" bitCheckbox formControlName="enabled" />
-    <bit-label>{{ "secretsManagerEnable" | i18n }}</bit-label>
-  </bit-form-control>
-
-  <button bitButton bitFormButton buttonType="primary" type="submit">
-    {{ "save" | i18n }}
-  </button>
-</form>

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

@@ -1,52 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
-
-import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
-import { OrganizationEnrollSecretsManagerRequest } from "@bitwarden/common/admin-console/models/request/organization/organization-enroll-secrets-manager.request";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-
-import { flagEnabled } from "../../../../utils/flags";
-
-@Component({
-  selector: "sm-enroll",
-  templateUrl: "enroll.component.html",
-})
-export class SecretsManagerEnrollComponent implements OnInit {
-  @Input() enabled: boolean;
-  @Input() organizationId: string;
-
-  protected formGroup = this.formBuilder.group({
-    enabled: [false],
-  });
-
-  protected showSecretsManager = false;
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private organizationApiService: OrganizationApiServiceAbstraction,
-    private platformUtilsService: PlatformUtilsService,
-    private i18nService: I18nService,
-    private syncService: SyncService
-  ) {
-    this.showSecretsManager = flagEnabled("secretsManager");
-  }
-
-  ngOnInit(): void {
-    this.formGroup.setValue({
-      enabled: this.enabled,
-    });
-  }
-
-  protected submit = async () => {
-    this.formGroup.markAllAsTouched();
-
-    const request = new OrganizationEnrollSecretsManagerRequest();
-    request.enabled = this.formGroup.value.enabled;
-
-    await this.organizationApiService.updateEnrollSecretsManager(this.organizationId, request);
-    await this.syncService.fullSync(true);
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("subscriptionUpdated"));
-  };
-}

apps/web/src/app/billing/organizations/secrets-manager/index.ts

@@ -0,0 +1,3 @@
+export * from "./sm-billing.module";
+export * from "./sm-subscribe.component";
+export * from "./sm-subscribe-standalone.component";

apps/web/src/app/billing/organizations/secrets-manager/sm-adjust-subscription.component.html

@@ -0,0 +1,93 @@
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-form-field class="tw-w-2/3">
+    <bit-label>{{ "subscriptionSeats" | i18n }}</bit-label>
+    <input bitInput id="smSeatCount" formControlName="seatCount" type="number" step="1" min="1" />
+    <bit-hint>
+      <strong>{{ "total" | i18n }}:</strong>
+      {{ formGroup.value.seatCount || 0 }} &times; {{ options.seatPrice | currency : "$" }} =
+      {{ seatTotal | currency : "$" }} / {{ options.interval | i18n }}
+    </bit-hint>
+  </bit-form-field>
+  <bit-form-control>
+    <bit-label>{{ "limitSubscription" | i18n }}</bit-label>
+    <input type="checkbox" bitCheckbox id="limitSmSeats" formControlName="limitSeats" />
+    <bit-hint>
+      {{ "limitSmSubscriptionDesc" | i18n }}
+    </bit-hint>
+  </bit-form-control>
+  <bit-form-field class="tw-w-2/3" *ngIf="formGroup.value.limitSeats">
+    <bit-label>{{ "maxSeatLimit" | i18n }}</bit-label>
+    <input
+      bitInput
+      id="smSeatLimit"
+      formControlName="maxAutoscaleSeats"
+      type="number"
+      step="1"
+      [min]="formGroup.value.seatCount"
+    />
+    <bit-hint>
+      <strong>{{ "maxSeatCost" | i18n }}:</strong>
+      {{ formGroup.value.maxAutoscaleSeats || 0 }} &times;
+      {{ options.seatPrice | currency : "$" }} = {{ maxSeatTotal | currency : "$" }} /
+      {{ options.interval | i18n }}
+    </bit-hint>
+  </bit-form-field>
+  <bit-form-field class="tw-w-2/3">
+    <bit-label>{{ "additionalServiceAccounts" | i18n }}</bit-label>
+    <input
+      bitInput
+      id="additionalServiceAccountCount"
+      formControlName="additionalServiceAccounts"
+      type="number"
+      step="1"
+      min="0"
+    />
+    <bit-hint>
+      <div>
+        {{
+          "additionalServiceAccountsDesc"
+            | i18n : options.baseServiceAccountCount : (monthlyServiceAccountPrice | currency : "$")
+        }}
+      </div>
+      <div>
+        <strong>{{ "total" | i18n }}:</strong>
+        {{ formGroup.value.additionalServiceAccounts || 0 }} &times;
+        {{ options.additionalServiceAccountPrice | currency : "$" }} =
+        {{ serviceAccountTotal | currency : "$" }} / {{ options.interval | i18n }}
+      </div>
+    </bit-hint>
+  </bit-form-field>
+  <bit-form-control>
+    <bit-label>{{ "limitServiceAccounts" | i18n }}</bit-label>
+    <input
+      type="checkbox"
+      bitCheckbox
+      id="limitServiceAccounts"
+      formControlName="limitServiceAccounts"
+    />
+    <bit-hint>
+      {{ "limitServiceAccountsDesc" | i18n }}
+    </bit-hint>
+  </bit-form-control>
+  <bit-form-field class="tw-w-2/3" *ngIf="formGroup.value.limitServiceAccounts">
+    <bit-label>{{ "serviceAccountLimit" | i18n }}</bit-label>
+    <input
+      bitInput
+      id="additionalServiceAccountLimit"
+      formControlName="maxAutoscaleServiceAccounts"
+      type="number"
+      step="1"
+      [min]="formGroup.value.additionalServiceAccounts"
+    />
+    <bit-hint>
+      <strong>{{ "maxServiceAccountCost" | i18n }}:</strong>
+      {{ formGroup.value.maxAutoscaleServiceAccounts || 0 }} &times;
+      {{ options.additionalServiceAccountPrice | currency : "$" }} =
+      {{ maxServiceAccountTotal | currency : "$" }} / {{ options.interval | i18n }}
+    </bit-hint>
+  </bit-form-field>
+  <button type="submit" bitButton buttonType="primary" bitFormButton>
+    {{ "save" | i18n }}
+  </button>
+  <bit-error-summary [formGroup]="formGroup" class="tw-mt-2"></bit-error-summary>
+</form>

apps/web/src/app/billing/organizations/secrets-manager/sm-adjust-subscription.component.ts

@@ -0,0 +1,172 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { Subject, takeUntil } from "rxjs";
+
+import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
+import { OrganizationSmSubscriptionUpdateRequest } from "@bitwarden/common/billing/models/request/organization-sm-subscription-update.request";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+
+export interface SecretsManagerSubscriptionOptions {
+  interval: "year" | "month";
+
+  /**
+   * The current number of seats the organization subscribes to.
+   */
+  seatCount: number;
+
+  /**
+   * Optional auto-scaling limit for the number of seats the organization can subscribe to.
+   */
+  maxAutoscaleSeats: number;
+
+  /**
+   * The price per seat for the subscription.
+   */
+  seatPrice: number;
+
+  /**
+   * The number of service accounts that are included in the base subscription.
+   */
+  baseServiceAccountCount: number;
+
+  /**
+   * The current number of additional service accounts the organization subscribes to.
+   */
+  additionalServiceAccounts: number;
+
+  /**
+   * Optional auto-scaling limit for the number of additional service accounts the organization can subscribe to.
+   */
+  maxAutoscaleServiceAccounts: number;
+
+  /**
+   * The price per additional service account for the subscription.
+   */
+  additionalServiceAccountPrice: number;
+}
+
+@Component({
+  selector: "app-sm-adjust-subscription",
+  templateUrl: "sm-adjust-subscription.component.html",
+})
+export class SecretsManagerAdjustSubscriptionComponent implements OnInit, OnDestroy {
+  @Input() organizationId: string;
+  @Input() options: SecretsManagerSubscriptionOptions;
+  @Output() onAdjusted = new EventEmitter();
+
+  private destroy$ = new Subject<void>();
+
+  formGroup = this.formBuilder.group({
+    seatCount: [0, [Validators.required, Validators.min(1)]],
+    limitSeats: [false],
+    maxAutoscaleSeats: [null as number | null],
+    additionalServiceAccounts: [0, [Validators.required, Validators.min(0)]],
+    limitServiceAccounts: [false],
+    maxAutoscaleServiceAccounts: [null as number | null],
+  });
+
+  get monthlyServiceAccountPrice(): number {
+    return this.options.interval == "month"
+      ? this.options.additionalServiceAccountPrice
+      : this.options.additionalServiceAccountPrice / 12;
+  }
+
+  get serviceAccountTotal(): number {
+    return Math.abs(
+      this.formGroup.value.additionalServiceAccounts * this.options.additionalServiceAccountPrice
+    );
+  }
+
+  get seatTotal(): number {
+    return Math.abs(this.formGroup.value.seatCount * this.options.seatPrice);
+  }
+
+  get maxServiceAccountTotal(): number {
+    return Math.abs(
+      (this.formGroup.value.maxAutoscaleServiceAccounts ?? 0) *
+        this.options.additionalServiceAccountPrice
+    );
+  }
+
+  get maxSeatTotal(): number {
+    return Math.abs((this.formGroup.value.maxAutoscaleSeats ?? 0) * this.options.seatPrice);
+  }
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private organizationApiService: OrganizationApiServiceAbstraction,
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService
+  ) {}
+
+  ngOnInit() {
+    this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+      const maxAutoscaleSeatsControl = this.formGroup.controls.maxAutoscaleSeats;
+      const maxAutoscaleServiceAccountsControl =
+        this.formGroup.controls.maxAutoscaleServiceAccounts;
+
+      if (value.limitSeats) {
+        maxAutoscaleSeatsControl.setValidators([Validators.min(value.seatCount)]);
+        maxAutoscaleSeatsControl.enable({ emitEvent: false });
+      } else {
+        maxAutoscaleSeatsControl.disable({ emitEvent: false });
+      }
+
+      if (value.limitServiceAccounts) {
+        maxAutoscaleServiceAccountsControl.setValidators([
+          Validators.min(value.additionalServiceAccounts),
+        ]);
+        maxAutoscaleServiceAccountsControl.enable({ emitEvent: false });
+      } else {
+        maxAutoscaleServiceAccountsControl.disable({ emitEvent: false });
+      }
+    });
+
+    this.formGroup.patchValue({
+      seatCount: this.options.seatCount,
+      maxAutoscaleSeats: this.options.maxAutoscaleSeats,
+      additionalServiceAccounts: this.options.additionalServiceAccounts,
+      maxAutoscaleServiceAccounts: this.options.maxAutoscaleServiceAccounts,
+      limitSeats: this.options.maxAutoscaleSeats != null,
+      limitServiceAccounts: this.options.maxAutoscaleServiceAccounts != null,
+    });
+  }
+
+  submit = async () => {
+    this.formGroup.markAllAsTouched();
+
+    if (this.formGroup.invalid) {
+      return;
+    }
+
+    const request = new OrganizationSmSubscriptionUpdateRequest();
+    request.seatAdjustment = this.formGroup.value.seatCount - this.options.seatCount;
+    request.serviceAccountAdjustment =
+      this.formGroup.value.additionalServiceAccounts - this.options.additionalServiceAccounts;
+    request.maxAutoscaleSeats = this.formGroup.value.limitSeats
+      ? this.formGroup.value.maxAutoscaleSeats
+      : null;
+    request.maxAutoscaleServiceAccounts = this.formGroup.value.limitServiceAccounts
+      ? this.formGroup.value.maxAutoscaleServiceAccounts
+      : null;
+
+    await this.organizationApiService.updateSecretsManagerSubscription(
+      this.organizationId,
+      request
+    );
+
+    await this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("subscriptionUpdated")
+    );
+
+    this.onAdjusted.emit();
+  };
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

apps/web/src/app/billing/organizations/secrets-manager/sm-billing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../../shared";
+
+import { SecretsManagerAdjustSubscriptionComponent } from "./sm-adjust-subscription.component";
+import { SecretsManagerSubscribeStandaloneComponent } from "./sm-subscribe-standalone.component";
+import { SecretsManagerSubscribeComponent } from "./sm-subscribe.component";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [
+    SecretsManagerSubscribeComponent,
+    SecretsManagerSubscribeStandaloneComponent,
+    SecretsManagerAdjustSubscriptionComponent,
+  ],
+  exports: [
+    SecretsManagerSubscribeComponent,
+    SecretsManagerSubscribeStandaloneComponent,
+    SecretsManagerAdjustSubscriptionComponent,
+  ],
+})
+export class SecretsManagerBillingModule {}

apps/web/src/app/billing/organizations/secrets-manager/sm-subscribe-standalone.component.html

@@ -0,0 +1,8 @@
+<form [formGroup]="formGroup" [bitSubmit]="submit" *ngIf="plan">
+  <sm-subscribe
+    [formGroup]="formGroup"
+    [selectedPlan]="plan"
+    [upgradeOrganization]="false"
+    [showSubmitButton]="true"
+  ></sm-subscribe>
+</form>

apps/web/src/app/billing/organizations/secrets-manager/sm-subscribe-standalone.component.ts

@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+
+import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { SecretsManagerSubscribeRequest } from "@bitwarden/common/billing/models/request/sm-subscribe.request";
+import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+
+import { secretsManagerSubscribeFormFactory } from "./sm-subscribe.component";
+
+@Component({
+  selector: "sm-subscribe-standalone",
+  templateUrl: "sm-subscribe-standalone.component.html",
+})
+export class SecretsManagerSubscribeStandaloneComponent {
+  @Input() plan: PlanResponse;
+  @Input() organization: Organization;
+  @Output() onSubscribe = new EventEmitter<void>();
+
+  formGroup = secretsManagerSubscribeFormFactory(this.formBuilder);
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private organizationApiService: OrganizationApiServiceAbstraction
+  ) {}
+
+  submit = async () => {
+    const request = new SecretsManagerSubscribeRequest();
+    request.additionalSmSeats = this.plan.hasAdditionalSeatsOption
+      ? this.formGroup.value.userSeats
+      : 0;
+    request.additionalServiceAccounts = this.plan.hasAdditionalServiceAccountOption
+      ? this.formGroup.value.additionalServiceAccounts
+      : 0;
+
+    await this.organizationApiService.subscribeToSecretsManager(this.organization.id, request);
+
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("subscriptionUpdated"));
+
+    this.onSubscribe.emit();
+  };
+}

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

@@ -0,0 +1,71 @@
+<div *ngIf="formGroup && selectedPlan != null" [formGroup]="formGroup">
+  <h3 bitTypography="h3">{{ "moreFromBitwarden" | i18n }}</h3>
+  <div class="tw-rounded-t tw-bg-background-alt3 tw-p-5">
+    <div class="tw-w-72">
+      <bit-icon [icon]="logo"></bit-icon>
+    </div>
+  </div>
+  <div
+    class="tw-rounded-b tw-border-x tw-border-b tw-border-t-0 tw-border-solid tw-border-secondary-300 tw-p-5"
+  >
+    <h4 bitTypography="h4">{{ "secretsManagerForPlan" | i18n : planName }}</h4>
+    <div class="tw-text-muted">
+      {{ "secretsManagerForPlanDesc" | i18n }}
+      <ul>
+        <li *ngIf="product == productTypes.Free">{{ "limitedUsers" | i18n : maxUsers }}</li>
+        <li>{{ "unlimitedSecrets" | i18n }}</li>
+        <li *ngIf="product == productTypes.Free; else unlimitedProjects">
+          {{ "projectsIncluded" | i18n : maxProjects }}
+        </li>
+        <ng-template #unlimitedProjects>
+          <li>{{ "unlimitedProjects" | i18n }}</li>
+        </ng-template>
+        <li>{{ "serviceAccountsIncluded" | i18n : serviceAccountsIncluded }}</li>
+        <li *ngIf="product != productTypes.Free">
+          {{
+            "additionalServiceAccountCost" | i18n : (monthlyCostPerServiceAccount | currency : "$")
+          }}
+        </li>
+      </ul>
+    </div>
+
+    <div class="tw-mb-5">
+      <span *ngIf="product != productTypes.Free; else freeForever">
+        {{ "costPerUser" | i18n : (monthlyCostPerUser | currency : "$") }} /{{ "month" | i18n }}
+      </span>
+      <ng-template #freeForever>
+        <span>{{ "freeForever" | i18n }}</span>
+      </ng-template>
+    </div>
+
+    <bit-form-control>
+      <input type="checkbox" bitCheckbox formControlName="enabled" />
+      <bit-label>{{ "addSecretsManager" | i18n }}</bit-label>
+      <bit-hint *ngIf="upgradeOrganization">{{ "addSecretsManagerUpgradeDesc" | i18n }}</bit-hint>
+    </bit-form-control>
+
+    <ng-container *ngIf="formGroup.value.enabled">
+      <div *ngIf="selectedPlan.hasAdditionalSeatsOption" class="tw-w-1/2">
+        <bit-form-field>
+          <bit-label>{{ "userSeats" | i18n }}</bit-label>
+          <input bitInput formControlName="userSeats" type="number" />
+          <bit-hint>{{ "userSeatsHowManyDesc" | i18n }}</bit-hint>
+        </bit-form-field>
+      </div>
+      <div *ngIf="selectedPlan.hasAdditionalServiceAccountOption" class="tw-w-1/2">
+        <bit-form-field>
+          <bit-label>{{ "additionalServiceAccounts" | i18n }}</bit-label>
+          <input bitInput formControlName="additionalServiceAccounts" type="number" />
+          <bit-hint>{{
+            "additionalServiceAccountsDesc"
+              | i18n : serviceAccountsIncluded : (monthlyCostPerServiceAccount | currency : "$")
+          }}</bit-hint>
+        </bit-form-field>
+      </div>
+
+      <button *ngIf="showSubmitButton" type="submit" bitButton buttonType="primary" bitFormButton>
+        {{ "save" | i18n }}
+      </button>
+    </ng-container>
+  </div>
+</div>

apps/web/src/app/billing/organizations/secrets-manager/sm-subscribe.component.ts

@@ -0,0 +1,104 @@
+import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { Subject, startWith, takeUntil } from "rxjs";
+
+import { ControlsOf } from "@bitwarden/angular/types/controls-of";
+import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
+import { ProductType } from "@bitwarden/common/enums";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { SecretsManagerLogo } from "../../../../../../../bitwarden_license/bit-web/src/app/secrets-manager/layout/secrets-manager-logo";
+
+export interface SecretsManagerSubscription {
+  enabled: boolean;
+  userSeats: number;
+  additionalServiceAccounts: number;
+}
+
+export const secretsManagerSubscribeFormFactory = (
+  formBuilder: FormBuilder
+): FormGroup<ControlsOf<SecretsManagerSubscription>> =>
+  formBuilder.group({
+    enabled: [false],
+    userSeats: [1, [Validators.required, Validators.min(1), Validators.max(100000)]],
+    additionalServiceAccounts: [
+      0,
+      [Validators.required, Validators.min(0), Validators.max(100000)],
+    ],
+  });
+
+@Component({
+  selector: "sm-subscribe",
+  templateUrl: "sm-subscribe.component.html",
+})
+export class SecretsManagerSubscribeComponent implements OnInit, OnDestroy {
+  @Input() formGroup: FormGroup<ControlsOf<SecretsManagerSubscription>>;
+  @Input() upgradeOrganization: boolean;
+  @Input() showSubmitButton = false;
+  @Input() selectedPlan: PlanResponse;
+
+  logo = SecretsManagerLogo;
+  productTypes = ProductType;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(private i18nService: I18nService) {}
+
+  ngOnInit() {
+    this.formGroup.controls.enabled.valueChanges
+      .pipe(startWith(this.formGroup.value.enabled), takeUntil(this.destroy$))
+      .subscribe((enabled) => {
+        if (enabled) {
+          this.formGroup.controls.userSeats.enable();
+          this.formGroup.controls.additionalServiceAccounts.enable();
+        } else {
+          this.formGroup.controls.userSeats.disable();
+          this.formGroup.controls.additionalServiceAccounts.disable();
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  get product() {
+    return this.selectedPlan.product;
+  }
+
+  get planName() {
+    switch (this.product) {
+      case ProductType.Free:
+        return this.i18nService.t("free2PersonOrganization");
+      case ProductType.Teams:
+        return this.i18nService.t("planNameTeams");
+      case ProductType.Enterprise:
+        return this.i18nService.t("planNameEnterprise");
+    }
+  }
+
+  get serviceAccountsIncluded() {
+    return this.selectedPlan.baseServiceAccount;
+  }
+
+  get monthlyCostPerServiceAccount() {
+    return this.selectedPlan.isAnnual
+      ? this.selectedPlan.additionalPricePerServiceAccount / 12
+      : this.selectedPlan.additionalPricePerServiceAccount;
+  }
+
+  get maxUsers() {
+    return this.selectedPlan.maxUsers;
+  }
+
+  get maxProjects() {
+    return this.selectedPlan.maxProjects;
+  }
+
+  get monthlyCostPerUser() {
+    return this.selectedPlan.isAnnual
+      ? this.selectedPlan.seatPrice / 12
+      : this.selectedPlan.seatPrice;
+  }
+}

apps/web/src/app/billing/settings/organization-plans.component.html

@@ -28,7 +28,7 @@
   (ngSubmit)="submit()"
   [appApiAction]="formPromise"
   ngNativeValidate
-  *ngIf="!loading && !selfHosted && this.plans"
+  *ngIf="!loading && !selfHosted && this.passwordManagerPlans && this.secretsManagerPlans"
   class="tw-pt-6"
 >
   <app-org-info
@@ -119,7 +119,7 @@
       <span *ngIf="selectableProduct.product == productTypes.Free">{{ "freeForever" | i18n }}</span>
     </label>
   </div>
-  <div *ngIf="formGroup.controls['product'].value !== productTypes.Free">
+  <div *ngIf="formGroup.value.product !== productTypes.Free">
     <ng-container *ngIf="selectedPlan.hasAdditionalSeatsOption && !selectedPlan.baseSeats">
       <h2 class="mt-5">{{ "users" | i18n }}</h2>
       <div class="row">
@@ -230,7 +230,8 @@
             <span *ngIf="!selectablePlan.baseSeats">{{ "users" | i18n }}:</span>
             {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
             {{ selectablePlan.seatPrice / 12 | currency : "$" }} &times; 12
-            {{ "monthAbbr" | i18n }} = {{ seatTotal(selectablePlan) | currency : "$" }} /{{
+            {{ "monthAbbr" | i18n }} =
+            {{ seatTotal(selectablePlan, formGroup.value.additionalSeats) | currency : "$" }} /{{
               "year" | i18n
             }}
           </small>
@@ -256,7 +257,9 @@
             <span *ngIf="!selectablePlan.baseSeats">{{ "users" | i18n }}:</span>
             {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
             {{ selectablePlan.seatPrice | currency : "$" }} {{ "monthAbbr" | i18n }} =
-            {{ seatTotal(selectablePlan) | currency : "$" }} /{{ "month" | i18n }}
+            {{ seatTotal(selectablePlan, formGroup.value.additionalSeats) | currency : "$" }} /{{
+              "month" | i18n
+            }}
           </small>
           <small *ngIf="selectablePlan.hasAdditionalStorageOption">
             {{ "additionalStorageGb" | i18n }}:
@@ -268,8 +271,21 @@
         </ng-container>
       </label>
     </div>
-    <hr class="my-3" />
+  </div>
-    <h2 class="spaced-header mb-4">
+
+  <!-- Secrets Manager -->
+  <div class="tw-my-10">
+    <sm-subscribe
+      *ngIf="showSecretsManagerSubscribe && planOffersSecretsManager"
+      [formGroup]="formGroup.controls.secretsManager"
+      [selectedPlan]="selectedSecretsManagerPlan"
+      [upgradeOrganization]="!createOrganization"
+    ></sm-subscribe>
+  </div>
+
+  <!-- Payment info -->
+  <div *ngIf="formGroup.value.product !== productTypes.Free">
+    <h2 class="mb-4">
       {{ (createOrganization ? "paymentInformation" : "billingInformation") | i18n }}
     </h2>
     <small class="text-muted font-italic mb-3 d-block">
@@ -279,8 +295,12 @@
     <app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info>
     <div id="price" class="my-4">
       <div class="text-muted text-sm">
-        {{ "planPrice" | i18n }}: {{ subtotal | currency : "USD $" }}
+        {{ "passwordManagerPlanPrice" | i18n }}: {{ passwordManagerSubtotal | currency : "USD $" }}
         <br />
+        <span *ngIf="planOffersSecretsManager && formGroup.value.secretsManager.enabled">
+          {{ "secretsManagerPlanPrice" | i18n }}: {{ secretsManagerSubtotal | currency : "USD $" }}
+          <br />
+        </span>
         <ng-container>
           {{ "estimatedTax" | i18n }}: {{ taxCharges | currency : "USD $" }}
         </ng-container>

apps/web/src/app/billing/settings/organization-plans.component.ts

@@ -7,7 +7,7 @@ import {
   Output,
   ViewChild,
 } from "@angular/core";
-import { UntypedFormBuilder, Validators } from "@angular/forms";
+import { FormBuilder, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
 
@@ -20,9 +20,11 @@ import { OrganizationCreateRequest } from "@bitwarden/common/admin-console/model
 import { OrganizationKeysRequest } from "@bitwarden/common/admin-console/models/request/organization-keys.request";
 import { OrganizationUpgradeRequest } from "@bitwarden/common/admin-console/models/request/organization-upgrade.request";
 import { ProviderOrganizationCreateRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-organization-create.request";
-import { PaymentMethodType, PlanType } from "@bitwarden/common/billing/enums";
+import { BitwardenProductType, PaymentMethodType, PlanType } from "@bitwarden/common/billing/enums";
 import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
 import { ProductType } from "@bitwarden/common/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -32,6 +34,8 @@ import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 
+import { secretsManagerSubscribeFormFactory } from "../organizations/secrets-manager/sm-subscribe.component";
+
 import { PaymentComponent } from "./payment.component";
 import { TaxInfoComponent } from "./tax-info.component";
 
@@ -51,24 +55,29 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   @Input() showFree = true;
   @Input() showCancel = false;
   @Input() acceptingSponsorship = false;
+
   @Input()
   get product(): ProductType {
     return this._product;
   }
+
   set product(product: ProductType) {
     this._product = product;
     this.formGroup?.controls?.product?.setValue(product);
   }
+
   private _product = ProductType.Free;
 
   @Input()
   get plan(): PlanType {
     return this._plan;
   }
+
   set plan(plan: PlanType) {
     this._plan = plan;
     this.formGroup?.controls?.plan?.setValue(plan);
   }
+
   private _plan = PlanType.Free;
   @Input() providerId?: string;
   @Output() onSuccess = new EventEmitter<OnSuccessArgs>();
@@ -82,6 +91,9 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   singleOrgPolicyAppliesToActiveUser = false;
   isInTrialFlow = false;
   discount = 0;
+  showSecretsManagerSubscribe: boolean;
+
+  secretsManagerSubscription = secretsManagerSubscribeFormFactory(this.formBuilder);
 
   formGroup = this.formBuilder.group({
     name: [""],
@@ -94,9 +106,11 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     businessName: [""],
     plan: [this.plan],
     product: [this.product],
+    secretsManager: this.secretsManagerSubscription,
   });
 
-  plans: PlanResponse[];
+  passwordManagerPlans: PlanResponse[];
+  secretsManagerPlans: PlanResponse[];
 
   private destroy$ = new Subject<void>();
 
@@ -111,8 +125,9 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     private organizationService: OrganizationService,
     private logService: LogService,
     private messagingService: MessagingService,
-    private formBuilder: UntypedFormBuilder,
+    private formBuilder: FormBuilder,
-    private organizationApiService: OrganizationApiServiceAbstraction
+    private organizationApiService: OrganizationApiServiceAbstraction,
+    private configService: ConfigServiceAbstraction
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
   }
@@ -120,7 +135,13 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   async ngOnInit() {
     if (!this.selfHosted) {
       const plans = await this.apiService.getPlans();
-      this.plans = plans.data;
+      this.passwordManagerPlans = plans.data.filter(
+        (plan) => plan.bitwardenProduct === BitwardenProductType.PasswordManager
+      );
+      this.secretsManagerPlans = plans.data.filter(
+        (plan) => plan.bitwardenProduct === BitwardenProductType.SecretsManager
+      );
+
       if (this.product === ProductType.Enterprise || this.product === ProductType.Teams) {
         this.formGroup.controls.businessOwned.setValue(true);
       }
@@ -131,12 +152,9 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
       this.changedOwnedBusiness();
     }
 
-    if (!this.createOrganization || this.acceptingSponsorship) {
+    if (!this.createOrganization) {
-      this.formGroup.controls.product.setValue(ProductType.Families);
+      this.upgradeFlowPrefillForm();
-      this.changedProduct();
+    } else {
-    }
-
-    if (this.createOrganization) {
       this.formGroup.controls.name.addValidators([Validators.required, Validators.maxLength(50)]);
       this.formGroup.controls.billingEmail.addValidators(Validators.required);
     }
@@ -148,6 +166,11 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
         this.singleOrgPolicyAppliesToActiveUser = policyAppliesToActiveUser;
       });
 
+    this.showSecretsManagerSubscribe = await this.configService.getFeatureFlagBool(
+      FeatureFlag.SecretsManagerBilling,
+      false
+    );
+
     this.loading = false;
   }
 
@@ -165,7 +188,15 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   }
 
   get selectedPlan() {
-    return this.plans.find((plan) => plan.type === this.formGroup.controls.plan.value);
+    return this.passwordManagerPlans.find(
+      (plan) => plan.type === this.formGroup.controls.plan.value
+    );
+  }
+
+  get selectedSecretsManagerPlan() {
+    return this.secretsManagerPlans.find(
+      (plan) => plan.type === this.formGroup.controls.plan.value
+    );
   }
 
   get selectedPlanInterval() {
@@ -173,7 +204,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   }
 
   get selectableProducts() {
-    let validPlans = this.plans.filter((plan) => plan.type !== PlanType.Custom);
+    let validPlans = this.passwordManagerPlans.filter((plan) => plan.type !== PlanType.Custom);
 
     if (this.formGroup.controls.businessOwned.value) {
       validPlans = validPlans.filter((plan) => plan.canBeUsedByBusiness);
@@ -191,7 +222,9 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     );
 
     if (this.acceptingSponsorship) {
-      const familyPlan = this.plans.find((plan) => plan.type === PlanType.FamiliesAnnually);
+      const familyPlan = this.passwordManagerPlans.find(
+        (plan) => plan.type === PlanType.FamiliesAnnually
+      );
       this.discount = familyPlan.basePrice;
       validPlans = [familyPlan];
     }
@@ -200,7 +233,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   }
 
   get selectablePlans() {
-    return this.plans?.filter(
+    return this.passwordManagerPlans?.filter(
       (plan) =>
         !plan.legacyYear && !plan.disabled && plan.product === this.formGroup.controls.product.value
     );
@@ -231,21 +264,32 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     );
   }
 
-  seatTotal(plan: PlanResponse): number {
+  seatTotal(plan: PlanResponse, seats: number): number {
     if (!plan.hasAdditionalSeatsOption) {
       return 0;
     }
 
-    return plan.seatPrice * Math.abs(this.formGroup.controls.additionalSeats.value || 0);
+    return plan.seatPrice * Math.abs(seats || 0);
   }
 
-  get subtotal() {
+  additionalServiceAccountTotal(plan: PlanResponse): number {
+    if (!plan.hasAdditionalServiceAccountOption) {
+      return 0;
+    }
+
+    return (
+      plan.additionalPricePerServiceAccount *
+      Math.abs(this.secretsManagerForm.value.additionalServiceAccounts || 0)
+    );
+  }
+
+  get passwordManagerSubtotal() {
     let subTotal = this.selectedPlan.basePrice;
     if (
       this.selectedPlan.hasAdditionalSeatsOption &&
       this.formGroup.controls.additionalSeats.value
     ) {
-      subTotal += this.seatTotal(this.selectedPlan);
+      subTotal += this.seatTotal(this.selectedPlan, this.formGroup.value.additionalSeats);
     }
     if (
       this.selectedPlan.hasAdditionalStorageOption &&
@@ -262,18 +306,39 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     return subTotal - this.discount;
   }
 
+  get secretsManagerSubtotal() {
+    const plan = this.selectedSecretsManagerPlan;
+    const formValues = this.secretsManagerForm.value;
+
+    if (!this.planOffersSecretsManager || !formValues.enabled) {
+      return 0;
+    }
+
+    let subTotal = plan.basePrice;
+    if (plan.hasAdditionalSeatsOption && formValues.userSeats) {
+      subTotal += this.seatTotal(plan, formValues.userSeats);
+    }
+
+    if (plan.hasAdditionalStorageOption && formValues.additionalServiceAccounts) {
+      subTotal += this.additionalServiceAccountTotal(this.selectedPlan);
+    }
+
+    return subTotal;
+  }
+
   get freeTrial() {
     return this.selectedPlan.trialPeriodDays != null;
   }
 
   get taxCharges() {
     return this.taxComponent != null && this.taxComponent.taxRate != null
-      ? (this.taxComponent.taxRate / 100) * this.subtotal
+      ? (this.taxComponent.taxRate / 100) *
+          (this.passwordManagerSubtotal + this.secretsManagerSubtotal)
       : 0;
   }
 
   get total() {
-    return this.subtotal + this.taxCharges || 0;
+    return this.passwordManagerSubtotal + this.secretsManagerSubtotal + this.taxCharges || 0;
   }
 
   get paymentDesc() {
@@ -286,6 +351,14 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     }
   }
 
+  get secretsManagerForm() {
+    return this.formGroup.controls.secretsManager;
+  }
+
+  get planOffersSecretsManager() {
+    return this.selectedSecretsManagerPlan != null;
+  }
+
   changedProduct() {
     this.formGroup.controls.plan.setValue(this.selectablePlans[0].type);
     if (!this.selectedPlan.hasPremiumAccessOption) {
@@ -303,6 +376,14 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     ) {
       this.formGroup.controls.additionalSeats.setValue(1);
     }
+
+    if (this.planOffersSecretsManager) {
+      this.secretsManagerForm.enable();
+    } else {
+      this.secretsManagerForm.disable();
+    }
+
+    this.secretsManagerForm.updateValueAndValidity();
   }
 
   changedOwnedBusiness() {
@@ -407,6 +488,9 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     request.billingAddressCountry = this.taxComponent.taxInfo.country;
     request.billingAddressPostalCode = this.taxComponent.taxInfo.postalCode;
 
+    // Secrets Manager
+    this.buildSecretsManagerRequest(request);
+
     // Retrieve org info to backfill pub/priv key if necessary
     const org = await this.organizationService.get(this.organizationId);
     if (!org.hasPublicAndPrivateKeys) {
@@ -462,6 +546,9 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
       }
     }
 
+    // Secrets Manager
+    this.buildSecretsManagerRequest(request);
+
     if (this.providerId) {
       const providerRequest = new ProviderOrganizationCreateRequest(
         this.formGroup.controls.clientOwnerEmail.value,
@@ -517,4 +604,40 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
 
     return text;
   }
+
+  private buildSecretsManagerRequest(
+    request: OrganizationCreateRequest | OrganizationUpgradeRequest
+  ): void {
+    const formValues = this.secretsManagerForm.value;
+
+    request.useSecretsManager = this.planOffersSecretsManager && formValues.enabled;
+
+    if (!request.useSecretsManager) {
+      return;
+    }
+
+    if (this.selectedSecretsManagerPlan.hasAdditionalSeatsOption) {
+      request.additionalSmSeats = formValues.userSeats;
+    }
+
+    if (this.selectedSecretsManagerPlan.hasAdditionalServiceAccountOption) {
+      request.additionalServiceAccounts = formValues.additionalServiceAccounts;
+    }
+  }
+
+  private upgradeFlowPrefillForm() {
+    if (this.acceptingSponsorship) {
+      this.formGroup.controls.product.setValue(ProductType.Families);
+      this.changedProduct();
+      return;
+    }
+
+    // If they already have SM enabled, bump them up to Teams and enable SM to maintain this access
+    const organization = this.organizationService.get(this.organizationId);
+    if (organization.useSecretsManager) {
+      this.formGroup.controls.product.setValue(ProductType.Teams);
+      this.secretsManagerForm.controls.enabled.setValue(true);
+      this.changedProduct();
+    }
+  }
 }

apps/web/src/app/shared/loose-components.module.ts

@@ -51,6 +51,7 @@ import { UpdatePasswordComponent } from "../auth/update-password.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { VerifyEmailTokenComponent } from "../auth/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "../auth/verify-recover-delete.component";
+import { SecretsManagerBillingModule } from "../billing/organizations/secrets-manager/sm-billing.module";
 import { AddCreditComponent } from "../billing/settings/add-credit.component";
 import { AdjustPaymentComponent } from "../billing/settings/adjust-payment.component";
 import { BillingHistoryViewComponent } from "../billing/settings/billing-history-view.component";
@@ -125,6 +126,9 @@ import { SharedModule } from "./shared.module";
     DynamicAvatarComponent,
     EnvironmentSelectorModule,
     AccountFingerprintComponent,
+
+    // To be removed when OrganizationPlansComponent is moved to its own module (see AC-1453)
+    SecretsManagerBillingModule,
   ],
   declarations: [
     AcceptEmergencyComponent,

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

@@ -3323,6 +3323,9 @@
   "limitSubscriptionDesc": {
     "message": "Set a seat limit for your subscription. Once this limit is reached, you will not be able to invite new members."
   },
+  "limitSmSubscriptionDesc": {
+    "message": "Set a seat limit for your Secrets Manger subscription. Once this limit is reached, you will not be able to invite new members."
+  },
   "maxSeatLimit": {
     "message": "Seat Limit (optional)",
     "description": "Upper limit of seats to allow through autoscaling"
@@ -6617,12 +6620,12 @@
   "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."
   },
-  "secretsManagerBeta": {
-    "message": "Secrets Manager Beta"
-  },
   "secretsManager": {
     "message": "Secrets Manager"
   },
+  "secretsManagerBeta": {
+    "message": "Secrets Manager Beta"
+  },
   "secretsManagerAccessDescription": {
     "message": "Activate user access to Secrets Manager."
   },
@@ -6955,5 +6958,99 @@
   },
   "selectedRegionFlag": {
     "message": "Selected region flag"
+  },
+  "secretsManagerForPlan": {
+    "message": "Secrets Manager for $PLAN$",
+    "placeholders": {
+      "plan": {
+        "content": "$1",
+        "example": "Teams"
+      }
+    }
+  },
+  "secretsManagerForPlanDesc": {
+    "message": "For engineering and DevOps teams to manage secrets throughout the software development lifecycle."
+  },
+  "free2PersonOrganization": {
+    "message": "Free 2-person Organizations"
+  },
+  "unlimitedSecrets": {
+    "message": "Unlimited secrets"
+  },
+  "unlimitedProjects": {
+    "message": "Unlimited projects"
+  },
+  "projectsIncluded": {
+    "message": "$COUNT$ projects included",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "3"
+      }
+    }
+  },
+  "serviceAccountsIncluded": {
+    "message": "$COUNT$ service accounts included",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "3"
+      }
+    }
+  },
+  "additionalServiceAccountCost": {
+    "message": "$COST$ per month for additional service accounts",
+    "placeholders": {
+      "cost": {
+        "content": "$1",
+        "example": "$0.50"
+      }
+    }
+  },
+  "addSecretsManager": {
+    "message": "Add Secrets Manager"
+  },
+  "addSecretsManagerUpgradeDesc": {
+    "message": "Add Secrets Manager to your upgraded plan to maintain access to any secrets created with your previous plan."
+  },
+  "additionalServiceAccounts": {
+    "message": "Additional service accounts"
+  },
+  "additionalServiceAccountsDesc": {
+    "message": "Your plan comes with $COUNT$ service accounts. You can add additional service accounts for $COST$ per month.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "50"
+      },
+      "cost": {
+        "content": "$2",
+        "example": "$0.50"
+      }
+    }
+  },
+  "passwordManagerPlanPrice": {
+    "message": "Password Manager plan price"
+  },
+  "secretsManagerPlanPrice": {
+    "message": "Secrets Manager plan price"
+  },
+  "passwordManager": {
+    "message": "Password Manager"
+  },
+  "freeOrganization": {
+    "message": "Free Organization"
+  },
+  "limitServiceAccounts": {
+    "message": "Limit service accounts (optional)"
+  },
+  "limitServiceAccountsDesc": {
+    "message": "Set a limit for your service accounts. Once this limit is reached, you will not be able to create new service accounts."
+  },
+  "serviceAccountLimit": {
+    "message": "Service account limit (optional)"
+  },
+  "maxServiceAccountCost": {
+    "message": "Max potential service account cost"
   }
 }

libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts

@@ -3,9 +3,11 @@ import { OrganizationSsoRequest } from "../../../auth/models/request/organizatio
 import { SecretVerificationRequest } from "../../../auth/models/request/secret-verification.request";
 import { ApiKeyResponse } from "../../../auth/models/response/api-key.response";
 import { OrganizationSsoResponse } from "../../../auth/models/response/organization-sso.response";
+import { OrganizationSmSubscriptionUpdateRequest } from "../../../billing/models/request/organization-sm-subscription-update.request";
 import { OrganizationSubscriptionUpdateRequest } from "../../../billing/models/request/organization-subscription-update.request";
 import { OrganizationTaxInfoUpdateRequest } from "../../../billing/models/request/organization-tax-info-update.request";
 import { PaymentRequest } from "../../../billing/models/request/payment.request";
+import { SecretsManagerSubscribeRequest } from "../../../billing/models/request/sm-subscribe.request";
 import { BillingResponse } from "../../../billing/models/response/billing.response";
 import { OrganizationSubscriptionResponse } from "../../../billing/models/response/organization-subscription.response";
 import { PaymentResponse } from "../../../billing/models/response/payment.response";
@@ -16,7 +18,6 @@ import { StorageRequest } from "../../../models/request/storage.request";
 import { VerifyBankRequest } from "../../../models/request/verify-bank.request";
 import { ListResponse } from "../../../models/response/list.response";
 import { OrganizationApiKeyType } from "../../enums";
-import { OrganizationEnrollSecretsManagerRequest } from "../../models/request/organization/organization-enroll-secrets-manager.request";
 import { OrganizationCreateRequest } from "../../models/request/organization-create.request";
 import { OrganizationKeysRequest } from "../../models/request/organization-keys.request";
 import { OrganizationUpdateRequest } from "../../models/request/organization-update.request";
@@ -37,7 +38,14 @@ export class OrganizationApiServiceAbstraction {
   save: (id: string, request: OrganizationUpdateRequest) => Promise<OrganizationResponse>;
   updatePayment: (id: string, request: PaymentRequest) => Promise<void>;
   upgrade: (id: string, request: OrganizationUpgradeRequest) => Promise<PaymentResponse>;
-  updateSubscription: (id: string, request: OrganizationSubscriptionUpdateRequest) => Promise<void>;
+  updatePasswordManagerSeats: (
+    id: string,
+    request: OrganizationSubscriptionUpdateRequest
+  ) => Promise<void>;
+  updateSecretsManagerSubscription: (
+    id: string,
+    request: OrganizationSmSubscriptionUpdateRequest
+  ) => Promise<void>;
   updateSeats: (id: string, request: SeatRequest) => Promise<PaymentResponse>;
   updateStorage: (id: string, request: StorageRequest) => Promise<PaymentResponse>;
   verifyBank: (id: string, request: VerifyBankRequest) => Promise<void>;
@@ -60,8 +68,5 @@ export class OrganizationApiServiceAbstraction {
   getSso: (id: string) => Promise<OrganizationSsoResponse>;
   updateSso: (id: string, request: OrganizationSsoRequest) => Promise<OrganizationSsoResponse>;
   selfHostedSyncLicense: (id: string) => Promise<void>;
-  updateEnrollSecretsManager: (
+  subscribeToSecretsManager: (id: string, request: SecretsManagerSubscribeRequest) => Promise<void>;
-    id: string,
-    request: OrganizationEnrollSecretsManagerRequest
-  ) => Promise<void>;
 }

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/request/organization-create.request.ts

@@ -23,4 +23,8 @@ export class OrganizationCreateRequest {
   billingAddressState: string;
   billingAddressPostalCode: string;
   billingAddressCountry: string;
+
+  useSecretsManager: boolean;
+  additionalSmSeats: number;
+  additionalServiceAccounts: number;
 }

libs/common/src/admin-console/models/request/organization-upgrade.request.ts

@@ -11,4 +11,8 @@ export class OrganizationUpgradeRequest {
   billingAddressCountry: string;
   billingAddressPostalCode: string;
   keys: OrganizationKeysRequest;
+
+  useSecretsManager: boolean;
+  additionalSmSeats: number;
+  additionalServiceAccounts: number;
 }

libs/common/src/admin-console/models/request/organization/organization-enroll-secrets-manager.request.ts

@@ -1,3 +0,0 @@
-export class OrganizationEnrollSecretsManagerRequest {
-  enabled: boolean;
-}

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

@@ -13,6 +13,7 @@ export class OrganizationResponse extends BaseResponse {
   businessTaxNumber: string;
   billingEmail: string;
   plan: PlanResponse;
+  secretsManagerPlan: PlanResponse;
   planType: PlanType;
   seats: number;
   maxAutoscaleSeats: number;
@@ -27,6 +28,11 @@ export class OrganizationResponse extends BaseResponse {
   useResetPassword: boolean;
   useSecretsManager: boolean;
   hasPublicAndPrivateKeys: boolean;
+  usePasswordManager: boolean;
+  smSeats?: number;
+  smServiceAccounts?: number;
+  maxAutoscaleSmSeats?: number;
+  maxAutoscaleSmServiceAccounts?: number;
 
   constructor(response: any) {
     super(response);
@@ -39,8 +45,14 @@ export class OrganizationResponse extends BaseResponse {
     this.businessCountry = this.getResponseProperty("BusinessCountry");
     this.businessTaxNumber = this.getResponseProperty("BusinessTaxNumber");
     this.billingEmail = this.getResponseProperty("BillingEmail");
+
     const plan = this.getResponseProperty("Plan");
     this.plan = plan == null ? null : new PlanResponse(plan);
+
+    const secretsManagerPlan = this.getResponseProperty("SecretsManagerPlan");
+    this.secretsManagerPlan =
+      secretsManagerPlan == null ? null : new PlanResponse(secretsManagerPlan);
+
     this.planType = this.getResponseProperty("PlanType");
     this.seats = this.getResponseProperty("Seats");
     this.maxAutoscaleSeats = this.getResponseProperty("MaxAutoscaleSeats");
@@ -55,5 +67,10 @@ export class OrganizationResponse extends BaseResponse {
     this.useResetPassword = this.getResponseProperty("UseResetPassword");
     this.useSecretsManager = this.getResponseProperty("UseSecretsManager");
     this.hasPublicAndPrivateKeys = this.getResponseProperty("HasPublicAndPrivateKeys");
+    this.usePasswordManager = this.getResponseProperty("UsePasswordManager");
+    this.smSeats = this.getResponseProperty("SmSeats");
+    this.smServiceAccounts = this.getResponseProperty("SmServiceAccounts");
+    this.maxAutoscaleSmSeats = this.getResponseProperty("MaxAutoscaleSmSeats");
+    this.maxAutoscaleSmServiceAccounts = this.getResponseProperty("MaxAutoscaleSmServiceAccounts");
   }
 }

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/admin-console/services/organization/organization-api.service.ts

@@ -4,9 +4,11 @@ import { OrganizationSsoRequest } from "../../../auth/models/request/organizatio
 import { SecretVerificationRequest } from "../../../auth/models/request/secret-verification.request";
 import { ApiKeyResponse } from "../../../auth/models/response/api-key.response";
 import { OrganizationSsoResponse } from "../../../auth/models/response/organization-sso.response";
+import { OrganizationSmSubscriptionUpdateRequest } from "../../../billing/models/request/organization-sm-subscription-update.request";
 import { OrganizationSubscriptionUpdateRequest } from "../../../billing/models/request/organization-subscription-update.request";
 import { OrganizationTaxInfoUpdateRequest } from "../../../billing/models/request/organization-tax-info-update.request";
 import { PaymentRequest } from "../../../billing/models/request/payment.request";
+import { SecretsManagerSubscribeRequest } from "../../../billing/models/request/sm-subscribe.request";
 import { BillingResponse } from "../../../billing/models/response/billing.response";
 import { OrganizationSubscriptionResponse } from "../../../billing/models/response/organization-subscription.response";
 import { PaymentResponse } from "../../../billing/models/response/payment.response";
@@ -19,7 +21,6 @@ import { ListResponse } from "../../../models/response/list.response";
 import { SyncService } from "../../../vault/abstractions/sync/sync.service.abstraction";
 import { OrganizationApiServiceAbstraction } from "../../abstractions/organization/organization-api.service.abstraction";
 import { OrganizationApiKeyType } from "../../enums";
-import { OrganizationEnrollSecretsManagerRequest } from "../../models/request/organization/organization-enroll-secrets-manager.request";
 import { OrganizationCreateRequest } from "../../models/request/organization-create.request";
 import { OrganizationKeysRequest } from "../../models/request/organization-keys.request";
 import { OrganizationUpdateRequest } from "../../models/request/organization-update.request";
@@ -120,7 +121,7 @@ export class OrganizationApiService implements OrganizationApiServiceAbstraction
     return new PaymentResponse(r);
   }
 
-  async updateSubscription(
+  async updatePasswordManagerSeats(
     id: string,
     request: OrganizationSubscriptionUpdateRequest
   ): Promise<void> {
@@ -133,6 +134,19 @@ export class OrganizationApiService implements OrganizationApiServiceAbstraction
     );
   }
 
+  async updateSecretsManagerSubscription(
+    id: string,
+    request: OrganizationSmSubscriptionUpdateRequest
+  ): Promise<void> {
+    return this.apiService.send(
+      "POST",
+      "/organizations/" + id + "/sm-subscription",
+      request,
+      true,
+      false
+    );
+  }
+
   async updateSeats(id: string, request: SeatRequest): Promise<PaymentResponse> {
     const r = await this.apiService.send(
       "POST",
@@ -294,13 +308,16 @@ export class OrganizationApiService implements OrganizationApiServiceAbstraction
     );
   }
 
-  async updateEnrollSecretsManager(id: string, request: OrganizationEnrollSecretsManagerRequest) {
+  async subscribeToSecretsManager(
-    await this.apiService.send(
+    id: string,
+    request: SecretsManagerSubscribeRequest
+  ): Promise<void> {
+    return await this.apiService.send(
       "POST",
-      "/organizations/" + id + "/enroll-secrets-manager",
+      "/organizations/" + id + "/subscribe-secrets-manager",
       request,
       true,
-      true
+      false
     );
   }
 }

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/enums/index.ts

@@ -2,3 +2,4 @@ export * from "./payment-method-type.enum";
 export * from "./plan-sponsorship-type.enum";
 export * from "./plan-type.enum";
 export * from "./transaction-type.enum";
+export * from "./bitwarden-product-type.enum";

libs/common/src/billing/models/request/organization-sm-subscription-update.request.ts

@@ -0,0 +1,21 @@
+export class OrganizationSmSubscriptionUpdateRequest {
+  /**
+   * The number of seats to add or remove from the subscription.
+   */
+  seatAdjustment: number;
+
+  /**
+   * The maximum number of seats that can be auto-scaled for the subscription.
+   */
+  maxAutoscaleSeats?: number;
+
+  /**
+   * The number of additional service accounts to add or remove from the subscription.
+   */
+  serviceAccountAdjustment: number;
+
+  /**
+   * The maximum number of additional service accounts that can be auto-scaled for the subscription.
+   */
+  maxAutoscaleServiceAccounts?: number;
+}

libs/common/src/billing/models/request/organization-subscription-update.request.ts

@@ -1,3 +1,23 @@
 export class OrganizationSubscriptionUpdateRequest {
-  constructor(public seatAdjustment: number, public maxAutoscaleSeats?: number) {}
+  /**
+   * The number of seats to add or remove from the subscription.
+   * Applies to both PM and SM request types.
+   */
+  seatAdjustment: number;
+
+  /**
+   * The maximum number of seats that can be auto-scaled for the subscription.
+   * Applies to both PM and SM request types.
+   */
+  maxAutoscaleSeats?: number;
+
+  /**
+   * Build a subscription update request for the Password Manager product type.
+   * @param seatAdjustment - The number of seats to add or remove from the subscription.
+   * @param maxAutoscaleSeats - The maximum number of seats that can be auto-scaled for the subscription.
+   */
+  constructor(seatAdjustment: number, maxAutoscaleSeats?: number) {
+    this.seatAdjustment = seatAdjustment;
+    this.maxAutoscaleSeats = maxAutoscaleSeats;
+  }
 }

libs/common/src/billing/models/request/sm-subscribe.request.ts

@@ -0,0 +1,4 @@
+export class SecretsManagerSubscribeRequest {
+  additionalSmSeats: number;
+  additionalServiceAccounts: number;
+}

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

@@ -1,10 +1,11 @@
 import { ProductType } from "../../../enums";
 import { BaseResponse } from "../../../models/response/base.response";
-import { PlanType } from "../../enums";
+import { BitwardenProductType, PlanType } from "../../enums";
 
 export class PlanResponse extends BaseResponse {
   type: PlanType;
   product: ProductType;
+  bitwardenProduct: BitwardenProductType;
   name: string;
   isAnnual: boolean;
   nameLocalizationKey: string;
@@ -48,6 +49,15 @@ export class PlanResponse extends BaseResponse {
   additionalStoragePricePerGb: number;
   premiumAccessOptionPrice: number;
 
+  // SM only
+  additionalPricePerServiceAccount: number;
+  baseServiceAccount: number;
+  maxServiceAccount: number;
+  hasAdditionalServiceAccountOption: boolean;
+  maxProjects: number;
+  maxAdditionalServiceAccounts: number;
+  stripeServiceAccountPlanId: string;
+
   constructor(response: any) {
     super(response);
     this.type = this.getResponseProperty("Type");
@@ -90,5 +100,18 @@ export class PlanResponse extends BaseResponse {
     this.seatPrice = this.getResponseProperty("SeatPrice");
     this.additionalStoragePricePerGb = this.getResponseProperty("AdditionalStoragePricePerGb");
     this.premiumAccessOptionPrice = this.getResponseProperty("PremiumAccessOptionPrice");
+
+    this.bitwardenProduct = this.getResponseProperty("BitwardenProduct");
+    this.additionalPricePerServiceAccount = this.getResponseProperty(
+      "AdditionalPricePerServiceAccount"
+    );
+    this.baseServiceAccount = this.getResponseProperty("BaseServiceAccount");
+    this.maxServiceAccount = this.getResponseProperty("MaxServiceAccount");
+    this.hasAdditionalServiceAccountOption = this.getResponseProperty(
+      "HasAdditionalServiceAccountOption"
+    );
+    this.maxProjects = this.getResponseProperty("MaxProjects");
+    this.maxAdditionalServiceAccounts = this.getResponseProperty("MaxAdditionalServiceAccounts");
+    this.stripeServiceAccountPlanId = this.getResponseProperty("StripeServiceAccountPlanId");
   }
 }

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

@@ -1,4 +1,5 @@
 import { BaseResponse } from "../../../models/response/base.response";
+import { BitwardenProductType } from "../../enums";
 
 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");
   }
 }
 

libs/common/src/enums/feature-flag.enum.ts

@@ -2,4 +2,5 @@ export enum FeatureFlag {
   DisplayEuEnvironmentFlag = "display-eu-environment",
   DisplayLowKdfIterationWarningFlag = "display-kdf-iteration-warning",
   TrustedDeviceEncryption = "trusted-device-encryption",
+  SecretsManagerBilling = "sm-ga-billing",
 }

libs/common/src/services/api.service.ts

@@ -881,7 +881,7 @@ export class ApiService implements ApiServiceAbstraction {
   // Plan APIs
 
   async getPlans(): Promise<ListResponse<PlanResponse>> {
-    const r = await this.send("GET", "/plans/", null, false, true);
+    const r = await this.send("GET", "/plans/all", null, false, true);
     return new ListResponse(r, PlanResponse);
   }