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

4 files changed, 54 insertions, 39 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx
index 052d61544..91b6b4b56 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx
@@ -20,6 +20,7 @@
  */
 
 import { h, VNode, FunctionalComponent } from "preact";
+import { ConfigContextProvider } from "../../../context/config.js";
 import { CreatePage as TestedComponent } from "./CreatePage.js";
 
 export default {
@@ -35,7 +36,16 @@ function createExample<Props>(
   Component: FunctionalComponent<Props>,
   props: Partial<Props>,
 ) {
-  const r = (args: any) => <Component {...args} />;
+  const r = (args: any) => (
+    <ConfigContextProvider
+      value={{
+        currency: "ARS",
+        version: "1",
+      }}
+    >
+      <Component {...args} />
+    </ConfigContextProvider>
+  );
   r.args = props;
   return r;
 }
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
index 6fcabb18b..bf5f5d7c9 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
@@ -19,20 +19,19 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { Amounts } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import * as yup from "yup";
 import { AsyncButton } from "../../../components/exception/AsyncButton.js";
 import {
   FormErrors,
   FormProvider,
 } from "../../../components/form/FormProvider.js";
+import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js";
 import { SetTokenNewInstanceModal } from "../../../components/modal/index.js";
 import { MerchantBackend } from "../../../declaration.js";
-import { Translate, useTranslator } from "../../../i18n/index.js";
-import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js";
 import { INSTANCE_ID_REGEX, PAYTO_REGEX } from "../../../utils/constants.js";
-import { Amounts } from "@gnu-taler/taler-util";
 import { undefinedIfEmpty } from "../../../utils/table.js";
 
 export type Entity = MerchantBackend.Instances.InstanceConfigurationMessage & {
@@ -61,55 +60,57 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
   const [isTokenDialogActive, updateIsTokenDialogActive] =
     useState<boolean>(false);
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const errors: FormErrors<Entity> = {
     id: !value.id
-      ? i18n`required`
+      ? i18n.str`required`
       : !INSTANCE_ID_REGEX.test(value.id)
-      ? i18n`is not valid`
+      ? i18n.str`is not valid`
       : undefined,
-    name: !value.name ? i18n`required` : undefined,
+    name: !value.name ? i18n.str`required` : undefined,
     payto_uris:
       !value.payto_uris || !value.payto_uris.length
-        ? i18n`required`
+        ? i18n.str`required`
         : undefinedIfEmpty(
             value.payto_uris.map((p) => {
-              return !PAYTO_REGEX.test(p) ? i18n`is not valid` : undefined;
+              return !PAYTO_REGEX.test(p) ? i18n.str`is not valid` : undefined;
             }),
           ),
     default_max_deposit_fee: !value.default_max_deposit_fee
-      ? i18n`required`
+      ? i18n.str`required`
       : !Amounts.parse(value.default_max_deposit_fee)
-      ? i18n`invalid format`
+      ? i18n.str`invalid format`
       : undefined,
     default_max_wire_fee: !value.default_max_wire_fee
-      ? i18n`required`
+      ? i18n.str`required`
       : !Amounts.parse(value.default_max_wire_fee)
-      ? i18n`invalid format`
+      ? i18n.str`invalid format`
       : undefined,
     default_wire_fee_amortization:
       value.default_wire_fee_amortization === undefined
-        ? i18n`required`
+        ? i18n.str`required`
         : isNaN(value.default_wire_fee_amortization)
-        ? i18n`is not a number`
+        ? i18n.str`is not a number`
         : value.default_wire_fee_amortization < 1
-        ? i18n`must be 1 or greater`
+        ? i18n.str`must be 1 or greater`
         : undefined,
-    default_pay_delay: !value.default_pay_delay ? i18n`required` : undefined,
+    default_pay_delay: !value.default_pay_delay
+      ? i18n.str`required`
+      : undefined,
     default_wire_transfer_delay: !value.default_wire_transfer_delay
-      ? i18n`required`
+      ? i18n.str`required`
       : undefined,
     address: undefinedIfEmpty({
       address_lines:
         value.address?.address_lines && value.address?.address_lines.length > 7
-          ? i18n`max 7 lines`
+          ? i18n.str`max 7 lines`
           : undefined,
     }),
     jurisdiction: undefinedIfEmpty({
       address_lines:
         value.address?.address_lines && value.address?.address_lines.length > 7
-          ? i18n`max 7 lines`
+          ? i18n.str`max 7 lines`
           : undefined,
     }),
   };
@@ -174,14 +175,14 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
               <h1 class="title">
                 <button
                   class="button is-danger has-tooltip-bottom"
-                  data-tooltip={i18n`change authorization configuration`}
+                  data-tooltip={i18n.str`change authorization configuration`}
                   onClick={() => updateIsTokenDialogActive(true)}
                 >
                   <div class="icon is-centered">
                     <i class="mdi mdi-lock-reset" />
                   </div>
                   <span>
-                    <Translate>Set access token</Translate>
+                    <i18n.Translate>Set access token</i18n.Translate>
                   </span>
                 </button>
               </h1>
@@ -205,7 +206,7 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
             <div class="buttons is-right mt-5">
               {onBack && (
                 <button class="button" onClick={onBack}>
-                  <Translate>Cancel</Translate>
+                  <i18n.Translate>Cancel</i18n.Translate>
                 </button>
               )}
               <AsyncButton
@@ -213,11 +214,11 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
                 disabled={!isTokenSet || hasErrors}
                 data-tooltip={
                   hasErrors
-                    ? i18n`Need to complete marked fields and choose authorization method`
+                    ? i18n.str`Need to complete marked fields and choose authorization method`
                     : "confirm operation"
                 }
               >
-                <Translate>Confirm</Translate>
+                <i18n.Translate>Confirm</i18n.Translate>
               </AsyncButton>
             </div>
           </div>
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx
index ed2f3f068..4da6916a0 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx
@@ -17,12 +17,12 @@
  *
  * @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 { useAdminAPI } from "../../../hooks/instance.js";
-import { useTranslator } from "../../../i18n/index.js";
 import { Notification } from "../../../utils/types.js";
 import { CreatePage } from "./CreatePage.js";
 import { InstanceCreatedSuccessfully } from "./InstanceCreatedSuccessfully.js";
@@ -38,7 +38,7 @@ export default function Create({ onBack, onConfirm, forceId }: Props): VNode {
   const { createInstance } = useAdminAPI();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const [createdOk, setCreatedOk] = useState<Entity | undefined>(undefined);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   if (createdOk) {
     return (
@@ -62,7 +62,7 @@ export default function Create({ onBack, onConfirm, forceId }: Props): VNode {
             })
             .catch((error) => {
               setNotif({
-                message: i18n`Failed to create instance`,
+                message: i18n.str`Failed to create instance`,
                 type: "ERROR",
                 description: error.message,
               });
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/stories.ts b/packages/merchant-backoffice-ui/src/paths/admin/create/stories.tsx
index 45b94ec8c..0012f9b9b 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/create/stories.ts
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/stories.tsx
@@ -20,6 +20,7 @@
  */
 
 import { h, VNode, FunctionalComponent } from "preact";
+import { ConfigContextProvider } from "../../../context/config.js";
 import { CreatePage as TestedComponent } from "./CreatePage.js";
 
 export default {
@@ -32,17 +33,20 @@ export default {
 };
 
 function createExample<Props>(
-  Component: FunctionalComponent<Props>,
+  Internal: FunctionalComponent<Props>,
   props: Partial<Props>,
 ) {
-  const r = (args: any) => h(Component, args);
-  // const r = (args: any) => <Component {...args} />;
-  r.args = props;
-  return r;
+  const component = (args: any) => (
+    <ConfigContextProvider
+      value={{
+        currency: "TESTKUDOS",
+        version: "1",
+      }}
+    >
+      <Internal {...(props as any)} />
+    </ConfigContextProvider>
+  );
+  return { component, props };
 }
 
 export const Example = createExample(TestedComponent, {});
-// export const Example = (a: any): VNode => <CreatePage {...a} />;
-// Example.args = {
-//   isLoading: false
-// }