From fa86b6d486ff9dfe9c5072018d45eab6929215dc Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 1 Feb 2024 14:58:36 -0300 Subject: fixes #8201 --- .../src/pages/ShowOrderDetails.examples.ts | 28 +++++- .../src/pages/ShowOrderDetails.tsx | 81 ++++++++------- .../merchant-backend-ui/src/render-examples.ts | 112 +++++++++++++++++++++ packages/merchant-backend-ui/src/utils.ts | 41 ++++++++ 4 files changed, 220 insertions(+), 42 deletions(-) create mode 100644 packages/merchant-backend-ui/src/render-examples.ts create mode 100644 packages/merchant-backend-ui/src/utils.ts (limited to 'packages/merchant-backend-ui/src') diff --git a/packages/merchant-backend-ui/src/pages/ShowOrderDetails.examples.ts b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.examples.ts index d80401129..86992c9e1 100644 --- a/packages/merchant-backend-ui/src/pages/ShowOrderDetails.examples.ts +++ b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.examples.ts @@ -61,7 +61,7 @@ const defaultContractTerms: MerchantBackend.ContractTerms = { }, wire_method: 'x-taler-bank', wire_transfer_deadline: { - t_s: Math.round(new Date().getTime() / 1000) + 3 * 24 * 60 * 60 + t_s: Math.round(new Date().getTime() / 1000) + 3 * 24 * 60 * 60 }, }; @@ -224,4 +224,30 @@ export const exampleData: { [name: string]: Props } = { fulfillment_message: "Congratulations! You just purchased an valuable item!" }, }, + WithFulfillmentMessage: { + order_summary: 'this is the order with fulfillment message', + contract_terms: { + ...defaultContractTerms, + fulfillment_message: "Congratulations! You just purchased an valuable item!" + }, + }, + WithoutWireTransferDeadline: { + order_summary: 'this is the order without transfer deadline', + contract_terms: { + ...defaultContractTerms, + // @ts-ignore + wire_transfer_deadline: undefined, + }, + }, + ZeroFee: { + order_summary: 'example with zero fee', + contract_terms: { + ...defaultContractTerms, + // @ts-ignore + max_fee: undefined, + // @ts-ignore + max_wire_fee: undefined, + fulfillment_message: "Congratulations! You just purchased an valuable item!" + }, + }, } diff --git a/packages/merchant-backend-ui/src/pages/ShowOrderDetails.tsx b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.tsx index ca93c3f7d..c0ac07ff5 100644 --- a/packages/merchant-backend-ui/src/pages/ShowOrderDetails.tsx +++ b/packages/merchant-backend-ui/src/pages/ShowOrderDetails.tsx @@ -56,9 +56,9 @@ function Head({ order_summary }: { order_summary?: string }): VNode { - */} Status of your order for{" "} {order_summary ? order_summary : `{{ order_summary }}`} @@ -196,9 +196,9 @@ export function ShowOrderDetails({ {contract_terms?.timestamp ? contract_terms?.timestamp.t_s != "never" ? format( - contract_terms?.timestamp.t_s, - "dd MMM yyyy HH:mm:ss", - ) + contract_terms?.timestamp.t_s * 1000, + "dd MMM yyyy HH:mm:ss", + ) : "never" : `{{ contract_terms.timestamp_str }}`}{" "} </dd> @@ -256,9 +256,9 @@ export function ShowOrderDetails({ {p.delivery_date ? p.delivery_date.t_s != "never" ? format( - p.delivery_date.t_s, - "dd MMM yyyy HH:mm:ss", - ) + p.delivery_date.t_s, + "dd MMM yyyy HH:mm:ss", + ) : "never" : `{{ delivery_date_str }}`}{" "} </dd> @@ -306,9 +306,9 @@ export function ShowOrderDetails({ {contract_terms?.delivery_date ? contract_terms?.delivery_date.t_s != "never" ? format( - contract_terms?.delivery_date.t_s, - "dd MMM yyyy HH:mm:ss", - ) + contract_terms?.delivery_date.t_s, + "dd MMM yyyy HH:mm:ss", + ) : "never" : `{{ contract_terms.delivery_date_str }}`}{" "} </dd> @@ -336,48 +336,47 @@ export function ShowOrderDetails({ <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_s != "never" - ? format( - contract_terms?.pay_deadline.t_s, - "dd MMM yyyy HH:mm:ss", - ) - : "never" - : `{{ contract_terms.pay_deadline_str }}`}{" "} - </dd> <dt>Exchange transfer deadline:</dt> + {btr && `{{` + `#contract_terms.wire_transfer_deadline_str}}`} <dd> {contract_terms?.wire_transfer_deadline ? contract_terms?.wire_transfer_deadline.t_s != "never" ? format( - contract_terms?.wire_transfer_deadline.t_s, - "dd MMM yyyy HH:mm:ss", - ) + contract_terms?.wire_transfer_deadline.t_s * 1000, + "dd MMM yyyy HH:mm:ss", + ) : "never" : `{{ contract_terms.wire_transfer_deadline_str }}`}{" "} </dd> + {btr && `{{` + `/contract_terms.wire_transfer_deadline_str}}`} + + {btr && `{{` + `^contract_terms.wire_transfer_deadline_str}}`} + <dd> + Wire transfer settled. + </dd> + {btr && `{{` + `/contract_terms.wire_transfer_deadline_str}}`} + + {btr && `{{` + `#contract_terms.max_fee}}`} <dt>Maximum deposit fee:</dt> <dd>{contract_terms?.max_fee || `{{ contract_terms.max_fee }}`}</dd> + {btr && `{{` + `/contract_terms.max_fee}}`} + + {btr && `{{` + `#contract_terms.max_wire_fee}}`} <dt>Maximum wire fee:</dt> <dd> {contract_terms?.max_wire_fee || `{{ contract_terms.max_wire_fee }}`} </dd> + {btr && `{{` + `/contract_terms.max_wire_fee}}`} + + {btr && `{{` + `#contract_terms.wire_fee_amortization}}`} <dt>Wire fee amortization:</dt> <dd> {contract_terms?.wire_fee_amortization || `{{ contract_terms.wire_fee_amortization }}`}{" "} transactions </dd> + {btr && `{{` + `/contract_terms.wire_fee_amortization}}`} </TableExpanded> </section> @@ -389,9 +388,9 @@ export function ShowOrderDetails({ {contract_terms?.refund_deadline ? contract_terms?.refund_deadline.t_s != "never" ? format( - contract_terms?.refund_deadline.t_s, - "dd MMM yyyy HH:mm:ss", - ) + contract_terms?.refund_deadline.t_s * 1000, + "dd MMM yyyy HH:mm:ss", + ) : "never" : `{{ contract_terms.refund_deadline_str }}`}{" "} </dd> @@ -404,11 +403,11 @@ export function ShowOrderDetails({ {contract_terms?.auto_refund ? contract_terms?.auto_refund.d_us != "forever" ? formatDuration( - intervalToDuration({ - start: 0, - end: contract_terms?.auto_refund.d_us, - }), - ) + intervalToDuration({ + start: 0, + end: contract_terms?.auto_refund.d_us, + }), + ) : "forever" : `{{ contract_terms.auto_refund_str }}`}{" "} </dd> @@ -539,7 +538,7 @@ export function mount(): void { let contractTerms: MerchantBackend.ContractTerms | undefined; try { contractTerms = JSON.parse((window as any).contractTermsStr); - } catch {} + } catch { } render( <ShowOrderDetails diff --git a/packages/merchant-backend-ui/src/render-examples.ts b/packages/merchant-backend-ui/src/render-examples.ts new file mode 100644 index 000000000..957e06a58 --- /dev/null +++ b/packages/merchant-backend-ui/src/render-examples.ts @@ -0,0 +1,112 @@ +/* + 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 fs from "fs"; +import mustache from "mustache"; +import { createDateToStringFunction, createDurationToStringFunction, createNonEmptyFunction } from "./utils.js" +import { exampleData as ShowOrderDetailsExamples } from "./pages/ShowOrderDetails.examples.js"; +/** + * This script will emulate what the merchant backend will do when being requested + * + */ + +const templateDirectory = process.argv[2]; +const destDirectory = process.argv[3]; + +if (!templateDirectory || !destDirectory) { + console.log("usage: render-mustache <source-directory> <dest-directory>"); + process.exit(1); +} + +if (!fs.existsSync(destDirectory)) { + fs.mkdirSync(destDirectory); +} + +function fromCamelCaseName(name: string) { + const result = name + .replace(/^[a-z]/, (letter) => `${letter.toUpperCase()}`) //first letter lowercase + .replace(/_[a-z]/g, (letter) => `${letter[1].toUpperCase()}`); //snake case + return result; +} +/** + * Load all the html files + */ +const templateFiles = fs.readdirSync(templateDirectory).filter((f) => /.html/.test(f)); +const exampleByTemplate: Record<string, any> = { + "show_order_details.en.html": ShowOrderDetailsExamples +} + +templateFiles.forEach((templateFile) => { + const html = fs.readFileSync(`${templateDirectory}/${templateFile}`, "utf8"); + + const templateFileWithoutExt = templateFile.replace(".en.html", ""); + // const exampleFileName = `src/pages/${fromCamelCaseName(testName)}.examples`; + // if (!fs.existsSync(`./${exampleFileName}.ts`)) { + // console.log(`- skipping ${testName}: no examples found`); + // return; + // } + // eslint-disable-next-line @typescript-eslint/no-var-requires + // const pepe = `./${exampleFileName}.ts` + // const { exampleData } = require(pepe); + + const exampleData = exampleByTemplate[templateFile] + if (!exampleData) { + console.log(`- skipping ${templateFile}: no examples found`); + return; + } + const exampleNames = Object.keys(exampleData) + console.log(`+ rendering ${templateFile}: ${exampleNames.length} examples`); + exampleNames.forEach((exampleName) => { + const example = exampleData[exampleName]; + + //enhance the example with more information + example.contract_terms_json = () => JSON.stringify(example.contract_terms); + + example.contract_terms.timestamp_str = createDateToStringFunction(example.contract_terms.timestamp) + + example.contract_terms.hasProducts = createNonEmptyFunction(example.contract_terms.products) + example.contract_terms.hasAuditors = createNonEmptyFunction(example.contract_terms.auditors) + example.contract_terms.hasExchanges = createNonEmptyFunction(example.contract_terms.exchanges) + + example.contract_terms.products.forEach((p: any) => { + p.delivery_date_str = createDateToStringFunction(p.delivery_date) + p.hasTaxes = createNonEmptyFunction(p.taxes) + }); + + example.contract_terms.has_delivery_info = () => + example.contract_terms.delivery_date || + example.contract_terms.delivery_location; + + example.contract_terms.delivery_date_str = createDateToStringFunction(example.contract_terms.delivery_date) + example.contract_terms.pay_deadline_str = createDateToStringFunction(example.contract_terms.pay_deadline) + example.contract_terms.wire_transfer_deadline_str = createDateToStringFunction(example.contract_terms.wire_transfer_deadline) + + example.contract_terms.refund_deadline_str = createDateToStringFunction(example.contract_terms.refund_deadline) + example.contract_terms.auto_refund_str = createDurationToStringFunction(example.contract_terms.auto_refund) + + const output = mustache.render(html, example); + + fs.writeFileSync( + `${destDirectory}/${templateFileWithoutExt}.${exampleName}.html`, + output, + ); + }); +}); diff --git a/packages/merchant-backend-ui/src/utils.ts b/packages/merchant-backend-ui/src/utils.ts new file mode 100644 index 000000000..ecd05ff00 --- /dev/null +++ b/packages/merchant-backend-ui/src/utils.ts @@ -0,0 +1,41 @@ +/* + 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/> + */ + +import { format, formatDuration, intervalToDuration } from "date-fns"; + +const TIME_DATE_FORMAT = "dd MMM yyyy HH:mm:ss" + +export function createDateToStringFunction(date: any) { + return () => { + if (!date) return ""; + return format(date.t_s * 1000, TIME_DATE_FORMAT); + } +} + +export function createDurationToStringFunction(duration: any) { + return () => { + if (!duration) return ""; + return formatDuration(intervalToDuration({ start: 0, end: duration.d_us })); + } +} + +export function createNonEmptyFunction(list: any) { + return () => { + if (!list) return false; + return list.length > 0; + } +} + -- cgit v1.2.3