[taler-merchant-backoffice] branch master updated: -get payment tabs to work

[gnunet]

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

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

The following commit(s) were added to refs/heads/master by this push:
     new 75a4da8  -get payment tabs to work
75a4da8 is described below

commit 75a4da8fbe480c707a62a93eab3de94dc1f2025f
Author: Christian Grothoff <christian@grothoff.org>
AuthorDate: Mon Sep 26 23:35:00 2022 +0200

    -get payment tabs to work
---
 packages/bank/src/pages/home/index.tsx | 199 ++++++++++++++++++---------------
 packages/bank/src/scss/bank.scss       |  36 ++++++
 2 files changed, 143 insertions(+), 92 deletions(-)

diff --git a/packages/bank/src/pages/home/index.tsx 
b/packages/bank/src/pages/home/index.tsx
index f74b3b3..38d048a 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -105,7 +105,6 @@ interface PageStateType {
   isLoggedIn: boolean;
   isRawPayto: boolean;
   tryRegister: boolean;
-  tryManualTransfer: boolean;
   showPublicHistories: boolean;
   hasError: boolean;
   withdrawalInProgress: boolean;
@@ -395,7 +394,6 @@ function usePageState(
     isLoggedIn: false,
     isRawPayto: false,
     tryRegister: false,
-    tryManualTransfer: false,
     showPublicHistories: false,
     hasError: false,
     withdrawalInProgress: false,
@@ -826,6 +824,7 @@ function BankFrame(Props: any): VNode {
   const [pageState, pageStateSetter] = useContext(PageContext);
   console.log('BankFrame state', pageState);
   const logOut = (
+    <div class="logout">
     <a
       href="#"
       class="pure-button logout-button"
@@ -840,17 +839,16 @@ function BankFrame(Props: any): VNode {
             ...rest,
             isLoggedIn: false,
             withdrawalInProgress: false,
-            isRawPayto: false,
-            tryManualTransfer: false,
+            isRawPayto: false
           };
         });
-      }}>{i18n`Logout`}</a>);
+      }}>{i18n`Logout`}</a></div>);
 
   // Prepare demo sites links.
   const DEMO_SITES = [
     ['Landing', '__DEMO_SITE_LANDING_URL__'],
     ['Bank', '__DEMO_SITE_BANK_URL__'],
-    ['Blog', '__DEMO_SITE_BLOG_URL__'],
+    ['Essay Shop', '__DEMO_SITE_BLOG_URL__'],
     ['Donations', '__DEMO_SITE_DONATIONS_URL__'],
     ['Survey', '__DEMO_SITE_SURVEY_URL__'],
   ];
@@ -929,27 +927,12 @@ function PaytoWireTransfer(Props: any): VNode {
     if (focusInput.current)
       (focusInput.current as any).focus();
   }, []);
-  console.log('wire form page state', pageState);
-  const goBackForm = <a href="#" onClick={
-    () => {
-      pageStateSetter((prevState: PageStateType) => ({ ...prevState, 
tryManualTransfer: false }))
-      submitDataSetter(undefined)
-    }
-  }>{i18n`Go back`}</a>;
-  const goBackRawPayto = <a href="#" onClick={
-    () => {
-      pageStateSetter((prevState: PageStateType) => ({ ...prevState, 
isRawPayto: false }))
-      rawPaytoInputSetter(undefined)
-    }
-
-  }>{i18n`Go back`}</a>;
   if (!pageState.isRawPayto) {
     console.log('wire transfer form');
-    return (<article>
+    return (
       <div>
-        <h2>{i18n`Wire transfer`}</h2>
-        <p>{i18n`Transfer money to another account of this bank:`}<br /><br 
/></p>
         <div name="wire-transfer-form">
+          <p>
           <input
             ref={focusInput}
             type="text"
@@ -987,6 +970,8 @@ function PaytoWireTransfer(Props: any): VNode {
                 amount: e.currentTarget.value.replace(',', '.'),
               }))
             }} />&nbsp;<label>{currency}</label><br /><br />
+          </p>
+          <p>
           <input
             type="submit"
             value="Send"
@@ -1016,6 +1001,7 @@ function PaytoWireTransfer(Props: any): VNode {
                 submitDataSetter // need here only to be cleaned.
               );
             }} />
+           </p>
         </div>
         <p><a
           href="#"
@@ -1025,19 +1011,18 @@ function PaytoWireTransfer(Props: any): VNode {
           }}>{i18n`Want to try the raw payto://-format?`}
         </a></p>
       </div>
-      {goBackForm}
-    </article>);
+      );
   }
   console.log('rendering raw payto form');
