Add description to billing history, update invoice table and report name (#9777)

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."    
   }
 }

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"

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);

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>

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,

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");
   }
 }