From b615556aefc7cf3868aa883bdd47155c901f4010 Mon Sep 17 00:00:00 2001 From: Rene Vergara A Date: Sun, 24 Jul 2022 18:00:09 -0500 Subject: [PATCH] Invoice format ready for user --- src/app/invoice/invoice.component.css | 139 ++++++++++++++------- src/app/invoice/invoice.component.html | 164 +++++++++++++++---------- src/app/invoice/invoice.component.ts | 18 ++- 3 files changed, 212 insertions(+), 109 deletions(-) diff --git a/src/app/invoice/invoice.component.css b/src/app/invoice/invoice.component.css index 2bf3386..8fc78c7 100644 --- a/src/app/invoice/invoice.component.css +++ b/src/app/invoice/invoice.component.css @@ -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; +} diff --git a/src/app/invoice/invoice.component.html b/src/app/invoice/invoice.component.html index 92c1309..05a0099 100644 --- a/src/app/invoice/invoice.component.html +++ b/src/app/invoice/invoice.component.html @@ -1,75 +1,111 @@ - - + +
- - - -

{{name}}

- - -
- - - Total: {{order.totalZec | number: '1.08'}} - - - {{order.timestamp | date}} - - -

Order ID: {{orderId}}

-

Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}

-
- - - - - - - - - - - -
- Item - - Qty. - - Price ({{order.currency.toUpperCase()}}) -
- {{item.name}} - - {{item.qty}} - - {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}} -
-
- Payment confirmed - Payment pending -
- - + {{name}}
+
+
Invoice
+
Order ID: {{orderId}}
+
Date:{{order.timestamp | date}} +
+
+
Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}
+
+
Total: {{order.totalZec | number: '1.08'}} +
+
+
+ + + + + + + + + + + + + + + + +
+ Item + + Qty. + + Price ({{order.currency.toUpperCase()}}) +
+ {{item.name}} + + {{item.qty}} + + {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}} +
+ Invoice Total: + + + + {{ order.total | number : '1.02' | currency: order.currency.toUpperCase()}} +
+
+ + + + + +
+

+  Payment confirmed

+

+  Payment pending!!

+ 		+
+
+ +
+
+
- - +
+
Incorrect Invoice ID. - - +
+
No information available. - +
+
-
diff --git a/src/app/invoice/invoice.component.ts b/src/app/invoice/invoice.component.ts index 407a220..5aeef5c 100644 --- a/src/app/invoice/invoice.component.ts +++ b/src/app/invoice/invoice.component.ts @@ -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;"; + + } + }