From b783e7219cc6ee4ae60301f560e2edf6cc44a489 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 30 Sep 2021 18:39:32 -0300 Subject: new show template and mustache example --- packages/backend/src/pages/ShowOrderDetails.tsx | 302 +++++++++++++++++++----- 1 file changed, 244 insertions(+), 58 deletions(-) (limited to 'packages/backend/src/pages/ShowOrderDetails.tsx') 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 { Status of your order for {order_summary ? order_summary : `{{ order_summary }}`} + + +} + +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 + {btr && `{{`+`#${templateName}.building_name}}`} +
{location?.building_name || (btr && `{{ ${templateName}.building_name }}`)} {location?.building_number || (btr && `{{ ${templateName}.building_number }}`)}
+ {btr && `{{`+`/${templateName}.building_name}}`} + + {btr && `{{`+`#${templateName}.country}}`} +
{location?.country || (btr && `{{ ${templateName}.country }}`)} {location?.country_subdivision || (btr && `{{ ${templateName}.country_subdivision }}`)}
+ {btr && `{{`+`/${templateName}.country}}`} + + {btr && `{{`+`#${templateName}.district}}`} +
{location?.district || (btr && `{{ ${templateName}.district }}`)}
+ {btr && `{{`+`/${templateName}.district}}`} + + {btr && `{{`+`#${templateName}.post_code}}`} +
{location?.post_code || (btr && `{{ ${templateName}.post_code }}`)}
+ {btr && `{{`+`/${templateName}.post_code}}`} + + {btr && `{{`+`#${templateName}.street}}`} +
{location?.street || (btr && `{{ ${templateName}.street }}`)}
+ {btr && `{{`+`/${templateName}.street}}`} + + {btr && `{{`+`#${templateName}.town}}`} +
{location?.town || (btr && `{{ ${templateName}.town }}`)}
+ {btr && `{{`+`/${templateName}.town}}`} + + {btr && `{{`+`#${templateName}.town_location}}`} +
{location?.town_location || (btr && `{{ ${templateName}.town_location }}`)}
+ {btr && `{{`+`/${templateName}.town_location}}`} } 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

Details of order {contract_terms?.order_id || `{{ contract_terms.order_id }}`}

