Merge branch 'master' into feature/tokens

# Conflicts:
#	packages/auditor-backoffice-ui/src/InstanceRoutes.tsx
#	packages/merchant-backoffice-ui/src/declaration.d.ts
#	packages/merchant-backoffice-ui/src/schemas/index.ts

4 files changed, 69 insertions, 109 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx b/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx
index 41fe1374a..a6cd8014d 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
diff --git a/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx
index 9f1b33893..d81410bdf 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
index d7b3a2fa4..dbe21e0e9 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
@@ -19,43 +19,38 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { TalerError } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { Fragment, h, VNode } from "preact";
-import { useBackendContext } from "../../context/backend.js";
-import { useConfigContext } from "../../context/config.js";
+import { Fragment, VNode, h } from "preact";
+import { useSessionContext } from "../../context/session.js";
 import { useInstanceKYCDetails } from "../../hooks/instance.js";
 import { LangSelector } from "./LangSelector.js";
 
-const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
+// const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
 
 interface Props {
-  onLogout: () => void;
-  onShowSettings: () => void;
   mobile?: boolean;
-  instance: string;
-  admin?: boolean;
-  mimic?: boolean;
-  isPasswordOk: boolean;
 }
 
-export function Sidebar({
-  mobile,
-  instance,
-  onShowSettings,
-  onLogout,
-  admin,
-  mimic,
-  isPasswordOk
-}: Props): VNode {
-  const config = useConfigContext();
-  const { url: backendURL } = useBackendContext()
+export function Sidebar({ mobile }: Props): VNode {
   const { i18n } = useTranslationContext();
+  const { state, logOut, config } = useSessionContext();
   const kycStatus = useInstanceKYCDetails();
-  const needKYC = kycStatus.ok && kycStatus.data.type === "redirect";
 
+  const needKYC =
+    kycStatus !== undefined &&
+    !(kycStatus instanceof TalerError) &&
+    kycStatus.type === "ok" &&
+    !!kycStatus.body;
+  const isLoggedIn = state.status === "loggedIn";
+  const hasToken = isLoggedIn && state.token !== undefined;
+  
   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"
@@ -80,7 +75,7 @@ export function Sidebar({
         </div>
       </div>
       <div class="menu is-menu-main">
-        {instance ? (
+        {isLoggedIn ? (
           <Fragment>
             <ul class="menu-list">
               <li>
@@ -169,14 +164,6 @@ export function Sidebar({
                 </a>
               </li>
               <li>
-                <a href={"/reserves"} class="has-icon">
-                  <span class="icon">
-                    <i class="mdi mdi-cash" />
-                  </span>
-                  <span class="menu-item-label">Reserves</span>
-                </a>
-              </li>
-              <li>
                 <a href={"/webhooks"} class="has-icon">
                   <span class="icon">
                     <i class="mdi mdi-newspaper" />
@@ -214,9 +201,7 @@ export function Sidebar({
         </p>
         <ul class="menu-list">
           <li>
-            <a class="has-icon is-state-info is-hoverable"
-              onClick={(): void => onShowSettings()}
-            >
+            <a class="has-icon is-state-info is-hoverable" href="/interface">
               <span class="icon">
                 <i class="mdi mdi-newspaper" />
               </span>
@@ -230,9 +215,7 @@ export function Sidebar({
               <span style={{ width: "3rem" }} class="icon">
                 <i class="mdi mdi-web" />
               </span>
-              <span class="menu-item-label">
-                {new URL(backendURL).hostname}
-              </span>
+              <span class="menu-item-label">{state.backendUrl.hostname}</span>
             </div>
           </li>
           <li>
@@ -240,12 +223,10 @@ export function Sidebar({
               <span style={{ width: "3rem" }} class="icon">
                 ID
               </span>
-              <span class="menu-item-label">
-                {!instance ? "default" : instance}
-              </span>
+              <span class="menu-item-label">{state.instance}</span>
             </div>
           </li>
-          {admin && !mimic && (
+          {state.isAdmin && (
             <Fragment>
               <p class="menu-label">
                 <i18n.Translate>Instances</i18n.Translate>
@@ -272,11 +253,14 @@ export function Sidebar({
               </li>
             </Fragment>
           )}
-          {isPasswordOk ?
+          {hasToken ? (
             <li>
               <a
                 class="has-icon is-state-info is-hoverable"
-                onClick={(): void => onLogout()}
+                onClick={(e): void => {
+                  logOut();
+                  e.preventDefault();
+                }}
               >
                 <span class="icon">
                   <i class="mdi mdi-logout default" />
@@ -285,8 +269,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 a918cb818..123271f8d 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
@@ -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 "../../InstanceRoutes.js";
+import { InstancePaths } from "../../Routing.js";
 import { Notification } from "../../utils/types.js";
 import { NavigationBar } from "./NavigationBar.js";
 import { Sidebar } from "./SideBar.js";
+import { useSessionContext } from "../../context/session.js";
+import { useNavigationContext } from "@gnu-taler/web-util/browser";
 
 function getInstanceTitle(path: string, id: string): string {
   switch (path) {
@@ -83,16 +85,7 @@ function getAdminTitle(path: string, instance: string) {
   return getInstanceTitle(path, instance);
 }
 
-interface MenuProps {
-  title?: string;
-  path: string;
-  instance: string;
-  admin?: boolean;
-  onLogout?: () => void;
-  onShowSettings: () => void;
-  setInstanceName: (s: string) => void;
-  isPasswordOk: boolean;
-}
+interface MenuProps {}
 
 function WithTitle({
   title,
@@ -107,25 +100,18 @@ 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, deImpersonate } = useSessionContext();
+  const { path } = useNavigationContext();
+
+  const titleWithSubtitle = !state.isAdmin
+    ? getInstanceTitle(path, state.instance)
+    : getAdminTitle(path, state.instance);
+
+  const isLoggedIn = state.status === "loggedIn";
+
   return (
     <WithTitle title={titleWithSubtitle}>
       <div
@@ -137,32 +123,26 @@ export function Menu({
           title={titleWithSubtitle}
         />
 
-        {onLogout && (
-          <Sidebar
-            onShowSettings={onShowSettings}
-            onLogout={onLogout}
-            admin={admin}
-            mimic={mimic}
-            instance={instance}
-            mobile={mobileOpen}
-            isPasswordOk={isPasswordOk}
-          />
-        )}
-
-        {mimic && (
-          <nav class="level" style={{
-            zIndex: 100,
-            position: "fixed",
-            width: "50%",
-            marginLeft: "20%"
-          }}>
+        {isLoggedIn && <Sidebar mobile={mobileOpen} />}
+
+        {state.status !== "loggedOut" && state.impersonated && (
+          <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");
+                  onClick={() => {
+                    deImpersonate();
                   }}
                 >
                   go back
@@ -244,18 +224,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 } = useSessionContext();
 
   useEffect(() => {
     document.title = `Taler Backoffice: ${title}`;
   }, [title]);
 
+  const isLoggedIn = state.status === "loggedIn";
+
   return (
     <div
       class={mobileOpen ? "has-aside-mobile-expanded" : ""}
@@ -265,9 +243,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>
   );
 }