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

1 files changed, 22 insertions, 22 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx
index dba4b5d14..2a47c22a0 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx
@@ -19,6 +19,7 @@
  * @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 { AsyncButton } from "../../../../components/exception/AsyncButton.js";
@@ -33,7 +34,6 @@ import { InputNumber } from "../../../../components/form/InputNumber.js";
 import { InputWithAddon } from "../../../../components/form/InputWithAddon.js";
 import { useBackendContext } from "../../../../context/backend.js";
 import { MerchantBackend } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { undefinedIfEmpty } from "../../../../utils/table.js";
 
 type Entity = MerchantBackend.Template.TemplateAddDetails;
@@ -44,7 +44,7 @@ interface Props {
 }
 
 export function CreatePage({ onCreate, onBack }: Props): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   const backend = useBackendContext();
 
   const [state, setState] = useState<Partial<Entity>>({
@@ -57,23 +57,23 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
   });
 
   const errors: FormErrors<Entity> = {
-    template_id: !state.template_id ? i18n`should not be empty` : undefined,
+    template_id: !state.template_id ? i18n.str`should not be empty` : undefined,
     template_description: !state.template_description
-      ? i18n`should not be empty`
+      ? i18n.str`should not be empty`
       : undefined,
     template_contract: !state.template_contract
       ? undefined
       : undefinedIfEmpty({
           minimum_age:
             state.template_contract.minimum_age < 0
-              ? i18n`should be greater that 0`
+              ? i18n.str`should be greater that 0`
               : undefined,
           pay_duration: !state.template_contract.pay_duration
-            ? i18n`can't be empty`
+            ? i18n.str`can't be empty`
             : state.template_contract.pay_duration.d_us === "forever"
             ? undefined
             : state.template_contract.pay_duration.d_us < 1000
-            ? i18n`to short`
+            ? i18n.str`to short`
             : undefined,
         }),
   };
@@ -101,57 +101,57 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
               <InputWithAddon<Entity>
                 name="template_id"
                 addonBefore={`${backend.url}/instances/templates/`}
-                label={i18n`Identifier`}
-                tooltip={i18n`Name of the template in URLs.`}
+                label={i18n.str`Identifier`}
+                tooltip={i18n.str`Name of the template in URLs.`}
               />
 
               <Input<Entity>
                 name="template_description"
-                label={i18n`Description`}
+                label={i18n.str`Description`}
                 help=""
-                tooltip={i18n`Describe what this template stands for`}
+                tooltip={i18n.str`Describe what this template stands for`}
               />
               <Input
                 name="template_contract.summary"
                 inputType="multiline"
-                label={i18n`Order summary`}
-                tooltip={i18n`Title of the order to be shown to the customer`}
+                label={i18n.str`Order summary`}
+                tooltip={i18n.str`Title of the order to be shown to the customer`}
               />
               <InputCurrency
                 name="template_contract.amount"
-                label={i18n`Order price`}
-                tooltip={i18n`Order price`}
+                label={i18n.str`Order price`}
+                tooltip={i18n.str`Order price`}
               />
               <InputNumber
                 name="template_contract.minimum_age"
-                label={i18n`Minimum age`}
+                label={i18n.str`Minimum age`}
                 help=""
-                tooltip={i18n`Is this contract restricted to some age?`}
+                tooltip={i18n.str`Is this contract restricted to some age?`}
               />
               <InputDuration
                 name="template_contract.pay_duration"
-                label={i18n`Payment timeout`}
+                label={i18n.str`Payment timeout`}
                 help=""
-                tooltip={i18n`How much time has the customer to complete the payment once the order was created.`}
+                tooltip={i18n.str`How much time has the customer to complete the payment once the order was created.`}
               />
             </FormProvider>
 
             <div class="buttons is-right mt-5">
               {onBack && (
                 <button class="button" onClick={onBack}>
-                  <Translate>Cancel</Translate>
+                  <i18n.Translate>Cancel</i18n.Translate>
                 </button>
               )}
               <AsyncButton
                 disabled={hasErrors}
                 data-tooltip={
                   hasErrors
-                    ? i18n`Need to complete marked fields`
+                    ? i18n.str`Need to complete marked fields`
                     : "confirm operation"
                 }
                 onClick={submitForm}
               >
-                <Translate>Confirm</Translate>
+                <i18n.Translate>Confirm</i18n.Translate>
               </AsyncButton>
             </div>
           </div>