head and body split, handle request params

1 files changed, 55 insertions, 74 deletions

diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx b/packages/backend/src/pages/ShowOrderDetails.tsx
index 591b7ea..8ae08ab 100644
--- a/packages/backend/src/pages/ShowOrderDetails.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.tsx
@@ -18,83 +18,56 @@
 *
 * @author Sebastian Javier Marchano (sebasjm)
 */
-import { Fragment, render, h, VNode } from 'preact';
-import { useEffect } from 'preact/hooks';
+import { Fragment, h, render, VNode } from 'preact';
 import { render as renderToString } from 'preact-render-to-string';
+import "../css/pure-min.css";
+import "../css/style.css";
 
-export function ShowOrderDetails(): VNode {
-  useEffect(() => {
-    const longpollDelayMs = 60000;
-    const checkUrl = new URL("{{& order_status_url }}");
-    checkUrl.searchParams.set("timeout_ms", longpollDelayMs.toString());
-    function check() {
-      let retried = false;
-      function retryOnce() {
-
-        if (!retried) {
-          retried = true;
-          check();
-        }
-      }
-      const req = new XMLHttpRequest();
-      req.onreadystatechange = function () {
-        if (req.readyState === XMLHttpRequest.DONE) {
-          if (req.status === 200) {
-            try {
-              const resp = JSON.parse(req.responseText);
-              if (resp.fulfillment_url) {
-                window.location.replace(resp.fulfillment_url);
-              }
-            } catch (e) {
-              console.error("could not parse response:", e);
-            }
-          }
-          if (req.status === 202) {
-            try {
-              const resp = JSON.parse(req.responseText);
-              if (resp.fulfillment_url) {
-                window.location.replace(resp.fulfillment_url);
-              }
-            } catch (e) {
-              console.error("could not parse response:", e);
-            }
-          }
-          if (req.status === 402) {
-            try {
-              const resp = JSON.parse(req.responseText);
-              if (resp.already_paid_order_id && resp.fulfillment_url) {
-                window.location.replace(resp.fulfillment_url);
-              }
-            } catch (e) {
-              console.error("could not parse response:", e);
-            }
-          }
-          setTimeout(retryOnce, 500);
-        }
-      };
-      req.onerror = function () {
-        setTimeout(retryOnce, 500);
-      }
-      req.ontimeout = function () {
-        setTimeout(retryOnce, 500);
-      }
-      req.timeout = longpollDelayMs;
-      req.open("GET", checkUrl.href);
-      req.send();
-    }
-    setTimeout(check, 500);
-  })
+/**
+ * This page creates a payment request QR code
+ * 
+ * It will build into a mustache html template for server side rendering
+ * 
+ * server side rendering params:
+ *  - order_summary
+ *  - contract_terms
+ *  - refund_amount
+ * 
+ * request params:
+ *  - refund_amount
+ *  - contract_terms 
+ *  - order_summary
+ */
+
+interface Props {
+  order_summary?: string;
+  refund_amount?: string;
+  contract_terms?: string;
+}
+
+function Head({ order_summary }: { order_summary?: string }): VNode {
+  return <Fragment>
+    <meta http-equiv="content-type" content="text/html; UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <noscript>
+      <meta http-equiv="refresh" content="1" />
+    </noscript>
+    <title>Status of your order for {order_summary ? order_summary : `{{ order_summary }}`}</title>
+  </Fragment>
+}
+
+export function ShowOrderDetails({ order_summary, refund_amount }: Props): VNode {
   return <Fragment>
     <h1>Order details</h1>
 
     <div>
-      This is the default status page for your order for <b>{`{{ order_summary }}`}</b>.
+      This is the default status page for your order for <b>{order_summary ? order_summary : `{{ order_summary }}`}</b>.
     </div>
 
 
     <h2>Refund status</h2>
     <div>
-      The merchant has granted you refunds on the purchase of <b>{`{{ refund_amount }}`}</b>.
+      The merchant has granted you refunds on the purchase of <b>{refund_amount ? refund_amount : `{{ refund_amount }}`}</b>.
     </div>
 
     <h2>Full contract details</h2>
@@ -108,15 +81,20 @@ export function ShowOrderDetails(): VNode {
 
 }
 
-function Title(): VNode {
-  return <title>Status of your order for {`{order_summary}`}</title>
-}
-
 export function mount(): void {
   try {
-    const params = new URL(window.location.href).searchParams
+    const fromLocation = new URL(window.location.href).searchParams
+    const os = fromLocation.get('order_summary') || undefined;
+    if (os) {
+      render(<Head order_summary={os} />, document.head);
+    }
+
+    const ra = fromLocation.get('refund_amount') || undefined;
+    const ct = fromLocation.get('contract_terms') || undefined;
+
     render(<ShowOrderDetails
-    // taler_refund_uri={params.get('taler_refund_uri') || undefined} 
+      contract_terms={ct}
+      order_summary={os} refund_amount={ra}
     />, document.body);
 
   } catch (e) {
@@ -125,6 +103,9 @@ export function mount(): void {
   }
 }
 
-export function buildTimeRendering(): string {
-  return renderToString(<ShowOrderDetails />)
+export function buildTimeRendering(): { head: string, body: string } {
+  return {
+    head: renderToString(<Head />),
+    body: renderToString(<ShowOrderDetails />)
+  }
 }