1 files changed, 36 insertions, 3 deletions
diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx
index d752d612d..497f49c0e 100644
--- a/packages/merchant-backoffice-ui/src/Application.tsx
+++ b/packages/merchant-backoffice-ui/src/Application.tsx
@@ -19,12 +19,14 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { canonicalizeBaseUrl } from "@gnu-taler/taler-util";
+import { TalerMerchantApi, assertUnreachable, canonicalizeBaseUrl } from "@gnu-taler/taler-util";
 import {
   BrowserHashNavigationProvider,
+  ConfigResultFail,
   MerchantApiProvider,
   TalerWalletIntegrationBrowserProvider,
-  TranslationProvider
+  TranslationProvider,
+  useTranslationContext
 } from "@gnu-taler/web-util/browser";
 import { VNode, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
@@ -34,8 +36,10 @@ import { Loading } from "./components/exception/loading.js";
 import { SettingsProvider } from "./context/settings.js";
 import { strings } from "./i18n/strings.js";
 import { MerchantUiSettings, buildDefaultBackendBaseURL, fetchSettings } from "./settings.js";
+import { NotificationCard } from "./components/menu/index.js";
 const WITH_LOCAL_STORAGE_CACHE = false;
 
+
 export function Application(): VNode {
   const [settings, setSettings] = useState<MerchantUiSettings>();
   useEffect(() => {
@@ -53,7 +57,7 @@ export function Application(): VNode {
           de: strings["de"].completeness,
         }}
       >
-        <MerchantApiProvider baseUrl={new URL("/", baseUrl)} frameOnError={({ children }) => <div>{children}</div>}>
+        <MerchantApiProvider baseUrl={new URL("/", baseUrl)} frameOnError={OnConfigError}>
           <SWRConfig
             value={{
               provider: WITH_LOCAL_STORAGE_CACHE
@@ -136,3 +140,32 @@ function localStorageProvider(): Map<unknown, unknown> {
   });
   return map;
 }
+
+function OnConfigError({ state }: { state: ConfigResultFail<TalerMerchantApi.VersionResponse> | undefined }): VNode {
+  const { i18n } = useTranslationContext();
+  if (!state) {
+    return <i18n.Translate>checking compatibility with server...</i18n.Translate>
+  }
+  switch (state.type) {
+    case "error": {
+      return <NotificationCard
+        notification={{
+          message: i18n.str`Contacting the server failed`,
+          description: state.error.message,
+          details: JSON.stringify(state.error.errorDetail, undefined, 2),
+          type: "ERROR",
+        }}
+      />
+    }
+    case "incompatible": {
+      return <NotificationCard
+        notification={{
+          message: i18n.str`The server version is not supported`,
+          description: i18n.str`Supported version "${state.supported}", server version "${state.result.version}".`,
+          type: "WARN",
+        }}
+      />
+    }
+    default: assertUnreachable(state)
+  }
+}