commit 40f55baff0001918c210e99935ab3df12f498b5f
parent 855d90f6b8fb733b4ceae1bdd6e401ab17ce62fd
Author: Sebastian <sebasjm@gmail.com>
Date: Mon, 6 Sep 2021 14:14:59 -0300
fix storybook example to show QR details
Diffstat:
10 files changed, 57 insertions(+), 25 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/.`;
+ }
}
}
