Invoice format ready for user

This commit is contained in:
Rene V. Vergara A. 2022-07-24 18:00:09 -05:00
parent ed7ceb7594
commit b615556aef
3 changed files with 212 additions and 109 deletions

View file

@ -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 { .invoice {
font-family: Roboto Mono !important; font-family: Roboto Mono !important;
} }
.invoice-title { .invoiceHeader {
font-size: 19px; display: flex;
font-family: Spartan;
font-weight: 700; 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 { .invoiceDetail {
font-size: 14px; 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; 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;
}

View file

@ -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" /> <img class="logo" src="/assets/logo-new-white.png" height="40px" />
</span> {{name}}
<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>
</div> </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>&nbsp;Payment confirmed</p>
<p *ngIf="!order.paid">
<fa-icon [style]="getIconStyle(order)"
[icon]="faHourglass"></fa-icon>&nbsp;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"> <div align="center" *ngIf="error">
<mat-card> <div style="height: 10px;"></div>
<mat-card-title> <div style="font-family: Spartan !important;
font-size: 20px;
padding: 4px;
height: 24px;">
Incorrect Invoice ID. Incorrect Invoice ID.
</mat-card-title> </div>
<mat-card-content> <div style="font-family: Spartan !important;
font-size: 16px;
padding: 4px;">
No information available. No information available.
</mat-card-content> </div>
<div style="height: 10px;"></div>
<mat-card-actions> <mat-card-actions>
<div align="center"> <div align="center">
<button mat-raised-button [routerLink]="['/']" color="primary">OK</button> <button mat-raised-button [routerLink]="['/']" color="primary">OK</button>
</div> </div>
</mat-card-actions> </mat-card-actions>
</mat-card>
</div> </div>

View file

@ -56,10 +56,13 @@ export class InvoiceComponent implements OnInit {
this.error = false; 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!)))}`; 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"), { var qrcode = new QRCode(document.getElementById("payment-qr"), {
text: this.codeString, text: this.codeString,
logo: "/assets/zcash.png", logo: "/assets/zcash.png",
logoWidth: 80, width: 180,
logoHeight: 80 height: 180,
logoWidth: 50,
logoHeight: 50,
correctLevel: QRCode.CorrectLevel.H
}); });
} else { } else {
this.error = true; this.error = true;
@ -77,4 +80,11 @@ export class InvoiceComponent implements OnInit {
ngOnInit(): void { 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;";
}
} }