From c59f9a2556731ad95ab8bd7eefe7fa8a41629834 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 20 Dec 2022 17:45:24 -0300
Subject: use translation context from web-utils, don't use match react-router
 since is broken

---
 .../src/paths/instance/details/DetailPage.tsx           |  8 ++++----
 .../src/paths/instance/details/stories.tsx              | 17 +++++++++++++----
 2 files changed, 17 insertions(+), 8 deletions(-)

(limited to 'packages/merchant-backoffice-ui/src/paths/instance/details')

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
index 59aa7a1d2..4ab415e85 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
@@ -19,12 +19,12 @@
  * @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 { FormProvider } from "../../../components/form/FormProvider.js";
 import { Input } from "../../../components/form/Input.js";
 import { MerchantBackend } from "../../../declaration.js";
-import { useTranslator } from "../../../i18n/index.js";
 
 type Entity = MerchantBackend.Instances.InstanceReconfigurationMessage;
 interface Props {
@@ -49,7 +49,7 @@ function convert(
 export function DetailPage({ selected }: Props): VNode {
   const [value, valueHandler] = useState<Partial<Entity>>(convert(selected));
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div>
@@ -73,11 +73,11 @@ export function DetailPage({ selected }: Props): VNode {
           <div class="column" />
           <div class="column is-6">
             <FormProvider<Entity> object={value} valueHandler={valueHandler}>
-              <Input<Entity> name="name" readonly label={i18n`Name`} />
+              <Input<Entity> name="name" readonly label={i18n.str`Name`} />
               <Input<Entity>
                 name="payto_uris"
                 readonly
-                label={i18n`Account address`}
+                label={i18n.str`Account address`}
               />
             </FormProvider>
           </div>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx
index 9ac1c4381..cdbe732a4 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx
@@ -20,6 +20,7 @@
  */
 
 import { h, VNode, FunctionalComponent } from "preact";
+import { ConfigContextProvider } from "../../../context/config.js";
 import { DetailPage as TestedComponent } from "./DetailPage.js";
 
 export default {
@@ -32,12 +33,20 @@ export default {
 };
 
 function createExample<Props>(
-  Component: FunctionalComponent<Props>,
+  Internal: FunctionalComponent<Props>,
   props: Partial<Props>,
 ) {
-  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, {
-- 
cgit v1.2.3