Add the seats info for reseller managed org

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="canShowResellerSeatInfo">
+    <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

@@ -492,6 +492,28 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
   get canUseBillingSync() {
     return this.userOrg.productTierType === ProductTierType.Enterprise;
   }
+
+  get canShowResellerSeatInfo(): boolean {
+    return this.userOrg.hasReseller;
+  }
+
+  get seatUsageMessage(): string {
+    if (!this.sub?.seats) {
+      return "";
+    }
+
+    const remainingSeats = this.userOrg.seats - this.sub.seats;
+
+    if (this.userOrg.hasReseller) {
+      return this.i18nService.t(
+        "seatsRemaining",
+        remainingSeats.toString(),
+        this.userOrg.seats.toString(),
+      );
+    }
+
+    return this.subscriptionDesc;
+  }
 }
 
 /**

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

@@ -10066,5 +10066,18 @@
         "example": "02/14/2024"
       }
     }
+  },
+  "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"
+      }
+    }
   }
 }