From 96c0433dd1c23680230ff2e6957ac5ddbb85bf28 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 21 Sep 2023 21:59:16 -0700
Subject: checkout page refinements

---
 src/routes/(app)/[username]/shopify.js/+server.js | 33 +++++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/routes/(app)/[username]/shopify.js/+server.js b/src/routes/(app)/[username]/shopify.js/+server.js
index f5bb8d50..78d27d8d 100644
--- a/src/routes/(app)/[username]/shopify.js/+server.js
+++ b/src/routes/(app)/[username]/shopify.js/+server.js
@@ -70,7 +70,6 @@ window.addEventListener('load', async () => {
 	let fiat = Shopify.checkout.payment_due;
 	let main = document.querySelector('main');
 	main.style.fontFamily = 'Public Sans, sans-serif';
-	main.innerHTML = 'Please Pay';
 
 	let data = await fetch('https://${url.host}/api/invoice', {
 		method: 'POST',
@@ -148,16 +147,37 @@ window.addEventListener('load', async () => {
 	bg.style.background = 'linear-gradient(to right, #F2F6FC, #E1E3FF)';
 	bg.style.zIndex = '0';
 
+let d = { amount: 5000, rate: 18000, currency: "CAD" };
+				main.innerHTML =
+					\`<div style="display: flex"><img id="check" src="https://${url.host}/icons/check.svg" alt="Check" style="margin: auto; max-width: 300px" /></div>
+
+          <h1 style="margin: 30px auto; text-align: center; width: 100%">Payment received!</h1>
+
+          <div style="width: 100%; text-align: center; ">
+            <div style="font-size: 24px; font-weight: bold; margin-bottom: 12px;">\${f(
+              (d.amount * d.rate) / 100000000,
+              d.currency
+            )}</div>
+            <div style="color: #666; font-size: 18px;">\${sat(d.amount)}</div>
+          </div>
+          <a style="color: black;" href="https://\${window.location.host}">
+            <div style="margin: 50px auto; border-radius: 9999px; text-align: center; font-weight: bold; padding: 1rem 2rem; background: black; color: white; font-size: 18px; width: 220px">Continue shopping</div>
+          </a>\`;
+
+				var image = document.getElementById('check');
+				image.addEventListener('load', function () {
+					image.style.transform = 'scale(1)';
+				});
+
 	let ws = new WebSocket('wss://${url.host}/ws');
 	ws.onmessage = ({ data }) => {
 		try {
 			let { type, data: d } = JSON.parse(data);
 			if (type === 'payment') {
 				main.innerHTML =
-					'<img id="check" src="https://${url.host}/icons/check.svg" alt="Check" />' +
-					\`
+					\`<div style="display: flex"><img id="check" src="https://${url.host}/icons/check.svg" alt="Check" style="margin: auto; max-width: 300px" /></div>
 
-          <h1>Payment received!</h1>
+          <h1 style="margin: 30px auto; text-align: center; width: 100%">Payment received!</h1>
 
           <div style="width: 100%; text-align: center; ">
             <div style="font-size: 24px; font-weight: bold; margin-bottom: 12px;">\${f(
@@ -165,7 +185,10 @@ window.addEventListener('load', async () => {
               d.currency
             )}</div>
             <div style="color: #666; font-size: 18px;">\${sat(d.amount)}</div>
-          </div>\`;
+          </div>
+          <a style="color: black;" href="https://\${window.location.host}">
+            <div style="margin: 50px auto; border-radius: 9999px; text-align: center; font-weight: bold; padding: 1rem 2rem; background: black; color: white; font-size: 18px; width: 220px">Continue shopping</div>
+          </a>\`;
 
 				var image = document.getElementById('check');
 				image.addEventListener('load', function () {
-- 
cgit v1.2.3