browser/apps/web/src/app/billing/shared/billing-history.component.html

<bit-section>
  <h3 bitTypography="h3">{{ "unpaid" | i18n }} {{ "invoices" | i18n }}</h3>
  <p bitTypography="body1" *ngIf="!openInvoices || !openInvoices.length">
    {{ "noUnpaidInvoices" | i18n }}
  </p>
  <bit-table>
    <ng-template body>
      <tr bitRow *ngFor="let i of openInvoices">
        <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
            bitLink
            href="{{ i.url }}"
            target="_blank"
            rel="noreferrer"
            title="{{ 'viewInvoice' | i18n }}"
          >
            {{ "invoiceNumber" | i18n: i.number }}</a
          >
        </td>
        <td bitCell>{{ i.amount | currency: "$" }}</td>
        <td bitCell class="tw-w-28">
          <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">{{ "paid" | i18n }} {{ "invoices" | i18n }}</h3>
  <p bitTypography="body1" *ngIf="!paidInvoices || !paidInvoices.length">
    {{ "noPaidInvoices" | i18n }}
  </p>
  <bit-table>
    <ng-template body>
      <tr bitRow *ngFor="let i of paidInvoices">
        <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
            bitLink
            href="{{ i.url }}"
            target="_blank"
            rel="noreferrer"
            title="{{ 'viewInvoice' | i18n }}"
          >
            {{ "invoiceNumber" | i18n: i.number }}</a
          >
        </td>
        <td bitCell>{{ i.amount | currency: "$" }}</td>
        <td bitCell class="tw-w-28">
          <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
        >
          {{ t.amount | currency: "$" }}
        </td>
      </tr>
    </ng-template>
  </bit-table>
  <small class="tw-text-muted">* {{ "chargesStatement" | i18n: "BITWARDEN" }}</small>
</bit-section>