add styles to show order deatils

6 files changed, 300 insertions, 80 deletions

diff --git a/packages/backend/package.json b/packages/backend/package.json
index 6a78f5f..f84c238 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -106,6 +106,7 @@
     "inline-chunk-html-plugin": "^1.1.1",
     "jest": "^26.6.3",
     "jest-preset-preact": "^4.0.2",
+    "mustache": "^4.2.0",
     "po2json": "^0.4.5",
     "preact-cli": "^3.0.5",
     "preact-render-to-json": "^3.6.6",
diff --git a/packages/backend/render-mustache.js b/packages/backend/render-mustache.js
new file mode 100644
index 0000000..74b68dd
--- /dev/null
+++ b/packages/backend/render-mustache.js
@@ -0,0 +1,18 @@
+const mustache = require('mustache')
+const fs = require('fs')
+
+const htmlFile = process.argv[2]
+const exampleJson = process.argv[3]
+
+if (!htmlFile || !exampleJson) {
+	console.log('usage: render-mustache <htmlFile> <exampleJson>')
+	return 1
+}
+
+const html = fs.readFileSync(htmlFile, 'utf8')
+const json = fs.readFileSync(exampleJson, 'utf8')
+const example = JSON.parse(json)
+
+const output = mustache.render(html, example);
+
+console.log(output)
diff --git a/packages/backend/rollup.config.js b/packages/backend/rollup.config.js
index f5227ba..a324422 100644
--- a/packages/backend/rollup.config.js
+++ b/packages/backend/rollup.config.js
@@ -104,9 +104,9 @@ const pageDefinition = (name) => ({
 });
 
 export default [
-  pageDefinition("OfferTip"),
-  pageDefinition("OfferRefund"),
-  pageDefinition("DepletedTip"),
-  pageDefinition("RequestPayment"),
+  // pageDefinition("OfferTip"),
+  // pageDefinition("OfferRefund"),
+  // pageDefinition("DepletedTip"),
+  // pageDefinition("RequestPayment"),
   pageDefinition("ShowOrderDetails"),
 ]
diff --git a/packages/backend/src/pages/ShowOrderDetails.stories.tsx b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
index a78618f..5274a71 100644
--- a/packages/backend/src/pages/ShowOrderDetails.stories.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
@@ -21,14 +21,14 @@
 
 import { FunctionalComponent, h } from 'preact';
 import { MerchantBackend } from '../declaration';
-import { ShowOrderDetails as TestedComponent } from './ShowOrderDetails';
-
+import { Props, ShowOrderDetails as TestedComponent } from './ShowOrderDetails';
 
 export default {
   title: 'ShowOrderDetails',
   component: TestedComponent,
   argTypes: {
   },
+  excludeStories: /.*Data$/,
 };
 
 function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
@@ -37,17 +37,90 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part
   return r
 }
 
