[AC-2805] Consolidated Billing UI Updates (#9893)

* Add empty state for invoices

* Make cards on create client dialog tabbable

* Add space in $ / month per member

* Mute text, remove (Monthly) and right align menu on clients table

* Made used seats account for all users and fixed column sort for used/remaining

* Resize pricing cards

* Rename assignedSeats to occupiedSeats

bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts

@@ -19,8 +19,8 @@ import {
   ProviderPaymentMethodComponent,
   ProviderSelectPaymentMethodDialogComponent,
   ProviderSubscriptionComponent,
+  ProviderSubscriptionStatusComponent,
 } from "../../billing/providers";
-import { ProviderSubscriptionStatusComponent } from "../../billing/providers/subscription/provider-subscription-status.component";
 
 import { AddOrganizationComponent } from "./clients/add-organization.component";
 import { ClientsComponent } from "./clients/clients.component";

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

@@ -17,6 +17,7 @@
             *ngFor="let planCard of planCards"
             [ngClass]="getPlanCardContainerClasses(planCard.selected)"
             (click)="selectPlan(planCard.name)"
+            tabindex="0"
           >
             <div class="tw-relative">
               <div
@@ -25,12 +26,12 @@
               >
                 {{ "selected" | i18n }}
               </div>
-              <div class="tw-p-5" [ngClass]="{ 'tw-pt-12': !planCard.selected }">
+              <div class="tw-pl-5 tw-py-4 tw-pr-4" [ngClass]="{ 'tw-pt-10': !planCard.selected }">
                 <h3 class="tw-text-2xl tw-font-bold tw-uppercase">{{ planCard.name }}</h3>
                 <span class="tw-text-2xl tw-font-semibold">{{
                   planCard.cost | currency: "$"
                 }}</span>
-                <span class="tw-text-sm tw-font-bold">/{{ "monthPerMember" | i18n }}</span>
+                <span class="tw-text-sm tw-font-bold">/ {{ "monthPerMember" | i18n }}</span>
               </div>
             </div>
           </div>

bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.html

@@ -28,8 +28,8 @@
       <tr>
         <th colspan="2" bitCell bitSortable="organizationName" default>{{ "client" | i18n }}</th>
         <th bitCell bitSortable="seats">{{ "assigned" | i18n }}</th>
-        <th bitCell bitSortable="userCount">{{ "used" | i18n }}</th>
-        <th bitCell bitSortable="userCount">{{ "remaining" | i18n }}</th>
+        <th bitCell bitSortable="occupiedSeats">{{ "used" | i18n }}</th>
+        <th bitCell bitSortable="remainingSeats">{{ "remaining" | i18n }}</th>
         <th bitCell bitSortable="plan">{{ "billingPlan" | i18n }}</th>
         <th></th>
       </tr>
@@ -47,18 +47,18 @@
           </div>
         </td>
         <td bitCell class="tw-whitespace-nowrap">
-          <span>{{ client.seats }}</span>
+          <span class="tw-text-muted">{{ client.seats }}</span>
         </td>
         <td bitCell class="tw-whitespace-nowrap">
-          <span>{{ client.userCount }}</span>
+          <span class="tw-text-muted">{{ client.assignedSeats }}</span>
         </td>
         <td bitCell class="tw-whitespace-nowrap">
-          <span>{{ client.seats - client.userCount }}</span>
+          <span class="tw-text-muted">{{ client.remainingSeats }}</span>
         </td>
-        <td>
-          <span>{{ client.plan }}</span>
+        <td bitCell class="tw-whitespace-nowrap">
+          <span class="tw-text-muted">{{ removeMonthly(client.plan) }}</span>
         </td>
-        <td bitCell>
+        <td bitCell class="tw-text-right">
           <button
             [bitMenuTriggerFor]="rowMenu"
             type="button"

bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.ts

@@ -99,6 +99,8 @@ export class ManageClientsComponent extends BaseClientsComponent {
     super.ngOnDestroy();
   }
 
+  removeMonthly = (plan: string) => plan.replace(" (Monthly)", "");
+
   async load() {
     this.provider = await firstValueFrom(this.providerService.get$(this.providerId));
 

bitwarden_license/bit-web/src/app/billing/providers/index.ts

@@ -4,3 +4,4 @@ export * from "./guards/has-consolidated-billing.guard";
 export * from "./payment-method/provider-select-payment-method-dialog.component";
 export * from "./payment-method/provider-payment-method.component";
 export * from "./subscription/provider-subscription.component";
+export * from "./subscription/provider-subscription-status.component";