2 files changed, 35 insertions, 38 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
index a9b9618bb..adc47b216 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
@@ -19,12 +19,14 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { useMerchantApiContext, useTranslationContext } from "@gnu-taler/web-util/browser";
-import { Fragment, h, VNode } from "preact";
-import { useConfigContext } from "../../context/config.js";
+import {
+  useMerchantApiContext,
+  useTranslationContext,
+} from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
+import { useSessionContext } from "../../context/session.js";
 import { useInstanceKYCDetails } from "../../hooks/instance.js";
 import { LangSelector } from "./LangSelector.js";
-import { useSessionState } from "../../hooks/session.js";
 
 // const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
@@ -33,20 +35,21 @@ interface Props {
   mobile?: boolean;
 }
 
-export function Sidebar({
-  mobile,
-}: Props): VNode {
-  const config = useConfigContext();
-  // const { url: backendURL } = useBackendContext()
+export function Sidebar({ mobile }: Props): VNode {
   const { i18n } = useTranslationContext();
   const kycStatus = useInstanceKYCDetails();
   const needKYC = kycStatus.ok && kycStatus.data.type === "redirect";
-  const { state, logOut } = useSessionState();
-  const { url } = useMerchantApiContext();
-  const isLoggedIn = state.status === "loggedIn" || state.status === "impersonate"
-  const hasToken = isLoggedIn && state.token !== undefined
+  const { state, logOut } = useSessionContext();
+  const isLoggedIn = state.status === "loggedIn";
+  const hasToken = isLoggedIn && state.token !== undefined;
+  const backendURL = state.backendUrl;
+  const { config } = useMerchantApiContext();
+
   return (
-    <aside class="aside is-placed-left is-expanded" style={{ overflowY: "scroll" }}>
+    <aside
+      class="aside is-placed-left is-expanded"
+      style={{ overflowY: "scroll" }}
+    >
       {mobile && (
         <div
           class="footer"
@@ -187,9 +190,10 @@ export function Sidebar({
         </p>
         <ul class="menu-list">
           <li>
-            <a class="has-icon is-state-info is-hoverable"
+            <a
+              class="has-icon is-state-info is-hoverable"
               onClick={(e): void => {
-                e.preventDefault()
+                e.preventDefault();
               }}
             >
               <span class="icon">
@@ -206,7 +210,7 @@ export function Sidebar({
                 <i class="mdi mdi-web" />
               </span>
               <span class="menu-item-label">
-                {url.hostname}
+                {new URL(backendURL).hostname}
               </span>
             </div>
           </li>
@@ -215,12 +219,10 @@ export function Sidebar({
               <span style={{ width: "3rem" }} class="icon">
                 ID
               </span>
-              <span class="menu-item-label">
-                {state.instance}
-              </span>
+              <span class="menu-item-label">{state.instance}</span>
             </div>
           </li>
-          {state.isAdmin && state.status !== "impersonate" && (
+          {state.isAdmin && (
             <Fragment>
               <p class="menu-label">
                 <i18n.Translate>Instances</i18n.Translate>
@@ -247,12 +249,12 @@ export function Sidebar({
               </li>
             </Fragment>
           )}
-          {hasToken ?
+          {hasToken ? (
             <li>
               <a
                 class="has-icon is-state-info is-hoverable"
                 onClick={(e): void => {
-                  logOut()
+                  logOut();
                   e.preventDefault();
                 }}
               >
@@ -263,8 +265,8 @@ export function Sidebar({
                   <i18n.Translate>Log out</i18n.Translate>
                 </span>
               </a>
-            </li> : undefined
-          }
+            </li>
+          ) : undefined}
         </ul>
       </div>
     </aside>
diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
index fa2de563e..aa955db4e 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
@@ -21,7 +21,7 @@ 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 { useSessionContext } from "../../context/session.js";
 import { useNavigationContext } from "@gnu-taler/web-util/browser";
 
 function getInstanceTitle(path: string, id: string): string {
@@ -97,15 +97,14 @@ function WithTitle({
 export function Menu(_p: MenuProps): VNode {
   const [mobileOpen, setMobileOpen] = useState(false);
 
-  const { state, logIn } = useSessionState();
+  const { state, deImpersonate } = useSessionContext();
   const { path } = useNavigationContext();
 
   const titleWithSubtitle = !state.isAdmin
     ? getInstanceTitle(path, state.instance)
     : getAdminTitle(path, state.instance);
 
-  const isLoggedIn =
-    state.status === "loggedIn" || state.status === "impersonate";
+  const isLoggedIn =state.status === "loggedIn";
 
   return (
     <WithTitle title={titleWithSubtitle}>
@@ -119,10 +118,10 @@ export function Menu(_p: MenuProps): VNode {
         />
 
         {isLoggedIn && (
-          <Sidebar mobile={mobileOpen} mimic={state.status === "impersonate"} />
+          <Sidebar mobile={mobileOpen} />
         )}
 
-        {state.status === "impersonate" && (
+        {state.status !== "loggedOut" && state.impersonate !== undefined && (
           <nav
             class="level"
             style={{
@@ -139,10 +138,7 @@ export function Menu(_p: MenuProps): VNode {
                 <a
                   href="#/instances"
                   onClick={(e) => {
-                    logIn({
-                      instance: state.originalInstance,
-                      token: state.originalToken,
-                    });
+                    deImpersonate();
                     e.preventDefault();
                   }}
                 >
@@ -227,14 +223,13 @@ export function NotConnectedAppMenu({
 
 export function NotYetReadyAppMenu({ title }: NotYetReadyAppMenuProps): VNode {
   const [mobileOpen, setMobileOpen] = useState(false);
-  const { state } = useSessionState();
+  const { state } = useSessionContext();
 
   useEffect(() => {
     document.title = `Taler Backoffice: ${title}`;
   }, [title]);
   
-  const isLoggedIn =
-    state.status === "loggedIn" || state.status === "impersonate";
+  const isLoggedIn = state.status === "loggedIn";
 
   return (
     <div