[PM-13470] Allow creating clients for multi-org providers (#11890)

bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.html

@@ -12,7 +12,7 @@
         }}</span>
       </div>
       <ng-container>
-        <div class="tw-grid tw-grid-flow-col tw-grid-cols-2 tw-gap-4 tw-mb-4">
+        <div class="tw-grid tw-grid-flow-col tw-auto-cols-[minmax(0,_2fr)] tw-gap-4 tw-mb-4">
           <div
             *ngFor="let planCard of planCards"
             [ngClass]="getPlanCardContainerClasses(planCard.selected)"

bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.ts

@@ -3,7 +3,7 @@ import { Component, Inject, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 
 import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
-import { PlanType } from "@bitwarden/common/billing/enums";
+import { PlanType, ProductTierType } from "@bitwarden/common/billing/enums";
 import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
 import { ProviderPlanResponse } from "@bitwarden/common/billing/models/response/provider-subscription-response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -103,30 +103,35 @@ export class CreateClientDialogComponent implements OnInit {
 
     this.providerPlans = response?.plans ?? [];
 
-    const teamsPlan = this.dialogParams.plans.find((plan) => plan.type === PlanType.TeamsMonthly);
-    const enterprisePlan = this.dialogParams.plans.find(
-      (plan) => plan.type === PlanType.EnterpriseMonthly,
-    );
-
     this.discountPercentage = response.discountPercentage;
     const discountFactor = this.discountPercentage ? (100 - this.discountPercentage) / 100 : 1;
 
-    this.planCards = [
-      {
-        name: this.i18nService.t("planNameTeams"),
-        cost: teamsPlan.PasswordManager.providerPortalSeatPrice * discountFactor,
-        type: teamsPlan.type,
-        plan: teamsPlan,
-        selected: true,
-      },
-      {
-        name: this.i18nService.t("planNameEnterprise"),
-        cost: enterprisePlan.PasswordManager.providerPortalSeatPrice * discountFactor,
-        type: enterprisePlan.type,
-        plan: enterprisePlan,
-        selected: false,
-      },
-    ];
+    this.planCards = [];
+
+    for (let i = 0; i < this.providerPlans.length; i++) {
+      const providerPlan = this.providerPlans[i];
+      const plan = this.dialogParams.plans.find((plan) => plan.type === providerPlan.type);
+
+      let planName: string;
+      switch (plan.productTier) {
+        case ProductTierType.Teams: {
+          planName = this.i18nService.t("planNameTeams");
+          break;
+        }
+        case ProductTierType.Enterprise: {
+          planName = this.i18nService.t("planNameEnterprise");
+          break;
+        }
+      }
+
+      this.planCards.push({
+        name: planName,
+        cost: plan.PasswordManager.providerPortalSeatPrice * discountFactor,
+        type: plan.type,
+        plan: plan,
+        selected: i === 0,
+      });
+    }
 
     this.loading = false;
   }

bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription-status.component.html

@@ -4,7 +4,7 @@
   </bit-callout>
   <dl class="tw-grid tw-grid-flow-col tw-grid-rows-2">
     <dt>{{ "billingPlan" | i18n }}</dt>
-    <dd>{{ "providerPlan" | i18n }}</dd>
+    <dd>{{ plan | i18n }}</dd>
     <ng-container *ngIf="data.status && data.date">
       <dt>{{ data.status.label }}</dt>
       <dd>

bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription-status.component.ts

@@ -1,6 +1,7 @@
 import { DatePipe } from "@angular/common";
 import { Component, Input } from "@angular/core";
 
+import { ProviderType } from "@bitwarden/common/admin-console/enums";
 import { ProviderSubscriptionResponse } from "@bitwarden/common/billing/models/response/provider-subscription-response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -32,6 +33,15 @@ export class ProviderSubscriptionStatusComponent {
     private i18nService: I18nService,
   ) {}
 
+  get plan(): string {
+    switch (this.subscription.providerType) {
+      case ProviderType.Msp:
+        return "managedServiceProvider";
+      case ProviderType.MultiOrganizationEnterprise:
+        return "multiOrganizationEnterprise";
+    }
+  }
+
   get status(): string {
     if (this.subscription.cancelAt && this.subscription.status === "active") {
       return "pending_cancellation";