1 files changed, 11 insertions, 7 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx
index fceee9d56..7f65fb8ae 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx
@@ -18,11 +18,11 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import emptyImage from "../../assets/empty.png";
 import { MerchantBackend, WithId } from "../../declaration.js";
-import { Translate, useTranslator } from "../../i18n/index.js";
 import { FormErrors, FormProvider } from "./FormProvider.js";
 import { InputWithAddon } from "./InputWithAddon.js";
 
@@ -50,7 +50,7 @@ export function InputSearchProduct({
   const errors: FormErrors<ProductSearch> = {
     name: undefined,
   };
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   if (selected) {
     return (
@@ -63,10 +63,11 @@ export function InputSearchProduct({
         <div class="media-content">
           <div class="content">
             <p class="media-meta">
-              <Translate>Product id</Translate>: <b>{selected.id}</b>
+              <i18n.Translate>Product id</i18n.Translate>: <b>{selected.id}</b>
             </p>
             <p>
-              <Translate>Description</Translate>: {selected.description}
+              <i18n.Translate>Description</i18n.Translate>:{" "}
+              {selected.description}
             </p>
             <div class="buttons is-right mt-5">
               <button
@@ -90,8 +91,8 @@ export function InputSearchProduct({
     >
       <InputWithAddon<ProductSearch>
         name="name"
-        label={i18n`Product`}
-        tooltip={i18n`search products by it's description or id`}
+        label={i18n.str`Product`}
+        tooltip={i18n.str`search products by it's description or id`}
         addonAfter={
           <span class="icon">
             <i class="mdi mdi-magnify" />
@@ -120,6 +121,7 @@ interface ProductListProps {
 }
 
 function ProductList({ name, onSelect, list }: ProductListProps) {
+  const { i18n } = useTranslationContext();
   if (!name) {
     /* FIXME
       this BR is added to occupy the space that will be added when the 
@@ -146,7 +148,9 @@ function ProductList({ name, onSelect, list }: ProductListProps) {
         <div class="dropdown-content">
           {!filtered.length ? (
             <div class="dropdown-item">
-              <Translate>no products found with that description</Translate>
+              <i18n.Translate>
+                no products found with that description
+              </i18n.Translate>
             </div>
           ) : (
             filtered.map((p) => (