Form In React

form.js

import React from 'react';
import { connect } from "react-redux"

import store from "../store"
import { submitForm } from '../actions/additional-data-actions'
import { setGrayScreenMode } from '../actions/core-actions'
import BasicPage from '../helpers/basic-page';

import { Link } from 'react-router'

import InlineSVG from 'svg-inline-react';
import Step from '../helpers/steps'

import lockerIcon from '../../assets/img/icons/locker.svg?inline'
import fakeIcon from '../../assets/img/fake-gift.png'

const stringRegex = /([^\s])/;
const emailRegex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
const cepRegex = /^([0-9]){5}([0-9]){3}$/;
const cpfRegex = /^[0-9]{3}.?[0-9]{3}.?[0-9]{3}-?[0-9]{2}/;

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@connect(( store ) => {
  return {
    isLoading: store.core.isLoading,
    loggedUser: store.user.loggedUser,
    prize: store.game.currentPrize
  };
})

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

class AditionalData extends BasicPage {

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  constructor( props ) {
    super( props );
    this.displayName = 'AditionalData';
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  componentWillMount() {
    super.componentWillMount();
    this.props.dispatch( setGrayScreenMode( true ) );

    this.setState( {
      fields: {
        name: {
          valid: false,
          value: this.props.loggedUser.name || '',
          validation: 'string'
        },
        email: {
          valid: false,
          value: this.props.loggedUser.email || '',
          validation: 'email'
        },
        mobile: {
          valid: false,
          value: this.props.loggedUser.mobile || '',
          validation: 'phone'
        },
        cpf: {
          valid: false,
          value: this.props.loggedUser.cpf || '',
          validation: 'cpf'
        },
        cep: {
          valid: false,
          value: this.props.loggedUser.cep || '',
          validation: 'cep'
        },
        address: {
          valid: false,
          value: this.props.loggedUser.address || '',
          validation: 'string'
        },
        numb: {
          valid: false,
          value: this.props.loggedUser.numb || '',
          validation: 'string'
        },
        complete: {
          valid: true,
          value: this.props.loggedUser.complete || '',
          validation: null
        },
        neighborhood: {
          valid: false,
          value: this.props.loggedUser.neighborhood || '',
          validation: 'string'
        },
        city: {
          valid: false,
          value: this.props.loggedUser.city || '',
          validation: 'string'
        },
        state: {
          valid: false,
          value: this.props.loggedUser.state || '',
          validation: 'string'
        },
        optin: {
          valid: false,
          value: false,
          validation: 'checkbox'
        }
      },
      isFormValid: false
    });
  }

  componentDidMount() {
    super.componentDidMount();
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  onSubmit( event ) {
    event.preventDefault();

    if ( this.state.isFormValid ) {
      let fieldsName  = Object.keys( this.state.fields );
      let fieldsToApi = {};

      for( let x in fieldsName ) {
        fieldsToApi[ fieldsName[ x ] ] = this.state.fields[ fieldsName[ x ] ].value;
      }

      this.props.dispatch( submitForm( fieldsToApi ) );
    } else {
      console.log( 'form invalid' );
    }
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  handleChange( event ) {
    let currentState = Object.assign( {}, this.state );
    let stateField = currentState.fields[ event.target.name ];

    switch ( stateField.validation ) {
      case 'checkbox':
        stateField.value = ( event.target.checked ? true : false );
        break;
      case 'cpf':
      case 'cep':
        let fieldValue   = event.target.value.replace( /[\.-]/g, "" );
        fieldValue       = fieldValue.replace( /[^\d]/g, '' );
        stateField.value = fieldValue;
        break;
      case 'number':
      case 'phone':
        stateField.value = event.target.value.replace( /[^\d]/g, '' );
        break;
      default:
        stateField.value = event.target.value;
        break;
    }

    this.setState( currentState );

    if ( this.isFormValid() ) {
      currentState.isFormValid = true;
      this.setState( currentState );
    }
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  handleBlur( event ) {
    const currentState = Object.assign( {}, this.state );
    let stateField = currentState.fields[ event.target.name ];

    stateField.valid = this.validateField( stateField ) ? 'valid' : 'invalid';

    this.setState( currentState );
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  validateField( field ) {
    switch ( field.validation ) {
      case 'string':
        if( !stringRegex.test( field.value ) ) return;
        break;
      case 'email':
        if( !emailRegex.test( field.value ) ) return;
        break;
      case 'cep':
        if( !cepRegex.test( field.value ) ) return;
        break;
      case 'cpf':
        if( !this.isValidCPF( field.value ) ) return;
        break;
      case 'phone':
        if( field.value.length < 11 ) return;
        break;
      case 'checkbox':
        if( !field.value ) return;
        break;
    }

    return true;
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  isFormValid() {
    const currentState = Object.keys( this.state.fields );

    for ( let field in currentState ) {
      let fieldCurrentState = this.state.fields[ currentState[ field ] ];

      if( !this.validateField( fieldCurrentState ) ) {
        this.setState({ isFormValid: false });
        return;
      }
    }

    return true;
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  render() {
    return (
      <section className={'nx-additional-data nx-page'}>
        <header className="nx-additional-data-header">
          <h2 className="nx-additional-data-title nx-title-1-bold">Informações para a entrega</h2>
          <p className="nx-additional-data-text nx-text-reg-1">Só precisamos de mais uns dados rápidos pra fazer o(a) { this.props.prize ? this.props.prize.name : '' } chegar na sua casa</p>
        </header>
        <div className="nx-additional-data-content">
          {
            this.props.prize ? (
              <div className="nx-additional-data-prize">
                <img src={ this.props.prize.img } className="nx-form-user-data-icon" />
                <div className="nx-form-user-data-prize-info">
                  <h3 className="nx-form-user-data-prize-title nx-text-bold-1">{ this.props.prize.name }</h3>
                  <ul className="nx-form-user-data-prize-text">
                    {
                      this.props.prize.details.map((item, i) => {
                        return <li key={i} className="nx-text-reg-2">{ item }</li>
                      })
                    }
                  </ul>
                </div>
              </div>
            ) : null
          }
          <form className="nx-additional-data-form" onSubmit={this.onSubmit.bind( this )}>
            <fieldset>
              <p className="nx-additional-data-form-line">
                <label className="nx-label">Nome</label>
                <input
                  type="text"
                  name="name"
                  className={`nx-input ${this.state.fields.name.valid == 'invalid' ? 'nx-input--invalid' : ''}`}
                  placeholder="Insira seu Nome"
                  maxLength="70"
                  value={this.state.fields.name.value}
                  onChange={this.handleChange.bind( this )}
                  onBlur={this.handleBlur.bind( this )} />
              </p>
              <p className="nx-additional-data-form-line">
                <label className="nx-label">E-mail</label>
                <input
                  type="email"
                  name="email"
                  maxLength="50"
                  className={`nx-input ${this.state.fields.email.valid == 'invalid' ? 'nx-input--invalid' : ''}`}
                  placeholder="Insira seu e-mail"
                  value={this.state.fields.email.value}
                  onChange={this.handleChange.bind( this )}
                  onBlur={this.handleBlur.bind( this )} />
              </p>
              <p className="nx-additional-data-form-line">
                <label className="nx-label">Telefone</label>
                <input
                  type="tel"
                  name="mobile"
                  maxLength="11"
                  className={`nx-input ${this.state.fields.mobile.valid == 'invalid' ? 'nx-input--invalid' : ''}`}
                  placeholder="Insira seu Telefone"
                  value={this.state.fields.mobile.value}
                  onChange={this.handleChange.bind( this )}
                  onBlur={this.handleBlur.bind( this )} />
              </p>
              <p className="nx-additional-data-form-line">
                <label className="nx-label">CPF</label>
                <input
                  type="tel"
                  name="cpf"
                  maxLength="11"
                  className={`nx-input ${this.state.fields.cpf.valid == 'invalid' ? 'nx-input--invalid' : ''}`}
                  placeholder="Insira seu CPF"
                  autoComplete="off"
                  value={this.state.fields.cpf.value}
                  onChange={this.handleChange.bind( this )}
                  onBlur={this.handleBlur.bind( this )} />
              </p>
              <p className="nx-additional-data-form-line">
                <label className="nx-label">CEP</label>
                <input
                  type="tel"
                  name="cep"
                  maxLength="8"
                  className={`nx-input ${this.state.fields.cep.valid == 'invalid' ? 'nx-input--invalid' : ''}`}
                  placeholder="Insira seu CEP"
                  autoComplete="off"
                  value={this.state.fields.cep.value}
                  onChange={this.handleChange.bind( this )}
                  onBlur={this.handleBlur.bind( this )} />
              </p>
              <p className="nx-additional-data-form-line">
                <label className="nx-label">Endereço</label>
                <input
                  type="text"
                  name="address"
                  maxLength="100"
                  className={`nx-input ${this.state.fields.address.valid == 'invalid' ? 'nx-input--invalid' : ''}`}
                  placeholder="Insira seu endereço"
                  value={this.state.fields.address.value}
                  onChange={this.handleChange.bind( this )}
                  onBlur={this.handleBlur.bind( this )} />
              </p>
              <div className="nx-additional-data-form-line-address">
                <div className="nx-additional-data-form-line">
                  <label className="nx-label">Número</label>
                  <input
                    type="tel"
                    name="numb"
                    maxLength="10"
                    className={`nx-input ${this.state.fields.numb.valid == 'invalid' ? 'nx-input--invalid' : ''}`}
                    placeholder="Número"
                    value={this.state.fields.numb.value}
                    onChange={this.handleChange.bind( this )}
                    onBlur={this.handleBlur.bind( this )} />
                </div>
                <div className="nx-additional-data-form-line">
                  <label className="nx-label">Complemento (opcional)</label>
                  <input
                    type="text"
                    name="complete"
                    className="nx-input"
                    maxLength="30"
                    placeholder="Insira seu Complemento"
                    value={this.state.fields.complete.value}
                    onChange={this.handleChange.bind( this )}
                    onBlur={this.handleBlur.bind( this )} />
                </div>
              </div>
              <p className="nx-additional-data-form-line">
                <label className="nx-label">Bairro</label>
                <input
                  type="text"
                  name="neighborhood"
                  className={`nx-input ${this.state.fields.neighborhood.valid == 'invalid' ? 'nx-input--invalid' : ''}`}
                  placeholder="Insira seu Bairro"
                  maxLength="50"
                  value={this.state.fields.neighborhood.value}
                  onChange={this.handleChange.bind( this )}
                  onBlur={this.handleBlur.bind( this )} />
              </p>
              <p className="nx-additional-data-form-line">
                <label className="nx-label">Cidade</label>
                <input
                  type="text"
                  name="city"
                  className={`nx-input ${this.state.fields.city.valid == 'invalid' ? 'nx-input--invalid' : ''}`}
                  placeholder="Insira sua cidade"
                  maxLength="50"
                  value={this.state.fields.city.value}
                  onChange={this.handleChange.bind( this )}
                  onBlur={this.handleBlur.bind( this )} />
              </p>
              <p className="nx-additional-data-form-line">
                <label className="nx-label">Estado</label>
                <select
                  name="state"
                  className="nx-select"
                  value={this.state.fields.state.value}
                  onChange={this.handleChange.bind( this )}>
                  <option value="">Selecione o seu Estado</option>
                  <option value="sp">São Paulo</option>
                  <option value="rj">Rio de Janeiro</option>
                </select>
              </p>
              <p className="nx-additional-data-form-accept">
                <input
                  type="checkbox"
                  name="optin"
                  className="nx-checkbox"
                  value={this.state.fields.optin.value}
                  onChange={this.handleChange.bind( this )} />
                <label className="nx-label">Concordo com os <span className="nx-additional-data-form-terms"> <Link to={`/termos-e-condicoes`} target="_blank">termos e condições</Link>.</span></label>
              </p>
              <p>
                <button className={`nx-button ${!this.state.isFormValid ? 'nx-button--disabled' : ''}`}>Confirmar</button>
              </p>
              <div className="nx-additional-data-message">
                <span><InlineSVG src={lockerIcon} /></span> Suas informações são confidenciais e não serão divulgadas.
              </div>
            </fieldset>
          </form>
        </div>
      </section>
    );
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

}

export default AditionalData;