clean up form after wire transfer

1 files changed, 29 insertions, 19 deletions

diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
index 1fcd7c0..d546ca4 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -588,7 +588,7 @@ async function createTransactionCall(
    * Optional since the raw payto form doesn't have
    * a stateful management of the input data yet.
    */
-  submitDataSetter?: StateUpdater<any>
+   cleanUpForm: () => void
 ) {
   try {
     var res = await postToBackend(
@@ -624,9 +624,10 @@ async function createTransactionCall(
     hasInfo: true,
     info: 'Wire transfer created!'
   }))
+
   // Only at this point the input data can
   // be discarded.
-  if (submitDataSetter) submitDataSetter(undefined);
+  cleanUpForm();
 }
 
 /**
@@ -955,6 +956,7 @@ function PaytoWireTransfer(Props: any): VNode {
             type="text"
             id="iban"
             name="iban"
+            value={submitData?.iban}
             placeholder="CC0123456789"
             required
             pattern={ibanRegex}
@@ -970,6 +972,7 @@ function PaytoWireTransfer(Props: any): VNode {
             name="subject"
             id="subject"
             placeholder="subject"
+            value={submitData?.subject}
             required
             onInput={(e): void => {
               submitDataSetter((submitData: any) => ({
@@ -984,6 +987,7 @@ function PaytoWireTransfer(Props: any): VNode {
             id="amount"
             placeholder="amount"
             required
+            value={submitData?.amount}
             pattern={amountRegex}
             onInput={(e): void => {
               submitDataSetter((submitData: any) => ({
@@ -1005,7 +1009,7 @@ function PaytoWireTransfer(Props: any): VNode {
             type="submit"
             class="pure-button pure-button-primary"
             value="Send"
-            onClick={() => {
+            onClick={async () => {
               if (
                 typeof submitData === 'undefined'
                 || (typeof submitData.iban === 'undefined'
@@ -1017,19 +1021,23 @@ function PaytoWireTransfer(Props: any): VNode {
               ) {
                 console.log('Not all the fields were given.');
                 pageStateSetter((prevState: PageStateType) =>
-                  ({ ...prevState, hasError: true, error: 'Field(s) missing.' }))
+                  ({ ...prevState, hasError: true, error: i18n`Field(s) missing.` }))
                 return;
               }
               transactionData = {
                 paytoUri: `payto://iban/${submitData.iban}?message=${encodeURIComponent(submitData.subject)}`,
                 amount: `${currency}:${submitData.amount}`
               };
-              createTransactionCall(
-                transactionData,
-                backendState,
-                pageStateSetter,
-                submitDataSetter // need here only to be cleaned.
-              );
+              return await createTransactionCall(
+                  transactionData,
+                  backendState,
+                  pageStateSetter,
+                  () => submitDataSetter(p => ({
+                    amount: "",
+                    iban: "",
+                    subject: ""
+                  }))
+                );
             }} />
            </p>
         </div>
@@ -1077,7 +1085,7 @@ function PaytoWireTransfer(Props: any): VNode {
         <input class="pure-button pure-button-primary"
           type="submit"
           value={i18n`Send`}
-          onClick={() => {
+          onClick={async () => {
             // empty string evaluates to false.
             if (!rawPaytoInput) {
               console.log('Didn\'t get any raw Payto string!');
@@ -1086,11 +1094,13 @@ function PaytoWireTransfer(Props: any): VNode {
             transactionData = { paytoUri: rawPaytoInput };
             if (typeof transactionData.paytoUri === 'undefined' ||
               transactionData.paytoUri.length === 0) return;
-            createTransactionCall(
-              transactionData,
-              backendState,
-              pageStateSetter,
-              rawPaytoInputSetter);
+
+              return await createTransactionCall(
+                  transactionData,
+                  backendState,
+                  pageStateSetter,
+                  () => rawPaytoInputSetter(p => "") 
+                );
           }} />
          </p>
         <p><a
@@ -1150,7 +1160,7 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode {
             return;
           }
           pageStateSetter((prevState: PageStateType) =>
-            ({ ...prevState, hasError: true, error: 'Answer is wrong.' }))
+            ({ ...prevState, hasError: true, error: i18n`Answer is wrong.` }))
         }}>
         {i18n`Confirm`}
       </button>
@@ -1356,11 +1366,11 @@ function PaymentOptions(Props: any): VNode {
     <div class="payments">
       <div class="tab">
         <button class={tab === "charge-wallet" ? "tablinks active" : "tablinks"}
-          onClick={(e: MouseEvent): void => {setTab('charge-wallet')}}>
+          onClick={(e): void => {setTab('charge-wallet')}}>
           {i18n`Charge Taler wallet`}
         </button>
         <button class={tab === "wire-transfer" ? "tablinks active" : "tablinks"}
-          onClick={(e: MouseEvent): void => {setTab("wire-transfer")}}>
+          onClick={(e): void => {setTab("wire-transfer")}}>
           {i18n`Wire to bank account`}
         </button>
       </div>