zgo/src/app/invoice/invoice.component.html

61 lines
1.7 KiB
HTML

<mat-toolbar color="primary">
<span align="center">
<img class="logo" src="/assets/logo-new-white.png" height="40px" />
</span>
<span class="spacer"></span>
<span align="center">
<p class="text">{{name}}</p>
</span>
</mat-toolbar>
<div align="center" *ngIf="!error" id="invoice">
<mat-card>
<mat-card-title>
Total: <img class="total" src="/assets/spartan-zec.png" height="18px" />{{order.totalZec | number: '1.0-6'}}
</mat-card-title>
<mat-card-subtitle>
{{order.timestamp | date}}
</mat-card-subtitle>
<mat-card-content>
<p class="small">Order ID: {{orderId}}</p>
<p class="small">Zcash Price: {{order.price | currency: order.currency.toUpperCase()}}</p>
<span *ngIf="order.closed"><fa-icon [icon]="faCheck"></fa-icon>Payment confirmed</span>
<span *ngIf="!order.closed"><fa-icon [icon]="faHourglass"></fa-icon>Payment pending</span>
<div align="center">
<table>
<tr>
<th align="left">
Item
</th>
<th align="center">
Qty.
</th>
<th align="right">
Price ({{order.currency.toUpperCase()}})
</th>
</tr>
<tr *ngFor="let item of order.lines">
<td align="left">{{item.name}}</td>
<td align="center">{{item.qty}}</td>
<td align="right">{{(item.qty * item.cost) | currency: order.currency.toUpperCase()}} </td>
<tr>
</table>
<div class="qrcode" id="payment-qr"></div>
</div>
</mat-card-content>
</mat-card>
</div>
<div align="center" *ngIf="error">
<mat-card>
<mat-card-title>
Incorrect Invoice ID.
</mat-card-title>
<mat-card-content>
No information available.
</mat-card-content>
<mat-card-actions>
<div align="center">
<button mat-raised-button [routerLink]="['/']" color="primary">OK</button>
</div>
</mat-card-actions>
</mat-card>
</div>