1 files changed, 14 insertions, 14 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
index 658cc4db7..3f25d1dc7 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
@@ -18,10 +18,10 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import { intervalToDuration, formatDuration } from "date-fns";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { formatDuration, intervalToDuration } from "date-fns";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { Translate, useTranslator } from "../../i18n/index.js";
 import { SimpleModal } from "../modal/index.js";
 import { DurationPicker } from "../picker/DurationPicker.js";
 import { InputProps, useField } from "./useField.js";
@@ -43,14 +43,14 @@ export function InputDuration<T>({
   withForever,
 }: Props<keyof T>): VNode {
   const [opened, setOpened] = useState(false);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const { error, required, value, onChange } = useField<T>(name);
   let strValue = "";
   if (!value) {
     strValue = "";
   } else if (value.d_us === "forever") {
-    strValue = i18n`forever`;
+    strValue = i18n.str`forever`;
   } else {
     strValue = formatDuration(
       intervalToDuration({ start: 0, end: value.d_us / 1000 }),
@@ -59,17 +59,17 @@ export function InputDuration<T>({
           formatDistance: (name, value) => {
             switch (name) {
               case "xMonths":
-                return i18n`${value}M`;
+                return i18n.str`${value}M`;
               case "xYears":
-                return i18n`${value}Y`;
+                return i18n.str`${value}Y`;
               case "xDays":
-                return i18n`${value}d`;
+                return i18n.str`${value}d`;
               case "xHours":
-                return i18n`${value}h`;
+                return i18n.str`${value}h`;
               case "xMinutes":
-                return i18n`${value}min`;
+                return i18n.str`${value}min`;
               case "xSeconds":
-                return i18n`${value}sec`;
+                return i18n.str`${value}sec`;
             }
           },
           localize: {
@@ -134,22 +134,22 @@ export function InputDuration<T>({
           {error && <p class="help is-danger">{error}</p>}
         </div>
         {withForever && (
-          <span data-tooltip={i18n`change value to never`}>
+          <span data-tooltip={i18n.str`change value to never`}>
             <button
               class="button is-info mr-3"
               onClick={() => onChange({ d_us: "forever" } as any)}
             >
-              <Translate>forever</Translate>
+              <i18n.Translate>forever</i18n.Translate>
             </button>
           </span>
         )}
         {!readonly && (
-          <span data-tooltip={i18n`change value to empty`}>
+          <span data-tooltip={i18n.str`change value to empty`}>
             <button
               class="button is-info "
               onClick={() => onChange(undefined as any)}
             >
-              <Translate>clear</Translate>
+              <i18n.Translate>clear</i18n.Translate>
             </button>
           </span>
         )}