From ed7ceb75944aa9f0c676803ba3ddf833f70b909c Mon Sep 17 00:00:00 2001
From: Rene Vergara A <rvergara59@protonmail.com>
Date: Sat, 23 Jul 2022 14:54:36 -0500
Subject: [PATCH] Checkout dialog box working

---
 CHANGELOG.md                                  |  5 +-
 src/app/checkout/checkout.component.css       | 11 ++++
 src/app/checkout/checkout.component.html      | 55 +++++++++++--------
 src/app/checkout/checkout.component.ts        | 18 ++++--
 .../prompt-invoice.component.css              |  7 +++
 src/app/receipt-qr/receipt-qr.component.css   | 18 ++++++
 src/app/receipt-qr/receipt-qr.component.html  | 27 +++++----
 7 files changed, 99 insertions(+), 42 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a84d2b..32fdf18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,8 +13,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
     
 ### Changed
-- (2022-07-22) Invoice dialog completed. Notifications to inform
-               successful/fail of  URL copy to clipboard added. 
+- (2022-07-23) - Checkout dialog with QR image redesigned.
+               - Invoice dialog completed. Notifications to inform
+                 successful/failed URL-copy-to-clipboard added. 
 - (2022-07-22) Notifier service created - replaces snackbar used for
                reporting invalid viewing key.
                Notifier component created - used to apply custom style to message sent by Notifier service.
diff --git a/src/app/checkout/checkout.component.css b/src/app/checkout/checkout.component.css
index 0b79f36..459eaa2 100644
--- a/src/app/checkout/checkout.component.css
+++ b/src/app/checkout/checkout.component.css
@@ -1,3 +1,14 @@
 .text {
 	font-family: 'Spartan', sans-serif;
 }
+
+.askPayment {
+	font-family: "Spartan";
+	background: #ff5722;
+	font-weight: 700;
+	font-size: 18px;
+	text-align: center;
+	color: white;
+    line-height: 20px;
+    padding: 10px;        
+}
diff --git a/src/app/checkout/checkout.component.html b/src/app/checkout/checkout.component.html
index 6765d9d..401da48 100644
--- a/src/app/checkout/checkout.component.html
+++ b/src/app/checkout/checkout.component.html
@@ -1,28 +1,37 @@
-<div align="center" mat-dialog-title>
-	<h4 class="text">Scan to make payment</h4>
-</div>
+<div class="container" style="margin-top: 10px;">
 
-<mat-dialog-content>
-	<div align="center" 
-	     id="checkout-qr">   
+	<div class="askPayment">
+		Scan to make payment
 	</div>
-</mat-dialog-content>
-<mat-dialog-actions>
-	<table cellspacing="0" 
-	       width="100%">
+	<pre></pre>
+	<table style="align-content: center;">
 		<tr>
-			<td>
-				<button mat-raised-button color="primary" (click)="confirm()">
-					<mat-icon>verified_user</mat-icon>
-				</button>
-
-			</td>
-			<td align="right">
-				<button mat-raised-button (click)="close()">
-					<mat-icon>close</mat-icon>
-				</button>
-
+			<td width="10%"></td>
+			<td width="80%">
+				<div id="checkout-qr"></div>
 			</td>
+			<td width="10%"></td>
 		</tr>
-	</table>
-</mat-dialog-actions>
+    </table>
+
+	<mat-dialog-actions>
+		<table cellspacing="0" 
+		       width="100%">
+			<tr>
+				<td>
+					<button mat-raised-button color="primary" (click)="confirm()">
+						<mat-icon>verified_user</mat-icon>
+					</button>
+
+				</td>
+				<td align="right">
+					<button mat-raised-button (click)="close()">
+						<mat-icon>close</mat-icon>
+					</button>
+
+				</td>
+			</tr>
+		</table>
+	</mat-dialog-actions>
+
+</div>
diff --git a/src/app/checkout/checkout.component.ts b/src/app/checkout/checkout.component.ts
index 79698b6..0dae1ff 100644
--- a/src/app/checkout/checkout.component.ts
+++ b/src/app/checkout/checkout.component.ts
@@ -32,12 +32,18 @@ export class CheckoutComponent implements OnInit{
 	}
 
 	ngOnInit() {
-		var qrcode = new QRCode(document.getElementById("checkout-qr"), {
-			text: this.codeString,
-			logo: "/assets/zcash.png",
-			logoWidth: 80,
-			logoHeight: 80
-		});
+		var qrcode = new QRCode(document.getElementById("checkout-qr"),
+			{ 
+		        text: this.codeString,
+				logo: "/assets/zcash.png",
+				width: 220,
+				height: 220,
+				logoWidth: 60,
+				logoHeight: 60,
+		        correctLevel: QRCode.CorrectLevel.H
+	    	});
+	    console.log(">>> " + qrcode);
+
 	}
 
 	confirm() {
diff --git a/src/app/prompt-invoice/prompt-invoice.component.css b/src/app/prompt-invoice/prompt-invoice.component.css
index 8000f07..b3176b0 100644
--- a/src/app/prompt-invoice/prompt-invoice.component.css
+++ b/src/app/prompt-invoice/prompt-invoice.component.css
@@ -40,3 +40,10 @@
 	cursor:  pointer;
 }
 
+.qr-code{
+    border-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+}
+
+
diff --git a/src/app/receipt-qr/receipt-qr.component.css b/src/app/receipt-qr/receipt-qr.component.css
index ef8f0ab..d4899c1 100644
--- a/src/app/receipt-qr/receipt-qr.component.css
+++ b/src/app/receipt-qr/receipt-qr.component.css
@@ -2,3 +2,21 @@
 .text {
 	font-family: 'Spartan', sans-serif;
 }
+
+.receipt {
+	font-family: "Spartan";
+	background: #ff5722;
+	font-weight: 700;
+	font-size: 18px;
+	text-align: center;
+	color: white;
+    line-height: 20px;
+    padding: 10px;        
+}
+
+.qrbody {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #e8eaf0;
+}
\ No newline at end of file
diff --git a/src/app/receipt-qr/receipt-qr.component.html b/src/app/receipt-qr/receipt-qr.component.html
index 0533f99..0d743e1 100644
--- a/src/app/receipt-qr/receipt-qr.component.html
+++ b/src/app/receipt-qr/receipt-qr.component.html
@@ -1,13 +1,18 @@
-<div align="center" mat-dialog-title>
-	<h4 class="text">Scan for your Receipt</h4>
-</div>
+<div class="container" style="margin-top: 10px;">
 
-<mat-dialog-content>
-	<div class="qrcode" id="receipt-qr"> </div>
-</mat-dialog-content>
+	<div class="receipt">
+		Scan for your Receipt
+	</div>
 
-<mat-dialog-actions>
-	<button mat-raised-button class="text" (click)="close()">
-		<mat-icon class="icon">close</mat-icon>Close
-	</button>
-</mat-dialog-actions>
+	<div class="qrbody">
+		<div id="receipt-qr"> </div>
+	</div>
+
+	<mat-dialog-actions>
+		<button mat-raised-button class="text" (click)="close()">
+			<mat-icon class="icon">close</mat-icon>Close
+		</button>
+	</mat-dialog-actions>
+
+
+</div>
\ No newline at end of file