Only show client org CB experience when provider status is Billable (#11693)

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

@@ -264,7 +264,7 @@
 </bit-container>
 <ng-template #hideSubscription>
   <bit-container *ngIf="!loading">
-    <ng-container *ngIf="enableConsolidatedBilling$ | async; else consolidatedBillingDisabled">
+    <ng-container *ngIf="providerIsOnConsolidatedBilling; else providerIsNotOnConsolidatedBilling">
       <h2 bitTypography="h2">{{ "manageSubscription" | i18n }}</h2>
       <p bitTypography="body1" *ngIf="userOrg.isProviderUser; else isOrganizationOwner">
         {{ "manageSubscriptionFromThe" | i18n }}
@@ -281,7 +281,7 @@
       </ng-template>
       <ng-container *ngTemplateOutlet="setupSelfHost"></ng-container>
     </ng-container>
-    <ng-template #consolidatedBillingDisabled>
+    <ng-template #providerIsNotOnConsolidatedBilling>
       <div class="tw-flex tw-flex-col tw-items-center tw-text-info">
         <bit-icon [icon]="subscriptionHiddenIcon"></bit-icon>
         <p class="tw-font-bold">{{ "billingManagedByProvider" | i18n: userOrg.providerName }}</p>

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

@@ -5,7 +5,8 @@ import { concatMap, firstValueFrom, lastValueFrom, Observable, Subject, takeUnti
 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 { OrganizationApiKeyType } from "@bitwarden/common/admin-console/enums";
+import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
+import { OrganizationApiKeyType, ProviderStatusType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 import { PlanType, ProductTierType } from "@bitwarden/common/billing/enums";
@@ -56,6 +57,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
   preSelectedProductTier: ProductTierType = ProductTierType.Free;
   showSubscription = true;
   showSelfHost = false;
+  providerIsOnConsolidatedBilling = false;
 
   protected readonly subscriptionHiddenIcon = SubscriptionHiddenIcon;
   protected readonly teamsStarter = ProductTierType.TeamsStarter;
@@ -89,6 +91,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     private configService: ConfigService,
     private toastService: ToastService,
     private billingApiService: BillingApiServiceAbstraction,
+    private providerService: ProviderService,
   ) {}
 
   async ngOnInit() {
@@ -129,22 +132,20 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     this.locale = await firstValueFrom(this.i18nService.locale$);
     this.userOrg = await this.organizationService.get(this.organizationId);
 
-    /*
-    +--------------------+--------------+----------------------+--------------+
-    |     User Type      | Has Provider | Consolidated Billing | Subscription |
-    +--------------------+--------------+----------------------+--------------+
-    | Organization Owner | False        | N/A                  | Shown        |
-    | Organization Owner | True         | N/A                  | Hidden       |
-    | Provider User      | True         | False                | Shown        |
-    | Provider User      | True         | True                 | Hidden       |
-    +--------------------+--------------+----------------------+--------------+
-     */
-
     const consolidatedBillingEnabled = await firstValueFrom(this.enableConsolidatedBilling$);
 
+    const provider = this.userOrg.hasProvider
+      ? await this.providerService.get(this.userOrg.providerId)
+      : null;
+
+    this.providerIsOnConsolidatedBilling =
+      consolidatedBillingEnabled && provider?.providerStatus === ProviderStatusType.Billable;
+
+    const isIndependentOrganizationOwner = !this.userOrg.hasProvider && this.userOrg.isOwner;
+    const isProviderUser = this.userOrg.hasProvider && this.userOrg.isProviderUser;
+
     this.showSubscription =
-      (!this.userOrg.hasProvider && this.userOrg.isOwner) ||
+      isIndependentOrganizationOwner || (isProviderUser && !this.providerIsOnConsolidatedBilling);
-      (this.userOrg.hasProvider && this.userOrg.isProviderUser && !consolidatedBillingEnabled);
 
     const metadata = await this.billingApiService.getOrganizationBillingMetadata(
       this.organizationId,