merchant-backoffice

commit 8b243bc0e4161281ed5f76ad6b9ff69cdf7e9c7f
parent a3a7a7ef38ede66ac7e73bfeb855b13b84bd1b61
Author: MS <ms@taler.net>
Date:   Thu,  8 Sep 2022 15:00:28 +0200

Manual wire transfer.

Implement autofocus and clean the input
state when going back and finishing the
operation.

Diffstat:
M
packages/bank/src/pages/home/index.tsx
 | 
41
+++++++++++++++++++++++++++++++++++------

1 file changed, 35 insertions(+), 6 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -1,7 +1,7 @@
 import useSWR, { SWRConfig, useSWRConfig } from "swr";
 import useSWRImmutable from "swr/immutable";
 import { h, Fragment, ComponentChildren, VNode, createContext } from "preact";
-import { useState, useEffect, StateUpdater, useContext } from "preact/hooks";
+import { useCallback, useRef, useState, useEffect, StateUpdater, useContext } from "preact/hooks";
 import { Buffer } from "buffer";
 import { useTranslator, Translate } from "../../i18n";
 import { QR } from "../../components/QR";
@@ -10,6 +10,12 @@ import "../../scss/main.scss";
 import talerLogo from "../../assets/logo-white.svg";
 import { LangSelectorLikePy as LangSelector} from "../../components/menu/LangSelector";
 
+// Uncomment to allow test runs:
+
+/*const __LIBEUFIN_UI_ALLOW_REGISTRATIONS__ = 1;
+const __LIBEUFIN_UI_IS_DEMO__ = 0;
+const __LIBEUFIN_UI_BANK_NAME__ = 0;*/
+
 /**
  * FIXME:
  *
@@ -543,7 +549,12 @@ async function confirmWithdrawalCall(
 async function createTransactionCall(
   req: TransactionRequestType,
   backendState: BackendStateTypeOpt,
-  pageStateSetter: StateUpdater<PageStateType>
+  pageStateSetter: StateUpdater<PageStateType>,
+  /**
+   * Optional since the raw payto form doesn't have
+   * a stateful management of the input data yet.
+   */
+  submitDataSetter?: StateUpdater<WireTransferRequestTypeOpt>
 ) {
   try {
     var res = await postToBackend(
@@ -576,6 +587,9 @@ async function createTransactionCall(
     ...prevState,
     transferOutcome: "Wire transfer created!"
   }))
+  // Only at this point the input data can
+  // be discarded.
+  if (submitDataSetter) submitDataSetter(undefined);
 }
 
 /**
@@ -862,10 +876,20 @@ function PaytoWireTransfer(Props: any): VNode {
   var receiverInput = "";
   var subjectInput = "";
   var transactionData: TransactionRequestType;
-  
+  const focusInput = useRef(null);
+  useEffect(() => {
+    console.log("Now focus", focusInput);
+    if (focusInput.current) {
+      // @ts-ignore
+      focusInput.current.focus();
+    }
+  }, []);
   console.log("wire form page state", pageState);
   const goBackForm = <a href="#" onClick={
-    () => pageStateSetter((prevState: PageStateType) => ({...prevState, tryManualTransfer: false})) 
+    () => {
+      pageStateSetter((prevState: PageStateType) => ({...prevState, tryManualTransfer: false}))
+      submitDataSetter(undefined)
+    } 
   }>{i18n`Go back`}</a>;
   const goBackRawPayto = <a href="#" onClick={
     () => pageStateSetter((prevState: PageStateType) => ({...prevState, isRawPayto: false})) 
@@ -878,6 +902,7 @@ function PaytoWireTransfer(Props: any): VNode {
         <p>{i18n`Transfer money to another account of this bank:`}<br /><br /></p>
         <div name="wire-transfer-form">
           <input
+            ref={focusInput}
             type="text"
             placeholder="receiver iban"
 	    required
@@ -935,7 +960,8 @@ function PaytoWireTransfer(Props: any): VNode {
               createTransactionCall(
                 transactionData,
                 Props.backendState,
-                pageStateSetter
+                pageStateSetter,
+                submitDataSetter // need here only to be cleaned.
               ); 
             }}  />
         </div>
@@ -1462,7 +1488,10 @@ function Account(Props: any): VNode {
       <p>{transferOutcome}</p>
       <button onClick={() => {
         pageStateSetter((prevState: PageStateType) => {
-          const { transferOutcome, ...rest } = prevState;
+          const {
+            tryManualTransfer, // Still show the wire transfer form?
+            transferOutcome,
+            ...rest } = prevState;
           return {...rest};})}}>
         {i18n`Close wire transfer`}
       </button>