1 files changed, 70 insertions, 56 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
index ef4df1df4..8b6b5636d 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
@@ -20,16 +20,19 @@
  */
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { formatDuration, intervalToDuration } from "date-fns";
-import { h, VNode } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { SimpleModal } from "../modal/index.js";
 import { DurationPicker } from "../picker/DurationPicker.js";
 import { InputProps, useField } from "./useField.js";
+import { Duration } from "@gnu-taler/taler-util";
 
 export interface Props<T> extends InputProps<T> {
   expand?: boolean;
   readonly?: boolean;
   withForever?: boolean;
+  side?: ComponentChildren;
+  withoutClear?: boolean;
 }
 
 export function InputDuration<T>({
@@ -41,19 +44,22 @@ export function InputDuration<T>({
   help,
   readonly,
   withForever,
+  withoutClear,
+  side,
 }: Props<keyof T>): VNode {
   const [opened, setOpened] = useState(false);
   const { i18n } = useTranslationContext();
 
-  const { error, required, value, onChange } = useField<T>(name);
+  const { error, required, value: anyValue, onChange } = useField<T>(name);
   let strValue = "";
+  const value: Duration = anyValue
   if (!value) {
     strValue = "";
-  } else if (value.d_us === "forever") {
+  } else if (value.d_ms === "forever") {
     strValue = i18n.str`forever`;
   } else {
     strValue = formatDuration(
-      intervalToDuration({ start: 0, end: value.d_us / 1000 }),
+      intervalToDuration({ start: 0, end: value.d_ms }),
       {
         locale: {
           formatDistance: (name, value) => {
@@ -97,72 +103,80 @@ export function InputDuration<T>({
           )}
         </label>
       </div>
-      <div class="field-body is-flex-grow-3">
-        <div class="field">
-          <div class="field has-addons">
-            <p class={expand ? "control is-expanded " : "control "}>
-              <input
-                class="input"
-                type="text"
-                readonly
-                value={strValue}
-                placeholder={placeholder}
+
+      <div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <div class="field has-addons">
+              <p class={expand ? "control is-expanded " : "control "}>
+                <input
+                  class="input"
+                  type="text"
+                  readonly
+                  value={strValue}
+                  placeholder={placeholder}
+                  onClick={() => {
+                    if (!readonly) setOpened(true);
+                  }}
+                />
+                {required && (
+                  <span class="icon has-text-danger is-right">
+                    <i class="mdi mdi-alert" />
+                  </span>
+                )}
+              </p>
+              <div
+                class="control"
                 onClick={() => {
                   if (!readonly) setOpened(true);
                 }}
-              />
-              {required && (
-                <span class="icon has-text-danger is-right">
-                  <i class="mdi mdi-alert" />
-                </span>
-              )}
-              {help}
-            </p>
-            <div
-              class="control"
-              onClick={() => {
-                if (!readonly) setOpened(true);
-              }}
-            >
-              <a class="button is-static">
-                <span class="icon">
-                  <i class="mdi mdi-clock" />
-                </span>
-              </a>
+              >
+                <a class="button is-static">
+                  <span class="icon">
+                    <i class="mdi mdi-clock" />
+                  </span>
+                </a>
+              </div>
             </div>
+            {error && <p class="help is-danger">{error}</p>}
           </div>
-          {error && <p class="help is-danger">{error}</p>}
+          {withForever && (
+            <span data-tooltip={i18n.str`change value to never`}>
+              <button
+                class="button is-info mr-3"
+                onClick={() => onChange({ d_ms: "forever" } as any)}
+              >
+                <i18n.Translate>forever</i18n.Translate>
+              </button>
+            </span>
+          )}
+          {!readonly && !withoutClear && (
+            <span data-tooltip={i18n.str`change value to empty`}>
+              <button
+                class="button is-info "
+                onClick={() => onChange(undefined as any)}
+              >
+                <i18n.Translate>clear</i18n.Translate>
+              </button>
+            </span>
+          )}
+          {side}
         </div>
-        {withForever && (
-          <span data-tooltip={i18n.str`change value to never`}>
-            <button
-              class="button is-info mr-3"
-              onClick={() => onChange({ d_us: "forever" } as any)}
-            >
-              <i18n.Translate>forever</i18n.Translate>
-            </button>
-          </span>
-        )}
-        {!readonly && (
-          <span data-tooltip={i18n.str`change value to empty`}>
-            <button
-              class="button is-info "
-              onClick={() => onChange(undefined as any)}
-            >
-              <i18n.Translate>clear</i18n.Translate>
-            </button>
-          </span>
-        )}
+        <span>
+          {help}
+        </span>
       </div>
+
+
       {opened && (
         <SimpleModal onCancel={() => setOpened(false)}>
           <DurationPicker
             days
             hours
             minutes
-            value={!value || value.d_us === "forever" ? 0 : value.d_us}
+            value={!value || value.d_ms === "forever" ? 0 : value.d_ms}
             onChange={(v) => {
-              onChange({ d_us: v } as any);
+              onChange({ d_ms: v } as any);
             }}
           />
         </SimpleModal>