added new continue after wire transfer confirmed

4 files changed, 77 insertions, 38 deletions

diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx
index 20fcef39a..93a9bdfae 100644
--- a/packages/demobank-ui/src/pages/HomePage.tsx
+++ b/packages/demobank-ui/src/pages/HomePage.tsx
@@ -84,11 +84,11 @@ export function HomePage({
 export function WithdrawalOperationPage({
   operationId,
   onLoadNotOk,
-  onAbort,
+  onContinue,
 }: {
   operationId: string;
   onLoadNotOk: () => void;
-  onAbort: () => void;
+  onContinue: () => void;
 }): VNode {
   //FIXME: libeufin sandbox should return show to create the integration api endpoint
   //or return withdrawal uri from response
@@ -99,12 +99,6 @@ export function WithdrawalOperationPage({
   const parsedUri = parseWithdrawUri(uri);
   const { i18n } = useTranslationContext();
 
-  const [settings, updateSettings] = useSettings();
-  function clearCurrentWithdrawal(): void {
-    updateSettings("currentWithdrawalOperationId", undefined);
-    onAbort();
-  }
-
   if (!parsedUri) {
     notifyError({
       title: i18n.str`The Withdrawal URI is not valid: "${uri}"`,
@@ -115,10 +109,7 @@ export function WithdrawalOperationPage({
   return (
     <WithdrawalQRCode
       withdrawUri={parsedUri}
-      onConfirmed={() => {
-        notifyInfo(i18n.str`Withdrawal confirmed!`);
-      }}
-      onAborted={clearCurrentWithdrawal}
+      onContinue={onContinue}
       onLoadNotOk={onLoadNotOk}
     />
   );
diff --git a/packages/demobank-ui/src/pages/Routing.tsx b/packages/demobank-ui/src/pages/Routing.tsx
index 64f9b1208..f176c73db 100644
--- a/packages/demobank-ui/src/pages/Routing.tsx
+++ b/packages/demobank-ui/src/pages/Routing.tsx
@@ -40,7 +40,7 @@ export function Routing(): VNode {
           component={({ wopid }: { wopid: string }) => (
             <WithdrawalOperationPage
               operationId={wopid}
-              onAbort={() => {
+              onContinue={() => {
                 route("/account");
               }}
               onLoadNotOk={() => {
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index da245b75d..cdb612155 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -33,7 +33,6 @@ import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 const logger = new Logger("WithdrawalConfirmationQuestion");
 
 interface Props {
-  onConfirmed: () => void;
   onAborted: () => void;
   withdrawUri: WithdrawUriResult;
 }
@@ -42,7 +41,6 @@ interface Props {
  * Not providing a back button, only abort.
  */
 export function WithdrawalConfirmationQuestion({
-  onConfirmed,
   onAborted,
   withdrawUri,
 }: Props): VNode {
@@ -119,7 +117,6 @@ export function WithdrawalConfirmationQuestion({
                       await confirmWithdrawal(
                         withdrawUri.withdrawalOperationId,
                       );
-                      onConfirmed();
                     } catch (error) {
                       if (error instanceof RequestError) {
                         notifyError(
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