-export const Example = createExample(TestedComponent, {
-  order_summary: 'here goes the order summary',
-  refund_amount: 'USD:10',
-  contract_terms: {
-    amount: 'USD:10',
-    summary: 'this is a short summary',
-    pay_deadline: {
-      t_ms: new Date().getTime() + 6*24*60*60*1000
+const defaultContractTerms: MerchantBackend.ContractTerms = {
+  order_id: 'XRS8876388373',
+  amount: 'USD:10',
+  summary: 'this is a short summary',
+  pay_deadline: {
+    t_ms: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
+  },
+  merchant: {
+    name: 'the merchant (inc)',
+    address: {},
+    jurisdiction: {},
+  }
+};
+
+
+export const exampleData: { [name: string]: Props } = {
+  Simplest: {
+    order_summary: 'here goes the order summary',
+    contract_terms: defaultContractTerms,
+  },
+  WithRefundAmount: {
+    order_summary: 'here goes the order summary',
+    refund_amount: 'USD:10',
+    contract_terms: defaultContractTerms,
+  },
+  WithDeliveryDate: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      delivery_date: {
+        t_ms: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
+      }
     },
-    merchant: {
-      name: 'the merchant (inc)'
-    }
-  } as MerchantBackend.ContractTerms
-});
+  },
+  WithDeliveryLocation: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      ...defaultContractTerms,
+      delivery_location: {
+        address_lines: ['addr1', 'addr2', 'addr3', 'addr4', 'addr5', 'addr6', 'addr7'],
+        building_name: 'building-name',
+        building_number: 'building-number',
+        country: 'country',
+        country_subdivision: 'country sub',
+        district: 'district',
+        post_code: 'post-code',
+        street: 'street',
+        town: 'town',
+        town_location: 'town loc',
+      },
+    },
+  },
+  WithThreeProducts: {
+    order_summary: 'here goes the order summary',
+    contract_terms: {
+      order_id: 'XRS8876388373',
+      amount: 'USD:10',
+      summary: 'this is a short summary',
+      pay_deadline: {
+        t_ms: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
+      },
+      merchant: {
+        name: 'the merchant (inc)'
+      },
+      products: [{
+        description: 'description of the first product',
+        price: '5:USD',
+        quantity: 1,
+        delivery_date: { t_ms: new Date().getTime() }
+      }, {
+        description: 'another description',
+        price: '10:USD',
+        quantity: 5,
+      }, {
+        description: 'one last description',
+        price: '10:USD',
+        quantity: 5
+      }]
+    } as MerchantBackend.ContractTerms
+  },
+}
+
+export const Simplest = createExample(TestedComponent, exampleData.Simplest);
+export const WithRefundAmount = createExample(TestedComponent, exampleData.WithRefundAmount);
+export const WithDeliveryDate = createExample(TestedComponent, exampleData.WithDeliveryDate);
+export const WithDeliveryLocation = createExample(TestedComponent, exampleData.WithDeliveryLocation);
+export const WithThreeProducts = createExample(TestedComponent, exampleData.WithThreeProducts);
diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx b/packages/backend/src/pages/ShowOrderDetails.tsx
index 58f2831..b791c91 100644
--- a/packages/backend/src/pages/ShowOrderDetails.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.tsx
@@ -18,6 +18,7 @@
 *
 * @author Sebastian Javier Marchano (sebasjm)
 */
+import { Product } from '@gnu-taler/taler-util';
 import { format } from 'date-fns';
 import { Fragment, h, render, VNode } from 'preact';
 import { render as renderToString } from 'preact-render-to-string';
@@ -25,7 +26,7 @@ import { Footer } from '../components/Footer';
 import "../css/pure-min.css";
 import "../css/style.css";
 import { MerchantBackend } from '../declaration';
-import { Center, Page } from '../styled';
+import { Page, InfoBox, TableExpanded, TableSimple } from '../styled';
 
 /**
  * This page creates a payment request QR code
@@ -43,7 +44,8 @@ import { Center, Page } from '../styled';
  *  - order_summary
  */
 
