new show template and mustache example

1 files changed, 244 insertions, 58 deletions

diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx b/packages/backend/src/pages/ShowOrderDetails.tsx
index b791c91..43b730c 100644
--- a/packages/backend/src/pages/ShowOrderDetails.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.tsx
@@ -18,8 +18,8 @@
 *
 * @author Sebastian Javier Marchano (sebasjm)
 */
-import { Product } from '@gnu-taler/taler-util';
-import { format } from 'date-fns';
+import { format, formatDuration } from 'date-fns';
+import { intervalToDuration } from 'date-fns/esm';
 import { Fragment, h, render, VNode } from 'preact';
 import { render as renderToString } from 'preact-render-to-string';
 import { Footer } from '../components/Footer';
@@ -59,11 +59,54 @@ function Head({ order_summary }: { order_summary?: string }): VNode {
       <meta http-equiv="refresh" content="1" />
     </noscript>
     <title>Status of your order for {order_summary ? order_summary : `{{ order_summary }}`}</title>
+    <script>{`
+      var contractTermsStr = '{{{contract_terms_json}}}';
+    `}</script>
+  </Fragment>
+}
+
+function Location({ templateName, location, btr }: { templateName: string, location: MerchantBackend.Location | undefined, btr?: boolean }) {
+  //FIXME: mustache strings show be constructed in a way that ends in the final output of the html but is not present in the 
+  // javascript code, otherwise when mustache render engine run over the html it will also replace string in the javascript code
+  // that is made to run when the browser has javascript enable leading into undefined behavior.
+  // that's why in the next fields we are using concatenations to build the mustache placeholder.
+  return <Fragment>
+    {btr && `{{`+`#${templateName}.building_name}}`}
+    <dd>{location?.building_name || (btr && `{{ ${templateName}.building_name }}`)} {location?.building_number || (btr && `{{ ${templateName}.building_number }}`)}</dd>
+    {btr && `{{`+`/${templateName}.building_name}}`}
+
+    {btr && `{{`+`#${templateName}.country}}`}
+    <dd>{location?.country || (btr && `{{ ${templateName}.country }}`)} {location?.country_subdivision || (btr && `{{ ${templateName}.country_subdivision }}`)}</dd>
+    {btr && `{{`+`/${templateName}.country}}`}
+
+    {btr && `{{`+`#${templateName}.district}}`}
+    <dd>{location?.district || (btr && `{{ ${templateName}.district }}`)}</dd>
+    {btr && `{{`+`/${templateName}.district}}`}
+
+    {btr && `{{`+`#${templateName}.post_code}}`}
+    <dd>{location?.post_code || (btr && `{{ ${templateName}.post_code }}`)}</dd>
+    {btr && `{{`+`/${templateName}.post_code}}`}
+
+    {btr && `{{`+`#${templateName}.street}}`}
+    <dd>{location?.street || (btr && `{{ ${templateName}.street }}`)}</dd>
+    {btr && `{{`+`/${templateName}.street}}`}
+
+    {btr && `{{`+`#${templateName}.town}}`}
+    <dd>{location?.town || (btr && `{{ ${templateName}.town }}`)}</dd>
+    {btr && `{{`+`/${templateName}.town}}`}
+
+    {btr && `{{`+`#${templateName}.town_location}}`}
+    <dd>{location?.town_location || (btr && `{{ ${templateName}.town_location }}`)}</dd>
+    {btr && `{{`+`/${templateName}.town_location}}`}
   </Fragment>
 }
 
 export function ShowOrderDetails({ order_summary, refund_amount, contract_terms, btr }: Props): VNode {
-  const productList = (btr ? [{} as Product] : (contract_terms?.products || []))
+  const productList = (btr ? [{} as MerchantBackend.Product] : (contract_terms?.products || []))
+  const auditorsList = (btr ? [{} as MerchantBackend.Auditor] : (contract_terms?.auditors || []))
+  const exchangesList = (btr ? [{} as MerchantBackend.Exchange] : (contract_terms?.exchanges || []))
+  const hasDeliveryInfo = btr || !!contract_terms?.delivery_date || !!contract_terms?.delivery_location
+
   return <Page>
     <header>
       <h1>Details of order {contract_terms?.order_id || `{{ contract_terms.order_id }}`}</h1>
@@ -84,72 +127,46 @@ export function ShowOrderDetails({ order_summary, refund_amount, contract_terms,
           <dd>{contract_terms?.summary || `{{ contract_terms.summary }}`}</dd>
           <dt>Amount paid:</dt>
           <dd>{contract_terms?.amount || `{{ contract_terms.amount }}`}</dd>
+          <dt>Order date:</dt>
+          <dd>{contract_terms?.timestamp ?
+            (contract_terms?.timestamp.t_ms != 'never' ?
+              format(contract_terms?.timestamp.t_ms, 'dd MMM yyyy HH:mm:ss') :
+              'never')
+            : `{{ contract_terms.timestamp_str }}`} </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}}`}
+      {btr && `{{#contract_terms.hasProducts}}`}
       {!productList.length ? null : <section>
         <h2>Products purchased</h2>
         <TableSimple>
-          {btr && `{{#contract_terms.products}}`}
+          {btr && '{{' + '#contract_terms.products' + '}}'}
           {productList.map((p, i) => {
+            const taxList = (btr ? [{} as MerchantBackend.Tax] : (p.taxes || []))
+
             return <Fragment key={i}>
               <p>{p.description || `{{description}}`}</p>
               <dl>
-
-                <dt>Amount:</dt>
-                <dd>{p.quantity || `{{description}}`}</dd>
+                <dt>Quantity:</dt>
+                <dd>{p.quantity || `{{quantity}}`}</dd>
 
                 <dt>Price:</dt>
-                <dd>{p.price || `{{quantity}}`}</dd>
+                <dd>{p.price || `{{price}}`}</dd>
+
+                {btr && `{{#hasTaxes}}`}
+                {!taxList.length ? null : <Fragment>
+                  {btr && '{{' + '#taxes' + '}}'}
+                  {taxList.map((t, i) => {
+                    return <Fragment key={i}>
+                      <dt>{t.name || `{{name}}`}</dt>
+                      <dd>{t.tax || `{{tax}}`}</dd>
+                    </Fragment>
+                  })}
+                  {btr && '{{' + '/taxes' + '}}'}
+                </Fragment>}
+                {btr && `{{/hasTaxes}}`}
 
                 {btr && `{{#delivery_date}}`}
                 {(btr || p.delivery_date) && <Fragment>
@@ -158,18 +175,181 @@ export function ShowOrderDetails({ order_summary, refund_amount, contract_terms,
                     (p.delivery_date.t_ms != 'never' ?
                       format(p.delivery_date.t_ms, 'dd MMM yyyy HH:mm:ss') :
                       'never')
-                    : `{{ delivery_date }}`} </dd>
+                    : `{{ delivery_date_str }}`} </dd>
                 </Fragment>}
                 {btr && `{{/delivery_date}}`}
 
+                {btr && `{{#unit}}`}
+                {(btr || p.unit) && <Fragment>
+                  <dt>Product unit:</dt>
+                  <dd>{p.unit || `{{.}}`}</dd>
+                </Fragment>}
+                {btr && `{{/unit}}`}
+
+                {btr && `{{#product_id}}`}
+                {(btr || p.product_id) && <Fragment>
+                  <dt>Product ID:</dt>
+                  <dd>{p.product_id || `{{.}}`}</dd>
+                </Fragment>}
+                {btr && `{{/product_id}}`}
+
               </dl>
             </Fragment>
           })}
-          {btr && `{{/contract_terms.products}}`}
+          {btr && '{{' + '/contract_terms.products' + '}}'}
         </TableSimple>
 
       </section>}
-      {btr && `{{/contract_terms.products.0}}`}
+      {btr && `{{/contract_terms.hasProducts}}`}
+
+
+      {btr && `{{#contract_terms.has_delivery_info}}`}
+      {!hasDeliveryInfo ? null : <section>
+        <h2>Delivery information</h2>
+        <TableExpanded>
+          {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_str }}`} </dd>
+
+          </Fragment>}
+          {btr && `{{/contract_terms.delivery_date}}`}
+
+          {btr && `{{#contract_terms.delivery_location}}`}
+          {(btr || contract_terms?.delivery_location) && <Fragment>
+            <dt>Delivery address:</dt>
+            <Location btr={btr} location={contract_terms?.delivery_location} templateName="contract_terms.delivery_location" />
+          </Fragment>}
+          {btr && `{{/contract_terms.delivery_location}}`}
+        </TableExpanded>
+      </section>}
+      {btr && `{{/contract_terms.has_delivery_info}}`}
+
+      <section>
+        <h2>Full payment information</h2>
+        <TableExpanded>
+          <dt>Amount paid:</dt>
+          <dd>{contract_terms?.amount || `{{ contract_terms.amount }}`}</dd>
+          <dt>Wire transfer method:</dt>
+          <dd>{contract_terms?.wire_method || `{{ contract_terms.wire_method }}`}</dd>
+          <dt>Payment deadline:</dt>
+          <dd>{contract_terms?.pay_deadline ?
+            (contract_terms?.pay_deadline.t_ms != 'never' ?
+              format(contract_terms?.pay_deadline.t_ms, 'dd MMM yyyy HH:mm:ss') :
+              'never')
+            : `{{ contract_terms.pay_deadline_str }}`} </dd>
+          <dt>Exchange transfer deadline:</dt>
+          <dd>{contract_terms?.wire_transfer_deadline ?
+            (contract_terms?.wire_transfer_deadline.t_ms != 'never' ?
+              format(contract_terms?.wire_transfer_deadline.t_ms, 'dd MMM yyyy HH:mm:ss') :
+              'never')
+            : `{{ contract_terms.wire_transfer_deadline_str }}`} </dd>
+          <dt>Maximum deposit fee:</dt>
+          <dd>{contract_terms?.max_fee || `{{ contract_terms.max_fee }}`}</dd>
+          <dt>Maximum wire fee:</dt>
+          <dd>{contract_terms?.max_wire_fee || `{{ contract_terms.max_wire_fee }}`}</dd>
+          <dt>Wire fee amortization:</dt>
+          <dd>{contract_terms?.wire_fee_amortization || `{{ contract_terms.wire_fee_amortization }}`} transactions</dd>
+        </TableExpanded>
+      </section>
+
+      <section>
+        <h2>Refund information</h2>
+        <TableExpanded>
+          <dt>Refund deadline:</dt>
+          <dd>{contract_terms?.refund_deadline ?
+            (contract_terms?.refund_deadline.t_ms != 'never' ?
+              format(contract_terms?.refund_deadline.t_ms, 'dd MMM yyyy HH:mm:ss') :
+              'never')
+            : `{{ contract_terms.refund_deadline_str }}`} </dd>
+
+          {btr && `{{#contract_terms.auto_refund}}`}
+          {(btr || contract_terms?.auto_refund) && <Fragment>
+            <dt>Attempt autorefund for:</dt>
+            <dd>{contract_terms?.auto_refund ?
+              (contract_terms?.auto_refund.d_ms != 'forever' ?
+                formatDuration(intervalToDuration({ start: 0, end: contract_terms?.auto_refund.d_ms })) :
+                'forever')
+              : `{{ contract_terms.auto_refund_str }}`} </dd>
+          </Fragment>}
+          {btr && `{{/contract_terms.auto_refund}}`}
+        </TableExpanded>
+      </section>
+
+      <section>
+        <h2>Additional order details</h2>
+        <TableExpanded>
+          <dt>Public reorder URL:</dt>
+          <dd> -- not defined yet -- </dd>
+          {btr && `{{#contract_terms.fulfillment_url}}`}
+          {(btr || contract_terms?.fulfillment_url) && <Fragment>
+            <dt>Fulfillment URL:</dt>
+            <dd>{contract_terms?.fulfillment_url || (btr && `{{ contract_terms.fulfillment_url }}`)}</dd>
+          </Fragment>}
+          {btr && `{{/contract_terms.fulfillment_url}}`}
+          {/* <dt>Fulfillment message:</dt>
+          <dd> -- not defined yet -- </dd> */}
+        </TableExpanded>
+      </section>
+
+      <section>
+        <h2>Full merchant information</h2>
+        <TableExpanded>
+          <dt>Merchant name:</dt>
+          <dd>{contract_terms?.merchant.name || `{{ contract_terms.merchant.name }}`}</dd>
+          <dt>Merchant address:</dt>
+          <Location btr={btr} location={contract_terms?.merchant.address} templateName="contract_terms.merchant.address" />
+          <dt>Merchant's jurisdiction:</dt>
+          <Location btr={btr} location={contract_terms?.merchant.jurisdiction} templateName="contract_terms.merchant.jurisdiction" />
+          <dt>Merchant URI:</dt>
+          <dd>{contract_terms?.merchant_base_url || `{{ contract_terms.merchant_base_url }}`}</dd>
+          <dt>Merchant's public key:</dt>
+          <dd>{contract_terms?.merchant_pub || `{{ contract_terms.merchant_pub }}`}</dd>
+          {/* <dt>Merchant's hash:</dt>
+          <dd> -- not defined yet -- </dd> */}
+        </TableExpanded>
+      </section>
+
+      {btr && `{{#contract_terms.hasAuditors}}`}
+      {!auditorsList.length ? null : <section>
+        <h2>Auditors accepted by the merchant</h2>
+        <TableExpanded>
+          {btr && '{{' + '#contract_terms.auditors' + '}}'}
+          {auditorsList.map((p, i) => {
+            return <Fragment key={i}>
+              <p>{p.name || `{{name}}`}</p>
+              <dt>Auditor's public key:</dt>
+              <dd>{p.auditor_pub || `{{auditor_pub}}`}</dd>
+              <dt>Auditor's URL:</dt>
+              <dd>{p.url || `{{url}}`}</dd>
+            </Fragment>
+          })}
+          {btr && '{{' + '/contract_terms.auditors' + '}}'}
+        </TableExpanded>
+      </section>}
+      {btr && `{{/contract_terms.hasAuditors}}`}
+
+      {btr && `{{#contract_terms.hasExchanges}}`}
+      {!exchangesList.length ? null : <section>
+        <h2>Exchanges accepted by the merchant</h2>
+        <TableExpanded>
+          {btr && '{{' + '#contract_terms.exchanges' + '}}'}
+          {exchangesList.map((p, i) => {
+            return <Fragment key={i}>
+              <dt>Exchange's URL:</dt>
+              <dd>{p.url || `{{url}}`}</dd>
+              <dt>Public key:</dt>
+              <dd>{p.master_pub || `{{master_pub}}`}</dd>
+            </Fragment>
+          })}
+          {btr && '{{' + '/contract_terms.exchanges' + '}}'}
+        </TableExpanded>
+      </section>}
+      {btr && `{{/contract_terms.hasExchanges}}`}
     </section>
 
     <Footer />
@@ -188,7 +368,13 @@ export function mount(): void {
     const ra = fromLocation.get('refund_amount') || undefined;
     const ct = fromLocation.get('contract_terms') || undefined;
 
+    let contractTerms: MerchantBackend.ContractTerms | undefined;
+    try {
+      contractTerms = JSON.parse((window as any).contractTermsStr)
+    } catch { }
+
     render(<ShowOrderDetails
+      contract_terms={contractTerms}
       order_summary={os} refund_amount={ra}
     />, document.body);