diff options
author | Florian Dold <florian.dold@gmail.com> | 2018-02-01 07:19:03 +0100 |
---|---|---|
committer | Florian Dold <florian.dold@gmail.com> | 2018-02-01 07:19:03 +0100 |
commit | d9683861f98277e7121ff47d2bd223c2d0c2cd34 (patch) | |
tree | a7357a7ebe80675716b543f1d30f1f1cdf083efa /src/webex | |
parent | 97f6e68ce3a515938228b9a4d3e41b5f4b25a015 (diff) |
fix performance and UI issues with tipping
Diffstat (limited to 'src/webex')
-rw-r--r-- | src/webex/pages/confirm-contract.tsx | 2 | ||||
-rw-r--r-- | src/webex/pages/tip.tsx | 65 |
2 files changed, 47 insertions, 20 deletions
diff --git a/src/webex/pages/confirm-contract.tsx b/src/webex/pages/confirm-contract.tsx index 78e90ee0e..b851bf1d2 100644 --- a/src/webex/pages/confirm-contract.tsx +++ b/src/webex/pages/confirm-contract.tsx @@ -260,7 +260,7 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt return; } console.log("payResult", payResult); - document.location.href = payResult.nextUrl; + document.location.replace(payResult.nextUrl); this.setState({ holdCheck: true }); } diff --git a/src/webex/pages/tip.tsx b/src/webex/pages/tip.tsx index 578ae6aa4..f21bc0eaf 100644 --- a/src/webex/pages/tip.tsx +++ b/src/webex/pages/tip.tsx @@ -31,6 +31,7 @@ import * as i18n from "../../i18n"; import { acceptTip, getTipStatus, + getReserveCreationInfo, } from "../wxApi"; import { @@ -40,7 +41,7 @@ import { import * as Amounts from "../../amounts"; import { TipToken } from "../../talerTypes"; -import { TipStatus } from "../../walletTypes"; +import { ReserveCreationInfo, TipStatus } from "../../walletTypes"; interface TipDisplayProps { tipToken: TipToken; @@ -48,18 +49,22 @@ interface TipDisplayProps { interface TipDisplayState { tipStatus?: TipStatus; + rci?: ReserveCreationInfo; working: boolean; + discarded: boolean; } class TipDisplay extends React.Component<TipDisplayProps, TipDisplayState> { constructor(props: TipDisplayProps) { super(props); - this.state = { working: false }; + this.state = { working: false, discarded: false }; } async update() { const tipStatus = await getTipStatus(this.props.tipToken); this.setState({ tipStatus }); + const rci = await getReserveCreationInfo(tipStatus.exchangeUrl, tipStatus.amount); + this.setState({ rci }); } componentDidMount() { @@ -74,8 +79,8 @@ class TipDisplay extends React.Component<TipDisplayProps, TipDisplayState> { this.update(); } - renderExchangeInfo(ts: TipStatus) { - const rci = ts.rci; + renderExchangeInfo() { + const rci = this.state.rci; if (!rci) { return <p>Waiting for info about exchange ...</p>; } @@ -99,12 +104,30 @@ class TipDisplay extends React.Component<TipDisplayProps, TipDisplayState> { acceptTip(this.props.tipToken); } - renderButtons() { - return ( + discard() { + this.setState({ discarded: true }); + } + + render(): JSX.Element { + const ts = this.state.tipStatus; + if (!ts) { + return <p>Processing ...</p>; + } + + const renderAccepted = () => ( + <> + <p>You've accepted this tip! <a href={ts.nextUrl}>Go back to merchant</a></p> + {this.renderExchangeInfo()} + </> + ); + + const renderButtons = () => ( + <> <form className="pure-form"> <button className="pure-button pure-button-primary" type="button" + disabled={!(this.state.rci && this.state.tipStatus)} onClick={() => this.accept()}> { this.state.working ? <span><object className="svg-icon svg-baseline" data="/img/spinner-bars.svg" /> </span> @@ -112,26 +135,30 @@ class TipDisplay extends React.Component<TipDisplayProps, TipDisplayState> { Accept tip </button> {" "} - <button className="pure-button" type="button" onClick={() => { window.close(); }}>Discard tip</button> + <button className="pure-button" type="button" onClick={() => this.discard()}> + Discard tip + </button> </form> + { this.renderExchangeInfo() } + </> + ); + + const renderDiscarded = () => ( + <p>You've discarded this tip. <a href={ts.nextUrl}>Go back to merchant.</a></p> ); - } - render(): JSX.Element { - const ts = this.state.tipStatus; - if (!ts) { - return <p>Processing ...</p>; - } return ( <div> <h2>Tip Received!</h2> - <p>You received a tip of <strong>{renderAmount(ts.tip.amount)}</strong> from <span> </span> - <strong>{ts.tip.merchantDomain}</strong>.</p> - {ts.tip.accepted - ? <p>You've accepted this tip! <a href={ts.tip.nextUrl}>Go back to merchant</a></p> - : this.renderButtons() + <p>You received a tip of <strong>{renderAmount(ts.amount)}</strong> from <span> </span> + <strong>{ts.merchantDomain}</strong>.</p> + { + this.state.discarded + ? renderDiscarded() + : ts.accepted + ? renderAccepted() + : renderButtons() } - {this.renderExchangeInfo(ts)} </div> ); } |