summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2021-08-31 00:34:28 -0300
committerSebastian <sebasjm@gmail.com>2021-08-31 00:34:28 -0300
commit855d90f6b8fb733b4ceae1bdd6e401ab17ce62fd (patch)
tree177399bbf6571cfe7ce9f3f37b498509dfb3525b
parentddd7e9cfb01924ce7e95161b56abd67162e827c6 (diff)
downloadmerchant-backoffice-855d90f6b8fb733b4ceae1bdd6e401ab17ce62fd.tar.gz
merchant-backoffice-855d90f6b8fb733b4ceae1bdd6e401ab17ce62fd.tar.bz2
merchant-backoffice-855d90f6b8fb733b4ceae1bdd6e401ab17ce62fd.zip
remove qr javascript from body and add contract terms info
-rw-r--r--packages/backend/src/pages/OfferRefund.tsx17
-rw-r--r--packages/backend/src/pages/OfferTip.tsx15
-rw-r--r--packages/backend/src/pages/RequestPayment.stories.tsx2
-rw-r--r--packages/backend/src/pages/RequestPayment.tsx17
-rw-r--r--packages/backend/src/pages/ShowOrderDetails.stories.tsx1
-rw-r--r--packages/backend/src/pages/ShowOrderDetails.tsx30
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);