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

1 files changed, 13 insertions, 12 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx b/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx
index d95463790..552ee73e2 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputTaxes.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 { useCallback, useState } from "preact/hooks";
 import * as yup from "yup";
 import { MerchantBackend } from "../../declaration.js";
-import { Translate, useTranslator } from "../../i18n/index.js";
 import { TaxSchema as schema } from "../../schemas/index.js";
 import { FormErrors, FormProvider } from "./FormProvider.js";
 import { Input } from "./Input.js";
@@ -67,7 +67,7 @@ export function InputTaxes<T>({
     valueHandler({});
   }, [value]);
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   //FIXME: translating plural singular
   return (
@@ -110,34 +110,35 @@ export function InputTaxes<T>({
                 />
               </div>
             ))}
-            {!taxes.length && i18n`No taxes configured for this product.`}
+            {!taxes.length && i18n.str`No taxes configured for this product.`}
           </div>
         </div>
 
         <Input<Entity>
           name="tax"
-          label={i18n`Amount`}
-          tooltip={i18n`Taxes can be in currencies that differ from the main currency used by the merchant.`}
+          label={i18n.str`Amount`}
+          tooltip={i18n.str`Taxes can be in currencies that differ from the main currency used by the merchant.`}
         >
-          <Translate>
-            Enter currency and value separated with a colon, e.g. "USD:2.3".
-          </Translate>
+          <i18n.Translate>
+            Enter currency and value separated with a colon, e.g.
+            &quot;USD:2.3&quot;.
+          </i18n.Translate>
         </Input>
 
         <Input<Entity>
           name="name"
-          label={i18n`Description`}
-          tooltip={i18n`Legal name of the tax, e.g. VAT or import duties.`}
+          label={i18n.str`Description`}
+          tooltip={i18n.str`Legal name of the tax, e.g. VAT or import duties.`}
         />
 
         <div class="buttons is-right mt-5">
           <button
             class="button is-info"
-            data-tooltip={i18n`add tax to the tax list`}
+            data-tooltip={i18n.str`add tax to the tax list`}
             disabled={hasErrors}
             onClick={submit}
           >
-            <Translate>Add</Translate>
+            <i18n.Translate>Add</i18n.Translate>
           </button>
         </div>
       </FormProvider>