[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] branch master updated: built time rendering
|
From: |
gnunet |
|
Subject: |
[taler-merchant-backoffice] branch master updated: built time rendering |
|
Date: |
Fri, 27 Aug 2021 20:41:49 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository merchant-backoffice.
The following commit(s) were added to refs/heads/master by this push:
new d8750f7 built time rendering
d8750f7 is described below
commit d8750f7a066cd047ff9f71c13f67a3f8b012bc62
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Fri Aug 27 15:41:41 2021 -0300
built time rendering
---
packages/backend/rollup.config.js | 10 +++-
.../OfferTip.stories.tsx => components/Footer.tsx} | 23 ++------
.../QR.tsx} | 44 +++++++--------
packages/backend/src/pages/DepletedTip.tsx | 24 ++++++--
packages/backend/src/pages/OfferRefund.tsx | 55 ++++++++++--------
packages/backend/src/pages/OfferTip.stories.tsx | 1 +
packages/backend/src/pages/OfferTip.tsx | 34 ++++++-----
.../backend/src/pages/RequestPayment.stories.tsx | 1 +
packages/backend/src/pages/RequestPayment.tsx | 66 +++++++++++++---------
.../backend/src/pages/ShowOrderDetails.stories.tsx | 1 +
packages/backend/src/pages/ShowOrderDetails.tsx | 13 +++--
11 files changed, 150 insertions(+), 122 deletions(-)
diff --git a/packages/backend/rollup.config.js
b/packages/backend/rollup.config.js
index 9051adc..fd8da74 100644
--- a/packages/backend/rollup.config.js
+++ b/packages/backend/rollup.config.js
@@ -33,6 +33,8 @@ const template = async ({
}) => {
const scripts = (files.js || []).map(({ code }) =>
`<script>${code}</script>`).join('\n');
const css = (files.css || []).map(({ source }) =>
`<style>${source}</style>`).join('\n');
+ const ssr = (files.js || []).map(({ code }) => code).join('\n');
+ const page = new Function(`${ssr}; return page.buildTimeRendering();`)()
return `
<!doctype html>
<html>
@@ -40,9 +42,15 @@ const template = async ({
<title>${title}</title>
${css}
</head>
+ <script id="built_time_data" />
<body>
+ <div id="built_time_data"/>
+ <div id="container_without_js">
+ ${page}
+ </div>
+ <div id="container_with_js"/>
${scripts}
- <script>page.mountIntoBody()</script>
+ <script>page.mount()</script>
</body>
</html>`;
};
diff --git a/packages/backend/src/pages/OfferTip.stories.tsx
b/packages/backend/src/components/Footer.tsx
similarity index 62%
copy from packages/backend/src/pages/OfferTip.stories.tsx
copy to packages/backend/src/components/Footer.tsx
index 09bffb8..f585025 100644
--- a/packages/backend/src/pages/OfferTip.stories.tsx
+++ b/packages/backend/src/components/Footer.tsx
@@ -18,23 +18,12 @@
*
* @author Sebastian Javier Marchano (sebasjm)
*/
+import { h, VNode } from 'preact';
-import { h, VNode, FunctionalComponent } from 'preact';
-import { OfferTip as TestedComponent } from './OfferTip';
-
-
-export default {
- title: 'OfferTip',
- component: TestedComponent,
- argTypes: {
- },
-};
-
-function createExample<Props>(Component: FunctionalComponent<Props>, props:
Partial<Props>) {
- const r = (args: any) => <Component {...args} />
- r.args = props
- return r
+export function Footer(): VNode {
+ return <div class="talerbar">
+ <p>You can learn more about GNU Taler on our <a
href="https://taler.net/";>website</a>.<br />
+ Copyright © 2014—2021 Taler Systems SA</p>
+ </div>
}
-export const Example = createExample(TestedComponent, {
-});
diff --git a/packages/backend/src/pages/ShowOrderDetails.stories.tsx
b/packages/backend/src/components/QR.tsx
similarity index 52%
copy from packages/backend/src/pages/ShowOrderDetails.stories.tsx
copy to packages/backend/src/components/QR.tsx
index 88fa393..95aee36 100644
--- a/packages/backend/src/pages/ShowOrderDetails.stories.tsx
+++ b/packages/backend/src/components/QR.tsx
@@ -14,27 +14,23 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { h, VNode, FunctionalComponent } from 'preact';
-import { ShowOrderDetails as TestedComponent } from './ShowOrderDetails';
-
-
-export default {
- title: 'ShowOrderDetails',
- component: TestedComponent,
- argTypes: {
- },
-};
-
-function createExample<Props>(Component: FunctionalComponent<Props>, props:
Partial<Props>) {
- const r = (args: any) => <Component {...args} />
- r.args = props
- return r
-}
-
-export const Example = createExample(TestedComponent, {
-});
+ import { h, VNode } from "preact";
+ import { useEffect, useRef } from "preact/hooks";
+ import qrcode from "qrcode-generator";
+
+ 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,
+ });
+ });
+
+ return <div style={{ width: '100%', display: 'flex', flexDirection:
'column', alignItems: 'center' }}>
+ <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef}
/>
+ </div>;
+ }
+
\ No newline at end of file
diff --git a/packages/backend/src/pages/DepletedTip.tsx
b/packages/backend/src/pages/DepletedTip.tsx
index f9cf9bb..d8eae75 100644
--- a/packages/backend/src/pages/DepletedTip.tsx
+++ b/packages/backend/src/pages/DepletedTip.tsx
@@ -18,12 +18,21 @@
*
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { h, render, VNode } from 'preact';
+import { h, render, Fragment, VNode } from 'preact';
+import { Footer } from '../components/Footer';
+import { ShowOrderDetails } from './ShowOrderDetails';
+import { render as renderToString } from 'preact-render-to-string';
export function DepletedTip(): VNode {
- return <div>
- You have already collected this tip.
- </div>
+ return <Fragment>
+ <section id="main" class="content">
+ <h1 style={{ textAlign: 'center' }}>Tip already collected</h1>
+ <div style={{ textAlign: 'center' }}>
+ You have already collected this tip.
+ </div>
+ </section>
+ <Footer />
+ </Fragment>
}
export function Title(): VNode {
@@ -31,11 +40,11 @@ export function Title(): VNode {
}
-export function mountIntoBody(): void {
+export function mount(): void {
try {
const params = new URL(window.location.href).searchParams
render(<DepletedTip
- // taler_refund_uri={params.get('taler_refund_uri') || undefined}
+ // taler_refund_uri={params.get('taler_refund_uri') || undefined}
/>, document.body);
} catch (e) {
console.error("got error", e);
@@ -43,3 +52,6 @@ export function mountIntoBody(): void {
}
}
+export function buildTimeRendering(): string {
+ return renderToString(<ShowOrderDetails />)
+}
diff --git a/packages/backend/src/pages/OfferRefund.tsx
b/packages/backend/src/pages/OfferRefund.tsx
index 6c6b77e..7b35a54 100644
--- a/packages/backend/src/pages/OfferRefund.tsx
+++ b/packages/backend/src/pages/OfferRefund.tsx
@@ -18,8 +18,11 @@
*
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { render, h, VNode } from 'preact';
+import { render, h, Fragment, VNode } from 'preact';
import { useEffect } from 'preact/hooks';
+import { Footer } from '../components/Footer';
+import { ShowOrderDetails } from './ShowOrderDetails';
+import { render as renderToString } from 'preact-render-to-string';
export function OfferRefund(): VNode {
useEffect(() => {
@@ -59,39 +62,40 @@ export function OfferRefund(): VNode {
setTimeout(check, delayMs);
})
- return <section id="main" class="content">
- <h1 >Collect Taler refund</h1>
- <div class="taler-installed-hide">
- <p>
- Scan this QR code with your Taler mobile wallet:
- </p>
- <div class="qr">
- {/* {{{taler_refund_qrcode_svg}}} */}
+ return <Fragment>
+ <section id="main" class="content">
+ <h1 style={{ textAlign: 'center' }}>Collect Taler refund</h1>
+ <div style={{ textAlign: 'center' }} class="taler-installed-hide">
+ <p>
+ Scan this QR code with your Taler mobile wallet:
+ </p>
+ <div class="qr">
+ {/* {{{taler_refund_qrcode_svg}}} */}
+ </div>
+ <p>
+ <a class="pure-button pure-button-active success"
href='{{taler_refund_uri}}'>
+ Or open your Taller wallet
+ </a>
+ </p>
+ <p>
+ <a href="https://wallet.taler.net/";>Don't have a Taler wallet yet?
Install it!</a>
+ </p>
</div>
- <p>
- <button onClick={() => {
- window.location.href = '{{taler_refund_uri}}'
- }}>
- Or open your Taller wallet
- </button>
- </p>
- <p>
- <a href="https://wallet.taler.net/";>Don't have a Taler wallet yet?
Install it!</a>
- </p>
- </div>
- <hr />
- </section>
+ <hr />
+ </section>
+ <Footer />
+ </Fragment>
}
export function Title(): VNode {
return <title>Refund available for {`{order_summary}`}</title>
}
-export function mountIntoBody(): void {
+export function mount(): void {
try {
const params = new URL(window.location.href).searchParams
render(<OfferRefund
- // taler_refund_uri={params.get('taler_refund_uri') || undefined}
+ // taler_refund_uri={params.get('taler_refund_uri') || undefined}
/>, document.body);
} catch (e) {
console.error("got error", e);
@@ -99,5 +103,8 @@ export function mountIntoBody(): void {
}
}
+export function buildTimeRendering(): string {
+ return renderToString(<ShowOrderDetails />)
+}
diff --git a/packages/backend/src/pages/OfferTip.stories.tsx
b/packages/backend/src/pages/OfferTip.stories.tsx
index 09bffb8..6b35f5e 100644
--- a/packages/backend/src/pages/OfferTip.stories.tsx
+++ b/packages/backend/src/pages/OfferTip.stories.tsx
@@ -37,4 +37,5 @@ function createExample<Props>(Component:
FunctionalComponent<Props>, props: Part
}
export const Example = createExample(TestedComponent, {
+
});
diff --git a/packages/backend/src/pages/OfferTip.tsx
b/packages/backend/src/pages/OfferTip.tsx
index fd14354..95e0c41 100644
--- a/packages/backend/src/pages/OfferTip.tsx
+++ b/packages/backend/src/pages/OfferTip.tsx
@@ -23,6 +23,10 @@ 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';
interface Props {
taler_refund_uri?: string,
@@ -60,20 +64,18 @@ export function OfferTip({ taler_refund_uri,
tip_status_url, taler_tip_qrcode_sv
})
return <Fragment>
<section id="main" class="content">
- <h1>Collect Taler tip</h1>
- <div class="taler-installed-hide">
+ <h1 style={{ textAlign: 'center' }}>Collect Taler tip</h1>
+ <div style={{ textAlign: 'center' }} class="taler-installed-hide">
<p>
Scan this QR code with your Taler mobile wallet:
</p>
<div class="qr">
- {taler_tip_qrcode_svg}
+ {taler_tip_qrcode_svg ? <QR text={taler_tip_qrcode_svg} /> :
`{{taler_tip_qrcode_svg}}`}
</div>
<p>
- <button onClick={() => {
- window.location.href = tip_status_url || '#'
- }}>
+ <a class="pure-button pure-button-active success"
href='{{taler_refund_uri}}'>
Or open your Taller wallet
- </button>
+ </a>
</p>
<p>
<a href="https://wallet.taler.net/";>Don't have a Taler wallet yet?
Install it!</a>
@@ -85,25 +87,18 @@ export function OfferTip({ taler_refund_uri,
tip_status_url, taler_tip_qrcode_sv
</Fragment>
}
-function Footer() {
- return <div class="talerbar">
- <p>You can learn more about GNU Taler on our <a
href="https://taler.net/";>website</a>.<br />
- Copyright © 2014—2021 Taler Systems SA</p>
- </div>
-}
-
export function Title(): VNode {
return <title>Tip available</title>
}
-export function mountIntoBody(): void {
+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}
+ 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);
} catch (e) {
console.error("got error", e);
@@ -111,3 +106,6 @@ export function mountIntoBody(): void {
}
}
+export function buildTimeRendering(): string {
+ return renderToString(<ShowOrderDetails />)
+}
diff --git a/packages/backend/src/pages/RequestPayment.stories.tsx
b/packages/backend/src/pages/RequestPayment.stories.tsx
index 1aed570..6a757d2 100644
--- a/packages/backend/src/pages/RequestPayment.stories.tsx
+++ b/packages/backend/src/pages/RequestPayment.stories.tsx
@@ -37,4 +37,5 @@ function createExample<Props>(Component:
FunctionalComponent<Props>, props: Part
}
export const Example = createExample(TestedComponent, {
+ taler_pay_qrcode_svg: 'this is an example'
});
diff --git a/packages/backend/src/pages/RequestPayment.tsx
b/packages/backend/src/pages/RequestPayment.tsx
index d1fb8d4..7ebddcd 100644
--- a/packages/backend/src/pages/RequestPayment.tsx
+++ b/packages/backend/src/pages/RequestPayment.tsx
@@ -18,10 +18,16 @@
*
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { h, render, VNode } from 'preact';
+import { h, render, Fragment, VNode } from 'preact';
import { useEffect } from 'preact/hooks';
+import { Footer } from '../components/Footer';
+import { render as renderToString } from 'preact-render-to-string';
+import { QR } from '../components/QR';
-export function RequestPayment(): VNode {
+interface Props {
+ taler_pay_qrcode_svg?: string,
+}
+export function RequestPayment({ taler_pay_qrcode_svg }: Props): VNode {
useEffect(() => {
const longpollDelayMs = 60000;
const checkUrl = new URL("{{& order_status_url }}");
@@ -82,39 +88,40 @@ export function RequestPayment(): VNode {
}
setTimeout(check, 500);
})
- return <section id="main" class="content">
- <h1>Pay with Taler</h1>
- <div class="taler-installed-hide">
- <p>
- Scan this QR code with your mobile wallet:
- </p>
- <div class="qr">
- {/* {{{taler_pay_qrcode_svg}}} */}
- </div>
- <p>
- <button onClick={() => {
- window.location.href = '{{taler_refund_uri}}'
- }}>
- Or open your Taller wallet
- </button>
- </p>
- <p>
- <a href="https://wallet.taler.net/";>Don't have a Taler wallet yet? Install
it!</a>
- </p>
- </div>
- <hr />
- </section>
-
+ return <Fragment>
+ <section id="main" class="content">
+ <h1 style={{ textAlign: 'center' }}>Pay with Taler</h1>
+ <div style={{ textAlign: 'center' }} class="taler-installed-hide">
+ <p>
+ Scan this QR code with your mobile wallet:
+ </p>
+ <div class="qr">
+ {taler_pay_qrcode_svg ? <QR text={taler_pay_qrcode_svg} /> :
`{{taler_pay_qrcode_svg}}`}
+ </div>
+ <p>
+ <a class="pure-button pure-button-active success" href={`{{
taler_refund_uri }}`}>
+ Or open your Taller wallet
+ </a>
+ </p>
+ <p>
+ <a href="https://wallet.taler.net/";>Don't have a Taler wallet yet?
Install it!</a>
+ </p>
+ </div>
+ <hr />
+ </section>
+ <Footer />
+ </Fragment>
+
}
export function Title(): VNode {
- return <title>Payment requested for {`{order_summary}`}</title>
+ return <title>Payment requested for {`{{ order_summary }}`}</title>
}
-export function mountIntoBody(): void {
+export function mount(): void {
try {
const params = new URL(window.location.href).searchParams
render(<RequestPayment
- // taler_refund_uri={params.get('taler_refund_uri') || undefined}
+ taler_pay_qrcode_svg={params.get('taler_pay_qrcode_svg') || undefined}
/>, document.body);
} catch (e) {
console.error("got error", e);
@@ -122,4 +129,7 @@ export function mountIntoBody(): void {
}
}
+export function buildTimeRendering(): string {
+ return renderToString(<RequestPayment />)
+}
diff --git a/packages/backend/src/pages/ShowOrderDetails.stories.tsx
b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
index 88fa393..7550ab4 100644
--- a/packages/backend/src/pages/ShowOrderDetails.stories.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
@@ -37,4 +37,5 @@ function createExample<Props>(Component:
FunctionalComponent<Props>, props: Part
}
export const Example = createExample(TestedComponent, {
+ taler_pay_qrcode_svg: 'this is an example'
});
diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx
b/packages/backend/src/pages/ShowOrderDetails.tsx
index 4aae556..591b7ea 100644
--- a/packages/backend/src/pages/ShowOrderDetails.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.tsx
@@ -20,6 +20,7 @@
*/
import { Fragment, render, h, VNode } from 'preact';
import { useEffect } from 'preact/hooks';
+import { render as renderToString } from 'preact-render-to-string';
export function ShowOrderDetails(): VNode {
useEffect(() => {
@@ -87,13 +88,13 @@ export function ShowOrderDetails(): VNode {
<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
}}`}</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 }}`}</b>.
</div>
<h2>Full contract details</h2>
@@ -111,15 +112,19 @@ function Title(): VNode {
return <title>Status of your order for {`{order_summary}`}</title>
}
-export function mountIntoBody(): void {
+export function mount(): void {
try {
const params = new URL(window.location.href).searchParams
render(<ShowOrderDetails
- // taler_refund_uri={params.get('taler_refund_uri') || undefined}
+ // taler_refund_uri={params.get('taler_refund_uri') || undefined}
/>, 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 />)
+}
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-merchant-backoffice] branch master updated: built time rendering,
gnunet <=