commit 75a4da8fbe480c707a62a93eab3de94dc1f2025f
parent f31b0a4b422d8e419cd011ced04b35ced68e5e01
Author: Christian Grothoff <christian@grothoff.org>
Date: Mon, 26 Sep 2022 23:35:00 +0200
-get payment tabs to work
Diffstat:
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
@@ -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(',', '.'),
}))
}} /> <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:`}
+ <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`}:
- <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} />
- {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
@@ -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;
}
