1 files changed, 29 insertions, 4 deletions
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index bfb118c6c..e21c0917b 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -20,10 +20,13 @@ import {
   PaytoUri,
   PaytoUriIBAN,
   PaytoUriTalerBank,
+  TalerError,
   TranslatedString,
   WithdrawUriResult
 } from "@gnu-taler/taler-util";
 import {
+  ErrorLoading,
+  Loading,
   notifyInfo,
   useLocalNotification,
   useTranslationContext
@@ -38,6 +41,10 @@ import { undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
 import { RenderAmount } from "./PaytoWireTransferForm.js";
 import { assertUnreachable } from "./WithdrawalOperationPage.js";
 import { LocalNotificationBanner } from "@gnu-taler/web-util/browser";
+import { useBackendState } from "../hooks/backend.js";
+import { useWithdrawalDetails } from "../hooks/access.js";
+import { OperationState } from "./OperationState/index.js";
+import { OperationNotFound } from "./WithdrawalQRCode.js";
 
 const logger = new Logger("WithdrawalConfirmationQuestion");
 
@@ -60,8 +67,23 @@ export function WithdrawalConfirmationQuestion({
   withdrawUri,
 }: Props): VNode {
   const { i18n } = useTranslationContext();
-  const [settings, updateSettings] = usePreferences()
-
+  const [settings] = usePreferences()
+  const { state: credentials } = useBackendState();
+  const creds = credentials.status !== "loggedIn" ? undefined : credentials
+  const withdrawalInfo = useWithdrawalDetails(withdrawUri.withdrawalOperationId)
+  if (!withdrawalInfo) {
+    return <Loading />
+  }
+  if (withdrawalInfo instanceof TalerError) {
+    return <ErrorLoading error={withdrawalInfo} />
+  }
+  if (withdrawalInfo.type === "fail") {
+    switch(withdrawalInfo.case) {
+      case "not-found": return <OperationNotFound onClose={onAborted}  />
+      default: assertUnreachable(withdrawalInfo.case)
+    }
+  }
+  
   const captchaNumbers = useMemo(() => {
     return {
       a: Math.floor(Math.random() * 10),
@@ -87,7 +109,8 @@ export function WithdrawalConfirmationQuestion({
   async function doTransfer() {
     setBusy({})
     await handleError(async () => {
-      const resp = await api.confirmWithdrawalById(withdrawUri.withdrawalOperationId);
+      if (!creds) return;
+      const resp = await api.confirmWithdrawalById(creds, withdrawUri.withdrawalOperationId);
       if (resp.type === "ok") {
         mutate(() => true)// clean any info that we have
         if (!settings.showWithdrawalSuccess) {
@@ -135,7 +158,8 @@ export function WithdrawalConfirmationQuestion({
   async function doCancel() {
     setBusy({})
     await handleError(async () => {
-      const resp = await api.abortWithdrawalById(withdrawUri.withdrawalOperationId);
+      if (!creds) return;
+      const resp = await api.abortWithdrawalById(creds, withdrawUri.withdrawalOperationId);
       if (resp.type === "ok") {
         onAborted();
       } else {
@@ -217,6 +241,7 @@ export function WithdrawalConfirmationQuestion({
                     <ShowInputErrorLabel message={errors?.answer} isDirty={captchaAnswer !== undefined} />
                   </div>
                 </div>
+
                 <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
                   <button type="button" class="text-sm font-semibold leading-6 text-gray-900"
                     onClick={doCancel}