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

1 files changed, 33 insertions, 25 deletions

diff --git a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
index 817de5f7b..8ac5c698b 100644
--- a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
+++ b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
@@ -19,6 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { format } from "date-fns";
 import { Fragment, FunctionComponent, h, VNode } from "preact";
 import { Route, route, Router } from "preact-router";
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
@@ -26,39 +28,37 @@ import { Loading } from "./components/exception/loading.js";
 import { Menu, NotificationCard } from "./components/menu/index.js";
 import { useBackendContext } from "./context/backend.js";
 import { InstanceContextProvider } from "./context/instance.js";
+import { HttpError } from "./hooks/backend.js";
 import {
   useBackendDefaultToken,
   useBackendInstanceToken,
   useLocalStorage,
 } from "./hooks/index.js";
-import { HttpError } from "./hooks/backend.js";
-import { Translate, useTranslator } from "./i18n/index.js";
+import { useInstanceKYCDetails } from "./hooks/instance.js";
 import InstanceCreatePage from "./paths/admin/create/index.js";
 import InstanceListPage from "./paths/admin/list/index.js";
+import ListKYCPage from "./paths/instance/kyc/list/index.js";
 import OrderCreatePage from "./paths/instance/orders/create/index.js";
 import OrderDetailsPage from "./paths/instance/orders/details/index.js";
 import OrderListPage from "./paths/instance/orders/list/index.js";
 import ProductCreatePage from "./paths/instance/products/create/index.js";
 import ProductListPage from "./paths/instance/products/list/index.js";
 import ProductUpdatePage from "./paths/instance/products/update/index.js";
-import TransferListPage from "./paths/instance/transfers/list/index.js";
-import TransferCreatePage from "./paths/instance/transfers/create/index.js";
-import TemplateListPage from "./paths/instance/templates/list/index.js";
-import TemplateUpdatePage from "./paths/instance/templates/update/index.js";
-import TemplateCreatePage from "./paths/instance/templates/create/index.js";
 import ReservesCreatePage from "./paths/instance/reserves/create/index.js";
 import ReservesDetailsPage from "./paths/instance/reserves/details/index.js";
 import ReservesListPage from "./paths/instance/reserves/list/index.js";
-import ListKYCPage from "./paths/instance/kyc/list/index.js";
+import TemplateCreatePage from "./paths/instance/templates/create/index.js";
+import TemplateListPage from "./paths/instance/templates/list/index.js";
+import TemplateUpdatePage from "./paths/instance/templates/update/index.js";
+import TransferCreatePage from "./paths/instance/transfers/create/index.js";
+import TransferListPage from "./paths/instance/transfers/list/index.js";
 import InstanceUpdatePage, {
-  Props as InstanceUpdatePageProps,
   AdminUpdate as InstanceAdminUpdatePage,
+  Props as InstanceUpdatePageProps,
 } from "./paths/instance/update/index.js";
 import LoginPage from "./paths/login/index.js";
 import NotFoundPage from "./paths/notfound/index.js";
 import { Notification } from "./utils/types.js";
-import { useInstanceKYCDetails } from "./hooks/instance.js";
-import { format } from "date-fns";
 
 export enum InstancePaths {
   // details = '/',
@@ -99,10 +99,16 @@ export enum AdminPaths {
 export interface Props {
   id: string;
   admin?: boolean;
+  path: string;
   setInstanceName: (s: string) => void;
 }
 
-export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode {
+export function InstanceRoutes({
+  id,
+  admin,
+  path,
+  setInstanceName,
+}: Props): VNode {
   const [_, updateDefaultToken] = useBackendDefaultToken();
   const [token, updateToken] = useBackendInstanceToken(id);
   const {
@@ -113,7 +119,7 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode {
   const cleaner = useCallback(() => {
     updateToken(undefined);
   }, [id]);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   type GlobalNotifState = (Notification & { to: string }) | undefined;
   const [globalNotification, setGlobalNotification] =
@@ -144,8 +150,8 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode {
   function ServerErrorRedirectTo(to: InstancePaths | AdminPaths) {
     return function ServerErrorRedirectToImpl(error: HttpError) {
       setGlobalNotification({
-        message: i18n`The backend reported a problem: HTTP status #${error.status}`,
-        description: i18n`Diagnostic from ${error.info?.url} is "${error.message}"`,
+        message: i18n.str`The backend reported a problem: HTTP status #${error.status}`,
+        description: i18n.str`Diagnostic from ${error.info?.url} is "${error.message}"`,
         details:
           error.clientError || error.serverError
             ? error.error?.detail
@@ -161,8 +167,8 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode {
     <Fragment>
       <NotificationCard
         notification={{
-          message: i18n`Access denied`,
-          description: i18n`The access token provided is invalid.`,
+          message: i18n.str`Access denied`,
+          description: i18n.str`The access token provided is invalid.`,
           type: "ERROR",
         }}
       />
@@ -177,8 +183,8 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode {
           <Fragment>
             <NotificationCard
               notification={{
-                message: i18n`No 'default' instance configured yet.`,
-                description: i18n`Create a 'default' instance to begin using the merchant backoffice.`,
+                message: i18n.str`No 'default' instance configured yet.`,
+                description: i18n.str`Create a 'default' instance to begin using the merchant backoffice.`,
                 type: "INFO",
               }}
             />
@@ -208,6 +214,7 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode {
       <Menu
         instance={id}
         admin={admin}
+        path={path}
         onLogout={clearTokenAndGoToRoot}
         setInstanceName={setInstanceName}
       />
@@ -488,7 +495,7 @@ function AdminInstanceUpdatePage({
     () => ({ id, token, admin: true, changeToken }),
     [id, token],
   );
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <InstanceContextProvider value={value}>
@@ -500,8 +507,8 @@ function AdminInstanceUpdatePage({
             <Fragment>
               <NotificationCard
                 notification={{
-                  message: i18n`The backend reported a problem: HTTP status #${error.status}`,
-                  description: i18n`Diagnostic from ${error.info?.url} is "${error.message}"`,
+                  message: i18n.str`The backend reported a problem: HTTP status #${error.status}`,
+                  description: i18n.str`Diagnostic from ${error.info?.url} is "${error.message}"`,
                   details:
                     error.clientError || error.serverError
                       ? error.error?.detail
@@ -518,8 +525,8 @@ function AdminInstanceUpdatePage({
             <Fragment>
               <NotificationCard
                 notification={{
-                  message: i18n`Access denied`,
-                  description: i18n`The access token provided is invalid`,
+                  message: i18n.str`Access denied`,
+                  description: i18n.str`The access token provided is invalid`,
                   type: "ERROR",
                 }}
               />
@@ -534,6 +541,7 @@ function AdminInstanceUpdatePage({
 
 function KycBanner(): VNode {
   const kycStatus = useInstanceKYCDetails();
+  const { i18n } = useTranslationContext();
   const today = format(new Date(), "yyyy-MM-dd");
   const [lastHide, setLastHide] = useLocalStorage("kyc-last-hide");
   const hasBeenHidden = today === lastHide;
@@ -552,7 +560,7 @@ function KycBanner(): VNode {
             </p>
             <div class="buttons is-right">
               <button class="button" onClick={() => setLastHide(today)}>
-                <Translate>Hide for today</Translate>
+                <i18n.Translate>Hide for today</i18n.Translate>
               </button>
             </div>
           </div>