-  return (<article>
+  return (
     <div>
-      <h2>{i18n`Wire transfer`}</h2>
       <p>{i18n`Transfer money via the Payto system:`}<br /><br />
         Address pattern: <code style="font-size: 15px">
           
payto://iban/[receiver-iban]?message=[subject]&amount=[{currency}:X.Y]
         </code>
       </p>
       <div name="payto-form">
+        <p>
         <input name="address"
           size={90}
           value={rawPaytoInput}
@@ -1047,6 +1032,8 @@ function PaytoWireTransfer(Props: any): VNode {
           onInput={(e): void => {
             rawPaytoInputSetter(e.currentTarget.value)
           }} />
+        </p>
+        <p>
         <input class="pure-button pure-button-primary"
           type="submit"
           value={i18n`Confirm`}
@@ -1065,10 +1052,9 @@ function PaytoWireTransfer(Props: any): VNode {
               pageStateSetter,
               rawPaytoInputSetter);
           }} />
+         </p>
       </div>
-    </div>
-    <p>{goBackRawPayto}</p>
-  </article>);
+    </div>);
 }
 
 /**
@@ -1140,7 +1126,7 @@ function QrCodeSection({ talerWithdrawUri, abortButton }: 
{ talerWithdrawUri: st
   }, [])
 
   return <section id="main" class="content">
-    <h1 class="nav">{i18n`Withdraw to a Taler Wallet`}</h1>
+    <h1 class="nav">{i18n`Charge Taler Wallet`}</h1>
     <p>{i18n`You can use this QR code to withdraw to your mobile wallet:`}</p>
     {QR({ text: talerWithdrawUri })}
     <p>Click <a id="linkqr" href={talerWithdrawUri}>{i18n`this link`}</a> to 
open your Taler wallet!</p>
@@ -1221,61 +1207,108 @@ function TalerWithdrawalQRCode(Props: any): VNode {
   return (<TalerWithdrawalConfirmationQuestion backendState={backendState} />);
 }
 
+
+
+/* FIXME: find a way to get rid of the @ts-ignore here! */
+function OpenPayTab(evt: MouseEvent, tabName: string) {
+  let tabcontent = document.getElementsByClassName("tabcontent");
+  for (let i = 0; i < tabcontent.length; i++) {
+    // @ts-ignore
+    tabcontent[i].style.display = "none";
+  }
+  let tablinks = document.getElementsByClassName("tablinks");
+  for (let i = 0; i < tablinks.length; i++) {
+    tablinks[i].className
+      = tablinks[i].className.replace(" active", "");
+  }
+  // @ts-ignore
+  document.getElementById(tabName).style.display = "block";
+  // @ts-ignore
+  evt.currentTarget.className += " active";
+}
+
+
+
 /**
- * Let the user choose an amount and submit the withdtawal.
+ * Let the user choose a payment option,
+ * then specify the details trigger the action.
  */
