1 files changed, 22 insertions, 22 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx
index fe9692c02..3e7262657 100644
--- a/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx
@@ -13,19 +13,19 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h, VNode } from "preact";
 import { useCallback, useEffect, useState } from "preact/hooks";
 import * as yup from "yup";
+import { MerchantBackend } from "../../declaration.js";
+import { useListener } from "../../hooks/listener.js";
+import { NonInventoryProductSchema as schema } from "../../schemas/index.js";
 import { FormErrors, FormProvider } from "../form/FormProvider.js";
 import { Input } from "../form/Input.js";
 import { InputCurrency } from "../form/InputCurrency.js";
 import { InputImage } from "../form/InputImage.js";
 import { InputNumber } from "../form/InputNumber.js";
 import { InputTaxes } from "../form/InputTaxes.js";
-import { MerchantBackend } from "../../declaration.js";
-import { useListener } from "../../hooks/listener.js";
-import { Translate, useTranslator } from "../../i18n/index.js";
-import { NonInventoryProductSchema as schema } from "../../schemas/index.js";
 
 type Entity = MerchantBackend.Product;
 
@@ -62,17 +62,17 @@ export function NonInventoryProductFrom({
     return Promise.resolve();
   });
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <Fragment>
       <div class="buttons">
         <button
           class="button is-success"
-          data-tooltip={i18n`describe and add a product that is not in the inventory list`}
+          data-tooltip={i18n.str`describe and add a product that is not in the inventory list`}
           onClick={() => setShowCreateProduct(true)}
         >
-          <Translate>Add custom product</Translate>
+          <i18n.Translate>Add custom product</i18n.Translate>
         </button>
       </div>
       {showCreateProduct && (
@@ -83,7 +83,7 @@ export function NonInventoryProductFrom({
           />
           <div class="modal-card">
             <header class="modal-card-head">
-              <p class="modal-card-title">{i18n`Complete information of the product`}</p>
+              <p class="modal-card-title">{i18n.str`Complete information of the product`}</p>
               <button
                 class="delete "
                 aria-label="close"
@@ -102,14 +102,14 @@ export function NonInventoryProductFrom({
                   class="button "
                   onClick={() => setShowCreateProduct(false)}
                 >
-                  <Translate>Cancel</Translate>
+                  <i18n.Translate>Cancel</i18n.Translate>
                 </button>
                 <button
                   class="button is-info "
                   disabled={!submitForm}
                   onClick={submitForm}
                 >
-                  <Translate>Confirm</Translate>
+                  <i18n.Translate>Confirm</i18n.Translate>
                 </button>
               </div>
             </footer>
@@ -170,7 +170,7 @@ export function ProductForm({ onSubscribe, initial }: ProductProps): VNode {
     onSubscribe(hasErrors ? undefined : submit);
   }, [submit, hasErrors]);
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div>
@@ -182,33 +182,33 @@ export function ProductForm({ onSubscribe, initial }: ProductProps): VNode {
       >
         <InputImage<NonInventoryProduct>
           name="image"
-          label={i18n`Image`}
-          tooltip={i18n`photo of the product`}
+          label={i18n.str`Image`}
+          tooltip={i18n.str`photo of the product`}
         />
         <Input<NonInventoryProduct>
           name="description"
           inputType="multiline"
-          label={i18n`Description`}
-          tooltip={i18n`full product description`}
+          label={i18n.str`Description`}
+          tooltip={i18n.str`full product description`}
         />
         <Input<NonInventoryProduct>
           name="unit"
-          label={i18n`Unit`}
-          tooltip={i18n`name of the product unit`}
+          label={i18n.str`Unit`}
+          tooltip={i18n.str`name of the product unit`}
         />
         <InputCurrency<NonInventoryProduct>
           name="price"
-          label={i18n`Price`}
-          tooltip={i18n`amount in the current currency`}
+          label={i18n.str`Price`}
+          tooltip={i18n.str`amount in the current currency`}
         />
 
         <InputNumber<NonInventoryProduct>
           name="quantity"
-          label={i18n`Quantity`}
-          tooltip={i18n`how many products will be added`}
+          label={i18n.str`Quantity`}
+          tooltip={i18n.str`how many products will be added`}
         />
 
-        <InputTaxes<NonInventoryProduct> name="taxes" label={i18n`Taxes`} />
+        <InputTaxes<NonInventoryProduct> name="taxes" label={i18n.str`Taxes`} />
       </FormProvider>
     </div>
   );