From 9b99c7ad54c1421e35978b632aac5d06ff239092 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 29 Sep 2021 16:42:09 -0300 Subject: add styles to show order deatils --- packages/backend/package.json | 1 + packages/backend/render-mustache.js | 18 +++ packages/backend/rollup.config.js | 8 +- .../backend/src/pages/ShowOrderDetails.stories.tsx | 103 ++++++++++++-- packages/backend/src/pages/ShowOrderDetails.tsx | 156 +++++++++++++++------ packages/backend/src/styled/index.tsx | 94 ++++++++++--- 6 files changed, 300 insertions(+), 80 deletions(-) create mode 100644 packages/backend/render-mustache.js (limited to 'packages/backend') 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 ') + 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(Component: FunctionalComponent, props: Partial) { @@ -37,17 +37,90 @@ function createExample(Component: FunctionalComponent, 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 { } -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 -
-

Order details

- -
- This is the default status page for your order for {order_summary ? order_summary : `{{ order_summary }}`}. -
- - -

Refund status

-
- The merchant has granted you refunds on the purchase of {refund_amount ? refund_amount : `{{ refund_amount }}`}. -
- -

Full contract details

- -
- 
-          
-            
-              
-            
-            
-              
-            
-            
-              
-            
-            
-              
-            
-          
amount{contract_terms?.amount || `{{ contract_terms.amount }}`}
summary{contract_terms?.summary || `{{ contract_terms.summary }}`}
pay deadline{pay_deadline || `{{ contract_terms.pay_deadline.t_ms }}`}
merchant name{contract_terms?.merchant?.name || `{{ contract_terms.merchant.name }}`}

-
-
- -
+
+

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

+
+ +
+ {btr && `{{#refund_amount}}`} + {(btr || refund_amount) &&
+ + Refunded: The merchant refunded you {refund_amount || `{{ refund_amount }}`}. + +
} + {btr && `{{/refund_amount}}`} + +
+ +
Order summary:
+
{contract_terms?.summary || `{{ contract_terms.summary }}`}
+
Amount paid:
+
{contract_terms?.amount || `{{ contract_terms.amount }}`}
+
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}}`} + {!productList.length ? null :
+

Products purchased

+ + {btr && `{{#contract_terms.products}}`} + {productList.map((p, i) => { + return +

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

+
+ +
Amount:
+
{p.quantity || `{{description}}`}
+ +
Price:
+
{p.price || `{{quantity}}`}
+ + {btr && `{{#delivery_date}}`} + {(btr || p.delivery_date) && +
Delivered on:
+
{p.delivery_date ? + (p.delivery_date.t_ms != 'never' ? + format(p.delivery_date.t_ms, 'dd MMM yyyy HH:mm:ss') : + 'never') + : `{{ delivery_date }}`}
+ } + {btr && `{{/delivery_date}}`} + +
+ + })} + {btr && `{{/contract_terms.products}}`} + + +
} + {btr && `{{/contract_terms.products.0}}`} +
+