[taler-merchant-backoffice] 01/02: wire transfer: amount as separate field too

[gnunet]

This is an automated email from the git hooks/post-receive script.

ms pushed a commit to branch master
in repository merchant-backoffice.

commit 6e66ec7c29be49f02a0cf28259031a02f2f69d65
Author: ms <ms@taler.net>
AuthorDate: Tue Feb 15 18:37:14 2022 +0100

    wire transfer: amount as separate field too
---
 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
index f72cd63..446cf2e 100644
--- 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;
 }
 
 /**
@@ -91,12 +101,6 @@ interface AccountStateType {
   /* FIXME: Need history here.  */
 }
 
-/************
- * 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.  */ }

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.