Repower / Repower_CHosoWebApi

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

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

import saveIcon from '../../img/save.svg'
import qrCode from '../../img/qrcode.png'

import data from './data.json'

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

class SaveModal extends Component {
  
  constructor(props) {
    super(props);

    this.state = {
      email:'',
      buttonDisabled: true
    };
    
    this.handleAdCheckbox = this.handleAdCheckbox.bind(this);
    this.handleCheckbox = this.handleCheckbox.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){

     const modal='activationSaveModal'
      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.updateStoreValue('sessionSaved',true)

      this.props.updateStoreValue('showSessionMessage',true)

      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.props.showModal('CONTACT_CONFIRM')
  }

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

    
  }

  

  render(){
    
     const modal='activationSaveModal'
   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--save 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={saveIcon} alt="" />
            {this.props.history.location.pathname==='/activation-steps' && this.props.sessionSaved &&
              <h3>{data.modalStrings.saveModal.title_processSaved}</h3>
            }
            {this.props.history.location.pathname==='/activation-steps' && !this.props.sessionSaved &&
              <h3>{data.modalStrings.saveModal.title_saveAndResume}</h3>
            }
            {this.props.history.location.pathname==='/solution' && !this.props.sessionSaved &&
              <h3>{data.modalStrings.saveModal.title_saveAndActivate}</h3>
            }
            {this.props.history.location.pathname==='/solution' && this.props.sessionSaved &&
              <h3>{data.modalStrings.saveModal.title_processSaved}</h3>
            }

          </div>

          <div className="modal-body">
            <div className="modal-body-flex">
              <div className="modal-body-left">
                <p>{data.modalStrings.saveModal.text_intro}</p>
                <div className="wrapper_input wrapper_input--repowerCode">
                  <div className="label">{data.modalStrings.saveModal.code_label}</div>
                  <div className="code">{this.props.activationCode}</div>
                </div>
                <div className="wrapper-link">
                  <p className="lighter">link diretto:</p>
                  <a href={"http://energiaflat.repower.com/"+this.props.activationCode} className="permalink">http://energiaflat.repower.com/<span>{this.props.activationCode}</span></a>
                </div>
              </div>

              <div className="modal-body-right">
                <div>
                  <p>{data.modalStrings.saveModal.qrCode_intro}</p>
                </div>
                <div className="wrapper-qrQode">
                  <img src={qrCode} alt="" />
                </div>
              </div>
            </div>
            <div className="modal-footer">

           
              <h3>{data.modalStrings.saveModal.contacts_intro}</h3>
              <div className='modal-flex-wrapper'>
              <ModalValidatingInput
                allowNonValidInput={false}
                  label={''}
                  pattern={"^[A-Za-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"}
                  name={'contact'}
                  placeholder={'Email '}
                  modal={'activationSaveModal'}
              />
              {!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.handleClick()}>
              Invia
            </button>
            }
              </div>
              {this.props.modalPrivacy.visible&&
              <div className="wrapper-checkbox">

                <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 privacy__translate"></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>

              </div>


            }
              {this.props.adAccepted.visible &&
              <div className="wrapper-checkbox">

                <input className="privacy" name="ad" id="ad" type="checkbox" onChange={this.handleAdCheckbox} value={this.props.adAccepted.value} checked={!!this.props.adAccepted.value}/>

                <label className='adConfirm' htmlFor="ad"><span className="isCheckbox"></span>  <span className='flex-test'> Autorizzo ad essere ricontattato, anche a fini pubblicitari e promozionali. </span></label>

              </div>
            }
              
            </div>
          </div>
        
      
        </ReactModal>
      )
  }
}

const mapStateToProps = state => {
  return {
    activationSteps: state.ProfilationSelectReducer.activationSteps,
    activationCode: state.ProfilationSelectReducer.activationCode,
    modalContacts: state.ProfilationSelectReducer.modalContacts,
  steps:state.ProfilationSelectReducer.steps,
  solutions:state.ProfilationSelectReducer.solutions,
  modalOpen:state.ProfilationSelectReducer.modalOpen,
  adAccepted:state.ProfilationSelectReducer.adAccepted,
  sessionSaved:state.ProfilationSelectReducer.sessionSaved,
  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)),
});

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