[AC-2568] Split billing history calls to separately call for invoices and transactions. Added paging buttons (#10697)

* Split billing history calls to separately call for invoices and transactions. Added paging button

* Added missing button types

apps/web/src/app/billing/individual/billing-history-view.component.html

@@ -2,17 +2,6 @@
   <h2 bitTypography="h2">
     {{ "billingHistory" | i18n }}
   </h2>
-  <button
-    type="button"
-    bitButton
-    buttonType="secondary"
-    (click)="load()"
-    *ngIf="firstLoaded"
-    [disabled]="loading"
-  >
-    <i class="bwi bwi-refresh bwi-fw" [ngClass]="{ 'bwi-spin': loading }" aria-hidden="true"></i>
-    {{ "refresh" | i18n }}
-  </button>
 </div>
 <ng-container *ngIf="!firstLoaded && loading">
   <i
@@ -22,6 +11,15 @@
   ></i>
   <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
-<ng-container *ngIf="billing">
-  <app-billing-history [billing]="billing"></app-billing-history>
+<ng-container *ngIf="invoices || transactions">
+  <app-billing-history [invoices]="invoices" [transactions]="transactions"></app-billing-history>
+  <button
+    type="button"
+    bitButton
+    buttonType="secondary"
+    (click)="load()"
+    *ngIf="hasAdditionalHistory"
+  >
+    {{ "loadMore" | i18n }}
+  </button>
 </ng-container>

apps/web/src/app/billing/individual/billing-history-view.component.ts

@@ -1,8 +1,11 @@
 import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { BillingHistoryResponse } from "@bitwarden/common/billing/models/response/billing-history.response";
+import { AccountBillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/account/account-billing-api.service.abstraction";
+import {
+  BillingInvoiceResponse,
+  BillingTransactionResponse,
+} from "@bitwarden/common/billing/models/response/billing.response";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 @Component({
@@ -11,12 +14,14 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 export class BillingHistoryViewComponent implements OnInit {
   loading = false;
   firstLoaded = false;
-  billing: BillingHistoryResponse;
+  invoices: BillingInvoiceResponse[] = [];
+  transactions: BillingTransactionResponse[] = [];
+  hasAdditionalHistory: boolean = false;
 
   constructor(
-    private apiService: ApiService,
     private platformUtilsService: PlatformUtilsService,
     private router: Router,
+    private accountBillingApiService: AccountBillingApiServiceAbstraction,
   ) {}
 
   async ngOnInit() {
@@ -35,7 +40,27 @@ export class BillingHistoryViewComponent implements OnInit {
       return;
     }
     this.loading = true;
-    this.billing = await this.apiService.getUserBillingHistory();
+
+    const invoicesPromise = this.accountBillingApiService.getBillingInvoices(
+      this.invoices.length > 0 ? this.invoices[this.invoices.length - 1].id : null,
+    );
+
+    const transactionsPromise = this.accountBillingApiService.getBillingTransactions(
+      this.transactions.length > 0
+        ? this.transactions[this.transactions.length - 1].createdDate
+        : null,
+    );
+
+    const accountInvoices = await invoicesPromise;
+    const accountTransactions = await transactionsPromise;
+    const pageSize = 5;
+
+    this.invoices = [...this.invoices, ...accountInvoices];
+    this.transactions = [...this.transactions, ...accountTransactions];
+    this.hasAdditionalHistory = !(
+      accountInvoices.length < pageSize && accountTransactions.length < pageSize
+    );
+
     this.loading = false;
   }
 }

apps/web/src/app/billing/organizations/organization-billing-history-view.component.html

@@ -1,17 +1,4 @@
-<app-header>
-  <button
-    type="button"
-    bitButton
-    buttonType="secondary"
-    (click)="load()"
-    class="tw-ml-auto"
-    *ngIf="firstLoaded"
-    [disabled]="loading"
-  >
-    <i class="bwi bwi-refresh bwi-fw" [ngClass]="{ 'bwi-spin': loading }" aria-hidden="true"></i>
-    {{ "refresh" | i18n }}
-  </button>
-</app-header>
+<app-header> </app-header>
 
 <bit-container>
   <ng-container *ngIf="!firstLoaded && loading">
@@ -22,7 +9,16 @@
     ></i>
     <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </ng-container>
-  <ng-container *ngIf="billing">
-    <app-billing-history [billing]="billing"></app-billing-history>
+  <ng-container *ngIf="invoices || transactions">
+    <app-billing-history [invoices]="invoices" [transactions]="transactions"></app-billing-history>
+    <button
+      type="button"
+      bitButton
+      buttonType="secondary"
+      (click)="load()"
+      *ngIf="hasAdditionalHistory"
+    >
+      {{ "loadMore" | i18n }}
+    </button>
   </ng-container>
 </bit-container>

apps/web/src/app/billing/organizations/organization-billing-history-view.component.ts

@@ -2,8 +2,11 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { concatMap, Subject, takeUntil } from "rxjs";
 
-import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
-import { BillingHistoryResponse } from "@bitwarden/common/billing/models/response/billing-history.response";
+import { OrganizationBillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/organizations/organization-billing-api.service.abstraction";
+import {
+  BillingInvoiceResponse,
+  BillingTransactionResponse,
+} from "@bitwarden/common/billing/models/response/billing.response";
 
 @Component({
   templateUrl: "organization-billing-history-view.component.html",
@@ -11,13 +14,15 @@ import { BillingHistoryResponse } from "@bitwarden/common/billing/models/respons
 export class OrgBillingHistoryViewComponent implements OnInit, OnDestroy {
   loading = false;
   firstLoaded = false;
-  billing: BillingHistoryResponse;
+  invoices: BillingInvoiceResponse[] = [];
+  transactions: BillingTransactionResponse[] = [];
   organizationId: string;
+  hasAdditionalHistory: boolean = false;
 
   private destroy$ = new Subject<void>();
 
   constructor(
-    private organizationApiService: OrganizationApiServiceAbstraction,
+    private organizationBillingApiService: OrganizationBillingApiServiceAbstraction,
     private route: ActivatedRoute,
   ) {}
 
@@ -43,8 +48,28 @@ export class OrgBillingHistoryViewComponent implements OnInit, OnDestroy {
     if (this.loading) {
       return;
     }
+
     this.loading = true;
-    this.billing = await this.organizationApiService.getBillingHistory(this.organizationId);
+
+    const invoicesPromise = this.organizationBillingApiService.getBillingInvoices(
+      this.organizationId,
+      this.invoices.length > 0 ? this.invoices[this.invoices.length - 1].id : null,
+    );
+
+    const transactionsPromise = this.organizationBillingApiService.getBillingTransactions(
+      this.organizationId,
+      this.transactions.length > 0
+        ? this.transactions[this.transactions.length - 1].createdDate
+        : null,
+    );
+
+    const invoices = await invoicesPromise;
+    const transactions = await transactionsPromise;
+    const pageSize = 5;
+
+    this.invoices = [...this.invoices, ...invoices];
+    this.transactions = [...this.transactions, ...transactions];
+    this.hasAdditionalHistory = !(invoices.length < pageSize && transactions.length < pageSize);
     this.loading = false;
   }
 }

apps/web/src/app/billing/shared/billing-history.component.ts

@@ -1,7 +1,10 @@
 import { Component, Input } from "@angular/core";
 
 import { PaymentMethodType, TransactionType } from "@bitwarden/common/billing/enums";
-import { BillingHistoryResponse } from "@bitwarden/common/billing/models/response/billing-history.response";
+import {
+  BillingInvoiceResponse,
+  BillingTransactionResponse,
+} from "@bitwarden/common/billing/models/response/billing.response";
 
 @Component({
   selector: "app-billing-history",
@@ -9,19 +12,14 @@ import { BillingHistoryResponse } from "@bitwarden/common/billing/models/respons
 })
 export class BillingHistoryComponent {
   @Input()
-  billing: BillingHistoryResponse;
+  invoices: BillingInvoiceResponse[];
+
+  @Input()
+  transactions: BillingTransactionResponse[];
 
   paymentMethodType = PaymentMethodType;
   transactionType = TransactionType;
 
-  get invoices() {
-    return this.billing != null ? this.billing.invoices : null;
-  }
-
-  get transactions() {
-    return this.billing != null ? this.billing.transactions : null;
-  }
-
   paymentMethodClasses(type: PaymentMethodType) {
     switch (type) {
       case PaymentMethodType.Card: