fix storybook example to show QR details

10 files changed, 57 insertions, 25 deletions

diff --git a/packages/backend/src/components/QR.tsx b/packages/backend/src/components/QR.tsx
index 95aee36..4418f1c 100644
--- a/packages/backend/src/components/QR.tsx
+++ b/packages/backend/src/components/QR.tsx
@@ -18,15 +18,19 @@
  import { useEffect, useRef } from "preact/hooks";
  import qrcode from "qrcode-generator";
  
+export function createSVG(text:string):string {
+  const qr = qrcode(0, 'L');
+  qr.addData(text);
+  qr.make();
+  return qr.createSvgTag({
+    scalable: true,
+  });
+}
+
  export function QR({ text }: { text: string; }):VNode {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
-     const qr = qrcode(0, 'L');
-     qr.addData(text);
-     qr.make();
-     divRef.current.innerHTML = qr.createSvgTag({
-       scalable: true,
-     });
+     divRef.current.innerHTML = createSVG(text)
    });
  
    return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
diff --git a/packages/backend/src/pages/DepletedTip.tsx b/packages/backend/src/pages/DepletedTip.tsx
index 1e2e411..8345484 100644
--- a/packages/backend/src/pages/DepletedTip.tsx
+++ b/packages/backend/src/pages/DepletedTip.tsx
@@ -45,7 +45,9 @@ export function mount(): void {
     render(<DepletedTip />, 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/.`;
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
   }
 }
 
diff --git a/packages/backend/src/pages/OfferRefund.stories.tsx b/packages/backend/src/pages/OfferRefund.stories.tsx
index 4a5e9ab..ce358b4 100644
--- a/packages/backend/src/pages/OfferRefund.stories.tsx
+++ b/packages/backend/src/pages/OfferRefund.stories.tsx
@@ -20,6 +20,7 @@
 */
 
 import { h, VNode, FunctionalComponent } from 'preact';
+import { createSVG } from '../components/QR';
 import { OfferRefund as TestedComponent } from './OfferRefund';
 
 
@@ -36,6 +37,9 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part
   return r
 }
 
+const REFUND_URI_EXAMPLE = 'taler+http://refund/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0'
+
 export const Example = createExample(TestedComponent, {
-  refundURI: 'taler+http://refund/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0'
+  refundURI: REFUND_URI_EXAMPLE,
+  qr_code: createSVG(REFUND_URI_EXAMPLE)
 });
diff --git a/packages/backend/src/pages/OfferRefund.tsx b/packages/backend/src/pages/OfferRefund.tsx
index db006d3..0d71e88 100644
--- a/packages/backend/src/pages/OfferRefund.tsx
+++ b/packages/backend/src/pages/OfferRefund.tsx
@@ -142,7 +142,9 @@ export function mount(): void {
     />, 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/.`;
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
   }
 }
 
diff --git a/packages/backend/src/pages/OfferTip.stories.tsx b/packages/backend/src/pages/OfferTip.stories.tsx
index 9685fea..dfbf71f 100644
--- a/packages/backend/src/pages/OfferTip.stories.tsx
+++ b/packages/backend/src/pages/OfferTip.stories.tsx
@@ -20,6 +20,7 @@
 */
 
 import { h, VNode, FunctionalComponent } from 'preact';
+import { createSVG } from '../components/QR';
 import { OfferTip as TestedComponent } from './OfferTip';
 
 
@@ -36,6 +37,9 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part
   return r
 }
 
+const TIP_URI_EXAMPLE = 'taler+http://tip/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0'
+
 export const Example = createExample(TestedComponent, {
-  tipURI: 'taler+http://tip/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0',
+  tipURI: TIP_URI_EXAMPLE,
+  qr_code: createSVG(TIP_URI_EXAMPLE)
 });
