From ec16efabf26c8838c47e8e08b8c01818196470ec Mon Sep 17 00:00:00 2001
From: Alec Rippberger <127791530+alec-livefront@users.noreply.github.com>
Date: Mon, 3 Feb 2025 10:15:32 -0600
Subject: [PATCH 1/2] refactor(styles): [PM-17181] remove Bootstrap styles from
 UserVerificationFormInputComponent

Replace Bootstrap classes with Tailwind CSS equivalents to maintain consistent styling:
- Replace form-control with Tailwind input classes
- Replace btn and btn-outline-secondary with Tailwind button classes
- Replace d-block with tw-block
- Replace spacing and utility classes with tw- prefixed equivalents
- Replace box-content-row with Tailwind layout classes

[PM-17181]
---
 .../user-verification-form-input.component.html                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/auth/src/angular/user-verification/user-verification-form-input.component.html b/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
index f532a3b23fd..56bce040d2f 100644
--- a/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
+++ b/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
@@ -120,7 +120,7 @@
     <div class="tw-mb-6" *ngIf="sentInitialCode">
       {{ "enterVerificationCodeSentToEmail" | i18n }}
 
-      <p class="mb-0">
+      <p class="tw-mb-0">
         <button bitLink type="button" linkType="primary" (click)="requestOTP()">
           {{ "resendCode" | i18n }}
         </button>

From 27a8b4335020de0428a000a36c9f688a3cefc1d3 Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Mon, 3 Feb 2025 17:21:00 +0100
Subject: [PATCH 2/2] [PM-14921]Customers managed by a Reseller need to see how
 many seats are in their subscription, while still obfuscating the cost of
 subscription. (#12726)

* Add the seats info for reseller managed org

* Resolve the remaining seat bug

* Resolve pr comments

* code refactoring
---
 ...nization-subscription-cloud.component.html |  4 +++
 ...ganization-subscription-cloud.component.ts | 32 ++++++++++++++++++-
 apps/web/src/locales/en/messages.json         | 13 ++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index 0cd21d0f688..1d8a7846d9d 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -294,6 +294,10 @@
 </ng-template>
 
 <ng-template #setupSelfHost>
+  <ng-container *ngIf="userOrg.hasReseller && resellerSeatsRemainingMessage">
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "manageSubscription" | i18n }}</h2>
+    <p bitTypography="body1">{{ resellerSeatsRemainingMessage }}</p>
+  </ng-container>
   <ng-container *ngIf="showSelfHost">
     <h2 bitTypography="h2" class="tw-mt-7">
       {{ "selfHostingTitleProper" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
index 003f816ac30..50c755af63b 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
@@ -4,13 +4,17 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 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";
@@ -61,12 +65,15 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
   showSubscription = true;
   showSelfHost = false;
   organizationIsManagedByConsolidatedBillingMSP = false;
+  resellerSeatsRemainingMessage: string;
 
   protected readonly subscriptionHiddenIcon = SubscriptionHiddenIcon;
   protected readonly teamsStarter = ProductTierType.TeamsStarter;
 
   private destroy$ = new Subject<void>();
 
+  private seatsRemainingMessage: string;
+
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
@@ -79,6 +86,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     private configService: ConfigService,
     private toastService: ToastService,
     private billingApiService: BillingApiServiceAbstraction,
+    private organizationUserApiService: OrganizationUserApiService,
   ) {}
 
   async ngOnInit() {
@@ -104,6 +112,28 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
         }
       }
     }
+
+    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.resellerSeatsRemainingMessage = seatsRemaining;
+    }
   }
 
   ngOnDestroy() {
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index c6e8b492c1c..34551f68cc0 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -10333,5 +10333,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"
+      }
+    }
   }
 }