added new continue after wire transfer confirmed

1 files changed, 73 insertions, 22 deletions

diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 9f9c9925e..80fdac3c8 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -24,6 +24,7 @@ import { Fragment, VNode, h } from "preact";
 import { Loading } from "../components/Loading.js";
 import { useWithdrawalDetails } from "../hooks/access.js";
 import { notifyInfo } from "../hooks/notification.js";
+import { useSettings } from "../hooks/settings.js";
 import { handleNotOkResult } from "./HomePage.js";
 import { QrCodeSection } from "./QrCodeSection.js";
 import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
@@ -32,8 +33,7 @@ const logger = new Logger("WithdrawalQRCode");
 
 interface Props {
   withdrawUri: WithdrawUriResult;
-  onAborted: () => void;
-  onConfirmed: () => void;
+  onContinue: () => void;
   onLoadNotOk: () => void;
 }
 /**
@@ -43,10 +43,14 @@ interface Props {
  */
 export function WithdrawalQRCode({
   withdrawUri,
-  onConfirmed,
-  onAborted,
+  onContinue,
   onLoadNotOk,
 }: Props): VNode {
+  const [settings, updateSettings] = useSettings();
+  function clearCurrentWithdrawal(): void {
+    updateSettings("currentWithdrawalOperationId", undefined);
+    onContinue();
+  }
   const { i18n } = useTranslationContext();
   const result = useWithdrawalDetails(withdrawUri.withdrawalOperationId);
   if (!result.ok) {
@@ -64,13 +68,64 @@ export function WithdrawalQRCode({
   }
   const { data } = result;
 
-  logger.trace("withdrawal status", data);
-  if (data.aborted || data.confirmation_done) {
-    // signal that this withdrawal is aborted
-    // will redirect to account info
-    notifyInfo(i18n.str`Operation completed`);
-    onAborted();
-    return <Loading />;
+  if (data.aborted) {
+    return <section id="main" class="content">
+      <h1 class="nav">{i18n.str`Operation aborted`}</h1>
+      <section>
+        <p>
+          <i18n.Translate>
+            The wire transfer to the GNU Taler Exchange bank's account was aborted, your balance
+            was not affected.
+          </i18n.Translate>
+        </p>
+        <p>
+          <i18n.Translate>
+            You can close this page now or continue to the account page.
+          </i18n.Translate>
+        </p>
+        <a class="pure-button pure-button-primary"
+          style={{float:"right"}}
+          onClick={async (e) => {
+            e.preventDefault();
+            clearCurrentWithdrawal()
+            onContinue()
+        }}>
+          {i18n.str`Continue`}
+        </a>
+
+      </section>
+    </section>
+  }
+
+  if (data.confirmation_done) {
+    return <section id="main" class="content">
+      <h1 class="nav">{i18n.str`Operation completed`}</h1>
+
+      <section id="assets" style={{maxWidth: 400, marginLeft: "auto", marginRight:"auto"}}>
+        <p>
+          <i18n.Translate>
+            The wire transfer to the GNU Taler Exchange bank's account is completed, now the 
+            exchange will send the requested amount into your GNU Taler wallet.
+          </i18n.Translate>
+        </p>
+        <p>
+          <i18n.Translate>
+            You can close this page now or continue to the account page.
+          </i18n.Translate>
+        </p>
+        <div style={{textAlign:"center"}}>
+
+          <a class="pure-button pure-button-primary"
+            onClick={async (e) => {
+              e.preventDefault();
+              clearCurrentWithdrawal()
+              onContinue()
+            }}>
+            {i18n.str`Continue`}
+          </a>
+        </div>
+      </section>
+    </section>
   }
 
   if (!data.selection_done) {
@@ -79,25 +134,21 @@ export function WithdrawalQRCode({
         withdrawUri={withdrawUri}
         onAborted={() => {
           notifyInfo(i18n.str`Operation canceled`);
-          onAborted();
-        }}
+          clearCurrentWithdrawal()
+          onContinue()
+      }}
       />
     );
   }
 
-  // Wallet POSTed the withdrawal details!  Ask the
-  // user to authorize the operation (here CAPTCHA).
   return (
     <WithdrawalConfirmationQuestion
       withdrawUri={withdrawUri}
-      onConfirmed={() => {
-        notifyInfo(i18n.str`Operation confirmed`);
-        onConfirmed();
-      }}
       onAborted={() => {
         notifyInfo(i18n.str`Operation canceled`);
-        onAborted();
-      }}
+        clearCurrentWithdrawal()
+        onContinue()
+  }}
     />
   );
-}
+}
\ No newline at end of file