Repower / Repower_CHosoWebApi

import React, { Component } from 'react';

import ValidatingInput from '../components/ValidatingInput'

import CheckIcon from '../../../img/check.svg'

import ServizioClientiIcon from '../../../img/icon_servizio_clienti.svg'

import ThumbsUpIcon from '../../../img/thumbs-up.svg'


import RightBox from '../components/RightBox'

import greenCheck from '../../../img/outlineGreenCheck.svg'

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

class ActivationStep5 extends Component{
	constructor(props){
		super(props)
		this.state={
			sendAgainOpen:false,
			smsSent:false,
			codeVerified:false
		}

		this.toggleSendAgain=this.toggleSendAgain.bind(this)
		this.toggleSmsSent=this.toggleSmsSent.bind(this)
		this.verifyCode=this.verifyCode.bind(this)
	}

	toggleSendAgain(){
		this.setState({
			...this.state,
			sendAgainOpen:!this.state.sendAgainOpen
		})
	}

	toggleSmsSent(){
		this.setState({
			...this.state,
			sendAgainOpen:!this.state.sendAgainOpen,
			smsSent:true,
		})
	}

	verifyCode(){
		this.setState({
			...this.state,
			codeVerified:true
		})
	}
	render(){

		if(!this.state.codeVerified){
		return(
			<div className='attivazione-step attivazione-step-5'>
				<div className='attivazione-step-left-col attivazione-steps-inner'>
				<div className='attivazione-head'>
					<div className="wrapper-attivazione-head">
				    
				  <h2>Inserisci il codice ricevuto tramite SMS</h2>
				  <p>
				  	Inserisci il codice di 6 cifre ricevuto via SMS al numero <strong>{this.props.activationSteps[3].referentPhone.value}</strong> per confermare la richiesta di attivazione
				  </p>
					</div>
				
				</div>
				<div className='attivazione-step-body'>
				
					<ValidatingInput 
					allowNonValidInput={true}
					label={''}
					pattern={"[0-9]{6}"}
					name={'activationCode'}
					stepIndex={4}
					placeholder={'Inserisci il codice di 6 cifre'}
					className={''}

					
				/>

				
				<button className={this.props.activationSteps[4].activationCode.valid? "btn__red":"btn__grayLighter no-events"} 
					onClick={()=>this.verifyCode()}
				>Invia e conferma</button>
				<div className='send-again-container'>
				{this.state.smsSent&&
					<div className='sms-sent'>
						<figure>
							<img src={greenCheck} alt='' />
						</figure>
						<p>
							Messaggio inviato correttamente
						</p>
					</div>
				}

				{!this.state.sendAgainOpen&&
				<div className='send-again-inner'>
					<p className='send-again-title'>Non hai ricevuto l'sms?</p>
					<p>
						L’invio dell’sms potrebbe richiedere fino a 1 minuto. In caso di mancato  <br />invio, puoi richiedere un secondo invio.
					</p>

					<p className='send-again-cta' 
						onClick={() => this.toggleSendAgain()}>
						Invia di nuovo
					</p>

				</div>}
				
				{this.state.sendAgainOpen&&
				<div className='send-again-inner open'>
					<p className='send-again-title'>Invia di nuovo SMS</p>
					<p>
						Abbiamo precedentemente inviato un SMS al numero sottostante. 
Invialo allo stesso numero o cambialo nel caso fosse sbagliato.
					</p>

					<div className='activation-flex-wrapper'>
						<ValidatingInput 
					allowNonValidInput={true}
					label={''}
					pattern={"[0-9]{10,}"}
					name={'sendAgainNumber'}
					stepIndex={4}
					placeholder={''}
					className={''}
					
				/>

				</div>

				<button onClick={() => this.toggleSmsSent()}
				className={this.props.activationSteps[4].sendAgainNumber.valid? "btn__gray":"btn__grayLighter no-events"} >
				Invia di nuovo</button>
					</div>

				}

				</div>




			
            
            			
            

                  	</div>

			</div>


			
				<RightBox stepIndex={4} openModal={false} />
			



		</div>
			
			

		)}


		if(this.state.codeVerified){
			return(
			<div className='attivazione-step attivazione-step-5 verified'>
				<div className='attivazione-step-left-col attivazione-steps-inner'>
				<div className='attivazione-head'>
					<div className="wrapper-attivazione-head">
				    
				  <h2>Perfetto ora tocca a noi!</h2>
				  <p>
				  	Hai portato correttamente a termine la richiesta di attivazione per la fornitura della tua attività.
				  </p>
					</div>
				
				</div>
				<div className='attivazione-step-body'>
				
					<h2>Quali sono i prossimi step?</h2>
					<div className='code-verified-block'>
						
						<div className='code-verified-icons'>
							<div className='code-verified-icon'>
								<figure>
									<img src={ServizioClientiIcon} alt='' />
								</figure>
								<p className='code-verified-title'>
									Abbiamo ricevuto la tua documentazione
								</p>
								<p className='code-verified-caption'>
									Procederemo ora con la compilazione del tuo nuovo contrato di fornitura.
								</p>
							</div>
							<div className='code-verified-icon'>
								<figure>
									<img src={ThumbsUpIcon} alt='' />
								</figure>
								<p className='code-verified-title'>
									Ti notificheremo non appena la tua fornitura sarà attiva
								</p>
								<p className='code-verified-caption'>
									La data di inizio fornitura sarà indicata sul contratto che riceverai al tuo indirizzo PEC..
								</p>
							</div>
						</div>
					</div>
				




			
            
            			
            

                  	</div>

			</div>

			{window.innerWidth>=1192 &&
			
				<RightBox stepIndex={4} openModal={false} codeVerified={this.state.codeVerified}/>
			
			}


		</div>)
		}
	}
}

const mapStateToProps = state => {
  return {
    steps: state.ProfilationSelectReducer.steps,
    activeStep: state.ProfilationSelectReducer.activeStep || 0,
    activationSteps: state.ProfilationSelectReducer.activationSteps,
    valuesAccepted: state.ProfilationSelectReducer.valuesAccepted,
  }
};

const mapDispatchToProps = dispatch => ({
	updateStoreValue: (prop,value) => 
    dispatch(SelectActionCreators.changeProp(prop,value)),
  updatePropValue: (steps, activeStep) => dispatch(SelectActionCreators.changeValue(steps, activeStep)),
  updateActivation: (index,prop,value) => dispatch(SelectActionCreators.updateActivation(index,prop,value)),
  showModal: (modalName) => 
    dispatch(SelectActionCreators.showModal(modalName)),
});

/*Profilation.propTypes = {
  steps: PropTypes.array.isRequired,
  activeStep: PropTypes.number.isRequired,
  updatePropValue: PropTypes.func.isRequired
}*/


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