content: import React from 'react';
  import { reduxForm, Field } from 'redux-form/immutable';
  import RenderField from 'components/RenderField';
  import FormFooter from 'components/FormFooter';
  import messages from './messages';
  import { FormattedMessage } from 'react-intl';
  import asyncValidate from './asyncValidate';
  import P from 'components/P';
  import mail from '../../assets/icon/mail.svg';
  import Header from 'components/Header';
  import Body from 'components/Body';
  
  const validate = values => {
    const errors = {};
    //  Email
    if (!values.get('email')) {
      errors.email = 'Obrigatório';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.get('email'))) {
      errors.email = 'Email inválido';
    }
    return errors;
  };
  
  const Email = (props) => {
    const { handleSubmit, submitting, valid, previousPage } = props;
    return (
      <Body relaxed offsetExtra>
        <Header title={<FormattedMessage {...messages.group2} />} back={previousPage} />
        <form onSubmit={handleSubmit}>
          <img src={mail} alt="mail" />
          <P className="body1">
            <FormattedMessage {...messages.emailLabelMessage} />
          </P>
          <Field
            name="email"
            type="email"
            component={RenderField}
            placeholder="email@email.com.br"
            label={messages.emailHeadingMessage}
          />
          <FormFooter
            disabled={submitting || !valid}
          />
        </form>
      </Body>
    );
  };
  
  Email.propTypes = {
    handleSubmit: React.PropTypes.func,
    submitting: React.PropTypes.bool,
    valid: React.PropTypes.bool,
    previousPage: React.PropTypes.func,
  };
  
  export default reduxForm({
    form: 'wizard',
    destroyOnUnmount: false,
    validate,
    asyncValidate,
    asyncBlurFields: ['email'],
  })(Email);
  