refactors and enhances tip modal

This commit is contained in:
Jessop Breth 2018-09-12 15:27:22 -04:00
parent 923fac18d2
commit 85163ad2aa

View file

@ -18,7 +18,7 @@ type Props = {
type State = { type State = {
tipAmount: number, tipAmount: number,
newTipError: string, tipError: string,
}; };
class WalletSendTip extends React.PureComponent<Props, State> { class WalletSendTip extends React.PureComponent<Props, State> {
@ -27,9 +27,8 @@ class WalletSendTip extends React.PureComponent<Props, State> {
this.state = { this.state = {
tipAmount: 0, tipAmount: 0,
newTipError: '', tipError: '',
}; };
(this: any).handleSendButtonClicked = this.handleSendButtonClicked.bind(this); (this: any).handleSendButtonClicked = this.handleSendButtonClicked.bind(this);
} }
@ -48,26 +47,32 @@ class WalletSendTip extends React.PureComponent<Props, State> {
handleSupportPriceChange(event: SyntheticInputEvent<*>) { handleSupportPriceChange(event: SyntheticInputEvent<*>) {
const { balance } = this.props; const { balance } = this.props;
const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
const validTipInput = regexp.test(event.target.value);
const tipAmount = parseFloat(event.target.value); const tipAmount = parseFloat(event.target.value);
let newTipError; let tipError;
if (!String(tipAmount).match(/^(\d*([.]\d{0,8})?)$/)) {
newTipError = __('Tip must be a valid number with no more than 8 decimal places'); if (!tipAmount) {
} tipError = __('Tip must be a number');
if (tipAmount === balance) { } else if (tipAmount <= 0) {
newTipError = __('Please decrease your tip to account for transaction fees'); tipError = __('Tip must be a positive number');
} else if (!validTipInput) {
tipError = __('Tip must have no more than 8 decimal places');
} else if (tipAmount === balance) {
tipError = __('Please decrease your tip to account for transaction fees');
} else if (tipAmount > balance) { } else if (tipAmount > balance) {
newTipError = __('Not enough credits'); tipError = __('Not enough credits');
} }
this.setState({ this.setState({
tipAmount, tipAmount,
newTipError, tipError,
}); });
} }
render() { render() {
const { title, isPending, uri, onCancel, balance } = this.props; const { title, isPending, uri, onCancel, balance } = this.props;
const { tipAmount, newTipError } = this.state; const { tipAmount, tipError } = this.state;
return ( return (
<div> <div>
@ -78,10 +83,15 @@ class WalletSendTip extends React.PureComponent<Props, State> {
</div> </div>
<div className="card__content"> <div className="card__content">
<FormField <FormField
label={__('Amount')} label={
(tipAmount &&
tipAmount !== 0 &&
`Tip ${tipAmount.toFixed(8).replace(/\.?0+$/, '')} LBC`) ||
__('Amount')
}
postfix={__('LBC')} postfix={__('LBC')}
className="input--price-amount" className="input--price-amount"
error={newTipError} error={tipError}
min="0" min="0"
step="any" step="any"
type="number" type="number"
@ -98,7 +108,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
<Button <Button
button="primary" button="primary"
label={__('Send')} label={__('Send')}
disabled={isPending || tipAmount <= 0 || tipAmount > balance || tipAmount === balance} disabled={isPending || tipError}
onClick={this.handleSendButtonClicked} onClick={this.handleSendButtonClicked}
/> />
<Button <Button