1 files changed, 40 insertions, 53 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
index 57d401ffa..fa2de563e 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
@@ -17,10 +17,12 @@
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { AdminPaths } from "../../AdminRoutes.js";
-import { InstancePaths } from "../../Rounting.js";
+import { InstancePaths } from "../../Routing.js";
 import { Notification } from "../../utils/types.js";
 import { NavigationBar } from "./NavigationBar.js";
 import { Sidebar } from "./SideBar.js";
+import { useSessionState } from "../../hooks/session.js";
+import { useNavigationContext } from "@gnu-taler/web-util/browser";
 
 function getInstanceTitle(path: string, id: string): string {
   switch (path) {
@@ -77,13 +79,7 @@ function getAdminTitle(path: string, instance: string) {
   return getInstanceTitle(path, instance);
 }
 
-interface MenuProps {
-  title?: string;
-  instance: string;
-  admin?: boolean;
-  onLogout?: () => void;
-  onShowSettings: () => void;
-}
+interface MenuProps {}
 
 function WithTitle({
   title,
@@ -98,25 +94,19 @@ function WithTitle({
   return <Fragment>{children}</Fragment>;
 }
 
-export function Menu({
-  onLogout,
-  onShowSettings,
-  title,
-  instance,
-  path,
-  admin,
-  setInstanceName,
-  isPasswordOk
-}: MenuProps): VNode {
+export function Menu(_p: MenuProps): VNode {
   const [mobileOpen, setMobileOpen] = useState(false);
 
-  const titleWithSubtitle = title
-    ? title
-    : !admin
-      ? getInstanceTitle(path, instance)
-      : getAdminTitle(path, instance);
-  const adminInstance = instance === "default";
-  const mimic = admin && !adminInstance;
+  const { state, logIn } = useSessionState();
+  const { path } = useNavigationContext();
+
+  const titleWithSubtitle = !state.isAdmin
+    ? getInstanceTitle(path, state.instance)
+    : getAdminTitle(path, state.instance);
+
+  const isLoggedIn =
+    state.status === "loggedIn" || state.status === "impersonate";
+
   return (
     <WithTitle title={titleWithSubtitle}>
       <div
@@ -128,32 +118,32 @@ export function Menu({
           title={titleWithSubtitle}
         />
 
-        {onLogout && (
-          <Sidebar
-            onShowSettings={onShowSettings}
-            onLogout={onLogout}
-            admin={admin}
-            mimic={mimic}
-            instance={instance}
-            mobile={mobileOpen}
-            isPasswordOk={isPasswordOk}
-          />
+        {isLoggedIn && (
+          <Sidebar mobile={mobileOpen} mimic={state.status === "impersonate"} />
         )}
 
-        {mimic && (
-          <nav class="level" style={{
-            zIndex: 100,
-            position: "fixed",
-            width: "50%",
-            marginLeft: "20%"
-          }}>
+        {state.status === "impersonate" && (
+          <nav
+            class="level"
+            style={{
+              zIndex: 100,
+              position: "fixed",
+              width: "50%",
+              marginLeft: "20%",
+            }}
+          >
             <div class="level-item has-text-centered has-background-warning">
               <p class="is-size-5">
-                You are viewing the instance <b>&quot;{instance}&quot;</b>.{" "}
+                You are viewing the instance <b>&quot;{state.instance}&quot;</b>
+                .{" "}
                 <a
                   href="#/instances"
                   onClick={(e) => {
-                    setInstanceName("default");
+                    logIn({
+                      instance: state.originalInstance,
+                      token: state.originalToken,
+                    });
+                    e.preventDefault();
                   }}
                 >
                   go back
@@ -235,17 +225,16 @@ export function NotConnectedAppMenu({
   );
 }
 
-export function NotYetReadyAppMenu({
-  onLogout,
-  onShowSettings,
-  title,
-  isPasswordOk
-}: NotYetReadyAppMenuProps): VNode {
+export function NotYetReadyAppMenu({ title }: NotYetReadyAppMenuProps): VNode {
   const [mobileOpen, setMobileOpen] = useState(false);
+  const { state } = useSessionState();
 
   useEffect(() => {
     document.title = `Taler Backoffice: ${title}`;
   }, [title]);
+  
+  const isLoggedIn =
+    state.status === "loggedIn" || state.status === "impersonate";
 
   return (
     <div
@@ -256,9 +245,7 @@ export function NotYetReadyAppMenu({
         onMobileMenu={() => setMobileOpen(!mobileOpen)}
         title={title}
       />
-      {onLogout && (
-        <Sidebar onShowSettings={onShowSettings} onLogout={onLogout} instance="" mobile={mobileOpen} isPasswordOk={isPasswordOk} />
-      )}
+      {isLoggedIn && <Sidebar mobile={mobileOpen} />}
     </div>
   );
 }