From cf2fefaead36b7e3705fb28423e7ada075b2a687 Mon Sep 17 00:00:00 2001
From: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com>
Date: Wed, 17 Apr 2024 01:09:53 +0530
Subject: [PATCH] [PM-5021] billing history component migration (#8042)

* billing history component migration

* billing history component migration

* billing history component migration

* billing history component migration

* billing history component migration

---------

Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>
---
 .../billing-history-view.component.html       |  11 +-
 .../shared/billing-history.component.html     | 135 +++++++++---------
 2 files changed, 76 insertions(+), 70 deletions(-)

diff --git a/apps/web/src/app/billing/individual/billing-history-view.component.html b/apps/web/src/app/billing/individual/billing-history-view.component.html
index 1032558f5f..2491fc42c7 100644
--- a/apps/web/src/app/billing/individual/billing-history-view.component.html
+++ b/apps/web/src/app/billing/individual/billing-history-view.component.html
@@ -1,13 +1,12 @@
-<div class="d-flex tabbed-header">
-  <h1>
+<div class="tw-flex tw-justify-between tw-mb-2 tw-pb-2 tw-mt-6">
+  <h2 bitTypography="h2">
     {{ "billingHistory" | i18n }}
-  </h1>
+  </h2>
   <button
     type="button"
     bitButton
     buttonType="secondary"
     (click)="load()"
-    class="tw-ml-auto"
     *ngIf="firstLoaded"
     [disabled]="loading"
   >
@@ -17,11 +16,11 @@
 </div>
 <ng-container *ngIf="!firstLoaded && loading">
   <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="billing">
   <app-billing-history [billing]="billing"></app-billing-history>
diff --git a/apps/web/src/app/billing/shared/billing-history.component.html b/apps/web/src/app/billing/shared/billing-history.component.html
index 56a8a990d4..1719a59076 100644
--- a/apps/web/src/app/billing/shared/billing-history.component.html
+++ b/apps/web/src/app/billing/shared/billing-history.component.html
@@ -1,65 +1,72 @@
-<h2 class="mt-3">{{ "invoices" | i18n }}</h2>
-<p *ngIf="!invoices || !invoices.length">{{ "noInvoices" | i18n }}</p>
-<table class="table mb-2" *ngIf="invoices && invoices.length">
-  <tbody>
-    <tr *ngFor="let i of invoices">
-      <td>{{ i.date | date: "mediumDate" }}</td>
-      <td>
-        <a
-          href="{{ i.pdfUrl }}"
-          target="_blank"
-          rel="noreferrer"
-          class="mr-2"
-          appA11yTitle="{{ 'downloadInvoice' | i18n }}"
+<bit-section>
+  <h3 bitTypography="h3">{{ "invoices" | i18n }}</h3>
+  <p bitTypography="body1" *ngIf="!invoices || !invoices.length">{{ "noInvoices" | i18n }}</p>
+  <bit-table>
+    <ng-template body>
+      <tr bitRow *ngFor="let i of invoices">
+        <td bitCell>{{ i.date | date: "mediumDate" }}</td>
+        <td bitCell>
+          <a
+            href="{{ i.pdfUrl }}"
+            target="_blank"
+            rel="noreferrer"
+            class="tw-mr-2"
+            appA11yTitle="{{ 'downloadInvoice' | i18n }}"
+          >
+            <i class="bwi bwi-file-pdf" aria-hidden="true"></i
+          ></a>
+          <a href="{{ i.url }}" target="_blank" rel="noreferrer" title="{{ 'viewInvoice' | i18n }}">
+            {{ "invoiceNumber" | i18n: i.number }}</a
+          >
+        </td>
+        <td bitCell>{{ i.amount | currency: "$" }}</td>
+        <td bitCell>
+          <span *ngIf="i.paid">
+            <i class="bwi bwi-check tw-text-success" aria-hidden="true"></i>
+            {{ "paid" | i18n }}
+          </span>
+          <span *ngIf="!i.paid">
+            <i class="bwi bwi-exclamation-circle tw-text-muted" aria-hidden="true"></i>
+            {{ "unpaid" | i18n }}
+          </span>
+        </td>
+      </tr>
+    </ng-template>
+  </bit-table>
+</bit-section>
+<bit-section>
+  <h3 bitTypography="h3">{{ "transactions" | i18n }}</h3>
+  <p bitTypography="body1" *ngIf="!transactions || !transactions.length">
+    {{ "noTransactions" | i18n }}
+  </p>
+  <bit-table *ngIf="transactions && transactions.length">
+    <ng-template body>
+      <tr bitRow *ngFor="let t of transactions">
+        <td bitCell>{{ t.createdDate | date: "mediumDate" }}</td>
+        <td bitCell>
+          <span *ngIf="t.type === transactionType.Charge || t.type === transactionType.Credit">
+            {{ "chargeNoun" | i18n }}
+          </span>
+          <span *ngIf="t.type === transactionType.Refund">{{ "refundNoun" | i18n }}</span>
+        </td>
+        <td bitCell>
+          <i
+            class="bwi bwi-fw"
+            *ngIf="t.paymentMethodType"
+            aria-hidden="true"
+            [ngClass]="paymentMethodClasses(t.paymentMethodType)"
+          ></i>
+          {{ t.details }}
+        </td>
+        <td
+          [ngClass]="{ 'text-strike': t.refunded }"
+          title="{{ (t.refunded ? 'refunded' : '') | i18n }}"
+          bitCell
         >
-          <i class="bwi bwi-file-pdf" aria-hidden="true"></i
-        ></a>
-        <a href="{{ i.url }}" target="_blank" rel="noreferrer" title="{{ 'viewInvoice' | i18n }}">
-          {{ "invoiceNumber" | i18n: i.number }}</a
-        >
-      </td>
-      <td>{{ i.amount | currency: "$" }}</td>
-      <td>
-        <span *ngIf="i.paid">
-          <i class="bwi bwi-check text-success" aria-hidden="true"></i>
-          {{ "paid" | i18n }}
-        </span>
-        <span *ngIf="!i.paid">
-          <i class="bwi bwi-exclamation-circle text-muted" aria-hidden="true"></i>
-          {{ "unpaid" | i18n }}
-        </span>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<h2 class="spaced-header">{{ "transactions" | i18n }}</h2>
-<p *ngIf="!transactions || !transactions.length">{{ "noTransactions" | i18n }}</p>
-<table class="table mb-2" *ngIf="transactions && transactions.length">
-  <tbody>
-    <tr *ngFor="let t of transactions">
-      <td>{{ t.createdDate | date: "mediumDate" }}</td>
-      <td>
-        <span *ngIf="t.type === transactionType.Charge || t.type === transactionType.Credit">
-          {{ "chargeNoun" | i18n }}
-        </span>
-        <span *ngIf="t.type === transactionType.Refund">{{ "refundNoun" | i18n }}</span>
-      </td>
-      <td>
-        <i
-          class="bwi bwi-fw"
-          *ngIf="t.paymentMethodType"
-          aria-hidden="true"
-          [ngClass]="paymentMethodClasses(t.paymentMethodType)"
-        ></i>
-        {{ t.details }}
-      </td>
-      <td
-        [ngClass]="{ 'text-strike': t.refunded }"
-        title="{{ (t.refunded ? 'refunded' : '') | i18n }}"
-      >
-        {{ t.amount | currency: "$" }}
-      </td>
-    </tr>
-  </tbody>
-</table>
-<small class="text-muted">* {{ "chargesStatement" | i18n: "BITWARDEN" }}</small>
+          {{ t.amount | currency: "$" }}
+        </td>
+      </tr>
+    </ng-template>
+  </bit-table>
+  <small class="tw-text-muted">* {{ "chargesStatement" | i18n: "BITWARDEN" }}</small>
+</bit-section>