merchant-backoffice

commit fb8c52b29bc702aece4b38e14c4bb2741d330c31
parent 321adee497a5df616d4d8a2c5070e2fdd9738ab3
Author: MS <ms@taler.net>
Date:   Wed,  7 Sep 2022 16:20:29 +0200

Manual wire transfer.

Let the backend check the input and
put input data into the state.

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

1 file changed, 63 insertions(+), 18 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -71,6 +71,12 @@ interface CredentialsRequestType {
   password: string;
 }
 
+interface WireTransferRequestType {
+  iban: string;
+  subject: string;
+  amount: string;
+}
+
 interface Amount {
   value: string;
   currency: string;
@@ -272,6 +278,25 @@ function useShowPublicAccount(
 }
 
 /**
+ * Stores in the state a object representing a wire transfer,
+ * in order to avoid losing the handle of the data entered by
+ * the user in <input> fields.
+ */
+type WireTransferRequestTypeOpt = WireTransferRequestType | undefined;
+function useWireTransferRequestType(
+  state?: WireTransferRequestType
+): [WireTransferRequestTypeOpt, StateUpdater<WireTransferRequestTypeOpt>] {
+
+  const ret = useLocalStorage("wire-transfer-request-state", JSON.stringify(state));
+  const retObj: WireTransferRequestTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
+  const retSetter: StateUpdater<WireTransferRequestTypeOpt> = function(val) {
+    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
+    ret[1](newVal)
+  }
+  return [retObj, retSetter]
+}
+
+/**
  * Stores in the state a object containing a 'username'
  * and 'password' field, in order to avoid losing the
  * handle of the data entered by the user in <input> fields.
@@ -829,6 +854,7 @@ function BankFrame(Props: any): VNode {
 function PaytoWireTransfer(Props: any): VNode {
   const currency = useContext(CurrencyContext);
   const [pageState, pageStateSetter] = useContext(PageContext); // NOTE: used for go-back button?
+  const [submitData, submitDataSetter] = useWireTransferRequestType();
   const i18n = useTranslator();
   const amountRegex = "^[0-9]+(\.[0-9]+)?$";
   const ibanRegex = "^[A-Z][A-Z][0-9]+$";
@@ -857,36 +883,54 @@ function PaytoWireTransfer(Props: any): VNode {
 	    required
             pattern={ibanRegex}
             onInput={(e): void => {
-              receiverInput = e.currentTarget.value;
-            }} /><br /><br />
+              submitDataSetter((submitData: any) => ({
+                ...submitData,
+                iban: e.currentTarget.value,
+            }))}} /><br /><br />
           <input
             type="text"
             placeholder="subject"
+            required
             onInput={(e): void => {
-              subjectInput = e.currentTarget.value;
-            }} /><br /><br />
+              submitDataSetter((submitData: any) => ({
+                ...submitData,
+                subject: e.currentTarget.value,
+            }))}} /><br /><br />
           <input
             type="text"
             placeholder="amount"
+            required
+            value={
+              typeof submitData !== "undefined"
+                && typeof submitData.amount !== "undefined" ? submitData.amount : ""
+            }
             pattern={amountRegex}
             onInput={(e): void => {
-              amountInput = e.currentTarget.value;
-            }} />&nbsp;<label>{currency}</label><br /><br />
+              submitDataSetter((submitData: any) => ({
+                ...submitData,
+                amount: e.currentTarget.value.replace(",", "."),
+            }))}} />&nbsp;<label>{currency}</label><br /><br />
           <input
             type="submit"
             value="Send"
             onClick={() => {
-              amountInput = amountInput.replace(",", ".");
-              if (!validateAmount(amountInput)) return;
-              /**
-               * By invalid amounts, the validator prints error messages
-               * on the console, and the browser colourizes the amount input
-               * box to indicate a error.
-               */
-              if (!RegExp(ibanRegex).test(receiverInput)) return;
+              if (
+                typeof submitData === "undefined"
+                || (typeof submitData.iban === "undefined"
+                  || submitData.iban === "")
+                || (typeof submitData.subject === "undefined"
+                  || submitData.subject === "")
+                || (typeof submitData.amount === "undefined"
+                  || submitData.amount === "")
+              ) {
+                console.log("Not all the fields were given.");
+                pageStateSetter((prevState: PageStateType) =>
+                  ({...prevState, hasError: true, error: "Field(s) missing."}))
+                return;
+              }
               transactionData = {
-                paytoUri: `payto://iban/${receiverInput}?message=${encodeURIComponent(subjectInput)}`,
-                amount: `${currency}:${amountInput}`
+                paytoUri: `payto://iban/${submitData.iban}?message=${encodeURIComponent(submitData.subject)}`,
+                amount: `${currency}:${submitData.amount}`
               };
               createTransactionCall(
                 transactionData,
@@ -1349,8 +1393,9 @@ function Account(Props: any): VNode {
   if (typeof error !== "undefined") {
     console.log("account error", error);
     /**
-     * FIXME: try only one invocation of pageStateSetter,
-     * after having decided the error message in the case-branch.
+     * FIXME: to minimize the code, try only one invocation
+     * of pageStateSetter, after having decided the error
+     * message in the case-branch.
      */
     switch(error.status) {
       case 404: {