1 files changed, 20 insertions, 8 deletions
diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 5169fc00f..1a4157d06 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -21,7 +21,7 @@ import {
 } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h, VNode } from "preact";
 import { Loading } from "../components/Loading.js";
-import { usePageContext } from "../context/pageState.js";
+import { PageStateType } from "../context/pageState.js";
 import { useWithdrawalDetails } from "../hooks/access.js";
 import { QrCodeSection } from "./QrCodeSection.js";
 import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
@@ -32,7 +32,9 @@ interface Props {
   account: string;
   withdrawalId: string;
   talerWithdrawUri: string;
-  onAbort: () => void;
+  onError: (e: PageStateType["error"]) => void;
+  onAborted: () => void;
+  onConfirmed: () => void;
   onLoadNotOk: <T>(
     error: HttpResponsePaginated<T, SandboxBackend.SandboxError>,
   ) => VNode;
@@ -46,10 +48,12 @@ export function WithdrawalQRCode({
   account,
   withdrawalId,
   talerWithdrawUri,
-  onAbort,
+  onConfirmed,
+  onAborted,
+  onError,
   onLoadNotOk,
 }: Props): VNode {
-  logger.trace(`Showing withdraw URI: ${talerWithdrawUri}`);
+  const { i18n } = useTranslationContext();
 
   const result = useWithdrawalDetails(account, withdrawalId);
   if (!result.ok) {
@@ -61,18 +65,24 @@ export function WithdrawalQRCode({
   if (data.aborted) {
     // signal that this withdrawal is aborted
     // will redirect to account info
-    onAbort();
+    onAborted();
     return <Loading />;
   }
 
   const parsedUri = parseWithdrawUri(talerWithdrawUri);
   if (!parsedUri) {
-    throw Error("can't parse withdrawal URI");
+    onError({
+      title: i18n.str`The Withdrawal URI is not valid: "${talerWithdrawUri}"`,
+    });
+    return <Loading />;
   }
 
   if (!data.selection_done) {
     return (
-      <QrCodeSection talerWithdrawUri={talerWithdrawUri} onAbort={onAbort} />
+      <QrCodeSection
+        talerWithdrawUri={talerWithdrawUri}
+        onAborted={onAborted}
+      />
     );
   }
 
@@ -80,8 +90,10 @@ export function WithdrawalQRCode({
   // user to authorize the operation (here CAPTCHA).
   return (
     <WithdrawalConfirmationQuestion
-      account={account}
       withdrawalId={parsedUri.withdrawalOperationId}
+      onError={onError}
+      onConfirmed={onConfirmed}
+      onAborted={onAborted}
     />
   );
 }