diff options
author | Sebastian <sebasjm@gmail.com> | 2021-08-27 11:28:26 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-08-27 11:28:39 -0300 |
commit | eae88828683ec05d438dd4908d86b73e67e9707d (patch) | |
tree | bf8e494c40c0f6f03a5a35fdf19c609fe7d75a7a /packages/backend/src/pages | |
parent | f4cbd85008d14a78433b9495cce48903192e2e0d (diff) | |
download | merchant-backoffice-eae88828683ec05d438dd4908d86b73e67e9707d.tar.gz merchant-backoffice-eae88828683ec05d438dd4908d86b73e67e9707d.tar.bz2 merchant-backoffice-eae88828683ec05d438dd4908d86b73e67e9707d.zip |
merchant backend pages
Diffstat (limited to 'packages/backend/src/pages')
-rw-r--r-- | packages/backend/src/pages/DepletedTip.stories.tsx | 40 | ||||
-rw-r--r-- | packages/backend/src/pages/DepletedTip.tsx | 45 | ||||
-rw-r--r-- | packages/backend/src/pages/OfferRefund.stories.tsx | 40 | ||||
-rw-r--r-- | packages/backend/src/pages/OfferRefund.tsx | 103 | ||||
-rw-r--r-- | packages/backend/src/pages/OfferTip.stories.tsx | 40 | ||||
-rw-r--r-- | packages/backend/src/pages/OfferTip.tsx | 113 | ||||
-rw-r--r-- | packages/backend/src/pages/RequestPayment.stories.tsx | 40 | ||||
-rw-r--r-- | packages/backend/src/pages/RequestPayment.tsx | 125 | ||||
-rw-r--r-- | packages/backend/src/pages/ShowOrderDetails.stories.tsx | 40 | ||||
-rw-r--r-- | packages/backend/src/pages/ShowOrderDetails.tsx | 125 |
10 files changed, 711 insertions, 0 deletions
diff --git a/packages/backend/src/pages/DepletedTip.stories.tsx b/packages/backend/src/pages/DepletedTip.stories.tsx new file mode 100644 index 0000000..c20f6dc --- /dev/null +++ b/packages/backend/src/pages/DepletedTip.stories.tsx @@ -0,0 +1,40 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + 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 { DepletedTip as TestedComponent } from './DepletedTip'; + + +export default { + title: 'DepletedTip', + 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, { +}); diff --git a/packages/backend/src/pages/DepletedTip.tsx b/packages/backend/src/pages/DepletedTip.tsx new file mode 100644 index 0000000..f9cf9bb --- /dev/null +++ b/packages/backend/src/pages/DepletedTip.tsx @@ -0,0 +1,45 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ +import { h, render, VNode } from 'preact'; + +export function DepletedTip(): VNode { + return <div> + You have already collected this tip. + </div> +} + +export function Title(): VNode { + return <title>Status of your tip</title> +} + + +export function mountIntoBody(): void { + try { + const params = new URL(window.location.href).searchParams + render(<DepletedTip + // 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/.`; + } +} + diff --git a/packages/backend/src/pages/OfferRefund.stories.tsx b/packages/backend/src/pages/OfferRefund.stories.tsx new file mode 100644 index 0000000..f1b2f3a --- /dev/null +++ b/packages/backend/src/pages/OfferRefund.stories.tsx @@ -0,0 +1,40 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + 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 { OfferRefund as TestedComponent } from './OfferRefund'; + + +export default { + title: 'OfferRefund', + 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, { +}); diff --git a/packages/backend/src/pages/OfferRefund.tsx b/packages/backend/src/pages/OfferRefund.tsx new file mode 100644 index 0000000..6c6b77e --- /dev/null +++ b/packages/backend/src/pages/OfferRefund.tsx @@ -0,0 +1,103 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ +import { render, h, VNode } from 'preact'; +import { useEffect } from 'preact/hooks'; + +export function OfferRefund(): VNode { + useEffect(() => { + const checkUrl = new URL("{{& order_status_url }}"); + checkUrl.searchParams.set("await_refund_obtained", "yes"); + const delayMs = 500; + function check() { + let retried = false; + function retryOnce() { + if (!retried) { + retried = true; + check(); + } + } + const req = new XMLHttpRequest(); + req.onreadystatechange = function () { + if (req.readyState === XMLHttpRequest.DONE) { + if (req.status === 200) { + try { + const resp = JSON.parse(req.responseText); + if (!resp.refund_pending) { + window.location.reload(true); + } + } catch (e) { + console.error("could not parse response:", e); + } + } + setTimeout(retryOnce, delayMs); + } + }; + req.onerror = function () { + setTimeout(retryOnce, delayMs); + } + req.open("GET", checkUrl.href); + req.send(); + } + + 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}}} */} + </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> +} + +export function Title(): VNode { + return <title>Refund available for {`{order_summary}`}</title> +} + +export function mountIntoBody(): void { + try { + const params = new URL(window.location.href).searchParams + render(<OfferRefund + // 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/.`; + } +} + + + diff --git a/packages/backend/src/pages/OfferTip.stories.tsx b/packages/backend/src/pages/OfferTip.stories.tsx new file mode 100644 index 0000000..09bffb8 --- /dev/null +++ b/packages/backend/src/pages/OfferTip.stories.tsx @@ -0,0 +1,40 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + 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 { 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 const Example = createExample(TestedComponent, { +}); diff --git a/packages/backend/src/pages/OfferTip.tsx b/packages/backend/src/pages/OfferTip.tsx new file mode 100644 index 0000000..fd14354 --- /dev/null +++ b/packages/backend/src/pages/OfferTip.tsx @@ -0,0 +1,113 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ +import { render, h, VNode, Fragment } from 'preact'; +import { useEffect } from 'preact/hooks'; +import { styled } from "@linaria/react" +import "../css/pure-min.css" +import "../css/style.css" + +interface Props { + taler_refund_uri?: 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 { + useEffect(() => { + const delayMs = 500; + function check() { + let retried = false; + function retryOnce() { + if (!retried) { + retried = true; + check(); + } + } + const req = new XMLHttpRequest(); + req.onreadystatechange = function () { + if (req.readyState === XMLHttpRequest.DONE) { + if (req.status === 410) { + window.location.reload(true); + } + setTimeout(retryOnce, delayMs); + } + }; + req.onerror = function () { + setTimeout(retryOnce, delayMs); + } + req.open("GET", taler_refund_uri || ''); + req.send(); + } + + setTimeout(check, delayMs); + }) + return <Fragment> + <section id="main" class="content"> + <h1>Collect Taler tip</h1> + <div class="taler-installed-hide"> + <p> + Scan this QR code with your Taler mobile wallet: + </p> + <div class="qr"> + {taler_tip_qrcode_svg} + </div> + <p> + <button onClick={() => { + window.location.href = tip_status_url || '#' + }}> + 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> + <Footer /> + </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 { + 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); + } 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 new file mode 100644 index 0000000..1aed570 --- /dev/null +++ b/packages/backend/src/pages/RequestPayment.stories.tsx @@ -0,0 +1,40 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + 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 { RequestPayment as TestedComponent } from './RequestPayment'; + + +export default { + title: 'RequestPayment', + 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, { +}); diff --git a/packages/backend/src/pages/RequestPayment.tsx b/packages/backend/src/pages/RequestPayment.tsx new file mode 100644 index 0000000..d1fb8d4 --- /dev/null +++ b/packages/backend/src/pages/RequestPayment.tsx @@ -0,0 +1,125 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ +import { h, render, VNode } from 'preact'; +import { useEffect } from 'preact/hooks'; + +export function RequestPayment(): VNode { + useEffect(() => { + const longpollDelayMs = 60000; + const checkUrl = new URL("{{& order_status_url }}"); + checkUrl.searchParams.set("timeout_ms", longpollDelayMs.toString()); + function check() { + let retried = false; + function retryOnce() { + if (!retried) { + retried = true; + check(); + } + } + const req = new XMLHttpRequest(); + req.onreadystatechange = function () { + if (req.readyState === XMLHttpRequest.DONE) { + if (req.status === 200) { + try { + const resp = JSON.parse(req.responseText); + if (resp.fulfillment_url) { + window.location.replace(resp.fulfillment_url); + } + } catch (e) { + console.error("could not parse response:", e); + } + } + if (req.status === 202) { + try { + const resp = JSON.parse(req.responseText); + if (resp.fulfillment_url) { + window.location.replace(resp.fulfillment_url); + } + } catch (e) { + console.error("could not parse response:", e); + } + } + if (req.status === 402) { + try { + const resp = JSON.parse(req.responseText); + if (resp.already_paid_order_id && resp.fulfillment_url) { + window.location.replace(resp.fulfillment_url); + } + } catch (e) { + console.error("could not parse response:", e); + } + } + setTimeout(retryOnce, 500); + } + }; + req.onerror = function () { + setTimeout(retryOnce, 500); + } + req.ontimeout = function () { + setTimeout(retryOnce, 500); + } + req.timeout = longpollDelayMs; + req.open("GET", checkUrl.href); + req.send(); + } + 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> + +} +export function Title(): VNode { + return <title>Payment requested for {`{order_summary}`}</title> +} + +export function mountIntoBody(): void { + try { + const params = new URL(window.location.href).searchParams + render(<RequestPayment + // 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/.`; + } +} + + diff --git a/packages/backend/src/pages/ShowOrderDetails.stories.tsx b/packages/backend/src/pages/ShowOrderDetails.stories.tsx new file mode 100644 index 0000000..88fa393 --- /dev/null +++ b/packages/backend/src/pages/ShowOrderDetails.stories.tsx @@ -0,0 +1,40 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + 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, { +}); diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx b/packages/backend/src/pages/ShowOrderDetails.tsx new file mode 100644 index 0000000..4aae556 --- /dev/null +++ b/packages/backend/src/pages/ShowOrderDetails.tsx @@ -0,0 +1,125 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ +import { Fragment, render, h, VNode } from 'preact'; +import { useEffect } from 'preact/hooks'; + +export function ShowOrderDetails(): VNode { + useEffect(() => { + const longpollDelayMs = 60000; + const checkUrl = new URL("{{& order_status_url }}"); + checkUrl.searchParams.set("timeout_ms", longpollDelayMs.toString()); + function check() { + let retried = false; + function retryOnce() { + + if (!retried) { + retried = true; + check(); + } + } + const req = new XMLHttpRequest(); + req.onreadystatechange = function () { + if (req.readyState === XMLHttpRequest.DONE) { + if (req.status === 200) { + try { + const resp = JSON.parse(req.responseText); + if (resp.fulfillment_url) { + window.location.replace(resp.fulfillment_url); + } + } catch (e) { + console.error("could not parse response:", e); + } + } + if (req.status === 202) { + try { + const resp = JSON.parse(req.responseText); + if (resp.fulfillment_url) { + window.location.replace(resp.fulfillment_url); + } + } catch (e) { + console.error("could not parse response:", e); + } + } + if (req.status === 402) { + try { + const resp = JSON.parse(req.responseText); + if (resp.already_paid_order_id && resp.fulfillment_url) { + window.location.replace(resp.fulfillment_url); + } + } catch (e) { + console.error("could not parse response:", e); + } + } + setTimeout(retryOnce, 500); + } + }; + req.onerror = function () { + setTimeout(retryOnce, 500); + } + req.ontimeout = function () { + setTimeout(retryOnce, 500); + } + req.timeout = longpollDelayMs; + req.open("GET", checkUrl.href); + req.send(); + } + setTimeout(check, 500); + }) + return <Fragment> + <h1>Order details</h1> + + <div> + 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>. + </div> + + <h2>Full contract details</h2> + + {/* <!-- FIXME #6459: expand the contract JSON in all its glory here --> */} + <pre> + {/* {{{contract_terms!stringify }}} */} + </pre> + + </Fragment> + +} + +function Title(): VNode { + return <title>Status of your order for {`{order_summary}`}</title> +} + +export function mountIntoBody(): void { + try { + const params = new URL(window.location.href).searchParams + render(<ShowOrderDetails + // 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/.`; + } +} + |