1 files changed, 56 insertions, 25 deletions

diff --git a/packages/backend/src/pages/OfferTip.tsx b/packages/backend/src/pages/OfferTip.tsx
index 95e0c41..9132402 100644
--- a/packages/backend/src/pages/OfferTip.tsx
+++ b/packages/backend/src/pages/OfferTip.tsx
@@ -18,23 +18,56 @@
 *
 * @author Sebastian Javier Marchano (sebasjm)
 */
-import { render, h, VNode, Fragment } from 'preact';
+import { Fragment, h, render, VNode } from 'preact';
+import { render as renderToString } from 'preact-render-to-string';
 import { useEffect } from 'preact/hooks';
-import { styled } from "@linaria/react"
-import "../css/pure-min.css"
-import "../css/style.css"
 import { Footer } from '../components/Footer';
-import { ShowOrderDetails } from './ShowOrderDetails';
-import { render as renderToString } from 'preact-render-to-string';
 import { QR } from '../components/QR';
+import "../css/pure-min.css";
+import "../css/style.css";
+import { ShowOrderDetails } from './ShowOrderDetails';
+
+
+/**
+ * This page creates a tip offer QR code
+ * 
+ * It will build into a mustache html template for server side rendering
+ * 
+ * server side rendering params:
+ *  - tip_status_url
+ *  - taler_tip_qrcode_svg
+ *  - taler_tip_uri
+ * 
+ * request params:
+ *  - tip_uri
+ *  - tip_status_url
+ */
 
 interface Props {
-  taler_refund_uri?: string,
+  tipURI?: string,
   tip_status_url?: string,
-  taler_tip_qrcode_svg?: string,
 }
-export function OfferTip({ taler_refund_uri, tip_status_url, taler_tip_qrcode_svg }: Props): VNode {
+
+export function Head(): 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>Tip available</title>
+  </Fragment>
+}
+
+export function OfferTip({ tipURI, tip_status_url }: Props): VNode {
   useEffect(() => {
+    let checkUrl: URL;
+    try {
+      checkUrl = new URL(tip_status_url ? tip_status_url : "{{& tip_status_url }}");
+    } catch (e) {
+      return;
+    }
+
     const delayMs = 500;
     function check() {
       let retried = false;
@@ -56,7 +89,7 @@ export function OfferTip({ taler_refund_uri, tip_status_url, taler_tip_qrcode_sv
       req.onerror = function () {
         setTimeout(retryOnce, delayMs);
       }
-      req.open("GET", taler_refund_uri || '');
+      req.open("GET", checkUrl.href);
       req.send();
     }
 
@@ -70,10 +103,10 @@ export function OfferTip({ taler_refund_uri, tip_status_url, taler_tip_qrcode_sv
           Scan this QR code with your Taler mobile wallet:
         </p>
         <div class="qr">
-          {taler_tip_qrcode_svg ? <QR text={taler_tip_qrcode_svg} /> : `{{taler_tip_qrcode_svg}}`}
+          {tipURI ? <QR text={tipURI} /> : `{{{ taler_tip_qrcode_svg }}}`}
         </div>
         <p>
-          <a class="pure-button pure-button-active success" href='{{taler_refund_uri}}'>
+          <a class="pure-button pure-button-active success" href={tipURI ? tipURI : `{{ taler_tip_uri }}`}>
             Or open your Taller wallet
           </a>
         </p>
@@ -87,25 +120,23 @@ export function OfferTip({ taler_refund_uri, tip_status_url, taler_tip_qrcode_sv
   </Fragment>
 }
 
-
-export function Title(): VNode {
-  return <title>Tip available</title>
-}
-
 export function mount(): void {
   try {
-    const params = new URL(window.location.href).searchParams
-    render(<OfferTip
-      taler_refund_uri={params.get('taler_refund_uri') || undefined}
-      taler_tip_qrcode_svg={params.get('taler_tip_qrcode_svg') || undefined}
-      tip_status_url={params.get('tip_status_url') || undefined}
-    />, document.body);
+    const fromLocation = new URL(window.location.href).searchParams
+
+    const tu = fromLocation.get('tip_uri') || undefined
+    const tsu = fromLocation.get('tip_status_url') || undefined
+
+    render(<OfferTip tipURI={tu} tip_status_url={tsu} />, document.body);
   } catch (e) {
     console.error("got error", e);
     document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
   }
 }
 
-export function buildTimeRendering(): string {
-  return renderToString(<ShowOrderDetails />)
+export function buildTimeRendering(): { head: string, body: string } {
+  return {
+    head: renderToString(<Head />),
+    body: renderToString(<ShowOrderDetails />)
+  }
 }