Change StripeBankAccountToken styles

- Display routing number and account number on top of each other
 - Use ValidationError to show error messages

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;
 }

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 => <span style={{ color: 'red' }}>{props.children}</span>;
-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 (
-        <ErrorMessage>
+        <div className={css.unsupportedCountryError}>
           <FormattedMessage id="StripeBankAccountToken.unsupportedCountry" values={{ country }} />
-        </ErrorMessage>
+        </div>
       );
     }
 
@@ -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 = (
-      <Input
-        inline={routingNumRequired}
-        className={css.routingNumber}
-        name="routingNumber"
-        value={this.state.routingNumber}
-        placeholder={routingNumberPlaceholder}
-        onChange={handleRoutingNumberChange}
-        onBlur={handleBlur}
-      />
+      <div>
+        <label htmlFor="routingNumber">
+          <FormattedMessage id="StripeBankAccountToken.routingNumberLabel" />
+        </label>
+        <Input
+          name="routingNumber"
+          value={this.state.routingNumber}
+          placeholder={routingNumberPlaceholder}
+          onChange={handleRoutingNumberChange}
+          onBlur={handleBlur}
+        />
+      </div>
     );
 
-    const showErrors = touched;
+    const { touched, error: metaError } = meta;
+    const stateErrorMessage = this.state.error ? this.state.error.message : null;
+    const error = <ValidationError fieldMeta={{ touched, error: stateErrorMessage }} />;
+    const formError = this.state.error
+      ? null
+      : <ValidationError fieldMeta={{ touched, error: metaError }} />;
 
     return (
       <div>
+        {routingNumRequired ? routingNumberInput : null}
         <label htmlFor={input.name}>
           {routingNumRequired
             ? <FormattedMessage id="StripeBankAccountToken.bankAccountNumberLabel" />
             : <FormattedMessage id="StripeBankAccountToken.bankAccountNumberLabelIban" />}
         </label>
-        {routingNumRequired ? routingNumberInput : null}
         <Input
-          inline={routingNumRequired}
-          className={routingNumRequired ? css.accountNumberNotIban : null}
           value={this.state.accountNumber}
           placeholder={accountNumberPlaceholder}
           onChange={handleAccountNumberChange}
           onBlur={handleBlur}
         />
-        {showErrors && this.state.error
-          ? <ErrorMessage>{this.state.error.message}</ErrorMessage>
-          : null}
-        {showErrors && formError && !this.state.error
-          ? <ErrorMessage>{formError}</ErrorMessage>
-          : null}
+        {error}
+        {formError}
       </div>
     );
   }

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}",