diff options
Diffstat (limited to 'packages/backend/src/pages')
-rw-r--r-- | packages/backend/src/pages/OfferRefund.tsx | 17 | ||||
-rw-r--r-- | packages/backend/src/pages/OfferTip.tsx | 15 | ||||
-rw-r--r-- | packages/backend/src/pages/RequestPayment.stories.tsx | 2 | ||||
-rw-r--r-- | packages/backend/src/pages/RequestPayment.tsx | 17 | ||||
-rw-r--r-- | packages/backend/src/pages/ShowOrderDetails.stories.tsx | 1 | ||||
-rw-r--r-- | 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); |