duration label

1 files changed, 22 insertions, 10 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
index a30f79169..fbfd023c1 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
@@ -22,7 +22,7 @@
 import { AbsoluteTime, Amounts, Duration, TalerProtocolDuration } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { format, isFuture } from "date-fns";
-import { Fragment, VNode, h } from "preact";
+import { ComponentChildren, Fragment, VNode, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import {
   FormErrors,
@@ -334,10 +334,6 @@ export function CreatePage({
   // user required to set the taler options
   const requiresSomeTalerOptions = noDefault_payDeadline || noDefault_wireDeadline
 
-  const whenPay = !value.payments?.pay_deadline ? undefined : AbsoluteTime.addDuration(AbsoluteTime.now(), value.payments.pay_deadline)
-  const whenRefund = !value.payments?.refund_deadline ? undefined : AbsoluteTime.addDuration(AbsoluteTime.now(), value.payments.refund_deadline)
-  const whenWire = !value.payments?.wire_transfer_deadline ? undefined : AbsoluteTime.addDuration(AbsoluteTime.now(), value.payments.wire_transfer_deadline)
-  const whenAutoRefund = !value.payments?.auto_refund_deadline ? undefined : AbsoluteTime.addDuration(AbsoluteTime.now(), value.payments.auto_refund_deadline)
 
   return (
     <div>
@@ -500,7 +496,7 @@ export function CreatePage({
                   {(settings.advanceOrderMode || noDefault_payDeadline) && <InputDuration
                     name="payments.pay_deadline"
                     label={i18n.str`Payment time`}
-                    help={whenPay && whenPay.t_ms !== "never" ? i18n.str`Deadline at ${format(whenPay.t_ms, "dd/MM/yy HH:mm")}` : i18n.str`Without deadline`}
+                    help={<DeadlineHelp duration={value.payments?.pay_deadline} />}
                     withForever
                     withoutClear
                     tooltip={i18n.str`Time for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline. Time start to run after the order is created.`}
@@ -524,7 +520,7 @@ export function CreatePage({
                   {settings.advanceOrderMode && <InputDuration
                     name="payments.refund_deadline"
                     label={i18n.str`Refund time`}
-                    help={whenRefund && whenRefund.t_ms !== "never" ? i18n.str`Deadline at ${format(whenRefund.t_ms, "dd/MM/yy HH:mm")}` : i18n.str`Without deadline`}
+                    help={<DeadlineHelp duration={value.payments?.refund_deadline} />}
                     withForever
                     withoutClear
                     tooltip={i18n.str`Time while the order can be refunded by the merchant. Time starts after the order is created.`}
@@ -547,7 +543,7 @@ export function CreatePage({
                   {(settings.advanceOrderMode || noDefault_wireDeadline) && <InputDuration
                     name="payments.wire_transfer_deadline"
                     label={i18n.str`Wire transfer time`}
-                    help={whenWire && whenWire.t_ms !== "never" ? i18n.str`Deadline at ${format(whenWire.t_ms, "dd/MM/yy HH:mm")}` : i18n.str`Without deadline`}
+                    help={<DeadlineHelp duration={value.payments?.wire_transfer_deadline} />}
                     withoutClear
                     withForever
                     tooltip={i18n.str`Time for the exchange to make the wire transfer. Time starts after the order is created.`}
@@ -569,8 +565,8 @@ export function CreatePage({
                   />}
                   {settings.advanceOrderMode && <InputDuration
                     name="payments.auto_refund_deadline"
-                    label={i18n.str`Auto-refund interval`}
-                    help={whenAutoRefund && whenAutoRefund.t_ms !== "never" ? i18n.str`Deadline at ${format(whenAutoRefund.t_ms, "dd/MM/yy HH:mm")}` : i18n.str`Without deadline`}
+                    label={i18n.str`Auto-refund time`}
+                    help={<DeadlineHelp duration={value.payments?.auto_refund_deadline} />}
                     tooltip={i18n.str`Time until which the wallet will automatically check for refunds without user interaction.`}
                     withForever
                   />}
@@ -691,3 +687,19 @@ function asProduct(p: ProductAndQuantity): MerchantBackend.Product {
 }
 
 
+function DeadlineHelp({ duration }: { duration?: Duration }): VNode {
+  const { i18n } = useTranslationContext();
+  const [now, setNow] = useState(AbsoluteTime.now())
+  useEffect(() => {
+    const iid = setInterval(() => {
+      setNow(AbsoluteTime.now())
+    }, 60 * 1000)
+    return () => {
+      clearInterval(iid)
+    }
+  })
+  if (!duration) return <i18n.Translate>Disabled</i18n.Translate>
+  const when = AbsoluteTime.addDuration(now, duration)
+  if (when.t_ms === "never") return <i18n.Translate>No deadline</i18n.Translate>
+  return <i18n.Translate>Deadline at {format(when.t_ms, "dd/MM/yy HH:mm")}</i18n.Translate>
+}