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

4 files changed, 62 insertions, 58 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx
index 5b041df7c..5303d14d9 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/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";
@@ -31,7 +32,6 @@ import { InputCurrency } from "../../../../components/form/InputCurrency.js";
 import { InputSelector } from "../../../../components/form/InputSelector.js";
 import { useConfigContext } from "../../../../context/config.js";
 import { MerchantBackend } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import {
   CROCKFORD_BASE32_REGEX,
   URL_REGEX,
@@ -46,7 +46,7 @@ interface Props {
 }
 
 export function CreatePage({ accounts, onCreate, onBack }: Props): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   const { currency } = useConfigContext();
 
   const [state, setState] = useState<Partial<Entity>>({
@@ -58,18 +58,18 @@ export function CreatePage({ accounts, onCreate, onBack }: Props): VNode {
 
   const errors: FormErrors<Entity> = {
     wtid: !state.wtid
-      ? i18n`cannot be empty`
+      ? i18n.str`cannot be empty`
       : !CROCKFORD_BASE32_REGEX.test(state.wtid)
-      ? i18n`check the id, does not look valid`
+      ? i18n.str`check the id, does not look valid`
       : state.wtid.length !== 52
-      ? i18n`should have 52 characters, current ${state.wtid.length}`
+      ? i18n.str`should have 52 characters, current ${state.wtid.length}`
       : undefined,
-    payto_uri: !state.payto_uri ? i18n`cannot be empty` : undefined,
-    credit_amount: !state.credit_amount ? i18n`cannot be empty` : undefined,
+    payto_uri: !state.payto_uri ? i18n.str`cannot be empty` : undefined,
+    credit_amount: !state.credit_amount ? i18n.str`cannot be empty` : undefined,
     exchange_url: !state.exchange_url
-      ? i18n`cannot be empty`
+      ? i18n.str`cannot be empty`
       : !URL_REGEX.test(state.exchange_url)
-      ? i18n`URL doesn't have the right format`
+      ? i18n.str`URL doesn't have the right format`
       : undefined,
   };
 
@@ -95,46 +95,46 @@ export function CreatePage({ accounts, onCreate, onBack }: Props): VNode {
             >
               <InputSelector
                 name="payto_uri"
-                label={i18n`Credited bank account`}
+                label={i18n.str`Credited bank account`}
                 values={accounts}
-                placeholder={i18n`Select one account`}
-                tooltip={i18n`Bank account of the merchant where the payment was received`}
+                placeholder={i18n.str`Select one account`}
+                tooltip={i18n.str`Bank account of the merchant where the payment was received`}
               />
               <Input<Entity>
                 name="wtid"
-                label={i18n`Wire transfer ID`}
+                label={i18n.str`Wire transfer ID`}
                 help=""
-                tooltip={i18n`unique identifier of the wire transfer used by the exchange, must be 52 characters long`}
+                tooltip={i18n.str`unique identifier of the wire transfer used by the exchange, must be 52 characters long`}
               />
               <Input<Entity>
                 name="exchange_url"
-                label={i18n`Exchange URL`}
-                tooltip={i18n`Base URL of the exchange that made the transfer, should have been in the wire transfer subject`}
+                label={i18n.str`Exchange URL`}
+                tooltip={i18n.str`Base URL of the exchange that made the transfer, should have been in the wire transfer subject`}
                 help="http://exchange.taler:8081/"
               />
               <InputCurrency<Entity>
                 name="credit_amount"
-                label={i18n`Amount credited`}
-                tooltip={i18n`Actual amount that was wired to the merchant's bank account`}
+                label={i18n.str`Amount credited`}
+                tooltip={i18n.str`Actual amount that was wired to the merchant's bank account`}
               />
             </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>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx
index db01a57b6..8f41593dd 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx
@@ -19,13 +19,13 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { useInstanceDetails } from "../../../../hooks/instance.js";
 import { useTransferAPI } from "../../../../hooks/transfer.js";
-import { useTranslator } from "../../../../i18n/index.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatePage } from "./CreatePage.js";
 
@@ -38,7 +38,7 @@ interface Props {
 export default function CreateTransfer({ onConfirm, onBack }: Props): VNode {
   const { informTransfer } = useTransferAPI();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   const instance = useInstanceDetails();
   const accounts = !instance.ok
     ? []
@@ -55,7 +55,7 @@ export default function CreateTransfer({ onConfirm, onBack }: Props): VNode {
             .then(() => onConfirm())
             .catch((error) => {
               setNotif({
-                message: i18n`could not inform transfer`,
+                message: i18n.str`could not inform transfer`,
                 type: "ERROR",
                 description: error.message,
               });
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
index cad989980..c77f7737b 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
@@ -19,11 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { FormProvider } from "../../../../components/form/FormProvider.js";
 import { InputSelector } from "../../../../components/form/InputSelector.js";
 import { MerchantBackend } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { CardTable } from "./Table.js";
 
 export interface Props {
@@ -61,7 +61,7 @@ export function ListPage({
 }: Props): VNode {
   const form = { payto_uri: payTo };
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   return (
     <section class="section is-main-section">
       <div class="columns">
@@ -73,10 +73,10 @@ export function ListPage({
           >
             <InputSelector
               name="payto_uri"
-              label={i18n`Address`}
+              label={i18n.str`Address`}
               values={accounts}
-              placeholder={i18n`Select one account`}
-              tooltip={i18n`filter by account address`}
+              placeholder={i18n.str`Select one account`}
+              tooltip={i18n.str`filter by account address`}
             />
           </FormProvider>
         </div>
@@ -87,30 +87,30 @@ export function ListPage({
           <li class={isAllTransfers ? "is-active" : ""}>
             <div
               class="has-tooltip-right"
-              data-tooltip={i18n`remove all filters`}
+              data-tooltip={i18n.str`remove all filters`}
             >
               <a onClick={onShowAll}>
-                <Translate>All</Translate>
+                <i18n.Translate>All</i18n.Translate>
               </a>
             </div>
           </li>
           <li class={isVerifiedTransfers ? "is-active" : ""}>
             <div
               class="has-tooltip-right"
-              data-tooltip={i18n`only show wire transfers confirmed by the merchant`}
+              data-tooltip={i18n.str`only show wire transfers confirmed by the merchant`}
             >
               <a onClick={onShowVerified}>
-                <Translate>Verified</Translate>
+                <i18n.Translate>Verified</i18n.Translate>
               </a>
             </div>
           </li>
           <li class={isNonVerifiedTransfers ? "is-active" : ""}>
             <div
               class="has-tooltip-right"
-              data-tooltip={i18n`only show wire transfers claimed by the exchange`}
+              data-tooltip={i18n.str`only show wire transfers claimed by the exchange`}
             >
               <a onClick={onShowUnverified}>
-                <Translate>Unverified</Translate>
+                <i18n.Translate>Unverified</i18n.Translate>
               </a>
             </div>
           </li>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
index 2341fb80a..e38d375f9 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
@@ -19,11 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { format } from "date-fns";
 import { h, VNode } from "preact";
 import { StateUpdater, useState } from "preact/hooks";
 import { MerchantBackend, WithId } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 
 type Entity = MerchantBackend.Transfers.TransferDetails & WithId;
 
@@ -49,7 +49,7 @@ export function CardTable({
 }: Props): VNode {
   const [rowSelection, rowSelectionHandler] = useState<string[]>([]);
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div class="card has-table">
@@ -58,10 +58,13 @@ export function CardTable({
           <span class="icon">
             <i class="mdi mdi-bank" />
           </span>
-          <Translate>Transfers</Translate>
+          <i18n.Translate>Transfers</i18n.Translate>
         </p>
         <div class="card-header-icon" aria-label="more options">
-          <span class="has-tooltip-left" data-tooltip={i18n`add new transfer`}>
+          <span
+            class="has-tooltip-left"
+            data-tooltip={i18n.str`add new transfer`}
+          >
             <button class="button is-info" type="button" onClick={onCreate}>
               <span class="icon is-small">
                 <i class="mdi mdi-plus mdi-36px" />
@@ -117,42 +120,42 @@ function Table({
   hasMoreAfter,
   hasMoreBefore,
 }: TableProps): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       {onLoadMoreBefore && (
         <button
           class="button is-fullwidth"
-          data-tooltip={i18n`load more transfers before the first one`}
+          data-tooltip={i18n.str`load more transfers before the first one`}
           disabled={!hasMoreBefore}
           onClick={onLoadMoreBefore}
         >
-          <Translate>load newer transfers</Translate>
+          <i18n.Translate>load newer transfers</i18n.Translate>
         </button>
       )}
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>
-              <Translate>ID</Translate>
+              <i18n.Translate>ID</i18n.Translate>
             </th>
             <th>
-              <Translate>Credit</Translate>
+              <i18n.Translate>Credit</i18n.Translate>
             </th>
             <th>
-              <Translate>Address</Translate>
+              <i18n.Translate>Address</i18n.Translate>
             </th>
             <th>
-              <Translate>Exchange URL</Translate>
+              <i18n.Translate>Exchange URL</i18n.Translate>
             </th>
             <th>
-              <Translate>Confirmed</Translate>
+              <i18n.Translate>Confirmed</i18n.Translate>
             </th>
             <th>
-              <Translate>Verified</Translate>
+              <i18n.Translate>Verified</i18n.Translate>
             </th>
             <th>
-              <Translate>Executed at</Translate>
+              <i18n.Translate>Executed at</i18n.Translate>
             </th>
             <th />
           </tr>
@@ -165,23 +168,23 @@ function Table({
                 <td>{i.credit_amount}</td>
                 <td>{i.payto_uri}</td>
                 <td>{i.exchange_url}</td>
-                <td>{i.confirmed ? i18n`yes` : i18n`no`}</td>
-                <td>{i.verified ? i18n`yes` : i18n`no`}</td>
+                <td>{i.confirmed ? i18n.str`yes` : i18n.str`no`}</td>
+                <td>{i.verified ? i18n.str`yes` : i18n.str`no`}</td>
                 <td>
                   {i.execution_time
                     ? i.execution_time.t_s == "never"
-                      ? i18n`never`
+                      ? i18n.str`never`
                       : format(
                           i.execution_time.t_s * 1000,
                           "yyyy/MM/dd HH:mm:ss",
                         )
-                    : i18n`unknown`}
+                    : i18n.str`unknown`}
                 </td>
                 <td>
                   {i.verified === undefined ? (
                     <button
                       class="button is-danger is-small has-tooltip-left"
-                      data-tooltip={i18n`delete selected transfer from the database`}
+                      data-tooltip={i18n.str`delete selected transfer from the database`}
                       onClick={() => onDelete(i)}
                     >
                       Delete
@@ -196,11 +199,11 @@ function Table({
       {onLoadMoreAfter && (
         <button
           class="button is-fullwidth"
-          data-tooltip={i18n`load more transfer after the last one`}
+          data-tooltip={i18n.str`load more transfer after the last one`}
           disabled={!hasMoreAfter}
           onClick={onLoadMoreAfter}
         >
-          <Translate>load older transfers</Translate>
+          <i18n.Translate>load older transfers</i18n.Translate>
         </button>
       )}
     </div>
@@ -208,6 +211,7 @@ function Table({
 }
 
 function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="content has-text-grey has-text-centered">
       <p>
@@ -216,9 +220,9 @@ function EmptyTable(): VNode {
         </span>
       </p>
       <p>
-        <Translate>
+        <i18n.Translate>
           There is no transfer yet, add more pressing the + sign
-        </Translate>
+        </i18n.Translate>
       </p>
     </div>
   );