fix #7819

packages/demobank-ui/src/pages/QrCodeSection.tsx

@@ -14,11 +14,21 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { stringifyWithdrawUri, WithdrawUriResult } from "@gnu-taler/taler-util";
+import {
-import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+  HttpStatusCode,
+  stringifyWithdrawUri,
+  WithdrawUriResult,
+} from "@gnu-taler/taler-util";
+import {
+  RequestError,
+  useTranslationContext,
+} from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import { QR } from "../components/QR.js";
+import { useAccessAnonAPI } from "../hooks/access.js";
+import { notifyError } from "../hooks/notification.js";
+import { buildRequestErrorMessage } from "../utils.js";
 
 export function QrCodeSection({
   withdrawUri,
@@ -38,6 +48,7 @@ export function QrCodeSection({
   }, []);
   const talerWithdrawUri = stringifyWithdrawUri(withdrawUri);
 
+  const { abortWithdrawal } = useAccessAnonAPI();
   return (
     <section id="main" class="content">
       <h1 class="nav">{i18n.str`Transfer to Taler Wallet`}</h1>
@@ -55,7 +66,32 @@ export function QrCodeSection({
           <br />
           <a
             class="pure-button btn-cancel"
-            onClick={onAborted}
+            onClick={async (e) => {
+              e.preventDefault();
+              try {
+                await abortWithdrawal(withdrawUri.withdrawalOperationId);
+                onAborted();
+              } catch (error) {
+                if (error instanceof RequestError) {
+                  notifyError(
+                    buildRequestErrorMessage(i18n, error.cause, {
+                      onClientError: (status) =>
+                        status === HttpStatusCode.Conflict
+                          ? i18n.str`The reserve operation has been confirmed previously and can't be aborted`
+                          : undefined,
+                    }),
+                  );
+                } else {
+                  notifyError({
+                    title: i18n.str`Operation failed, please report`,
+                    description:
+                      error instanceof Error
+                        ? error.message
+                        : JSON.stringify(error),
+                  });
+                }
+              }
+            }}
           >{i18n.str`Abort`}</a>
         </div>
       </article>