diff options
author | Sebastian <sebasjm@gmail.com> | 2024-01-08 16:22:48 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-01-08 16:22:59 -0300 |
commit | c019f4c040e82baebdbbda8208f10be2fbc19566 (patch) | |
tree | b90fe033f29e8a428a221aefc7913628c52012fc | |
parent | 2987f6f8365a15c6761a370bfd0ebf0952ce3f66 (diff) |
duration label
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx | 6 | ||||
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx | 32 |
2 files changed, 25 insertions, 13 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx index 8b6b5636d..7aa2703a4 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx @@ -93,7 +93,7 @@ export function InputDuration<T>({ return ( <div class="field is-horizontal"> - <div class="field-label is-normal"> + <div class="field-label is-normal is-flex-grow-3"> <label class="label"> {label} {tooltip && ( @@ -104,8 +104,8 @@ export function InputDuration<T>({ </label> </div> - <div> - <div class="field-body is-flex-grow-3"> + <div class="is-flex-grow-3"> + <div class="field-body "> <div class="field"> <div class="field has-addons"> <p class={expand ? "control is-expanded " : "control "}> 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> +} |