From 2a956744bdb8057fb33c2b8fae6db277e0bc18a7 Mon Sep 17 00:00:00 2001
From: Brandon Treston <btreston@bitwarden.com>
Date: Mon, 28 Oct 2024 11:24:14 -0400
Subject: [PATCH] [PM-13645] Fix invite counter to check remaining number of
 seats in plan (#11577)

* Fix invite counter to check remaining number of seats in plan

* Remove redundant async pipe subscriptions
---
 .../member-dialog/member-dialog.component.html        | 11 ++++++-----
 .../member-dialog/member-dialog.component.ts          |  5 +++++
 apps/web/src/locales/en/messages.json                 |  3 +++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
index 2c5daf93c6..a8ecf255f3 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
@@ -23,14 +23,15 @@
         <bit-tab [label]="'role' | i18n">
           <ng-container *ngIf="!editMode">
             <p bitTypography="body1">{{ "inviteUserDesc" | i18n }}</p>
-            <bit-form-field>
+            <bit-form-field *ngIf="remainingSeats$ | async as remainingSeats">
               <bit-label>{{ "email" | i18n }}</bit-label>
               <input id="emails" type="text" appAutoFocus bitInput formControlName="emails" />
-              <bit-hint>{{
-                "inviteMultipleEmailDesc"
-                  | i18n
-                    : (organization.productTierType === ProductTierType.TeamsStarter ? "10" : "20")
+              <bit-hint *ngIf="remainingSeats > 1; else singleSeat">{{
+                "inviteMultipleEmailDesc" | i18n: remainingSeats
               }}</bit-hint>
+              <ng-template #singleSeat>
+                <bit-hint>{{ "inviteSingleEmailDesc" | i18n: remainingSeats }}</bit-hint>
+              </ng-template>
             </bit-form-field>
           </ng-container>
           <bit-radio-group formControlName="type">
diff --git a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
index 8df40e35fe..4a95c9cb9c 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
@@ -89,6 +89,7 @@ export class MemberDialogComponent implements OnDestroy {
   PermissionMode = PermissionMode;
   showNoMasterPasswordWarning = false;
   isOnSecretsManagerStandalone: boolean;
+  remainingSeats$: Observable<number>;
 
   protected organization$: Observable<Organization>;
   protected collectionAccessItems: AccessItemView[] = [];
@@ -250,6 +251,10 @@ export class MemberDialogComponent implements OnDestroy {
 
         this.loading = false;
       });
+
+    this.remainingSeats$ = this.organization$.pipe(
+      map((organization) => organization.seats - this.params.numConfirmedMembers),
+    );
   }
 
   private setFormValidators(organization: Organization) {
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 9ea33149de..dc1722bc7a 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -3214,6 +3214,9 @@
       }
     }
   },
+  "inviteSingleEmailDesc": {
+    "message": "You have 1 invite remaining."
+  },
   "userUsingTwoStep": {
     "message": "This user is using two-step login to protect their account."
   },