From 855d90f6b8fb733b4ceae1bdd6e401ab17ce62fd Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 31 Aug 2021 00:34:28 -0300
Subject: remove qr javascript from body and add contract terms info

---
 packages/backend/src/pages/OfferRefund.tsx         | 17 ++++++------
 packages/backend/src/pages/OfferTip.tsx            | 15 +++++------
 .../backend/src/pages/RequestPayment.stories.tsx   |  2 ++
 packages/backend/src/pages/RequestPayment.tsx      | 17 ++++++------
 .../backend/src/pages/ShowOrderDetails.stories.tsx |  1 -
 packages/backend/src/pages/ShowOrderDetails.tsx    | 30 ++++++++++++++++++----
 6 files changed, 52 insertions(+), 30 deletions(-)
diff --git a/packages/backend/src/pages/OfferRefund.tsx b/packages/backend/src/pages/OfferRefund.tsx
index 88be378..db006d3 100644
--- a/packages/backend/src/pages/OfferRefund.tsx
+++ b/packages/backend/src/pages/OfferRefund.tsx
@@ -44,11 +44,12 @@ import "../css/style.css";
 interface Props {
   refundURI?: string;
   order_status_url?: string;
+  qr_code?: string;
 }
 
 function Head({ order_summary }: { order_summary?: string }): VNode {
   return <Fragment>
-    <meta http-equiv="content-type" content="text/html; UTF-8" />
+    <meta charSet="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <noscript>
       <meta http-equiv="refresh" content="1" />
@@ -57,7 +58,7 @@ function Head({ order_summary }: { order_summary?: string }): VNode {
   </Fragment>
 }
 
-export function OfferRefund({ refundURI, order_status_url }: Props): VNode {
+export function OfferRefund({ refundURI, qr_code, order_status_url }: Props): VNode {
   useEffect(() => {
     let checkUrl: URL;
     try {
@@ -82,7 +83,7 @@ export function OfferRefund({ refundURI, order_status_url }: Props): VNode {
             try {
               const resp = JSON.parse(req.responseText);
               if (!resp.refund_pending) {
-                window.location.reload(true);
+                window.location.reload();
               }
             } catch (e) {
               console.error("could not parse response:", e);
@@ -107,9 +108,7 @@ export function OfferRefund({ refundURI, order_status_url }: Props): VNode {
         <p>
           Scan this QR code with your Taler mobile wallet:
         </p>
-        <div class="qr">
-          {refundURI ? <QR text={refundURI} /> : `{{{ taler_refund_qrcode_svg }}}`}
-        </div>
+        <div class="qr" dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_refund_qrcode_svg }}}` }} />
         <p>
           <a class="pure-button pure-button-active success" href={refundURI ? refundURI : `{{ taler_refund_uri }}`}>
             Or open your Taller wallet
@@ -133,11 +132,13 @@ export function mount(): void {
       render(<Head order_summary={os} />, document.head);
     }
 
-    const ru = fromLocation.get('refund_uri') || undefined;
+    const uri = fromLocation.get('refund_uri') || undefined;
     const osu = fromLocation.get('order_status_url') || undefined;
+    const qr_code = uri ? renderToString(<QR text={uri} />) : undefined;
 
     render(<OfferRefund
-      refundURI={ru} order_status_url={osu}
+      refundURI={uri} order_status_url={osu}
+      qr_code={qr_code}
     />, document.body);
   } catch (e) {
     console.error("got error", e);
diff --git a/packages/backend/src/pages/OfferTip.tsx b/packages/backend/src/pages/OfferTip.tsx
index 9132402..1c9d84a 100644
--- a/packages/backend/src/pages/OfferTip.tsx
+++ b/packages/backend/src/pages/OfferTip.tsx
@@ -46,11 +46,12 @@ import { ShowOrderDetails } from './ShowOrderDetails';
 interface Props {
   tipURI?: string,
   tip_status_url?: string,
+  qr_code?: string,
 }
 
 export function Head(): VNode {
   return <Fragment>
-    <meta http-equiv="content-type" content="text/html; UTF-8" />
+    <meta charSet="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <noscript>
       <meta http-equiv="refresh" content="1" />
@@ -59,7 +60,7 @@ export function Head(): VNode {
   </Fragment>
 }
 
-export function OfferTip({ tipURI, tip_status_url }: Props): VNode {
+export function OfferTip({ tipURI, qr_code, tip_status_url }: Props): VNode {
   useEffect(() => {
     let checkUrl: URL;
     try {
@@ -81,7 +82,7 @@ export function OfferTip({ tipURI, tip_status_url }: Props): VNode {
       req.onreadystatechange = function () {
         if (req.readyState === XMLHttpRequest.DONE) {
           if (req.status === 410) {
-            window.location.reload(true);
+            window.location.reload();
           }
           setTimeout(retryOnce, delayMs);
         }
@@ -102,9 +103,7 @@ export function OfferTip({ tipURI, tip_status_url }: Props): VNode {
         <p>
           Scan this QR code with your Taler mobile wallet:
         </p>
-        <div class="qr">
-          {tipURI ? <QR text={tipURI} /> : `{{{ taler_tip_qrcode_svg }}}`}
-        </div>
+        <div class="qr" dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_tip_qrcode_svg }}}` }} />
         <p>
           <a class="pure-button pure-button-active success" href={tipURI ? tipURI : `{{ taler_tip_uri }}`}>
             Or open your Taller wallet
@@ -124,10 +123,10 @@ export function mount(): void {
   try {
     const fromLocation = new URL(window.location.href).searchParams
 
-    const tu = fromLocation.get('tip_uri') || undefined
+    const uri = fromLocation.get('tip_uri') || undefined
     const tsu = fromLocation.get('tip_status_url') || undefined
 
-    render(<OfferTip tipURI={tu} tip_status_url={tsu} />, document.body);
+    render(<OfferTip tipURI={uri} 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/.`;
diff --git a/packages/backend/src/pages/RequestPayment.stories.tsx b/packages/backend/src/pages/RequestPayment.stories.tsx
index 8f5f734..6c9db0f 100644
--- a/packages/backend/src/pages/RequestPayment.stories.tsx
+++ b/packages/backend/src/pages/RequestPayment.stories.tsx
@@ -21,6 +21,8 @@
 
 import { h, VNode, FunctionalComponent } from 'preact';
 import { RequestPayment as TestedComponent } from './RequestPayment';
+import { QR } from '../components/QR';
+import { render as renderToString } from 'preact-render-to-string';
 
 
 export default {
diff --git a/packages/backend/src/pages/RequestPayment.tsx b/packages/backend/src/pages/RequestPayment.tsx
index 5f5032a..6b2b84c 100644
--- a/packages/backend/src/pages/RequestPayment.tsx
+++ b/packages/backend/src/pages/RequestPayment.tsx
@@ -22,9 +22,9 @@ import { Fragment, h, render, VNode } from 'preact';
 import { render as renderToString } from 'preact-render-to-string';
 import { useEffect } from 'preact/hooks';
 import { Footer } from '../components/Footer';
-import { QR } from '../components/QR';
 import "../css/pure-min.css";
 import "../css/style.css";
+import { QR } from '../components/QR';
 
 
 /**
@@ -48,11 +48,12 @@ import "../css/style.css";
 interface Props {
   payURI?: string,
   order_status_url?: string,
+  qr_code?: string,
 }
 
 function Head({ order_summary }: { order_summary?: string }): VNode {
   return <Fragment>
-    <meta http-equiv="content-type" content="text/html; UTF-8" />
+    <meta charSet="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <noscript>
       <meta http-equiv="refresh" content="1" />
@@ -61,7 +62,7 @@ function Head({ order_summary }: { order_summary?: string }): VNode {
   </Fragment>
 }
 
-export function RequestPayment({ payURI, order_status_url }: Props): VNode {
+export function RequestPayment({ payURI, qr_code, order_status_url }: Props): VNode {
   useEffect(() => {
     const longpollDelayMs = 60 * 1000;
     let checkUrl: URL;
@@ -134,9 +135,7 @@ export function RequestPayment({ payURI, order_status_url }: Props): VNode {
         <p>
           Scan this QR code with your mobile wallet:
         </p>
-        <div class="qr">
-          {payURI ? <QR text={payURI} /> : `{{{ taler_pay_qrcode_svg }}}`}
-        </div>
+        <div class="qr" dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_pay_qrcode_svg }}}` }} />
         <p>
           <a class="pure-button pure-button-active success" href={payURI ? payURI : `{{ taler_pay_uri }}`}>
             Or open your Taller wallet
@@ -161,11 +160,13 @@ export function mount(): void {
       render(<Head order_summary={os} />, document.head);
     }
 
-    const pu = fromLocation.get('pay_uri') || undefined;
+    const uri = fromLocation.get('pay_uri') || undefined;
     const osu = fromLocation.get('order_status_url') || undefined;
+    const qr_code = uri ? renderToString(<QR text={uri} />) : undefined;
 
     render(<RequestPayment
-      payURI={pu} order_status_url={osu}
+      payURI={uri} order_status_url={osu}
+      qr_code={qr_code}
     />, document.body);
   } catch (e) {
     console.error("got error", e);
diff --git a/packages/backend/src/pages/ShowOrderDetails.stories.tsx b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
index 1a41c62..5ed7d93 100644
--- a/packages/backend/src/pages/ShowOrderDetails.stories.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
@@ -39,5 +39,4 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part
 export const Example = createExample(TestedComponent, {
   order_summary: 'here goes the order summary',
   refund_amount: 'USR:10',
-  contract_terms: ''
 });
diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx b/packages/backend/src/pages/ShowOrderDetails.tsx
index 8ae08ab..526eafd 100644
--- a/packages/backend/src/pages/ShowOrderDetails.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.tsx
@@ -18,10 +18,12 @@
 *
 * @author Sebastian Javier Marchano (sebasjm)
 */
+import { format } from 'date-fns';
 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";
+import { MerchantBackend } from '../declaration';
 
 /**
  * This page creates a payment request QR code
@@ -42,12 +44,12 @@ import "../css/style.css";
 interface Props {
   order_summary?: string;
   refund_amount?: string;
-  contract_terms?: string;
+  contract_terms?: MerchantBackend.ContractTerms;
 }
 
 function Head({ order_summary }: { order_summary?: string }): VNode {
   return <Fragment>
-    <meta http-equiv="content-type" content="text/html; UTF-8" />
+    <meta charSet="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <noscript>
       <meta http-equiv="refresh" content="1" />
@@ -56,7 +58,10 @@ function Head({ order_summary }: { order_summary?: string }): VNode {
   </Fragment>
 }
 
-export function ShowOrderDetails({ order_summary, refund_amount }: Props): VNode {
+export function ShowOrderDetails({ order_summary, refund_amount, contract_terms }: Props): VNode {
+  const pay_deadline = contract_terms?.pay_deadline.t_ms === 'never' || contract_terms?.pay_deadline.t_ms === undefined ? undefined :
+    format(new Date(contract_terms?.pay_deadline.t_ms), 'dd/MM/yyyy HH:mm:ss')
+
   return <Fragment>
     <h1>Order details</h1>
 
@@ -74,7 +79,23 @@ export function ShowOrderDetails({ order_summary, refund_amount }: Props): VNode
 
     {/* <!-- FIXME #6459: expand the contract JSON in all its glory here --> */}
     <pre>
-      {/* {{{contract_terms!stringify }}} */}
+      <table>
+        <tr>
+          <td>amount</td><td>{contract_terms?.amount || `{{ contract_terms.amount }}`}</td>
+        </tr>
+        <tr>
+          <td>summary</td><td>{contract_terms?.summary || `{{ contract_terms.summary }}`}</td>
+        </tr>
+        <tr>
+          <td>pay deadline</td><td>{pay_deadline || `{{ contract_terms.pay_deadline.t_ms }}`}</td>
+        </tr>
+        <tr>
+          <td>merchant name</td><td>{contract_terms?.merchant?.name || `{{ contract_terms.merchant.name }}`}</td>
+        </tr>
+      </table>
+      <div>
+        {`{{{contract_terms!stringify }}}`}
+      </div>
     </pre>
 
   </Fragment>
@@ -93,7 +114,6 @@ export function mount(): void {
     const ct = fromLocation.get('contract_terms') || undefined;
 
     render(<ShowOrderDetails
-      contract_terms={ct}
       order_summary={os} refund_amount={ra}
     />, document.body);
 
-- 
cgit v1.2.3

