[AC-2774] [AC-2781] Consolidated issues for Consolidated Billing (#9717)

* Rename provider client components for brevity

* Make purchased seats dynamic on create client component

* Fix access and empty state for service users

* Refactor manage client subscription dialog

* Fixed manage subscription dialog errors

* Make unassigned seats dynamic for create client dialog

* Expanded invoice statuses

* Update invoice header on invoices component

libs/angular/src/billing/components/invoices/invoices.component.html

@@ -10,7 +10,7 @@
   <ng-container header>
     <tr>
       <th bitCell>{{ "date" | i18n }}</th>
-      <th bitCell>{{ "invoiceNumberHeader" | i18n }}</th>
+      <th bitCell>{{ "invoice" | i18n }}</th>
       <th bitCell>{{ "total" | i18n }}</th>
       <th bitCell>{{ "status" | i18n }}</th>
     </tr>
@@ -29,7 +29,23 @@
         </a>
       </td>
       <td bitCell>{{ invoice.total | currency: "$" }}</td>
-      <td bitCell>{{ invoice.status | titlecase }}</td>
+      <td bitCell *ngIf="expandInvoiceStatus(invoice) as expandedInvoiceStatus">
+        <span *ngIf="expandedInvoiceStatus === 'open'">
+          {{ "open" | i18n | titlecase }}
+        </span>
+        <span *ngIf="expandedInvoiceStatus === 'unpaid'">
+          <i class="bwi bwi-exclamation-circle tw-text-muted" aria-hidden="true"></i>
+          {{ "unpaid" | i18n | titlecase }}
+        </span>
+        <span *ngIf="expandedInvoiceStatus === 'paid'">
+          <i class="bwi bwi-check tw-text-success" aria-hidden="true"></i>
+          {{ "paid" | i18n | titlecase }}
+        </span>
+        <span *ngIf="expandedInvoiceStatus === 'uncollectible'">
+          <i class="bwi bwi-error tw-text-muted" aria-hidden="true"></i>
+          {{ "uncollectible" | i18n | titlecase }}
+        </span>
+      </td>
       <td bitCell>
         <button
           [bitMenuTriggerFor]="rowMenu"

libs/angular/src/billing/components/invoices/invoices.component.ts

@@ -46,4 +46,19 @@ export class InvoicesComponent implements OnInit {
     }
     this.loading = false;
   }
+
+  expandInvoiceStatus = (
+    invoice: InvoiceResponse,
+  ): "open" | "unpaid" | "paid" | "uncollectible" => {
+    switch (invoice.status) {
+      case "open": {
+        const dueDate = new Date(invoice.dueDate);
+        return dueDate < new Date() ? "unpaid" : invoice.status;
+      }
+      case "paid":
+      case "uncollectible": {
+        return invoice.status;
+      }
+    }
+  };
 }

libs/common/src/billing/abstractions/provider-billing.service.abstraction.ts

@@ -7,7 +7,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
 
 type MaybeProvider = Provider | undefined;
 
-export const canAccessBilling = (
+export const hasConsolidatedBilling = (
   configService: ConfigService,
 ): OperatorFunction<MaybeProvider, boolean> =>
   switchMap<MaybeProvider, Observable<boolean>>((provider) =>
@@ -16,9 +16,7 @@ export const canAccessBilling = (
       .pipe(
         map((consolidatedBillingEnabled) =>
           provider
-            ? provider.isProviderAdmin &&
-              provider.providerStatus === ProviderStatusType.Billable &&
-              consolidatedBillingEnabled
+            ? provider.providerStatus === ProviderStatusType.Billable && consolidatedBillingEnabled
             : false,
         ),
       ),

libs/common/src/billing/models/response/invoices.response.ts

@@ -18,6 +18,7 @@ export class InvoiceResponse extends BaseResponse {
   number: string;
   total: number;
   status: string;
+  dueDate: string;
   url: string;
   pdfUrl: string;
 
@@ -28,6 +29,7 @@ export class InvoiceResponse extends BaseResponse {
     this.number = this.getResponseProperty("Number");
     this.total = this.getResponseProperty("Total");
     this.status = this.getResponseProperty("Status");
+    this.dueDate = this.getResponseProperty("DueDate");
     this.url = this.getResponseProperty("Url");
     this.pdfUrl = this.getResponseProperty("PdfUrl");
   }