[PM-14921]Customers managed by a Reseller need to see how many seats are in their subscription, while still obfuscating the cost of subscription.

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

@@ -294,6 +294,10 @@ <h2 bitTypography="h2">{{ "manageSubscription" | i18n }}</h2>
 </ng-template>
 
 <ng-template #setupSelfHost>
+  <ng-container *ngIf="userOrg.hasReseller">
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "manageSubscription" | i18n }}</h2>
+    <p bitTypography="body1">{{ seatUsageMessage }}</p>
+  </ng-container>
   <ng-container *ngIf="showSelfHost">
     <h2 bitTypography="h2" class="tw-mt-7">
       {{ "selfHostingTitleProper" | i18n }}

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

@@ -4,13 +4,17 @@
 import { ActivatedRoute } from "@angular/router";
 import { firstValueFrom, lastValueFrom, Observable, Subject } from "rxjs";
 
+import { OrganizationUserApiService } from "@bitwarden/admin-console/common";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import {
   getOrganizationById,
   OrganizationService,
 } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { OrganizationApiKeyType } from "@bitwarden/common/admin-console/enums";
+import {
+  OrganizationApiKeyType,
+  OrganizationUserStatusType,
+} from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
@@ -67,6 +71,8 @@
 
   private destroy$ = new Subject<void>();
 
+  private seatsRemainingMessage: string;
+
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
@@ -79,6 +85,7 @@
     private configService: ConfigService,
     private toastService: ToastService,
     private billingApiService: BillingApiServiceAbstraction,
+    private organizationUserApiService: OrganizationUserApiService,
   ) {}
 
   async ngOnInit() {
@@ -104,6 +111,7 @@
         }
       }
     }
+    await this.getAllUsers();
   }
 
   ngOnDestroy() {
@@ -478,6 +486,40 @@
   get canUseBillingSync() {
     return this.userOrg.productTierType === ProductTierType.Enterprise;
   }
+
+  async getAllUsers(): Promise<void> {
+    if (!this.sub?.seats) {
+      this.seatsRemainingMessage = "";
+    }
+
+    if (this.userOrg.hasReseller) {
+      const allUsers = await this.organizationUserApiService.getAllUsers(this.userOrg.id);
+
+      const userCount = allUsers.data.filter((user) =>
+        [
+          OrganizationUserStatusType.Invited,
+          OrganizationUserStatusType.Accepted,
+          OrganizationUserStatusType.Confirmed,
+        ].includes(user.status),
+      ).length;
+
+      const remainingSeats = this.userOrg.seats - userCount;
+
+      const seatsRemaining = this.i18nService.t(
+        "seatsRemaining",
+        remainingSeats.toString(),
+        this.userOrg.seats.toString(),
+      );
+
+      this.seatsRemainingMessage = seatsRemaining;
+    } else {
+      this.seatsRemainingMessage = this.subscriptionDesc;
+    }
+  }
+
+  get seatUsageMessage(): string {
+    return this.seatsRemainingMessage;
+  }
 }
 
 /**

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

@@ -10300,5 +10300,18 @@
         "example": "Acme c"
       }
     }
+  },
+  "seatsRemaining": {
+    "message": "You have $REMAINING$ seats remaining out of $TOTAL$ seats assigned to this organization. Contact your provider to manage your subscription.",
+    "placeholders": {
+      "remaining": {
+        "content": "$1",
+        "example": "5"
+      },
+      "total": {
+        "content": "$2",
+        "example": "10"
+      }
+    }
   }
 }