sane default for pay deadline and wire transfer and webhook docs

1 files changed, 36 insertions, 10 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx
index 7b07e689e..434d69412 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx
@@ -20,7 +20,7 @@
  */
 
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { h, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
 import {
@@ -51,14 +51,14 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
 
   const errors: FormErrors<Entity> = {
     webhook_id: !state.webhook_id ? i18n.str`required` : undefined,
-    event_type: !state.event_type ? i18n.str`required` 
-    : state.event_type !== "pay" && state.event_type !== "refund" ? i18n.str`it should be "pay" or "refund"`
-    : undefined,
+    event_type: !state.event_type ? i18n.str`required`
+      : state.event_type !== "pay" && state.event_type !== "refund" ? i18n.str`it should be "pay" or "refund"`
+        : undefined,
     http_method: !state.http_method
       ? i18n.str`required`
       : !validMethod.includes(state.http_method)
-      ? i18n.str`should be one of '${validMethod.join(", ")}'`
-      : undefined,
+        ? i18n.str`should be one of '${validMethod.join(", ")}'`
+        : undefined,
     url: !state.url ? i18n.str`required` : undefined,
   };
 
@@ -116,16 +116,42 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                 label={i18n.str`URL`}
                 tooltip={i18n.str`URL of the webhook where the customer will be redirected`}
               />
-              <Input<Entity>
+
+              <p>
+                The text below support <a target="_blank" rel="noreferrer" href="https://mustache.github.io/mustache.5.html">mustache</a> template engine. Any string
+                between <pre style={{ display: "inline", padding: 0 }}>&#123;&#123;</pre> and <pre style={{ display: "inline", padding: 0 }}>&#125;&#125;</pre> will
+                be replaced with replaced with the value of the correspoding variable.
+              </p>
+              <p>
+                For example <pre style={{ display: "inline", padding: 0 }}>&#123;&#123;contract_terms.amount&#125;&#125;</pre> will be replaced
+                with the the order's price
+              </p>
+              <p>
+                The short list of variables are:
+              </p>
+              <div class="menu">
+
+                <ul class="menu-list" style={{ listStyleType: "disc", marginLeft: 20 }}>
+                  <li><b>contract_terms.summary:</b> order's description </li>
+                  <li><b>contract_terms.amount:</b> order's price </li>
+                  <li><b>order_id:</b> order's unique identification </li>
+                  {state.event_type === "refund" && <Fragment>
+                    <li><b>refund_amout:</b> the amount that was being refunded</li>
+                    <li><b>reason:</b> the reason entered by the merchant staff for granting the refund</li>
+                    <li><b>timestamp:</b> time of the refund in nanoseconds since 1970</li>
+                  </Fragment>}
+                </ul>
+              </div>
+              {/* <Input<Entity>
                 name="header_template"
-                label={i18n.str`Header`}
+                label={i18n.str`Http header`}
                 inputType="multiline"
                 tooltip={i18n.str`Header template of the webhook`}
-              />
+              /> */}
               <Input<Entity>
                 name="body_template"
                 inputType="multiline"
-                label={i18n.str`Body`}
+                label={i18n.str`Http body`}
                 tooltip={i18n.str`Body template by the webhook`}
               />
             </FormProvider>