diff --git a/packages/backend/src/pages/OfferTip.tsx b/packages/backend/src/pages/OfferTip.tsx
index 1c9d84a..8fc3805 100644
--- a/packages/backend/src/pages/OfferTip.tsx
+++ b/packages/backend/src/pages/OfferTip.tsx
@@ -129,7 +129,9 @@ export function mount(): void {
     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/.`;
+    if (e instanceof Error) {
+      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 6c9db0f..5d6d79a 100644
--- a/packages/backend/src/pages/RequestPayment.stories.tsx
+++ b/packages/backend/src/pages/RequestPayment.stories.tsx
@@ -19,10 +19,9 @@
 * @author Sebastian Javier Marchano (sebasjm)
 */
 
-import { h, VNode, FunctionalComponent } from 'preact';
+import { FunctionalComponent, h } from 'preact';
+import { createSVG } from '../components/QR';
 import { RequestPayment as TestedComponent } from './RequestPayment';
-import { QR } from '../components/QR';
-import { render as renderToString } from 'preact-render-to-string';
 
 
 export default {
@@ -38,6 +37,9 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part
   return r
 }
 
+const PAYTO_URI_EXAMPLE = 'taler+http://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0'
+
 export const Example = createExample(TestedComponent, {
-  payURI: 'taler+http://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0'
+  payURI: 'taler+http://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0',
+  qr_code: createSVG(PAYTO_URI_EXAMPLE)
 });
diff --git a/packages/backend/src/pages/RequestPayment.tsx b/packages/backend/src/pages/RequestPayment.tsx
index 6b2b84c..d171a75 100644
--- a/packages/backend/src/pages/RequestPayment.tsx
+++ b/packages/backend/src/pages/RequestPayment.tsx
@@ -170,7 +170,9 @@ export function mount(): void {
     />, 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/.`;
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
   }
 }
 
diff --git a/packages/backend/src/pages/ShowOrderDetails.stories.tsx b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
index 5ed7d93..a78618f 100644
--- a/packages/backend/src/pages/ShowOrderDetails.stories.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
@@ -20,6 +20,7 @@
 */
 
 import { FunctionalComponent, h } from 'preact';
+import { MerchantBackend } from '../declaration';
 import { ShowOrderDetails as TestedComponent } from './ShowOrderDetails';
 
 
@@ -38,5 +39,15 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part
 
 export const Example = createExample(TestedComponent, {
   order_summary: 'here goes the order summary',
-  refund_amount: 'USR:10',
+  refund_amount: 'USD:10',
+  contract_terms: {
+    amount: 'USD:10',
+    summary: 'this is a short summary',
+    pay_deadline: {
+      t_ms: new Date().getTime() + 6*24*60*60*1000
+    },
+    merchant: {
+      name: 'the merchant (inc)'
+    }
+  } as MerchantBackend.ContractTerms
 });
diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx b/packages/backend/src/pages/ShowOrderDetails.tsx
index 526eafd..4bde798 100644
--- a/packages/backend/src/pages/ShowOrderDetails.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.tsx
@@ -81,21 +81,18 @@ export function ShowOrderDetails({ order_summary, refund_amount, contract_terms
     <pre>
       <table>
         <tr>
-          <td>amount</td><td>{contract_terms?.amount || `{{ contract_terms.amount }}`}</td>
+          <td style={{fontWeight: 'bold'}}>amount</td><td>{contract_terms?.amount || `{{ contract_terms.amount }}`}</td>
         </tr>
         <tr>
-          <td>summary</td><td>{contract_terms?.summary || `{{ contract_terms.summary }}`}</td>
+          <td style={{fontWeight: 'bold'}}>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>
+          <td style={{fontWeight: 'bold'}}>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>
+          <td style={{fontWeight: 'bold'}}>merchant name</td><td>{contract_terms?.merchant?.name || `{{ contract_terms.merchant.name }}`}</td>
         </tr>
       </table>
-      <div>
-        {`{{{contract_terms!stringify }}}`}
-      </div>
     </pre>
 
   </Fragment>
@@ -119,7 +116,9 @@ export function mount(): void {
 
   } catch (e) {
     console.error("got error", e);
-    document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
   }
 }