diff --git a/src/components/StripeBankAccountToken/StripeBankAccountToken.css b/src/components/StripeBankAccountToken/StripeBankAccountToken.css index e646e59d..c5f93a55 100644 --- a/src/components/StripeBankAccountToken/StripeBankAccountToken.css +++ b/src/components/StripeBankAccountToken/StripeBankAccountToken.css @@ -1,8 +1,3 @@ -.routingNumber { - width: calc(42% - 1px); -} - -.accountNumberNotIban { - width: calc(58% - 1px); - margin-left: 2px; +.unsupportedCountryError { + color: red; } diff --git a/src/components/StripeBankAccountToken/StripeBankAccountToken.js b/src/components/StripeBankAccountToken/StripeBankAccountToken.js index e6817b8f..9ed8a5e7 100644 --- a/src/components/StripeBankAccountToken/StripeBankAccountToken.js +++ b/src/components/StripeBankAccountToken/StripeBankAccountToken.js @@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react'; import { intlShape, injectIntl, FormattedMessage } from 'react-intl'; import { debounce } from 'lodash'; -import { Input } from '../../components'; +import { Input, ValidationError } from '../../components'; import config from '../../config'; import css from './StripeBankAccountToken.css'; @@ -11,9 +11,6 @@ const supportedCountries = config.stripe.supportedCountries.map(c => c.code); const DEBOUNCE_WAIT_TIME = 200; -const ErrorMessage = props => {props.children}; -ErrorMessage.propTypes = { children: PropTypes.any.isRequired }; - /** * Create a single-use token from the given bank account data * @@ -170,13 +167,12 @@ class StripeBankAccountToken extends Component { render() { const { country, currency, input, meta, intl } = this.props; const { value: tokenValue, onBlur } = input; - const { touched, error: formError } = meta; if (!supportedCountries.includes(country)) { return ( - +
- +
); } @@ -194,7 +190,7 @@ class StripeBankAccountToken extends Component { const handleRoutingNumberChange = e => { const value = e.target.value.trim(); - this.setState({ routingNumber: value }); + this.setState({ routingNumber: value, error: null }); this.requestToken(this.state.accountNumber, value); }; @@ -207,41 +203,43 @@ class StripeBankAccountToken extends Component { }); const routingNumberInput = ( - +
+ + +
); - const showErrors = touched; + const { touched, error: metaError } = meta; + const stateErrorMessage = this.state.error ? this.state.error.message : null; + const error = ; + const formError = this.state.error + ? null + : ; return (
+ {routingNumRequired ? routingNumberInput : null} - {routingNumRequired ? routingNumberInput : null} - {showErrors && this.state.error - ? {this.state.error.message} - : null} - {showErrors && formError && !this.state.error - ? {formError} - : null} + {error} + {formError}
); } diff --git a/src/translations/en.json b/src/translations/en.json index 9c12937b..1eef1ad2 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -127,6 +127,7 @@ "SignupForm.termsOfService": "By confirming I accept the terms and conditions and the {stripeConnectedAccountAgreementLink}", "StripeBankAccountToken.accountNumberPlaceholder": "account number", "StripeBankAccountToken.bankAccountNumberLabel": "Bank account number:", + "StripeBankAccountToken.routingNumberLabel": "Routing number:", "StripeBankAccountToken.bankAccountNumberLabelIban": "Bank account number (IBAN):", "StripeBankAccountToken.createBankAccountTokenError": "Could not connect account number. Please double-check that your routing number and account number are valid in {country} when using {currency}", "StripeBankAccountToken.createBankAccountTokenErrorIban": "Could not connect account number. Please double-check that your account number is valid in {country} when using {currency}",