Invoice format ready for user
This commit is contained in:
parent
ed7ceb7594
commit
b615556aef
|
|
@ -1,52 +1,109 @@
|
|||
* {
|
||||
font-family: 'Spartan', sans-serif;
|
||||
}
|
||||
|
||||
.spacer{
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.mat-card{
|
||||
font-family: 'Spartan', sans-serif;
|
||||
border: 1px solid #FF7522;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
margin: 5px;
|
||||
max-width: 500px;
|
||||
}
|
||||
.mat-card-title{
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mat-card-subtitle{
|
||||
font-size: 12px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.mat-card-content{
|
||||
font-size: 14px;
|
||||
text-align: justify;
|
||||
}
|
||||
span.tt{
|
||||
font-family: 'Roboto-Mono', monospace;
|
||||
}
|
||||
img.total{
|
||||
margin-bottom:-2px;
|
||||
}
|
||||
.small{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.invoice {
|
||||
font-family: Roboto Mono !important;
|
||||
}
|
||||
|
||||
.invoice-title {
|
||||
font-size: 19px;
|
||||
.invoiceHeader {
|
||||
display: flex;
|
||||
font-family: Spartan;
|
||||
font-weight: 700;
|
||||
height: 20px;
|
||||
font-size: 26px;
|
||||
color: white;
|
||||
justify-content: space-between;
|
||||
line-height: 40px;
|
||||
padding: 10px;
|
||||
vertical-align: center;
|
||||
max-width: 600px;
|
||||
background: #ff5722;
|
||||
}
|
||||
|
||||
.invoice-detail {
|
||||
font-size: 14px;
|
||||
.invoiceDetail {
|
||||
font-family: Roboto Mono !important;
|
||||
padding: 10px;
|
||||
max-width: 600px;
|
||||
background: #ebecf0;
|
||||
}
|
||||
|
||||
.invoiceHdrTxt1 {
|
||||
font-family: Spartan !important;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.invoiceHdrTxt2 {
|
||||
font-family: Spartan !important;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.invoiceHdrTxt3 {
|
||||
font-family: Spartan !important;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.detailTitle1 {
|
||||
border-top: solid 2px;
|
||||
border-bottom: solid 2px;
|
||||
border-color: navy;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.detailTitle2 {
|
||||
border-top: solid 2px;
|
||||
border-bottom: solid 2px;
|
||||
border-color: navy;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.detailLineRight {
|
||||
border-top: solid 2px;
|
||||
border-bottom: solid 2px;
|
||||
border-color: navy;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.detailLineLeft {
|
||||
border-top: solid 2px;
|
||||
border-bottom: solid 2px;
|
||||
border-color: navy;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.invoice-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
background: lightcyan;
|
||||
line-height: 30px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.invoice-detail {
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.invoice-total {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
display: flex;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.zecData {
|
||||
width: auto;
|
||||
font-family: Spartan !important;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,75 +1,111 @@
|
|||
<mat-toolbar color="primary">
|
||||
<span align="center">
|
||||
|
||||
<div class="invoiceHeader">
|
||||
<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/zec_rv.png" height="18px" />{{order.totalZec | number: '1.08'}}
|
||||
</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 | number: '1.02' | currency: order.currency.toUpperCase()}}</p>
|
||||
<div class="invoice" align="center">
|
||||
<table style="width: 100%;"
|
||||
cellspacing="0">
|
||||
<tr class="invoice-title">
|
||||
<th width="55%"
|
||||
style="text-align: center;">
|
||||
Item
|
||||
</th>
|
||||
<th width="15%"
|
||||
style="text-align: center;">
|
||||
Qty.
|
||||
</th>
|
||||
<th width="30%"
|
||||
style="text-align: center;">
|
||||
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>
|
||||
</table>
|
||||
<div class="qrcode" id="payment-qr" *ngIf="!order.paid"></div>
|
||||
<span *ngIf="order.paid"><fa-icon [icon]="faCheck" color="primary"></fa-icon>Payment confirmed</span>
|
||||
<span *ngIf="!order.paid"><fa-icon [icon]="faHourglass" color="primary"></fa-icon>Payment pending</span>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
{{name}}
|
||||
</div>
|
||||
<div class="invoiceDetail"
|
||||
*ngIf="!error"
|
||||
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="total" src="/assets/zec_rv.png" height="18px" />{{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 | number : '1.02' | 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>
|
||||
</div>
|
||||
|
||||
<div align="center" *ngIf="error">
|
||||
<mat-card>
|
||||
<mat-card-title>
|
||||
<div style="height: 10px;"></div>
|
||||
<div style="font-family: Spartan !important;
|
||||
font-size: 20px;
|
||||
padding: 4px;
|
||||
height: 24px;">
|
||||
Incorrect Invoice ID.
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
</div>
|
||||
<div style="font-family: Spartan !important;
|
||||
font-size: 16px;
|
||||
padding: 4px;">
|
||||
No information available.
|
||||
</mat-card-content>
|
||||
</div>
|
||||
<div style="height: 10px;"></div>
|
||||
<mat-card-actions>
|
||||
<div align="center">
|
||||
<button mat-raised-button [routerLink]="['/']" color="primary">OK</button>
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,10 +56,13 @@ export class InvoiceComponent implements OnInit {
|
|||
this.error = false;
|
||||
this.codeString = `zcash:${response.body!.order.address}?amount=${response.body!.order.totalZec.toFixed(8)}&memo=${URLSafeBase64.encode(Buffer.from('ZGo Order::'.concat(this.orderId!)))}`;
|
||||
var qrcode = new QRCode(document.getElementById("payment-qr"), {
|
||||
text: this.codeString,
|
||||
logo: "/assets/zcash.png",
|
||||
logoWidth: 80,
|
||||
logoHeight: 80
|
||||
text: this.codeString,
|
||||
logo: "/assets/zcash.png",
|
||||
width: 180,
|
||||
height: 180,
|
||||
logoWidth: 50,
|
||||
logoHeight: 50,
|
||||
correctLevel: QRCode.CorrectLevel.H
|
||||
});
|
||||
} else {
|
||||
this.error = true;
|
||||
|
|
@ -77,4 +80,11 @@ export class InvoiceComponent implements OnInit {
|
|||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
getIconStyle(order : Order) {
|
||||
if( order.paid )
|
||||
return "font-size: 14px; color: #72cc50; margin-bottom: -2px;";
|
||||
return "color: #FB4F14; margin-bottom: -2px; cursor: pointer;";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue