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

* Add provider-billing-history.component

* Implement provider client invoice export

apps/web/src/locales/en/messages.json

@@ -8361,5 +8361,15 @@
   "providerBillingEmailHint": {
     "message": "This email address will receive all invoices pertaining to this provider",
     "description": "A hint that shows up on the Provider setup page to inform the admin the billing email will receive the provider's invoices."
+  },
+  "date": {
+    "message": "Date"
+  },
+  "exportClientReport": {
+    "message": "Export client report"
+  },
+  "invoiceNumberHeader": {
+    "message": "Invoice number",
+    "description": "A table header for an invoice's number"
   }
 }

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html

@@ -34,6 +34,7 @@
     >
       <bit-nav-item [text]="'subscription' | i18n" route="billing/subscription"></bit-nav-item>
       <bit-nav-item [text]="'paymentMethod' | i18n" route="billing/payment-method"></bit-nav-item>
+      <bit-nav-item [text]="'billingHistory' | i18n" route="billing/history"></bit-nav-item>
     </bit-nav-group>
     <bit-nav-item
       icon="bwi-cogs"

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

@@ -13,6 +13,7 @@ import {
   ProviderSubscriptionComponent,
   hasConsolidatedBilling,
   ProviderPaymentMethodComponent,
+  ProviderBillingHistoryComponent,
 } from "../../billing/providers";
 
 import { ClientsComponent } from "./clients/clients.component";
@@ -139,6 +140,13 @@ const routes: Routes = [
                   titleId: "paymentMethod",
                 },
               },
