1 files changed, 13 insertions, 10 deletions
diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx
index 0b92375c1..84536396d 100644
--- a/packages/merchant-backoffice-ui/src/Application.tsx
+++ b/packages/merchant-backoffice-ui/src/Application.tsx
@@ -19,6 +19,10 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import {
+  TranslationProvider,
+  useTranslationContext,
+} from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { route } from "preact-router";
 import { useMemo } from "preact/hooks";
@@ -33,16 +37,15 @@ import {
   useBackendContext,
 } from "./context/backend.js";
 import { ConfigContextProvider } from "./context/config.js";
-import { TranslationProvider } from "./context/translation.js";
 import { useBackendConfig } from "./hooks/backend.js";
-import { useTranslator } from "./i18n/index.js";
+import { strings } from "./i18n/strings.js";
 import LoginPage from "./paths/login/index.js";
 
 export function Application(): VNode {
   return (
     // <FetchContextProvider>
     <BackendContextProvider>
-      <TranslationProvider>
+      <TranslationProvider source={strings}>
         <ApplicationStatusRoutes />
       </TranslationProvider>
     </BackendContextProvider>
@@ -53,7 +56,7 @@ export function Application(): VNode {
 function ApplicationStatusRoutes(): VNode {
   const { updateLoginStatus, triedToLog } = useBackendContext();
   const result = useBackendConfig();
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const updateLoginInfoAndGoToRoot = (url: string, token?: string) => {
     updateLoginStatus(url, token);
@@ -88,7 +91,7 @@ function ApplicationStatusRoutes(): VNode {
         <NotYetReadyAppMenu title="Error" />
         <NotificationCard
           notification={{
-            message: i18n`Server not found`,
+            message: i18n.str`Server not found`,
             type: "ERROR",
             description: `Check your url`,
           }}
@@ -103,9 +106,9 @@ function ApplicationStatusRoutes(): VNode {
         <NotYetReadyAppMenu title="Error" />
         <NotificationCard
           notification={{
-            message: i18n`Couldn't access the server`,
+            message: i18n.str`Couldn't access the server`,
             type: "ERROR",
-            description: i18n`Got message ${result.message} from ${result.info?.url}`,
+            description: i18n.str`Got message ${result.message} from ${result.info?.url}`,
           }}
         />
         <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
@@ -120,9 +123,9 @@ function ApplicationStatusRoutes(): VNode {
         <NotYetReadyAppMenu title="Error" />
         <NotificationCard
           notification={{
-            message: i18n`Unexpected Error`,
+            message: i18n.str`Unexpected Error`,
             type: "ERROR",
-            description: i18n`Got message ${result.message} from ${result.info?.url}`,
+            description: i18n.str`Got message ${result.message} from ${result.info?.url}`,
           }}
         />
         <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
@@ -130,7 +133,7 @@ function ApplicationStatusRoutes(): VNode {
     );
 
   return (
-    <div id="app" class="has-navbar-fixed-top">
+    <div class="has-navbar-fixed-top">
       <ConfigContextProvider value={ctx}>
         <ApplicationReadyRoutes />
       </ConfigContextProvider>