3 files changed, 35 insertions, 3 deletions
diff --git a/packages/demobank-ui/src/components/Cashouts/index.ts b/packages/demobank-ui/src/components/Cashouts/index.ts
index ae020cef6..09839e753 100644
--- a/packages/demobank-ui/src/components/Cashouts/index.ts
+++ b/packages/demobank-ui/src/components/Cashouts/index.ts
@@ -18,16 +18,16 @@ import { HttpError, utils } from "@gnu-taler/web-util/browser";
 import { Loading } from "../Loading.js";
 // import { compose, StateViewMap } from "../../utils/index.js";
 // import { wxApi } from "../../wxApi.js";
-import { AbsoluteTime, AmountJson, TalerCorebankApi, TalerError } from "@gnu-taler/taler-util";
+import { AbsoluteTime, AmountJson, TalerCoreBankErrorsByMethod, TalerCorebankApi, TalerError } from "@gnu-taler/taler-util";
 import { useComponentState } from "./state.js";
-import { LoadingUriView, ReadyView } from "./views.js";
+import { FailedView, LoadingUriView, ReadyView } from "./views.js";
 
 export interface Props {
   account: string;
   onSelected: (id: string) => void;
 }
 
-export type State = State.Loading | State.LoadingUriError | State.Ready;
+export type State = State.Loading | State.Failed | State.LoadingUriError | State.Ready;
 
 export namespace State {
   export interface Loading {
@@ -40,6 +40,11 @@ export namespace State {
     error: TalerError;
   }
 
+  export interface Failed {
+    status: "failed";
+    error: TalerCoreBankErrorsByMethod<"getAccountCashouts">;
+  }
+
   export interface BaseInfo {
     error: undefined;
   }
@@ -62,6 +67,7 @@ export interface Transaction {
 const viewMapping: utils.StateViewMap<State> = {
   loading: Loading,
   "loading-error": LoadingUriView,
+  "failed": FailedView,
   ready: ReadyView,
 };
 
diff --git a/packages/demobank-ui/src/components/Cashouts/state.ts b/packages/demobank-ui/src/components/Cashouts/state.ts
index 47ad0a297..814755541 100644
--- a/packages/demobank-ui/src/components/Cashouts/state.ts
+++ b/packages/demobank-ui/src/components/Cashouts/state.ts
@@ -32,6 +32,12 @@ export function useComponentState({ account, onSelected }: Props): State {
       error: result,
     };
   }
+  if (result.type === "fail") {
+    return {
+      status: "failed",
+      error: result
+    }
+  }
 
   return {
     status: "ready",
diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx
index 32fe0aa9e..89f173b0d 100644
--- a/packages/demobank-ui/src/components/Cashouts/views.tsx
+++ b/packages/demobank-ui/src/components/Cashouts/views.tsx
@@ -20,6 +20,8 @@ import { State } from "./index.js";
 import { format } from "date-fns";
 import { Amounts } from "@gnu-taler/taler-util";
 import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
+import { assertUnreachable } from "../Routing.js";
+import { Attention } from "../Attention.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
@@ -30,6 +32,24 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
     </div>
   );
 }
+export function FailedView({ error }: State.Failed) {
+  const { i18n } = useTranslationContext();
+  switch (error.case) {
+    case "cashout-not-supported": return <Attention type="danger"
+      title={i18n.str`Cashout not supported.`}>
+      <div class="mt-2 text-sm text-red-700">
+        {error.detail.hint}
+      </div>
+    </Attention>
+    case "account-not-found": return <Attention type="danger"
+      title={i18n.str`Account not found.`}>
+      <div class="mt-2 text-sm text-red-700">
+        {error.detail.hint}
+      </div>
+    </Attention>
+    default: assertUnreachable(error)
+  }
+}
 
 export function ReadyView({ cashouts, onSelected }: State.Ready): VNode {
   const { i18n } = useTranslationContext();