1 files changed, 58 insertions, 23 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index ed36daa21..0fb75b87b 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -15,6 +15,7 @@
  */
 
 import { Logger } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import talerLogo from "../assets/logo-white.svg";
 import { LangSelectorLikePy as LangSelector } from "../components/LangSelector.js";
@@ -24,41 +25,46 @@ import {
   PageStateType,
   usePageContext,
 } from "../context/pageState.js";
-import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { useBusinessAccountDetails } from "../hooks/circuit.js";
 import { bankUiSettings } from "../settings.js";
 
 const logger = new Logger("BankFrame");
 
+function MaybeBusinessButton({
+  account,
+  onClick,
+}: {
+  account: string;
+  onClick: () => void;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  const result = useBusinessAccountDetails(account);
+  if (!result.ok) return <Fragment />;
+  return (
+    <div class="some-space">
+      <a
+        href="#"
+        class="pure-button pure-button-primary"
+        onClick={(e) => {
+          e.preventDefault();
+          onClick();
+        }}
+      >{i18n.str`Business Profile`}</a>
+    </div>
+  );
+}
+
 export function BankFrame({
   children,
+  goToBusinessAccount,
 }: {
   children: ComponentChildren;
+  goToBusinessAccount?: () => void;
 }): VNode {
   const { i18n } = useTranslationContext();
   const backend = useBackendContext();
   const { pageState, pageStateSetter } = usePageContext();
   logger.trace("state", pageState);
-  const logOut = (
-    <div class="logout">
-      <a
-        href="#"
-        class="pure-button logout-button"
-        onClick={() => {
-          pageStateSetter((prevState: PageStateType) => {
-            const { talerWithdrawUri, withdrawalId, ...rest } = prevState;
-            backend.logOut();
-            return {
-              ...rest,
-              withdrawalInProgress: false,
-              error: undefined,
-              info: undefined,
-              isRawPayto: false,
-            };
-          });
-        }}
-      >{i18n.str`Logout`}</a>
-    </div>
-  );
 
   const demo_sites = [];
   for (const i in bankUiSettings.demoSites)
@@ -120,7 +126,36 @@ export function BankFrame({
           />
         )}
         <StatusBanner />
-        {backend.state.status === "loggedIn" ? logOut : null}
+        {backend.state.status === "loggedIn" ? (
+          <div class="top-right">
+            {goToBusinessAccount ? (
+              <MaybeBusinessButton
+                account={backend.state.username}
+                onClick={goToBusinessAccount}
+              />
+            ) : undefined}
+            <div class="some-space">
+              <a
+                href="#"
+                class="pure-button logout-button"
+                onClick={() => {
+                  pageStateSetter((prevState: PageStateType) => {
+                    const { talerWithdrawUri, withdrawalId, ...rest } =
+                      prevState;
+                    backend.logOut();
+                    return {
+                      ...rest,
+                      withdrawalInProgress: false,
+                      error: undefined,
+                      info: undefined,
+                      isRawPayto: false,
+                    };
+                  });
+                }}
+              >{i18n.str`Logout`}</a>
+            </div>
+          </div>
+        ) : null}
         {children}
       </section>
       <section id="footer" class="footer">