@@ -84,72 +127,46 @@ export function ShowOrderDetails({ order_summary, refund_amount, contract_terms,
{contract_terms?.summary || `{{ contract_terms.summary }}`}
Amount paid:
{contract_terms?.amount || `{{ contract_terms.amount }}`}
+
Order date:
+
{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 }}`}
Merchant name:
{contract_terms?.merchant.name || `{{ contract_terms.merchant.name }}`}
- - {btr && `{{#contract_terms.delivery_location}}`} - {(btr || contract_terms?.delivery_location) && -
Delivery address:
- - {btr && `{{#contract_terms.delivery_location.building_name}}`} -
{contract_terms?.delivery_location?.building_name || `{{ contract_terms.delivery_location.building_name }}`} {contract_terms?.delivery_location?.building_number || `{{ contract_terms.delivery_location.building_number }}`}
- {btr && `{{/contract_terms.delivery_location.building_name}}`} - - {btr && `{{#contract_terms.delivery_location.country}}`} -
{contract_terms?.delivery_location?.country || `{{ contract_terms.delivery_location.country }}`} {contract_terms?.delivery_location?.country_subdivision || `{{ contract_terms.delivery_location.country_subdivision }}`}
- {btr && `{{/contract_terms.delivery_location.country}}`} - - {btr && `{{#contract_terms.delivery_location.district}}`} -
{contract_terms?.delivery_location?.district || `{{ contract_terms.delivery_location.district }}`}
- {btr && `{{/contract_terms.delivery_location.district}}`} - - {btr && `{{#contract_terms.delivery_location.post_code}}`} -
{contract_terms?.delivery_location?.post_code || `{{ contract_terms.delivery_location.post_code }}`}
- {btr && `{{/contract_terms.delivery_location.post_code}}`} - - {btr && `{{#contract_terms.delivery_location.street}}`} -
{contract_terms?.delivery_location?.street || `{{ contract_terms.delivery_location.street }}`}
- {btr && `{{/contract_terms.delivery_location.street}}`} - - {btr && `{{#contract_terms.delivery_location.town}}`} -
{contract_terms?.delivery_location?.town || `{{ contract_terms.delivery_location.town }}`}
- {btr && `{{/contract_terms.delivery_location.town}}`} - - {btr && `{{#contract_terms.delivery_location.town_location}}`} -
{contract_terms?.delivery_location?.town_location || `{{ contract_terms.delivery_location.town_location }}`}
- {btr && `{{/contract_terms.delivery_location.town_location}}`} - } - {btr && `{{/contract_terms.delivery_location}}`} - - {btr && `{{#contract_terms.delivery_date}}`} - {(btr || contract_terms?.delivery_date) && -
Delivery date:
-
{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 }}`}
- - } - {btr && `{{/contract_terms.delivery_date}}`} - {btr && `{{#contract_terms.products.0}}`} + {btr && `{{#contract_terms.hasProducts}}`} {!productList.length ? null :

Products purchased

- {btr && `{{#contract_terms.products}}`} + {btr && '{{' + '#contract_terms.products' + '}}'} {productList.map((p, i) => { + const taxList = (btr ? [{} as MerchantBackend.Tax] : (p.taxes || [])) + return

{p.description || `{{description}}`}

- -
Amount:
-
{p.quantity || `{{description}}`}
+
Quantity:
+
{p.quantity || `{{quantity}}`}
Price:
-
{p.price || `{{quantity}}`}
+
{p.price || `{{price}}`}
+ + {btr && `{{#hasTaxes}}`} + {!taxList.length ? null : + {btr && '{{' + '#taxes' + '}}'} + {taxList.map((t, i) => { + return +
{t.name || `{{name}}`}
+
{t.tax || `{{tax}}`}
+ + })} + {btr && '{{' + '/taxes' + '}}'} + } + {btr && `{{/hasTaxes}}`} {btr && `{{#delivery_date}}`} {(btr || p.delivery_date) && @@ -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 }}`} + : `{{ delivery_date_str }}`} } {btr && `{{/delivery_date}}`} + {btr && `{{#unit}}`} + {(btr || p.unit) && +
Product unit:
+
{p.unit || `{{.}}`}
+ } + {btr && `{{/unit}}`} + + {btr && `{{#product_id}}`} + {(btr || p.product_id) && +
Product ID:
+
{p.product_id || `{{.}}`}
+ } + {btr && `{{/product_id}}`} +
})} - {btr && `{{/contract_terms.products}}`} + {btr && '{{' + '/contract_terms.products' + '}}'}
} - {btr && `{{/contract_terms.products.0}}`} + {btr && `{{/contract_terms.hasProducts}}`} + + + {btr && `{{#contract_terms.has_delivery_info}}`} + {!hasDeliveryInfo ? null :
+

Delivery information

+ + {btr && `{{#contract_terms.delivery_date}}`} + {(btr || contract_terms?.delivery_date) && +
Delivery date:
+
{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 }}`}
+ + } + {btr && `{{/contract_terms.delivery_date}}`} + + {btr && `{{#contract_terms.delivery_location}}`} + {(btr || contract_terms?.delivery_location) && +
Delivery address:
+ + } + {btr && `{{/contract_terms.delivery_location}}`} + +
} + {btr && `{{/contract_terms.has_delivery_info}}`} + +
+

Full payment information

+ +
Amount paid:
+
{contract_terms?.amount || `{{ contract_terms.amount }}`}
+
Wire transfer method:
+
{contract_terms?.wire_method || `{{ contract_terms.wire_method }}`}
+
Payment deadline:
+
{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 }}`}
+
Exchange transfer deadline:
+
{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 }}`}
+
Maximum deposit fee:
+
{contract_terms?.max_fee || `{{ contract_terms.max_fee }}`}
+
Maximum wire fee:
+
{contract_terms?.max_wire_fee || `{{ contract_terms.max_wire_fee }}`}
+
Wire fee amortization:
+
{contract_terms?.wire_fee_amortization || `{{ contract_terms.wire_fee_amortization }}`} transactions
+ +
+ +
+

Refund information

+ +
Refund deadline:
+
{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 }}`}
+ + {btr && `{{#contract_terms.auto_refund}}`} + {(btr || contract_terms?.auto_refund) && +
Attempt autorefund for:
+
{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 }}`}
+ } + {btr && `{{/contract_terms.auto_refund}}`} + +
+ +
+

Additional order details

+ +
Public reorder URL:
+
-- not defined yet --
+ {btr && `{{#contract_terms.fulfillment_url}}`} + {(btr || contract_terms?.fulfillment_url) && +
Fulfillment URL:
+
{contract_terms?.fulfillment_url || (btr && `{{ contract_terms.fulfillment_url }}`)}
+ } + {btr && `{{/contract_terms.fulfillment_url}}`} + {/*
Fulfillment message:
+
-- not defined yet --
*/} + +
+ +
+

Full merchant information

+ +
Merchant name:
+
{contract_terms?.merchant.name || `{{ contract_terms.merchant.name }}`}
+
Merchant address:
+ +
Merchant's jurisdiction:
+ +
Merchant URI:
+
{contract_terms?.merchant_base_url || `{{ contract_terms.merchant_base_url }}`}
+
Merchant's public key:
+
{contract_terms?.merchant_pub || `{{ contract_terms.merchant_pub }}`}
+ {/*
Merchant's hash:
+
-- not defined yet --
*/} + +
+ + {btr && `{{#contract_terms.hasAuditors}}`} + {!auditorsList.length ? null :
+

Auditors accepted by the merchant

+ + {btr && '{{' + '#contract_terms.auditors' + '}}'} + {auditorsList.map((p, i) => { + return +

{p.name || `{{name}}`}

+
Auditor's public key:
+
{p.auditor_pub || `{{auditor_pub}}`}
+
Auditor's URL:
+
{p.url || `{{url}}`}
+ + })} + {btr && '{{' + '/contract_terms.auditors' + '}}'} + +
} + {btr && `{{/contract_terms.hasAuditors}}`} + + {btr && `{{#contract_terms.hasExchanges}}`} + {!exchangesList.length ? null :
+

Exchanges accepted by the merchant

+ + {btr && '{{' + '#contract_terms.exchanges' + '}}'} + {exchangesList.map((p, i) => { + return +
Exchange's URL:
+
{p.url || `{{url}}`}
+
Public key:
+
{p.master_pub || `{{master_pub}}`}
+ + })} + {btr && '{{' + '/contract_terms.exchanges' + '}}'} + +
} + {btr && `{{/contract_terms.hasExchanges}}`}