impl accout management and refactor

1 files changed, 30 insertions, 3 deletions

diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index ae876d556..dd04ed6e2 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -19,17 +19,22 @@ import { useState } from "preact/hooks";
 import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
 import { WalletWithdrawForm } from "./WalletWithdrawForm.js";
+import { PageStateType, usePageContext } from "../context/pageState.js";
 
 /**
  * Let the user choose a payment option,
  * then specify the details trigger the action.
  */
-export function PaymentOptions({ currency }: { currency?: string }): VNode {
+export function PaymentOptions({ currency }: { currency: string }): VNode {
   const { i18n } = useTranslationContext();
+  const { pageStateSetter } = usePageContext();
 
   const [tab, setTab] = useState<"charge-wallet" | "wire-transfer">(
     "charge-wallet",
   );
+  function saveError(error: PageStateType["error"]): void {
+    pageStateSetter((prev) => ({ ...prev, error }));
+  }
 
   return (
     <article>
@@ -55,13 +60,35 @@ export function PaymentOptions({ currency }: { currency?: string }): VNode {
         {tab === "charge-wallet" && (
           <div id="charge-wallet" class="tabcontent active">
             <h3>{i18n.str`Obtain digital cash`}</h3>
-            <WalletWithdrawForm focus currency={currency} />
+            <WalletWithdrawForm
+              focus
+              currency={currency}
+              onSuccess={(data) => {
+                pageStateSetter((prevState: PageStateType) => ({
+                  ...prevState,
+                  withdrawalInProgress: true,
+                  talerWithdrawUri: data.taler_withdraw_uri,
+                  withdrawalId: data.withdrawal_id,
+                }));
+              }}
+              onError={saveError}
+            />
           </div>
         )}
         {tab === "wire-transfer" && (
           <div id="wire-transfer" class="tabcontent active">
             <h3>{i18n.str`Transfer to bank account`}</h3>
-            <PaytoWireTransferForm focus currency={currency} />
+            <PaytoWireTransferForm
+              focus
+              currency={currency}
+              onSuccess={() => {
+                pageStateSetter((prevState: PageStateType) => ({
+                  ...prevState,
+                  info: i18n.str`Wire transfer created!`,
+                }));
+              }}
+              onError={saveError}
+            />
           </div>
         )}
       </div>