Repower / Repower_CHosoWebApi

import React, { Component } from 'react'
import ReactModal from 'react-modal';

import * as SelectActionCreators from '../actions/profilationSelect'
import { connect } from 'react-redux';

import closeIcon from '../../img/closed_modal.svg'

import trainerIcon from './img/trainer-icons.svg'

import ModalValidatingInput from './ModalValidatingInput'
import {ContactModals} from "../../components/structures/ContactsModalStructure";
import data from './data.json'

class FurnitureModal extends Component {


  constructor(props) {
    super(props);

    this.state = {
      valid_email:false,
      valid_name:false,
      email:'',
      name:'',
      privacy:false,
     
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleCheckbox = this.handleCheckbox.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleAdCheckbox = this.handleAdCheckbox.bind(this);
  
    this.contactsModal = new ContactModals();
  }
  
  handleSubmit(e){

    const modal='furnitureModal'
    if(/^\+?\d+$/.test(this.props.modalContacts[modal].contact.value)){
      this.props.updateActivation(3,'holderPhone',{
        value:this.props.modalContacts[modal].contact.value,
        valid:true,
        required:this.props.activationSteps[3].holderPhone.required

      })
      this.props.updateActivation(3,'referentPhone',{
        value:this.props.modalContacts[modal].contact.value,
        valid:true,
        required:this.props.activationSteps[3].referentPhone.required

      })
    }
    
    if(/^[A-Za-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/.test(this.props.modalContacts[modal].contact.value)){
      this.props.updateActivation(3,'holderMail',{
        value:this.props.modalContacts[modal].contact.value,
        valid:true,
        required:this.props.activationSteps[3].holderMail.required

      })
      
      this.props.updateActivation(2,'emailIntestatario',{
          value:this.props.modalContacts[modal].contact.value,
          valid:true,
          ignore:this.props.activationSteps[2].emailIntestatario.ignore

      })
    }

    this.props.showModal('CONTACT_CONFIRM')
    this.props.updateStoreValue('adAccepted',{
      value:this.props.adAccepted.value,
      visible:!this.props.adAccepted.value
    })

    this.props.updateStoreValue('modalPrivacy',{
      value:this.props.modalPrivacy.value,
      visible:!this.props.modalPrivacy.value
    })

    this.contactsModal.GetAndSaveModalInfo(
      this.props.modalOpen[0], 
      this.props.modalContacts.furnitureModal.name.value, 
      this.props.modalContacts.furnitureModal.contact.value, 
      this.props.modalPrivacy.value, 
      this.props.adAccepted.value
    )  

    this.props.updateDatabucket({
        Description: this.props.modalOpen[0],
        Email: this.props.modalContacts.furnitureModal.name.value,
        PhoneNumber: this.props.modalContacts.furnitureModal.contact.value,
        PrivacyAck: this.props.modalPrivacy.value, 
        AllowContact: this.props.adAccepted.value,
        ContactReason: JSON.parse(localStorage.getItem("ContactsModel")),
    });        
  }


  handleCheckbox(e){

    this.props.updateStoreValue('modalPrivacy',{
      value:!this.props.modalPrivacy.value,
      visible:true
    })

    
  }

  handleAdCheckbox(e){
    
    this.props.updateStoreValue('adAccepted',{
      value:!this.props.adAccepted.value,
      visible:true
    })

    
  }


  handleChange(e) {
    const target = e.currentTarget;

    this.setState({
      ...this.state,
      [target.name]: target.value,
      ['valid_'+target.name]:e.target.validity.valid,
      
      
    });    
  }


  render(){
    const modal='furnitureModal'
   var complete=this.props.modalPrivacy.value;
    
    for (var property in this.props.modalContacts[modal]) {
            if ( this.props.modalContacts[modal].hasOwnProperty(property)) {

                complete=complete&&( this.props.modalContacts[modal][property].valid|| !this.props.modalContacts[modal][property].required)
              
         }

    }
    return(
      <ReactModal
          isOpen={true}
          onRequestClose={() => this.props.hideModal()}
          portalClassName='modal modal-mask modal_repower modal_repower__contact isOpen'
          overlayClassName='modal-wrapper'
          className='modal-container'
        >

          
        
          <div className="close_modal" onClick={() => this.props.hideModal()}><img src={closeIcon} alt="" /></div>
          
          <div  className=" modal-header">
            <img src={trainerIcon} alt="" />

            <h3>{data.modalStrings.furnitureModal.title}</h3>
          </div>
          
          <div className="modal-body">

          <p className="modal-description">{data.modalStrings.furnitureModal.text_line1} <br />{data.modalStrings.furnitureModal.text_line2}</p>

            <div className="modal-flex">
            
             
                <ModalValidatingInput 
                  allowNonValidInput={false}
                  label={'NOME O RAGIONE SOCIALE'}
                  pattern={"[A-zÀ-ÿ ]*"}
                  name={'name'}
                  placeholder={'Nome o ragione sociale'}
                  modal={'furnitureModal'}
                />

                 
           
               <ModalValidatingInput 
                  allowNonValidInput={false}
                  label={'EMAIL O NUMERO DI TELEFONO'}
                  pattern={"(^[A-Za-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$)||([0-9+]{8,})"}
                  name={'contact'}
                  placeholder={'Email o telefono'}
                  modal={'furnitureModal'}
                />
             
            </div>
          </div>

          <div className="modal-footer">
            {this.props.modalPrivacy.visible &&
              <div className="wapper-input__modale wapper-input__modalePrivacy">
                        <p>
                            <input className="privacy" name="privacy" id="privacy" type="checkbox" onChange={this.handleCheckbox} value={this.props.modalPrivacy.value} checked={!!this.props.modalPrivacy.value}/>


                          <label htmlFor="privacy"><span className="isCheckbox"></span>   Confermo di aver preso visione <span className=" triggher_modal privacy-modal-link" onClick={() => this.props.showModal('PRIVACY_MODAL')}>dell’informativa sulla privacy</span></label>
                        </p>
            </div>}
            {this.props.adAccepted.visible &&
              <div className="wapper-input__modale wapper-input__modalePrivacy">
                <p>
                <input className="privacy" name="ad" id="ad" type="checkbox" onChange={this.handleAdCheckbox} value={this.props.adAccepted.value} checked={!!this.props.adAccepted.value}/>

                <label htmlFor="ad"><span className="isCheckbox"></span>  <span> Autorizzo ad essere ricontattato, anche a fini pubblicitari e promozionali. </span></label>
                </p>
              </div>
            }
            {!complete &&
            <button className={!(complete)
              ? "btn btn__gray no-events":"btn btn__red"}>
              Invia
            </button>}

            {complete &&
              <button className={!(complete)
              ? "btn btn__gray no-events":"btn btn__red"} onClick={() => this.handleSubmit()}>
              Invia
            </button>
            }

          </div>
       
        
        </ReactModal>
      )
  }
}

const mapStateToProps = state => {
  return {
    activationSteps: state.ProfilationSelectReducer.activationSteps,
    modalContacts: state.ProfilationSelectReducer.modalContacts,
  steps:state.ProfilationSelectReducer.steps,
  solutions:state.ProfilationSelectReducer.solutions,
  modalOpen:state.ProfilationSelectReducer.modalOpen,
   adAccepted:state.ProfilationSelectReducer.adAccepted,
  modalPrivacy:state.ProfilationSelectReducer.modalPrivacy,
}};

const mapDispatchToProps = dispatch => ({
  updateActivation: (index,prop,value) => dispatch(SelectActionCreators.updateActivation(index,prop,value)),
  updatePropValue: (prop,value,index,complete) => 
    dispatch(SelectActionCreators.changeValue(prop,value,index,complete)),
  updateStoreValue: (prop,value) => 
    dispatch(SelectActionCreators.changeProp(prop,value)),
    hideModal: () => 
    dispatch(SelectActionCreators.hideModal()),
    showModal: (modalName) => 
    dispatch(SelectActionCreators.showModal(modalName)),
    updateModalValues: (modal,field,value) => dispatch(SelectActionCreators.updateModalValues(modal,field,value)),

    updateDatabucket: (databucket) => 
        dispatch(SelectActionCreators.updateDatabucketContact(databucket))
});

export default connect(mapStateToProps, mapDispatchToProps)(FurnitureModal);