[AC-1944] Add provider billing history component (#9520)

* Add provider-billing-history.component

* Implement provider client invoice export

libs/angular/src/billing/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./add-account-credit-dialog/add-account-credit-dialog.component";
+export * from "./invoices/invoices.component";
 export * from "./manage-tax-information/manage-tax-information.component";
 export * from "./select-payment-method/select-payment-method.component";
 export * from "./verify-bank-account/verify-bank-account.component";

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

@@ -0,0 +1,66 @@
+<ng-container *ngIf="loading">
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
+  <span class="sr-only">{{ "loading" | i18n }}</span>
+</ng-container>
+<bit-table *ngIf="!loading">
+  <ng-container header>
+    <tr>
+      <th bitCell>{{ "date" | i18n }}</th>
+      <th bitCell>{{ "invoiceNumberHeader" | i18n }}</th>
+      <th bitCell>{{ "total" | i18n }}</th>
+      <th bitCell>{{ "status" | i18n }}</th>
+    </tr>
+  </ng-container>
+  <ng-template body>
+    <tr bitRow *ngFor="let invoice of invoices">
+      <td bitCell>{{ invoice.date | date: "mediumDate" }}</td>
+      <td bitCell>
+        <a
+          href="{{ invoice.url }}"
+          target="_blank"
+          rel="noreferrer"
+          title="{{ 'viewInvoice' | i18n }}"
+        >
+          {{ invoice.number }}
+        </a>
+      </td>
+      <td bitCell>{{ invoice.total | currency: "$" }}</td>
+      <td bitCell>{{ invoice.status | titlecase }}</td>
+      <td bitCell>
+        <button
+          [bitMenuTriggerFor]="rowMenu"
+          type="button"
+          bitIconButton="bwi-ellipsis-v"
+          size="default"
+          appA11yTitle="{{ 'options' | i18n }}"
+        ></button>
+        <bit-menu #rowMenu>
+          <a
+            bitMenuItem
+            href="{{ invoice.pdfUrl }}"
+            target="_blank"
+            rel="noreferrer"
+            class="tw-mr-2"
+            appA11yTitle="{{ 'viewInvoice' | i18n }}"
+          >
+            <i aria-hidden="true" class="bwi bwi-file-pdf"></i>
+            {{ "viewInvoice" | i18n }}
+          </a>
+          <button
+            type="button"
+            bitMenuItem
+            *ngIf="getClientInvoiceReport"
+            (click)="runExport(invoice.id)"
+          >
+            <i aria-hidden="true" class="bwi bwi-sign-in"></i>
+            {{ "exportClientReport" | i18n }}
+          </button>
+        </bit-menu>
+      </td>
+    </tr>
+  </ng-template>
+</bit-table>

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

@@ -0,0 +1,49 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import {
+  InvoiceResponse,
+  InvoicesResponse,
+} from "@bitwarden/common/billing/models/response/invoices.response";
+import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
+
+@Component({
+  selector: "app-invoices",
+  templateUrl: "./invoices.component.html",
+})
+export class InvoicesComponent implements OnInit {
+  @Input() startWith?: InvoicesResponse;
+  @Input() getInvoices?: () => Promise<InvoicesResponse>;
+  @Input() getClientInvoiceReport?: (invoiceId: string) => Promise<string>;
+  @Input() getClientInvoiceReportName?: (invoiceResponse: InvoiceResponse) => string;
+
+  protected invoices: InvoiceResponse[] = [];
+  protected loading = true;
+
+  constructor(private fileDownloadService: FileDownloadService) {}
+
+  runExport = async (invoiceId: string): Promise<void> => {
+    const blobData = await this.getClientInvoiceReport(invoiceId);
+    let fileName = "report.csv";
+    if (this.getClientInvoiceReportName) {
+      const invoice = this.invoices.find((invoice) => invoice.id === invoiceId);
+      fileName = this.getClientInvoiceReportName(invoice);
+    }
+    this.fileDownloadService.download({
+      fileName,
+      blobData,
+      blobOptions: {
+        type: "text/csv",
+      },
+    });
+  };
+
+  async ngOnInit(): Promise<void> {
+    if (this.startWith) {
+      this.invoices = this.startWith.invoices;
+    } else if (this.getInvoices) {
+      const response = await this.getInvoices();
+      this.invoices = response.invoices;
+    }
+    this.loading = false;
+  }
+}

libs/angular/src/jslib.module.ts

@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
 import {
   AddAccountCreditDialogComponent,
+  InvoicesComponent,
   ManageTaxInformationComponent,
   SelectPaymentMethodComponent,
   VerifyBankAccountComponent,
@@ -15,8 +16,11 @@ import {
   CheckboxModule,
   DialogModule,
   FormFieldModule,
+  IconButtonModule,
+  MenuModule,
   RadioButtonModule,
   SelectModule,
+  TableModule,
   ToastModule,
   TypographyModule,
 } from "@bitwarden/components";
@@ -66,6 +70,9 @@ import { IconComponent } from "./vault/components/icon.component";
     CheckboxModule,
     DialogModule,
     TypographyModule,
+    TableModule,
+    MenuModule,
+    IconButtonModule,
   ],
   declarations: [
     A11yInvalidDirective,
@@ -96,6 +103,7 @@ import { IconComponent } from "./vault/components/icon.component";
     IfFeatureDirective,
     FingerprintPipe,
     AddAccountCreditDialogComponent,
+    InvoicesComponent,
     ManageTaxInformationComponent,
     SelectPaymentMethodComponent,
     VerifyBankAccountComponent,
@@ -130,6 +138,7 @@ import { IconComponent } from "./vault/components/icon.component";
     IfFeatureDirective,
     FingerprintPipe,
     AddAccountCreditDialogComponent,
+    InvoicesComponent,
     ManageTaxInformationComponent,
     SelectPaymentMethodComponent,
     VerifyBankAccountComponent,