show error like bank

6 files changed, 46 insertions, 25 deletions

diff --git a/packages/bank-ui/src/app.tsx b/packages/bank-ui/src/app.tsx
index 29dabddd6..1ea8c69ca 100644
--- a/packages/bank-ui/src/app.tsx
+++ b/packages/bank-ui/src/app.tsx
@@ -37,7 +37,7 @@ import { Routing } from "./Routing.js";
 import { SettingsProvider } from "./context/settings.js";
 import { strings } from "./i18n/strings.js";
 import { BankFrame } from "./pages/BankFrame.js";
-import { BankUiSettings, fetchSettings } from "./settings.js";
+import { UiSettings, fetchSettings } from "./settings.js";
 import {
   revalidateAccountDetails,
   revalidatePublicAccounts,
@@ -51,7 +51,7 @@ import {
 const WITH_LOCAL_STORAGE_CACHE = false;
 
 export function App() {
-  const [settings, setSettings] = useState<BankUiSettings>();
+  const [settings, setSettings] = useState<UiSettings>();
   useEffect(() => {
     fetchSettings(setSettings);
   }, []);
diff --git a/packages/bank-ui/src/context/settings.ts b/packages/bank-ui/src/context/settings.ts
index 053fcbd12..6c61a7b4a 100644
--- a/packages/bank-ui/src/context/settings.ts
+++ b/packages/bank-ui/src/context/settings.ts
@@ -16,16 +16,16 @@
 
 import { ComponentChildren, createContext, h, VNode } from "preact";
 import { useContext } from "preact/hooks";
-import { BankUiSettings } from "../settings.js";
+import { UiSettings } from "../settings.js";
 
 /**
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-export type Type = BankUiSettings;
+export type Type = UiSettings;
 
-const initial: BankUiSettings = {};
+const initial: UiSettings = {};
 const Context = createContext<Type>(initial);
 
 export const useSettingsContext = (): Type => useContext(Context);
@@ -34,7 +34,7 @@ export const SettingsProvider = ({
   children,
   value,
 }: {
-  value: BankUiSettings;
+  value: UiSettings;
   children: ComponentChildren;
 }): VNode => {
   return h(Context.Provider, {
diff --git a/packages/bank-ui/src/pages/RegistrationPage.tsx b/packages/bank-ui/src/pages/RegistrationPage.tsx
index 18f926e00..5dd19a63f 100644
--- a/packages/bank-ui/src/pages/RegistrationPage.tsx
+++ b/packages/bank-ui/src/pages/RegistrationPage.tsx
@@ -14,21 +14,20 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 import {
-  AccessToken,
   HttpStatusCode,
-  TalerErrorCode,
+  TalerErrorCode
 } from "@gnu-taler/taler-util";
 import {
   LocalNotificationBanner,
+  RouteDefinition,
   ShowInputErrorLabel,
+  useBankCoreApiContext,
   useLocalNotification,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
-import { useBankCoreApiContext } from "@gnu-taler/web-util/browser";
 import { useSettingsContext } from "../context/settings.js";
-import { RouteDefinition } from "@gnu-taler/web-util/browser";
 import { undefinedIfEmpty } from "../utils.js";
 import { getRandomPassword, getRandomUsername } from "./rnd.js";
 
diff --git a/packages/bank-ui/src/settings.ts b/packages/bank-ui/src/settings.ts
index 968fe6248..c085c7cd8 100644
--- a/packages/bank-ui/src/settings.ts
+++ b/packages/bank-ui/src/settings.ts
@@ -24,7 +24,7 @@ import {
   codecOptional,
 } from "@gnu-taler/taler-util";
 
-export interface BankUiSettings {
+export interface UiSettings {
   // Where libeufin backend is localted
   // default: window.origin without "webui/"
   backendBaseURL?: string;
@@ -50,7 +50,7 @@ export interface BankUiSettings {
 /**
  * Global settings for the bank UI.
  */
-const defaultSettings: BankUiSettings = {
+const defaultSettings: UiSettings = {
   backendBaseURL: buildDefaultBackendBaseURL(),
   iconLinkURL: undefined,
   simplePasswordForRandomAccounts: false,
@@ -58,8 +58,8 @@ const defaultSettings: BankUiSettings = {
   topNavSites: {},
 };
 
-const codecForBankUISettings = (): Codec<BankUiSettings> =>
-  buildCodecForObject<BankUiSettings>()
+const codecForUISettings = (): Codec<UiSettings> =>
+  buildCodecForObject<UiSettings>()
     .property("backendBaseURL", codecOptional(codecForString()))
     .property("allowRandomAccountCreation", codecOptional(codecForBoolean()))
     .property(
@@ -68,7 +68,7 @@ const codecForBankUISettings = (): Codec<BankUiSettings> =>
     )
     .property("iconLinkURL", codecOptional(codecForString()))
     .property("topNavSites", codecOptional(codecForMap(codecForString())))
-    .build("BankUiSettings");
+    .build("UiSettings");
 
 function removeUndefineField<T extends object>(obj: T): T {
   const keys = Object.keys(obj) as Array<keyof T>;
@@ -80,10 +80,10 @@ function removeUndefineField<T extends object>(obj: T): T {
   }, obj);
 }
 
-export function fetchSettings(listener: (s: BankUiSettings) => void): void {
+export function fetchSettings(listener: (s: UiSettings) => void): void {
   fetch("./settings.json")
     .then((resp) => resp.json())
-    .then((json) => codecForBankUISettings().decode(json))
+    .then((json) => codecForUISettings().decode(json))
     .then((result) =>
       listener({
         ...defaultSettings,
diff --git a/packages/merchant-backoffice-ui/src/context/session.ts b/packages/merchant-backoffice-ui/src/context/session.ts
index dbd188ccd..fa5e14ab3 100644
--- a/packages/merchant-backoffice-ui/src/context/session.ts
+++ b/packages/merchant-backoffice-ui/src/context/session.ts
@@ -139,6 +139,15 @@ const Context = createContext<SessionStateHandler>(undefined!);
 
 export const useSessionContext = (): SessionStateHandler => useContext(Context);
 
+/**
+ * Creates the session in loggedIn state.
+ * Infer the instance name based on the URL.
+ * Create the instance of the merchant api http rest.
+ * Returns API that handle impersonation.
+ * 
+ * @param param0 
+ * @returns 
+ */
 export const SessionContextProvider = ({
   children,
   // value,
diff --git a/packages/web-util/src/context/exchange-api.ts b/packages/web-util/src/context/exchange-api.ts
index 6f0b6b9f4..39f889ba9 100644
--- a/packages/web-util/src/context/exchange-api.ts
+++ b/packages/web-util/src/context/exchange-api.ts
@@ -32,7 +32,7 @@ import {
   h,
 } from "preact";
 import { useContext, useEffect, useState } from "preact/hooks";
-import { BrowserFetchHttpLib } from "../index.browser.js";
+import { BrowserFetchHttpLib, ErrorLoading, useTranslationContext } from "../index.browser.js";
 import {
   APIClient,
   ActiviyTracker,
@@ -89,14 +89,11 @@ export const ExchangeApiProvider = ({
   baseUrl: URL;
   evictors?: Evictors;
   children: ComponentChildren;
-  frameOnError: FunctionComponent<{
-    state:
-      | ConfigResultFail<TalerExchangeApi.ExchangeVersionResponse>
-      | undefined;
-  }>;
+  frameOnError: FunctionComponent<{ children: ComponentChildren }>;
 }): VNode => {
   const [checked, setChecked] =
     useState<ConfigResult<TalerExchangeApi.ExchangeVersionResponse>>();
+    const { i18n } = useTranslationContext();
 
   const { getRemoteConfig, VERSION, lib, cancelRequest, onActivity } =
     buildExchangeApiClient(baseUrl, evictors);
@@ -135,8 +132,24 @@ export const ExchangeApiProvider = ({
     };
   }, []);
 
-  if (!checked || checked.type !== "ok") {
-    return h(frameOnError, { state: checked }, []);
+  if (checked === undefined) {
+    return h(frameOnError, {
+      children: h("div", {}, "checking compatibility with server..."),
+    });
+  }
+  if (checked.type === "error") {
+    return h(frameOnError, {
+      children: h(ErrorLoading, { error: checked.error, showDetail: true }),
+    });
+  }
+  if (checked.type === "incompatible") {
+    return h(frameOnError, {
+      children: h(
+        "div",
+        {},
+        i18n.str`The server version is not supported. Supported version "${checked.supported}", server version "${checked.result.version}"`,
+      ),
+    });
   }
 
   const value: ExchangeContextType = {