-interface Props {
+export interface Props {
+  btr?: boolean; // build time rendering flag
   order_summary?: string;
   refund_amount?: string;
   contract_terms?: MerchantBackend.ContractTerms;
@@ -60,46 +62,116 @@ function Head({ order_summary }: { order_summary?: string }): VNode {
   </Fragment>
 }
 
-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')
-
+export function ShowOrderDetails({ order_summary, refund_amount, contract_terms, btr }: Props): VNode {
+  const productList = (btr ? [{} as Product] : (contract_terms?.products || []))
   return <Page>
-    <div>
-      <h1>Order details</h1>
-
-      <div>
-        This is the default status page for your order for <b>{order_summary ? order_summary : `{{ order_summary }}`}</b>.
-      </div>
-
-
-      <h2>Refund status</h2>
-      <div>
-        The merchant has granted you refunds on the purchase of <b>{refund_amount ? refund_amount : `{{ refund_amount }}`}</b>.
-      </div>
-
-      <h2>Full contract details</h2>
-
-      <Center>
-        <pre>
-          <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>
-        </pre>
-      </Center>
-
-    </div>
+    <header>
+      <h1>Details of order {contract_terms?.order_id || `{{ contract_terms.order_id }}`}</h1>
+    </header>
+
+    <section>
+      {btr && `{{#refund_amount}}`}
+      {(btr || refund_amount) && <section>
+        <InfoBox>
+          <b>Refunded:</b> The merchant refunded you <b>{refund_amount || `{{ refund_amount }}`}</b>.
+        </InfoBox>
+      </section>}
+      {btr && `{{/refund_amount}}`}
+
+      <section>
+        <TableExpanded>
+          <dt>Order summary:</dt>
+          <dd>{contract_terms?.summary || `{{ contract_terms.summary }}`}</dd>
+          <dt>Amount paid:</dt>
+          <dd>{contract_terms?.amount || `{{ contract_terms.amount }}`}</dd>
+          <dt>Merchant name:</dt>
+          <dd>{contract_terms?.merchant.name || `{{ contract_terms.merchant.name }}`}</dd>
+
+          {btr && `{{#contract_terms.delivery_location}}`}
+          {(btr || contract_terms?.delivery_location) && <Fragment>
+            <dt>Delivery address:</dt>
+
+            {btr && `{{#contract_terms.delivery_location.building_name}}`}
+              <dd>{contract_terms?.delivery_location?.building_name || `{{ contract_terms.delivery_location.building_name }}`} {contract_terms?.delivery_location?.building_number || `{{ contract_terms.delivery_location.building_number }}`}</dd>
+            {btr && `{{/contract_terms.delivery_location.building_name}}`}
+
+            {btr && `{{#contract_terms.delivery_location.country}}`}
+              <dd>{contract_terms?.delivery_location?.country || `{{ contract_terms.delivery_location.country }}`} {contract_terms?.delivery_location?.country_subdivision || `{{ contract_terms.delivery_location.country_subdivision }}`}</dd>
+            {btr && `{{/contract_terms.delivery_location.country}}`}
+
+            {btr && `{{#contract_terms.delivery_location.district}}`}
+              <dd>{contract_terms?.delivery_location?.district || `{{ contract_terms.delivery_location.district }}`}</dd>
+            {btr && `{{/contract_terms.delivery_location.district}}`}
+
+            {btr && `{{#contract_terms.delivery_location.post_code}}`}
+              <dd>{contract_terms?.delivery_location?.post_code || `{{ contract_terms.delivery_location.post_code }}`}</dd>
+            {btr && `{{/contract_terms.delivery_location.post_code}}`}
+
+            {btr && `{{#contract_terms.delivery_location.street}}`}
+              <dd>{contract_terms?.delivery_location?.street || `{{ contract_terms.delivery_location.street }}`}</dd>
+            {btr && `{{/contract_terms.delivery_location.street}}`}
+
+            {btr && `{{#contract_terms.delivery_location.town}}`}
+              <dd>{contract_terms?.delivery_location?.town || `{{ contract_terms.delivery_location.town }}`}</dd>
+            {btr && `{{/contract_terms.delivery_location.town}}`}
+
+            {btr && `{{#contract_terms.delivery_location.town_location}}`}
+              <dd>{contract_terms?.delivery_location?.town_location || `{{ contract_terms.delivery_location.town_location }}`}</dd>
+            {btr && `{{/contract_terms.delivery_location.town_location}}`}
+          </Fragment>}
+          {btr && `{{/contract_terms.delivery_location}}`}
+
+          {btr && `{{#contract_terms.delivery_date}}`}
+          {(btr || contract_terms?.delivery_date) && <Fragment>
+            <dt>Delivery date:</dt>
+            <dd>{contract_terms?.delivery_date ?
+              (contract_terms?.delivery_date.t_ms != 'never' ?
+                format(contract_terms?.delivery_date.t_ms, 'dd MMM yyyy HH:mm:ss') :
+                'never')
+              : `{{ contract_terms.delivery_date }}`} </dd>
+
+          </Fragment>}
+          {btr && `{{/contract_terms.delivery_date}}`}
+        </TableExpanded>
+      </section>
+
+      {btr && `{{#contract_terms.products.0}}`}
+      {!productList.length ? null : <section>
+        <h2>Products purchased</h2>
+        <TableSimple>
+          {btr && `{{#contract_terms.products}}`}
+          {productList.map((p, i) => {
+            return <Fragment key={i}>
+              <p>{p.description || `{{description}}`}</p>
+              <dl>
+
+                <dt>Amount:</dt>
+                <dd>{p.quantity || `{{description}}`}</dd>
+
+                <dt>Price:</dt>
+                <dd>{p.price || `{{quantity}}`}</dd>
+
+                {btr && `{{#delivery_date}}`}
+                {(btr || p.delivery_date) && <Fragment>
+                  <dt>Delivered on:</dt>
+                  <dd>{p.delivery_date ?
+                    (p.delivery_date.t_ms != 'never' ?
+                      format(p.delivery_date.t_ms, 'dd MMM yyyy HH:mm:ss') :
+                      'never')
+                    : `{{ delivery_date }}`} </dd>
+                </Fragment>}
+                {btr && `{{/delivery_date}}`}
+
+              </dl>
+            </Fragment>
+          })}
+          {btr && `{{/contract_terms.products}}`}
+        </TableSimple>
+
+      </section>}
+      {btr && `{{/contract_terms.products.0}}`}
+    </section>
+
     <Footer />
   </Page>
 
@@ -131,6 +203,6 @@ export function mount(): void {
 export function buildTimeRendering(): { head: string, body: string } {
   return {
     head: renderToString(<Head />),
-    body: renderToString(<ShowOrderDetails />)
+    body: renderToString(<ShowOrderDetails btr />)
   }
 }
diff --git a/packages/backend/src/styled/index.tsx b/packages/backend/src/styled/index.tsx
index 2323d0d..55803b9 100644
--- a/packages/backend/src/styled/index.tsx
+++ b/packages/backend/src/styled/index.tsx
@@ -1,3 +1,23 @@
+/*
+ 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 { styled } from '@linaria/react'
 
 export const QRPlaceholder = styled.div`
@@ -26,37 +46,38 @@ export const Page = styled.div`
   flex-direction: column;
   justify-content: space-between;
   min-height: 100vh;
-  text-align: center;
-
+  align-items: center;
+  
   a:link,
   a:visited,
   a:hover,
   a:active {
     color: black;
   }
-  & > section > p {
-    margin-top: 30px;
-    margin-bottom: 30px;
+  
+  section {
+    text-align: center;
+    width: 600px;
+    /* margin: auto; */
+    /* margin-top: 0px; */
+    margin-bottom: auto;
+    /* overflow: auto; */
+  }
+  section:not(:first-of-type) {
+    margin-top: 2em;
   }
   & > header {
-    flex-direction: column;
-    justify-content: space-between;
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-align: center;
   }
-
-  table > tr > td {
-    text-align: left;
-  }
-  table > tr > td:first-child {
-    text-align: right;
-    font-weight: bold;
-    padding-right: 20px;
-  }
-
   & > footer {
-    flex-direction: row;
-    justify-content: center;
     display: flex;    
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
+    margin-bottom: 0px;
   }
 `
 export const Center = styled.div`
@@ -120,3 +141,38 @@ export const WalletLink = styled.a<{ upperCased?: boolean }>`
   border-color: #000;
 `;
 
+export const InfoBox = styled.div`
+  border-radius: 0.25em;
+  flex-direction: column;
+  /* margin: 0.5em; */
+  padding: 1em;
+  /* width: 100%; */
+  border:solid 1px #b8daff;
+  background-color:#cce5ff;
+  color:#004085;
+`
+
+export const TableExpanded = styled.dl`
+  text-align: left;
+  dt {
+    font-weight: bold;
+    margin-top: 1em;
+  }
+  dd {
+    margin-inline-start: 0px;
+  }
+`
+
+export const TableSimple = styled.dl`
+  text-align: left;
+  dt {
+    font-weight: bold;
+    display: inline-block;
+    width:30%;
+  }
+  dd {
+    margin-inline-start: 0px;
+    display: inline-block;
+    width:70%;
+  }
+`
\ No newline at end of file