From dbc6f1c840aa7c27a75a1f79d214f6ec89c7c04e Mon Sep 17 00:00:00 2001
From: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com>
Date: Wed, 26 Jun 2024 09:30:37 -0400
Subject: [PATCH] Add description to billing history, update invoice table and
 report name (#9777)

---
 apps/web/src/locales/en/messages.json         | 12 ++++++-
 .../provider-billing-history.component.html   |  1 +
 .../provider-billing-history.component.ts     |  2 +-
 .../invoices/invoices.component.html          | 33 +++----------------
 libs/angular/src/jslib.module.ts              |  2 ++
 .../models/response/invoices.response.ts      |  2 --
 6 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index d649797750..7a129f04e6 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -8469,6 +8469,16 @@
   },
   "uncollectible": {
     "message": "Uncollectible",
-    "description": "The status of an invoice."  
+    "description": "The status of an invoice."
+  },
+  "clientDetails": {
+    "message": "Client details"
+  },
+  "downloadCSV": {
+    "message": "Download CSV"
+  },
+  "billingHistoryDescription": {
+    "message": "Download a CSV to obtain client details for each billing date. Prorated charges are not included in the CSV and may vary from the linked invoice. For the most accurate billing details, refer to your monthly invoices.",
+    "description": "A paragraph on the Billing History page of the Provider Portal letting users know they can download a CSV report for their invoices that does not include prorations."    
   }
 }
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/billing-history/provider-billing-history.component.html b/bitwarden_license/bit-web/src/app/billing/providers/billing-history/provider-billing-history.component.html
index 5d3bc2fff9..95500016d4 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/billing-history/provider-billing-history.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/billing-history/provider-billing-history.component.html
@@ -1,6 +1,7 @@
 <app-header></app-header>
 <bit-container>
   <h3 bitTypography="h3">{{ "invoices" | i18n }}</h3>
+  <p bitTypography="body1">{{ "billingHistoryDescription" | i18n }}</p>
   <app-invoices
     [getInvoices]="getInvoices"
     [getClientInvoiceReport]="getClientInvoiceReport"
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/billing-history/provider-billing-history.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/billing-history/provider-billing-history.component.ts
index 24ca4cf36d..d8385e87b3 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/billing-history/provider-billing-history.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/billing-history/provider-billing-history.component.ts
@@ -25,7 +25,7 @@ export class ProviderBillingHistoryComponent implements OnInit, OnDestroy {
 
   getClientInvoiceReportName = (invoice: InvoiceResponse) => {
     const date = this.datePipe.transform(invoice.date, "yyyyMMdd");
-    return `bitwarden_provider_${date}_${invoice.number}`;
+    return `bitwarden_provider-billing-history_${date}_${invoice.number}`;
   };
 
   getInvoices = async () => await this.billingApiService.getProviderInvoices(this.providerId);
diff --git a/libs/angular/src/billing/components/invoices/invoices.component.html b/libs/angular/src/billing/components/invoices/invoices.component.html
index 2ce01aa50b..0fbc27c678 100644
--- a/libs/angular/src/billing/components/invoices/invoices.component.html
+++ b/libs/angular/src/billing/components/invoices/invoices.component.html
@@ -13,6 +13,7 @@
       <th bitCell>{{ "invoice" | i18n }}</th>
       <th bitCell>{{ "total" | i18n }}</th>
       <th bitCell>{{ "status" | i18n }}</th>
+      <th bitCell>{{ "clientDetails" | i18n }}</th>
     </tr>
   </ng-container>
   <ng-template body>
@@ -47,35 +48,9 @@
         </span>
       </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>
+        <button type="button" bitLink (click)="runExport(invoice.id)">
+          <span class="tw-font-normal">{{ "downloadCSV" | i18n }}</span>
+        </button>
       </td>
     </tr>
   </ng-template>
diff --git a/libs/angular/src/jslib.module.ts b/libs/angular/src/jslib.module.ts
index 59d50ee389..b03dde3a34 100644
--- a/libs/angular/src/jslib.module.ts
+++ b/libs/angular/src/jslib.module.ts
@@ -17,6 +17,7 @@ import {
   DialogModule,
   FormFieldModule,
   IconButtonModule,
+  LinkModule,
   MenuModule,
   RadioButtonModule,
   SelectModule,
@@ -73,6 +74,7 @@ import { IconComponent } from "./vault/components/icon.component";
     TableModule,
     MenuModule,
     IconButtonModule,
+    LinkModule,
   ],
   declarations: [
     A11yInvalidDirective,
diff --git a/libs/common/src/billing/models/response/invoices.response.ts b/libs/common/src/billing/models/response/invoices.response.ts
index 2725d083be..bf797ba42d 100644
--- a/libs/common/src/billing/models/response/invoices.response.ts
+++ b/libs/common/src/billing/models/response/invoices.response.ts
@@ -20,7 +20,6 @@ export class InvoiceResponse extends BaseResponse {
   status: string;
   dueDate: string;
   url: string;
-  pdfUrl: string;
 
   constructor(response: any) {
     super(response);
@@ -31,6 +30,5 @@ export class InvoiceResponse extends BaseResponse {
     this.status = this.getResponseProperty("Status");
     this.dueDate = this.getResponseProperty("DueDate");
     this.url = this.getResponseProperty("Url");
-    this.pdfUrl = this.getResponseProperty("PdfUrl");
   }
 }