fixes #8201

4 files changed, 220 insertions, 42 deletions

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 {
     <Fragment>
       <meta charSet="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <noscript>
+      {/* <noscript>
         <meta http-equiv="refresh" content="1" />
-      </noscript>
+      </noscript> */}
       <title>
         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;
+  }
+}
+