1 files changed, 25 insertions, 5 deletions
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);