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

1 files changed, 52 insertions, 44 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
index 6e5575f63..c9c7d0ce5 100644
--- a/packages/merchant-backoffice-ui/src/components/modal/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
@@ -19,12 +19,12 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { ComponentChildren, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useInstanceContext } from "../../context/instance.js";
-import { Translate, useTranslator } from "../../i18n/index.js";
 import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js";
-import { Loading, Spinner } from "../exception/loading.js";
+import { Spinner } from "../exception/loading.js";
 import { FormProvider } from "../form/FormProvider.js";
 import { Input } from "../form/Input.js";
 
@@ -49,6 +49,7 @@ export function ConfirmModal({
   disabled,
   label = "Confirm",
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class={active ? "modal is-active" : "modal"}>
       <div class="modal-background " onClick={onCancel} />
@@ -65,14 +66,14 @@ export function ConfirmModal({
         <footer class="modal-card-foot">
           <div class="buttons is-right" style={{ width: "100%" }}>
             <button class="button " onClick={onCancel}>
-              <Translate>Cancel</Translate>
+              <i18n.Translate>Cancel</i18n.Translate>
             </button>
             <button
               class={danger ? "button is-danger " : "button is-info "}
               disabled={disabled}
               onClick={onConfirm}
             >
-              <Translate>{label}</Translate>
+              <i18n.Translate>{label}</i18n.Translate>
             </button>
           </div>
         </footer>
@@ -94,6 +95,7 @@ export function ContinueModal({
   children,
   disabled,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class={active ? "modal is-active" : "modal"}>
       <div class="modal-background " onClick={onCancel} />
@@ -110,7 +112,7 @@ export function ContinueModal({
               disabled={disabled}
               onClick={onConfirm}
             >
-              <Translate>Continue</Translate>
+              <i18n.Translate>Continue</i18n.Translate>
             </button>
           </div>
         </footer>
@@ -147,6 +149,7 @@ export function ClearConfirmModal({
   onConfirm,
   children,
 }: Props & { onClear?: () => void }): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="modal is-active">
       <div class="modal-background " onClick={onCancel} />
@@ -163,19 +166,19 @@ export function ClearConfirmModal({
               onClick={onClear}
               disabled={onClear === undefined}
             >
-              <Translate>Clear</Translate>
+              <i18n.Translate>Clear</i18n.Translate>
             </button>
           )}
           <div class="buttons is-right" style={{ width: "100%" }}>
             <button class="button " onClick={onCancel}>
-              <Translate>Cancel</Translate>
+              <i18n.Translate>Cancel</i18n.Translate>
             </button>
             <button
               class="button is-info"
               onClick={onConfirm}
               disabled={onConfirm === undefined}
             >
-              <Translate>Confirm</Translate>
+              <i18n.Translate>Confirm</i18n.Translate>
             </button>
           </div>
         </footer>
@@ -210,7 +213,7 @@ export function DeleteModal({
       onConfirm={() => onConfirm(element.id)}
     >
       <p>
-        If you delete the instance named <b>"{element.name}"</b> (ID:{" "}
+        If you delete the instance named <b>&quot;{element.name}&quot;</b> (ID:{" "}
         <b>{element.id}</b>), the merchant will no longer be able to process
         orders or refunds
       </p>
@@ -241,12 +244,13 @@ export function PurgeModal({
       onConfirm={() => onConfirm(element.id)}
     >
       <p>
-        If you purge the instance named <b>"{element.name}"</b> (ID:{" "}
-        <b>{element.id}</b>), you will also delete all it's transaction data.
+        If you purge the instance named <b>&quot;{element.name}&quot;</b> (ID:{" "}
+        <b>{element.id}</b>), you will also delete all it&apos;s transaction
+        data.
       </p>
       <p>
         The instance will disappear from your list, and you will no longer be
-        able to access it's data.
+        able to access it&apos;s data.
       </p>
       <p class="warning">
         Purging an instance <b>cannot be undone</b>.
@@ -275,20 +279,22 @@ export function UpdateTokenModal({
     new_token: "",
     repeat_token: "",
   });
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const hasInputTheCorrectOldToken = oldToken && oldToken !== form.old_token;
   const errors = {
     old_token: hasInputTheCorrectOldToken
-      ? i18n`is not the same as the current access token`
+      ? i18n.str`is not the same as the current access token`
       : undefined,
     new_token: !form.new_token
-      ? i18n`cannot be empty`
+      ? i18n.str`cannot be empty`
       : form.new_token === form.old_token
-      ? i18n`cannot be the same as the old token`
+      ? i18n.str`cannot be the same as the old token`
       : undefined,
     repeat_token:
-      form.new_token !== form.repeat_token ? i18n`is not the same` : undefined,
+      form.new_token !== form.repeat_token
+        ? i18n.str`is not the same`
+        : undefined,
   };
 
   const hasErrors = Object.keys(errors).some(
@@ -297,7 +303,7 @@ export function UpdateTokenModal({
 
   const instance = useInstanceContext();
 
-  const text = i18n`You are updating the access token from instance with id ${instance.id}`;
+  const text = i18n.str`You are updating the access token from instance with id ${instance.id}`;
 
   return (
     <ClearConfirmModal
@@ -313,28 +319,28 @@ export function UpdateTokenModal({
             {oldToken && (
               <Input<State>
                 name="old_token"
-                label={i18n`Old access token`}
-                tooltip={i18n`access token currently in use`}
+                label={i18n.str`Old access token`}
+                tooltip={i18n.str`access token currently in use`}
                 inputType="password"
               />
             )}
             <Input<State>
               name="new_token"
-              label={i18n`New access token`}
-              tooltip={i18n`next access token to be used`}
+              label={i18n.str`New access token`}
+              tooltip={i18n.str`next access token to be used`}
               inputType="password"
             />
             <Input<State>
               name="repeat_token"
-              label={i18n`Repeat access token`}
-              tooltip={i18n`confirm the same access token`}
+              label={i18n.str`Repeat access token`}
+              tooltip={i18n.str`confirm the same access token`}
               inputType="password"
             />
           </FormProvider>
           <p>
-            <Translate>
+            <i18n.Translate>
               Clearing the access token will mean public access to the instance
-            </Translate>
+            </i18n.Translate>
           </p>
         </div>
         <div class="column" />
@@ -353,16 +359,18 @@ export function SetTokenNewInstanceModal({
     new_token: "",
     repeat_token: "",
   });
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const errors = {
     new_token: !form.new_token
-      ? i18n`cannot be empty`
+      ? i18n.str`cannot be empty`
       : form.new_token === form.old_token
-      ? i18n`cannot be the same as the old access token`
+      ? i18n.str`cannot be the same as the old access token`
       : undefined,
     repeat_token:
-      form.new_token !== form.repeat_token ? i18n`is not the same` : undefined,
+      form.new_token !== form.repeat_token
+        ? i18n.str`is not the same`
+        : undefined,
   };
 
   const hasErrors = Object.keys(errors).some(
@@ -374,7 +382,7 @@ export function SetTokenNewInstanceModal({
       <div class="modal-background " onClick={onCancel} />
       <div class="modal-card">
         <header class="modal-card-head">
-          <p class="modal-card-title">{i18n`You are setting the access token for the new instance`}</p>
+          <p class="modal-card-title">{i18n.str`You are setting the access token for the new instance`}</p>
           <button class="delete " aria-label="close" onClick={onCancel} />
         </header>
         <section class="modal-card-body is-main-section">
@@ -388,22 +396,22 @@ export function SetTokenNewInstanceModal({
               >
                 <Input<State>
                   name="new_token"
-                  label={i18n`New access token`}
-                  tooltip={i18n`next access token to be used`}
+                  label={i18n.str`New access token`}
+                  tooltip={i18n.str`next access token to be used`}
                   inputType="password"
                 />
                 <Input<State>
                   name="repeat_token"
-                  label={i18n`Repeat access token`}
-                  tooltip={i18n`confirm the same access token`}
+                  label={i18n.str`Repeat access token`}
+                  tooltip={i18n.str`confirm the same access token`}
                   inputType="password"
                 />
               </FormProvider>
               <p>
-                <Translate>
+                <i18n.Translate>
                   With external authorization method no check will be done by
                   the merchant backend
-                </Translate>
+                </i18n.Translate>
               </p>
             </div>
             <div class="column" />
@@ -416,19 +424,19 @@ export function SetTokenNewInstanceModal({
               onClick={onClear}
               disabled={onClear === undefined}
             >
-              <Translate>Set external authorization</Translate>
+              <i18n.Translate>Set external authorization</i18n.Translate>
             </button>
           )}
           <div class="buttons is-right" style={{ width: "100%" }}>
             <button class="button " onClick={onCancel}>
-              <Translate>Cancel</Translate>
+              <i18n.Translate>Cancel</i18n.Translate>
             </button>
             <button
               class="button is-info"
               onClick={() => onConfirm(form.new_token!)}
               disabled={hasErrors}
             >
-              <Translate>Set access token</Translate>
+              <i18n.Translate>Set access token</i18n.Translate>
             </button>
           </div>
         </footer>
@@ -443,14 +451,14 @@ export function SetTokenNewInstanceModal({
 }
 
 export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   return (
     <div class="modal is-active">
       <div class="modal-background " onClick={onCancel} />
       <div class="modal-card">
         <header class="modal-card-head">
           <p class="modal-card-title">
-            <Translate>Operation in progress...</Translate>
+            <i18n.Translate>Operation in progress...</i18n.Translate>
           </p>
         </header>
         <section class="modal-card-body">
@@ -459,12 +467,12 @@ export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode {
             <Spinner />
             <div class="column" />
           </div>
-          <p>{i18n`The operation will be automatically canceled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}</p>
+          <p>{i18n.str`The operation will be automatically canceled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}</p>
         </section>
         <footer class="modal-card-foot">
           <div class="buttons is-right" style={{ width: "100%" }}>
             <button class="button " onClick={onCancel}>
-              <Translate>Cancel</Translate>
+              <i18n.Translate>Cancel</i18n.Translate>
             </button>
           </div>
         </footer>