82 lines
4.2 KiB
HTML
82 lines
4.2 KiB
HTML
<ng-container *ngIf="isCompLoaded(); else err">
|
|
<div class="ui-g">
|
|
<div class="ui-g-12">
|
|
<div class="card clearfix">
|
|
<div class="ui-g">
|
|
<div class="ui-g-12 ui-md-11 ui-lg-10 ui-xl-8" style="margin: auto;">
|
|
<div class="ui-g">
|
|
<h1 style="margin-bottom: 1em;" i18n="@@pmtHist">Payment history</h1>
|
|
<div class="ui-g ui-g-12">
|
|
<div class="ui-g-12">
|
|
<div class="ui-g">
|
|
<div class="ui-g-8"><ng-container i18n="@@pmtHistMsg">If you recently made a payment, please allow 24 hours for the payment to appear in the history.</ng-container></div>
|
|
<div class="ui-g-4" style="display: flex; justify-content: end;">
|
|
<p-dropdown [options]="options" [(ngModel)]="optKey" (onChange)="onDateChange($event)"></p-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui-g-12">
|
|
<p-table (sortFunction)="customSort($event)" [customSort]="true" [value]="payments" [columns]="cols" [paginator]="true" [responsive]="true" [rows]="10" [rowsPerPageOptions]="[5,10,20]" [sortField]="date" sortOrder="-1">
|
|
<ng-template pTemplate="header">
|
|
<tr>
|
|
<th [pSortableColumn]="col.field" class="pm-history-header" *ngFor="let col of cols" [width]="col.width">
|
|
{{col.header}}
|
|
<p-sortIcon [field]="col.field"></p-sortIcon>
|
|
</th>
|
|
</tr>
|
|
</ng-template>
|
|
<ng-template pTemplate="body" let-rowData let-columns="columns">
|
|
<tr>
|
|
<td *ngFor="let col of columns" [ngSwitch]="col.field">
|
|
<span class="ui-column-title">{{col.header}}</span>
|
|
<span *ngSwitchCase="date">{{rowData[col.field] | tsToDate: lang}}</span>
|
|
|
|
<span *ngSwitchCase="TYPE">
|
|
<span *ngIf="rowData.object === InvType.INVOICE" i18n="@@bill">Bill</span>
|
|
<span *ngIf="rowData.object === InvType.CHARGE" i18n="@@refund">Refund</span>
|
|
</span>
|
|
|
|
<span *ngSwitchCase="AMT_DUE">
|
|
<ng-container *ngIf="rowData.object === InvType.INVOICE">
|
|
{{rowData.amount_due | usCurrency}}
|
|
</ng-container>
|
|
<ng-container *ngIf="rowData.object === InvType.CHARGE">
|
|
{{rowData.amount_refunded | usCurrency | creditCurrency}}
|
|
</ng-container>
|
|
</span>
|
|
|
|
<span *ngSwitchCase="AMT_PAID">
|
|
<ng-container *ngIf="rowData.object === InvType.INVOICE">
|
|
{{rowData.amount_paid | usCurrency}}
|
|
</ng-container>
|
|
<ng-container *ngIf="rowData.object === InvType.CHARGE">
|
|
{{rowData.amount_refunded | usCurrency | creditCurrency}}
|
|
</ng-container>
|
|
</span>
|
|
<span *ngSwitchCase="ACTIONS"><button (click)="gotoPaymentDetail(rowData)" pButton icon="ui-icon-zoom-in"></button></span>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-template #err>
|
|
<div class="ui-g">
|
|
<div class="ui-g-12 ui-md-8 ui-lg-6 ui-xl-4" style="margin: auto;">
|
|
<div class="ui-g" style="padding: 1em;">
|
|
<div class="ui-g-12 card in-card-pad row-space">
|
|
<generic-message [icon]="'error'" [iconStyle]="'color: red;'" [messages]="[{text: status?.message || SubTexts.contactSupport, style: 'title sub-messages' }, { text: SubTexts.textBackSub }]" [buttons]="[{ label: SubTexts.labelBack}]" (backEvt)="gotoMySubs()">
|
|
</generic-message>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template> |