255 lines
6.6 KiB
HTML
255 lines
6.6 KiB
HTML
<div style="font-family: 'Spartan';
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;">
|
|
<div class="container">
|
|
<div class="invoiceHeader">
|
|
<img class="logo" src="/assets/logo-new-white.png" height="40px" />
|
|
</div>
|
|
<div *ngIf="reportType==1">
|
|
<div style="height: 50px;">
|
|
</div>
|
|
<div style="font-weight: 700;
|
|
font-size: 25px;
|
|
text-align: center;">
|
|
Invalid Owner ID!!
|
|
</div>
|
|
<div style="height: 40px;">
|
|
</div>
|
|
Payment request was not processed!!
|
|
<div style="height: 20px;">
|
|
</div>
|
|
</div>
|
|
<div *ngIf="reportType==2">
|
|
<div style="height: 50px;">
|
|
</div>
|
|
<div style="font-weight: 700;
|
|
font-size: 25px;
|
|
text-align: center;">
|
|
Payment service not<br>
|
|
enabled for<br>
|
|
{{ owner.name}}
|
|
</div>
|
|
<div style="height: 40px;">
|
|
</div>
|
|
Payment request was not processed!!
|
|
<div style="height: 20px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="reportType==3">
|
|
<div style="height: 50px;">
|
|
</div>
|
|
<div style="font-weight: 700;
|
|
font-size: 25px;
|
|
text-align: center;">
|
|
Connection to Xero<br>server failed!!
|
|
</div>
|
|
<div style="height: 40px;">
|
|
</div>
|
|
Payment request was not processed!!
|
|
<div style="height: 20px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="reportType==4">
|
|
<div style="height: 50px;">
|
|
</div>
|
|
<div style="font-weight: 700;
|
|
font-size: 25px;
|
|
text-align: center;">
|
|
Invoice<br>{{ pmtData.invoice }}<br>not found!!
|
|
</div>
|
|
<div style="height: 40px;">
|
|
</div>
|
|
Payment request was not processed!!
|
|
<div style="height: 20px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="reportType==5">
|
|
<div style="height: 50px;">
|
|
</div>
|
|
<div style="font-weight: 700;
|
|
font-size: 25px;
|
|
text-align: center;">
|
|
Invoice<br>{{ pmtData.invoice }}<br>type invalid!!
|
|
</div>
|
|
<div style="height: 40px;">
|
|
</div>
|
|
Payment request was not processed!!
|
|
<div style="height: 20px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="reportType==6">
|
|
<div style="height: 50px;">
|
|
</div>
|
|
<div style="font-weight: 700;
|
|
font-size: 25px;
|
|
text-align: center;">
|
|
Invoice <br>{{ pmtData.invoice }}<br>already paid!!
|
|
</div>
|
|
<div style="height: 40px;">
|
|
</div>
|
|
Payment request was not processed!!
|
|
<div style="height: 20px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="reportType==7">
|
|
<div style="height: 50px;">
|
|
</div>
|
|
<div style="font-weight: 700;
|
|
font-size: 25px;
|
|
text-align: center;">
|
|
Currency <br>[ {{ pmtData.currency }} ]<br>not supported!!
|
|
</div>
|
|
<div style="height: 40px;">
|
|
</div>
|
|
Payment request was not processed!!
|
|
<div style="height: 20px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="reportType==8">
|
|
<div style="height: 50px;">
|
|
</div>
|
|
<div style="font-weight: 700;
|
|
font-size: 25px;
|
|
text-align: center;">
|
|
Amount does not<br>
|
|
match value<br>
|
|
reported by Xero!!
|
|
</div>
|
|
<div style="height: 40px;">
|
|
</div>
|
|
Payment request was not processed!!
|
|
<div style="height: 20px;">
|
|
</div>
|
|
</div>
|
|
<div class="invoiceDetail"
|
|
*ngIf="reportType==0"
|
|
id="invoice">
|
|
<div class="invoiceHdrTxt1">Invoice</div>
|
|
<div class="invoiceHdrTxt2">Order ID: {{orderId}}</div>
|
|
<div class="invoiceHdrTxt3">Date:{{order.timestamp | date}}
|
|
</div>
|
|
<div style="height: 10px;"></div>
|
|
<div class="zecData">Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</div>
|
|
<div style="height: 2px;"></div>
|
|
<div class="zecData">Total: <img class="zecSign" src="/assets/zec_rv.png" />{{order.totalZec | number: '1.08'}}
|
|
</div>
|
|
<div>
|
|
<div style="height: 10px;"></div>
|
|
<table style="width: 100%;"
|
|
cellspacing="0">
|
|
<tr class="invoice-title">
|
|
<th width="55%"
|
|
class="detailTitle1">
|
|
Item
|
|
</th>
|
|
<th width="15%"
|
|
class="detailTitle1">
|
|
Qty.
|
|
</th>
|
|
<th width="30%"
|
|
class="detailTitle2">
|
|
Price ({{order.currency.toUpperCase()}})
|
|
</th>
|
|
</tr>
|
|
<tr class="invoice-detail"
|
|
*ngFor="let item of order.lines">
|
|
<td width="55%"
|
|
align="left">
|
|
{{item.name}}
|
|
</td>
|
|
<td width="15%"
|
|
align="center">
|
|
{{item.qty}}
|
|
</td>
|
|
<td width="30%"
|
|
align="right">
|
|
{{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}}
|
|
</td>
|
|
</tr>
|
|
<tr class="invoice-title">
|
|
<th width="55%"
|
|
class="detailLineRight">
|
|
Invoice Total:
|
|
</th>
|
|
<th width="15%"
|
|
class="detailLineLeft">
|
|
|
|
</th>
|
|
<th width="30%"
|
|
class="detailLineRight">
|
|
{{ order.total | currency: order.currency.toUpperCase()}}
|
|
</th>
|
|
</tr>
|
|
</table>
|
|
<div style="height: 15px;"></div>
|
|
<table>
|
|
<tr>
|
|
<td width="75%"
|
|
style="font-size: 20px;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
text-align: center;">
|
|
<p *ngIf="order.paid">
|
|
<fa-icon [icon]="faCheck"
|
|
color="primary"></fa-icon> Payment confirmed</p>
|
|
<p *ngIf="!order.paid">
|
|
<fa-icon [style]="getIconStyle(order)"
|
|
[icon]="faHourglass"></fa-icon> Payment pending!!</p>
|
|
</td>
|
|
<td width="25%">
|
|
<div style="text-align: right;"
|
|
id="payment-qr"
|
|
*ngIf="!order.paid"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div style="height: 15px;"></div>
|
|
<div width="100%"
|
|
style="font-size: 14px;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
text-align: center;">
|
|
Scan the QR code with your wallet to make payment
|
|
</div>
|
|
<div style="text-align: center;
|
|
margin-top: 10px;
|
|
line-height: 30px;">
|
|
<div style="font-family: 'Spartan';
|
|
font-size: 14px;
|
|
line-height: 20px;">
|
|
Can't scan?<br>Use this <a [href]="zcashUrl">wallet link</a>, or
|
|
</div>
|
|
<div style="display: flex;
|
|
justify-content: space-between;">
|
|
<button style="margin-top: 20px;
|
|
font-weight: 700;
|
|
background-color: lightgray;"
|
|
mat-raised-button
|
|
(click)="copyAddress()">Copy Address</button>
|
|
<button style="margin-top: 20px;
|
|
font-weight: 700;
|
|
background-color: lightgray;"
|
|
mat-raised-button
|
|
(click)="copyAmount()">Copy Amount</button>
|
|
</div>
|
|
<button style="margin-top: 20px;
|
|
font-weight: 700;
|
|
background-color: lightgray;"
|
|
mat-raised-button
|
|
(click)="copyMemo()">Copy Memo</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div> |