merchant-backoffice

commit 6e66ec7c29be49f02a0cf28259031a02f2f69d65
parent 77c3574fe5037c42c2351cedd4206f1b7be21cf7
Author: ms <ms@taler.net>
Date:   Tue, 15 Feb 2022 18:37:14 +0100

wire transfer: amount as separate field too

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

1 file changed, 61 insertions(+), 34 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -24,10 +24,15 @@ import "../../scss/main.scss";
  * - Many strings need to be i18n-wrapped.
  */
 
+/***********
+ * Globals *
+ **********/
+
+
 /************
  * Contexts *
  ***********/
-var CurrencyContext = createContext(null);
+var CurrencyContext = createContext<any>(null);
 
 /**********************************************
  * Type definitions for states and API calls. *
@@ -45,9 +50,14 @@ interface BackendStateType {
 
 /**
  * Request body of POST /transactions.
+ *
+ * If the amount appears twice: both as a Payto parameter and
+ * in the JSON dedicate field, the one on the Payto URI takes
+ * precedence.
  */
 interface TransactionRequestType {
   paytoUri: string;
+  amount?: string;
 }
 
 /**
@@ -92,12 +102,6 @@ interface AccountStateType {
 }
 
 /************
- * Contexts *
- ***********/
-const currencyContext = createContext<string>()
-
-
-/************
  * Helpers. *
  ***********/
 
@@ -107,7 +111,7 @@ const currencyContext = createContext<string>()
 function parseAmount(val: string): Amount {
   const format = /^[A-Z]+:[0-9]+(\.[0-9]+)?$/;
   if (!format.test(val))
-    throw Error("Backend gave invalid amount", val)
+    throw Error(`Backend gave invalid amount: ${val}.`)
   const amountSplit = val.split(":");
   return {value: amountSplit[1], currency: amountSplit[0]}
 }
@@ -646,6 +650,45 @@ async function registrationCall(
  * Functional components. *
  *************************/
 
+function PaytoWireTransfer(Props: any): VNode {
+  const {backendState, pageStateSetter} = Props;
+  const currency = useContext(CurrencyContext);
+  const i18n = useTranslator();
+  const amountRegex = "^[0-9]+(\.[0-9]+)?$";
+  var transactionData: TransactionRequestType;
+
+  return <div>
+    <input
+      type="text"
+      placeholder="amount"
+      pattern={amountRegex}
+      onInput={(e): void => {
+        transactionData = {
+          ...transactionData,
+          amount: e.currentTarget.value,
+        };
+      }} />
+    <label>{currency}</label> 
+    <input
+      type="text"
+      placeholder="payto address" // changing this breaks tests.
+      required
+      onInput={(e): void => {
+        transactionData = {
+          ...transactionData,
+          paytoUri: e.currentTarget.value,
+        };
+      }} />
+    <button onClick={() => {
+      createTransactionCall(
+        transactionData,
+        backendState,
+        pageStateSetter
+      ); 
+    }}>{i18n`Create wire transfer`}</button>
+  </div>
+}
+
 /**
  * Let user choose a amount and submit the withdtawal.
  */
@@ -653,8 +696,9 @@ function TalerWithdrawal(Props: any): VNode {
   const {backendState, pageStateSetter} = Props;
   const currency = useContext(CurrencyContext);
   const i18n = useTranslator();
-  const amountRegex = "^[0-9]+(\.[0-9]+)?$";
   var submitAmount = ""; // without currency.
+  const amountRegex = "^[0-9]+(\.[0-9]+)?$";
+
   var submitButton = <button
     onClick={() => {
       console.log("Maybe valid amount", submitAmount);
@@ -672,8 +716,7 @@ function TalerWithdrawal(Props: any): VNode {
       )}}>{i18n`Charge Taler wallet`}
     </button>;
 
-  return <Fragment>
-    <label>{currency}</label> 
+  return <div>
     <input
       type="text"
       placeholder="amount"
@@ -682,8 +725,9 @@ function TalerWithdrawal(Props: any): VNode {
       onInput={(e): void => {
         submitAmount = e.currentTarget.value
       }} />
-      { submitButton }
-  </Fragment>
+    <label>{currency}</label> 
+    { submitButton }
+  </div>
 }
 
 /**
@@ -1026,7 +1070,6 @@ export function BankHome(): VNode {
       return <p>Error: waiting for details...</p>;
     }
 
-    var transactionData: TransactionRequestType;
     return (
       <SWRWithCredentials
         username={backendState.username}
@@ -1092,26 +1135,10 @@ export function BankHome(): VNode {
 	    { /**
 	       * Profile page is pristine: offer the wire transfer form.
 	       */
-              !pageState.withdrawalInProgress && !pageState.transferOutcome && <Fragment>
-	        <p>Please, include the 'amount' query parameter.</p>
-	        <input
-                  type="text"
-                  placeholder="payto address" // changing this breaks tests.
-                  required
-                  onInput={(e): void => {
-                    transactionData = {
-                      ...transactionData,
-                      paytoUri: e.currentTarget.value,
-                    };
-                  }} />
-	        <button onClick={() => {
-                  createTransactionCall(
-		    transactionData,
-                    backendState,
-                    pageStateSetter
-		  ); 
-		}}>{i18n`Create wire transfer`}</button>
-	      </Fragment>
+              !pageState.withdrawalInProgress &&
+	        !pageState.transferOutcome &&
+	          <PaytoWireTransfer pageStateSetter={pageStateSetter}
+		                     backendState={backendState} />
 	    }
           </Account>
           { /* The user is logged in: offer to log out.  */ }