use translation context from web-utils, don't use match react-router since is broken

1 files changed, 24 insertions, 22 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx
index 57aa5968d..1052aaaae 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx
@@ -18,17 +18,16 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h } from "preact";
-import { MerchantBackend, Timestamp } from "../../declaration.js";
-import { InputProps, useField } from "./useField.js";
-import { FormProvider, FormErrors } from "./FormProvider.js";
 import { useLayoutEffect, useState } from "preact/hooks";
-import { Input } from "./Input.js";
-import { InputGroup } from "./InputGroup.js";
-import { InputNumber } from "./InputNumber.js";
+import { MerchantBackend, Timestamp } from "../../declaration.js";
+import { FormErrors, FormProvider } from "./FormProvider.js";
 import { InputDate } from "./InputDate.js";
-import { Translate, useTranslator } from "../../i18n/index.js";
+import { InputGroup } from "./InputGroup.js";
 import { InputLocation } from "./InputLocation.js";
+import { InputNumber } from "./InputNumber.js";
+import { InputProps, useField } from "./useField.js";
 
 export interface Props<T> extends InputProps<T> {
   alreadyExist?: boolean;
@@ -64,7 +63,7 @@ export function InputStock<T>({
     incoming: 0,
     lost: 0,
   });
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   useLayoutEffect(() => {
     if (!formValue) {
@@ -97,7 +96,7 @@ export function InputStock<T>({
               {!alreadyExist ? (
                 <button
                   class="button"
-                  data-tooltip={i18n`click here to configure the stock of the product, leave it as is and the backend will not control stock`}
+                  data-tooltip={i18n.str`click here to configure the stock of the product, leave it as is and the backend will not control stock`}
                   onClick={(): void => {
                     valueHandler({
                       current: 0,
@@ -107,17 +106,17 @@ export function InputStock<T>({
                   }}
                 >
                   <span>
-                    <Translate>Manage stock</Translate>
+                    <i18n.Translate>Manage stock</i18n.Translate>
                   </span>
                 </button>
               ) : (
                 <button
                   class="button"
-                  data-tooltip={i18n`this product has been configured without stock control`}
+                  data-tooltip={i18n.str`this product has been configured without stock control`}
                   disabled
                 >
                   <span>
-                    <Translate>Infinite</Translate>
+                    <i18n.Translate>Infinite</i18n.Translate>
                   </span>
                 </button>
               )}
@@ -134,7 +133,7 @@ export function InputStock<T>({
   const stockAddedErrors: FormErrors<typeof addedStock> = {
     lost:
       currentStock + addedStock.incoming < addedStock.lost
-        ? i18n`lost cannot be greater than current and incoming (max ${
+        ? i18n.str`lost cannot be greater than current and incoming (max ${
             currentStock + addedStock.incoming
           })`
         : undefined,
@@ -142,8 +141,8 @@ export function InputStock<T>({
 
   // const stockUpdateDescription = stockAddedErrors.lost ? '' : (
   //   !!addedStock.incoming || !!addedStock.lost ?
-  //     i18n`current stock will change from ${currentStock} to ${currentStock + addedStock.incoming - addedStock.lost}` :
-  //     i18n`current stock will stay at ${currentStock}`
+  //     i18n.str`current stock will change from ${currentStock} to ${currentStock + addedStock.incoming - addedStock.lost}` :
+  //     i18n.str`current stock will stay at ${currentStock}`
   // )
 
   return (
@@ -174,8 +173,8 @@ export function InputStock<T>({
                   object={addedStock}
                   valueHandler={setAddedStock as any}
                 >
-                  <InputNumber name="incoming" label={i18n`Incoming`} />
-                  <InputNumber name="lost" label={i18n`Lost`} />
+                  <InputNumber name="incoming" label={i18n.str`Incoming`} />
+                  <InputNumber name="lost" label={i18n.str`Lost`} />
                 </FormProvider>
 
                 {/* <div class="field is-horizontal">
@@ -190,17 +189,17 @@ export function InputStock<T>({
             ) : (
               <InputNumber<Entity>
                 name="current"
-                label={i18n`Current`}
+                label={i18n.str`Current`}
                 side={
                   <button
                     class="button is-danger"
-                    data-tooltip={i18n`remove stock control for this product`}
+                    data-tooltip={i18n.str`remove stock control for this product`}
                     onClick={(): void => {
                       valueHandler(undefined as any);
                     }}
                   >
                     <span>
-                      <Translate>without stock</Translate>
+                      <i18n.Translate>without stock</i18n.Translate>
                     </span>
                   </button>
                 }
@@ -209,11 +208,14 @@ export function InputStock<T>({
 
             <InputDate<Entity>
               name="nextRestock"
-              label={i18n`Next restock`}
+              label={i18n.str`Next restock`}
               withTimestampSupport
             />
 
-            <InputGroup<Entity> name="address" label={i18n`Delivery address`}>
+            <InputGroup<Entity>
+              name="address"
+              label={i18n.str`Delivery address`}
+            >
               <InputLocation name="address" />
             </InputGroup>
           </FormProvider>