-function TalerWithdrawal(Props: any): VNode {
+function PaymentOptions(Props: any): VNode {
   const { backendState, pageStateSetter } = Props;
   const currency = useContext(CurrencyContext);
   const i18n = useTranslator();
   let submitAmount = '5.00'; // must match the first <select> child.
   // const amountRegex = "^[0-9]+(\.[0-9]+)?$"; // currently unused
 
-  const submitButton = <input
-    id="select-exchange"
-    class="pure-button pure-button-primary"
-    type="submit"
-    value={i18n`Start withdrawal`}
-    onClick={() => {
-      submitAmount = validateAmount(submitAmount);
+  return (<article>
+    <div class="payments">
+      <div class="tab">
+        <button class="tablinks"
+          onClick={(e: MouseEvent): void => {OpenPayTab(e, 'charge-wallet')}}>
+          {i18n`Charge Taler wallet`}
+        </button>
+        <button class="tablinks"
+          onClick={(e: MouseEvent): void => {OpenPayTab(e, 'wire-transfer')}}>
+          {i18n`Wire to bank account`}
+        </button>
+      </div>
+      <div id='charge-wallet' class='tabcontent'>
+        <h3>{i18n`Charge Taler wallet`}</h3>
+        {/* FIXME: Amount entry does not work nicely yet */}
+        <div id="reserve-form"
+          class="pure-form"
+          name="tform">
+          <p>
+          {i18n`Amount to withdraw:`}&nbsp;
+          <input
+            type="text"
+            id="reserve-amount"
+            name="withdraw-amount"
+            list="amountList"
+            class="amount" autofocus
+            onChange={(e): void => {
+              submitAmount = e.currentTarget.value;
+            }} />
+          <datalist id="amountList">
+            <option value="5.00">5.00</option>
+            <option value="10.00">10.00</option>
+            <option value="15.00">15.00</option>
+            <option value="20.00">20.00</option>
+          </datalist>
+          <input
+            type="text"
+            readonly
+            class="currency-indicator"
+            size={currency.length}
+            tabIndex={-1} value={currency} />
+          </p>
+          <p>
+          <input
+             id="select-exchange"
+             class="pure-button pure-button-primary"
+             type="submit"
+             value={i18n`Withdraw`}
+             onClick={() => {
+               submitAmount = validateAmount(submitAmount);
       /**
        * By invalid amounts, the validator prints error messages
        * on the console, and the browser colourizes the amount input
        * box to indicate a error.
        */
-      if (!submitAmount) return;
-      createWithdrawalCall(
-        `${currency}:${submitAmount}`,
-        backendState,
-        pageStateSetter
-      )
-    }} />;
-
-  return (<article>
-    <div>
-      <h2>{i18n`Withdraw Money into a Taler wallet`}</h2>
-      <div id="reserve-form"
-        class="pure-form"
-        name="tform">
-        {i18n`Amount to withdraw`}:&nbsp;
-        <select id="reserve-amount"
-          name="withdraw-amount"
-          class="amount" autofocus
-          onChange={(e): void => {
-            submitAmount = e.currentTarget.value;
-          }}>
-          <option value="5.00">5.00</option>
-          <option value="10.00">10.00</option>
-          <option value="15.00">15.00</option>
-          <option value="20.00">20.00</option>
-        </select>
-        <input
-          type="text"
-          readonly
-          class="currency-indicator"
-          size={currency.length}
-          tabIndex={-1} value={currency} />
-        &nbsp;{submitButton}
+               if (!submitAmount) return;
+               createWithdrawalCall(
+                 `${currency}:${submitAmount}`,
+                  backendState,
+                  pageStateSetter
+               )
+            }} />
+          </p>
+        </div>
+      </div>
+      <div id='wire-transfer' class='tabcontent'>
+        <h3>{i18n`Wire to bank account`}</h3>
+        {/* FIXME: turn into button!? */}
+        <PaytoWireTransfer backendState={backendState} />
       </div>
     </div>
   </article>);
@@ -1560,7 +1593,6 @@ function Account(Props: any): VNode {
   const [pageState, pageStateSetter] = useContext(PageContext);
   const {
     withdrawalInProgress,
-    tryManualTransfer,
     withdrawalOutcome,
     transferOutcome,
     withdrawalId,
@@ -1641,7 +1673,6 @@ function Account(Props: any): VNode {
       <button onClick={() => {
         pageStateSetter((prevState: PageStateType) => {
           const {
-            tryManualTransfer, // Still show the wire transfer form?
             transferOutcome,
             ...rest } = prevState;
           return { ...rest };
@@ -1698,12 +1729,6 @@ function Account(Props: any): VNode {
     );
   }
   const balance = parseAmount(data.balance.amount)
-  if (tryManualTransfer)
-    return (
-      <BankFrame>
-        <CurrencyContext.Provider value={balance.currency}>
-          <PaytoWireTransfer backendState={backendState} />
-        </CurrencyContext.Provider></BankFrame>);
 
   return (<BankFrame>
     <div>
@@ -1724,15 +1749,10 @@ function Account(Props: any): VNode {
         {/* FIXME: turn into button! */}
         <CurrencyContext.Provider value={balance.currency}>
           {Props.children}
-          <TalerWithdrawal
+          <PaymentOptions
             backendState={backendState}
             pageStateSetter={pageStateSetter} />
         </CurrencyContext.Provider>
-        {/* FIXME: turn into button!? */}
-        <p><a href="#" onClick={() =>
-          pageStateSetter((prevState: PageStateType) =>
-           ({...prevState, tryManualTransfer: true}))
-        }>{i18n`credit other bank account`}</a></p>
       </div>
     </section>
     <section id="main">
@@ -1941,11 +1961,6 @@ export function BankHome(): VNode {
         <LoginForm
           pageStateSetter={pageStateSetter}
           backendStateSetter={backendStateSetter} />
-        {maybeDemoContent(<p><Translate>
-          To view transactions of public accounts, please <a href="#"
-            onClick={goPublicAccounts(pageStateSetter)}>click here</a>.
-        </Translate></p>
-        )}
       </BankFrame>
     </PageContext.Provider>
   );
diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
index b8c0bc2..6fee0f1 100644
--- a/packages/bank/src/scss/bank.scss
+++ b/packages/bank/src/scss/bank.scss
@@ -33,6 +33,42 @@ input[type="number"]::-webkit-inner-spin-button {
   margin: 0;
 }
 
+/* This CSS code styles the tab */
+.tab {
+    overflow: hidden;
+    border: 2px solid #fffccc;
+}
+
+.logout {
+    float: right;
+    border: 20px;
+}
+
+.tab button {
+    background-color: orange;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 18px 19px;
+    transition: 0.5s;
+}
+
+.tab button:hover {
+    background-color: #dfdfdf;
+}
+
+.tab button.active {
+    background-color: #fcfcfc;
+}
+
+.tabcontent {
+    display: none;
+    padding: 8px 16px;
+    border: 2px solid #c1c1c1;
+    border-top: none;
+}
+
 input[type="number"] {
   -moz-appearance: textfield;
 }

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