+              {
+                path: "history",
+                component: ProviderBillingHistoryComponent,
+                data: {
+                  titleId: "billingHistory",
+                },
+              },
             ],
           },
           {

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

@@ -15,6 +15,7 @@ import {
   ManageClientOrganizationNameComponent,
   ManageClientOrganizationsComponent,
   ManageClientOrganizationSubscriptionComponent,
+  ProviderBillingHistoryComponent,
   ProviderPaymentMethodComponent,
   ProviderSelectPaymentMethodDialogComponent,
   ProviderSubscriptionComponent,
@@ -70,6 +71,7 @@ import { SetupComponent } from "./setup/setup.component";
     ManageClientOrganizationsComponent,
     ManageClientOrganizationNameComponent,
     ManageClientOrganizationSubscriptionComponent,
+    ProviderBillingHistoryComponent,
     ProviderSubscriptionComponent,
     ProviderSelectPaymentMethodDialogComponent,
     ProviderPaymentMethodComponent,

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

@@ -0,0 +1,9 @@
+<app-header></app-header>
+<bit-container>
+  <h3 bitTypography="h3">{{ "invoices" | i18n }}</h3>
+  <app-invoices
+    [getInvoices]="getInvoices"
+    [getClientInvoiceReport]="getClientInvoiceReport"
+    [getClientInvoiceReportName]="getClientInvoiceReportName"
+  ></app-invoices>
+</bit-container>

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

@@ -0,0 +1,48 @@
+import { DatePipe } from "@angular/common";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { map, Subject, takeUntil } from "rxjs";
+
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
+import { InvoiceResponse } from "@bitwarden/common/billing/models/response/invoices.response";
+
+@Component({
+  templateUrl: "./provider-billing-history.component.html",
+})
+export class ProviderBillingHistoryComponent implements OnInit, OnDestroy {
+  private providerId: string;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private billingApiService: BillingApiServiceAbstraction,
+    private datePipe: DatePipe,
+  ) {}
+
+  getClientInvoiceReport = (invoiceId: string) =>
+    this.billingApiService.getProviderClientInvoiceReport(this.providerId, invoiceId);
+
+  getClientInvoiceReportName = (invoice: InvoiceResponse) => {
+    const date = this.datePipe.transform(invoice.date, "yyyyMMdd");
+    return `bitwarden_provider_${date}_${invoice.number}`;
+  };
+
+  getInvoices = async () => await this.billingApiService.getProviderInvoices(this.providerId);
+
+  ngOnInit() {
+    this.activatedRoute.params
+      .pipe(
+        map(({ providerId }) => {
+          this.providerId = providerId;
+        }),
+        takeUntil(this.destroy$),
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

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

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

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,

libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts

@@ -2,6 +2,7 @@ import { PaymentMethodType } from "@bitwarden/common/billing/enums";
 import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
 import { TokenizedPaymentMethodRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-method.request";
 import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
+import { InvoicesResponse } from "@bitwarden/common/billing/models/response/invoices.response";
 import { PaymentInformationResponse } from "@bitwarden/common/billing/models/response/payment-information.response";
 
 import { SubscriptionCancellationRequest } from "../../billing/models/request/subscription-cancellation.request";
@@ -41,6 +42,10 @@ export abstract class BillingApiServiceAbstraction {
 
   getPlans: () => Promise<ListResponse<PlanResponse>>;
 
+  getProviderClientInvoiceReport: (providerId: string, invoiceId: string) => Promise<string>;
+
+  getProviderInvoices: (providerId: string) => Promise<InvoicesResponse>;
+
   getProviderPaymentInformation: (providerId: string) => Promise<PaymentInformationResponse>;
 
   getProviderSubscription: (providerId: string) => Promise<ProviderSubscriptionResponse>;

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

@@ -0,0 +1,34 @@
+import { BaseResponse } from "@bitwarden/common/models/response/base.response";
+
+export class InvoicesResponse extends BaseResponse {
+  invoices: InvoiceResponse[] = [];
+
+  constructor(response: any) {
+    super(response);
+    const invoices = this.getResponseProperty("Invoices");
+    if (invoices && invoices.length) {
+      this.invoices = invoices.map((t: any) => new InvoiceResponse(t));
+    }
+  }
+}
+
+export class InvoiceResponse extends BaseResponse {
+  id: string;
+  date: string;
+  number: string;
+  total: number;
+  status: string;
+  url: string;
+  pdfUrl: string;
+
+  constructor(response: any) {
+    super(response);
+    this.id = this.getResponseProperty("Id");
+    this.date = this.getResponseProperty("Date");
+    this.number = this.getResponseProperty("Number");
+    this.total = this.getResponseProperty("Total");
+    this.status = this.getResponseProperty("Status");
+    this.url = this.getResponseProperty("Url");
+    this.pdfUrl = this.getResponseProperty("PdfUrl");
+  }
+}

libs/common/src/billing/services/billing-api.service.ts

@@ -1,3 +1,5 @@
+import { InvoicesResponse } from "@bitwarden/common/billing/models/response/invoices.response";
+
 import { ApiService } from "../../abstractions/api.service";
 import { BillingApiServiceAbstraction } from "../../billing/abstractions";
 import { PaymentMethodType } from "../../billing/enums";
@@ -106,6 +108,28 @@ export class BillingApiService implements BillingApiServiceAbstraction {
     return new ListResponse(r, PlanResponse);
   }
 
+  async getProviderClientInvoiceReport(providerId: string, invoiceId: string): Promise<string> {
+    const response = await this.apiService.send(
+      "GET",
+      "/providers/" + providerId + "/billing/invoices/" + invoiceId,
+      null,
+      true,
+      true,
+    );
+    return response as string;
+  }
+
+  async getProviderInvoices(providerId: string): Promise<InvoicesResponse> {
+    const response = await this.apiService.send(
+      "GET",
+      "/providers/" + providerId + "/billing/invoices",
+      null,
+      true,
+      true,
+    );
+    return new InvoicesResponse(response);
+  }
+
   async getProviderPaymentInformation(providerId: string): Promise<PaymentInformationResponse> {
     const response = await this.apiService.send(
       "GET",

libs/common/src/services/api.service.ts

@@ -1883,9 +1883,12 @@ export class ApiService implements ApiServiceAbstraction {
 
     const responseType = response.headers.get("content-type");
     const responseIsJson = responseType != null && responseType.indexOf("application/json") !== -1;
+    const responseIsCsv = responseType != null && responseType.indexOf("text/csv") !== -1;
     if (hasResponse && response.status === 200 && responseIsJson) {
       const responseJson = await response.json();
       return responseJson;
+    } else if (hasResponse && response.status === 200 && responseIsCsv) {
+      return await response.text();
     } else if (response.status !== 200) {
       const error = await this.handleError(response, false, authed);
       return Promise.reject(error);