Repower / Repower_CHosoWebApi

import React, { Component } from 'react';

import ValidatingInput from '../components/ValidatingInput'

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

import StickyHeader from '../../Solution/components/StickyHeader'
import Sticky from 'react-sticky-el';

import CheckIcon from '../../../img/check.svg'
import logo from '../../../img/logo.svg'
import close from '../../../img/close_header.svg'

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

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


import RightBox from '../components/RightBox'



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,
			loading:false,
			otpError:false,
			focus:false
		}

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

	componentDidMount(){
		window.scrollTo(0,0)
	}

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

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

	setFocus(val){
		this.setState({
			...this.state,
			focus:val
		})
	}

	handleChange(e){
			this.setState({
				...this.state,
				otpError:false
			})
			this.props.updateActivation(4,'activationCode',{
			...this.props.activationSteps[4].activationCode,
			value:e.target.value,
			valid:e.target.validity.valid&&e.target.value!==''})	
		}

	verifyCode(){

		if(this.props.activationSteps[4].activationCode.value===this.props.otp){
			this.props.updateStoreValue('progressBar',12)
				this.setState({
				...this.state,
				loading:true
			})
		}
		else{
			this.setState({
				...this.state,
				otpError:true
			})
		}
	}
	render(){
		const loading=this.state.loading
		if(loading){
			window.scrollTo(0,0)
			setTimeout(function(){
				this.setState({
					...this.state,
					loading:false,
					codeVerified:true
				})
			}.bind(this),2000)
		}

		const value=this.props.activationSteps[4].activationCode.value
		const valid=this.props.activationSteps[4].activationCode.valid

		var header=(<Sticky className='stickyMobile' mode='top' boundaryElement='.Activation-Step' topOffset={80}>
              			<StickyHeader showCode={true} />
            		</Sticky>)

		if(window.innerWidth>=1024){
			header=(<StickyHeader showCode={true} />)
		}

		if(!this.state.codeVerified && !loading){
		return(<div className='step-five-body'>

			{header}
			<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'>
				
					<div className='wrapper-input'>
		                <label htmlFor=""></label>
		                {typeof this.props.subLabel !== 'undefined' &&
		                	<p className='wrapper-input_subLabel'>
		                		{this.props.subLabel}
		                	</p>

		                }
			<div className="input_validation">
		                <input
		                type='tel'
		                pattern="[0-9]{6}"
		                onChange={this.handleChange} 
		                className='' 
		                name={'activationCode'} 
		                value={value} 
		                placeholder='123456'
		                onFocus={() => this.setFocus(true)} 
		                onBlur={() => this.setFocus(false)} 
		                />

		               

		                  <div className="validationIcon">
		                     {/*valid && value!=='' && !this.state.otpError &&<img src={greenCheck} alt=""/>*/}
		                     {((!valid || this.state.otpError)&& value!=='' && !this.state.focus)&&
		                  	<img src={alertError} alt=""/>
		            	}
		                  </div>
		                
			</div>
		              </div>

				
				<button className={this.props.activationSteps[4].activationCode.valid? "btn__gray":"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. < br />
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={''}
					type="tel"
					
				/>

				</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>
		</div>	
			

		)}

		if(loading){
			return(
				<div className='step-five-body'>
				{/*header*/}
				<div className='ajax-loader-ct step-five-loader'>
					
					<div className='ajax-loader-wrapper'>
						<div className="ajax-loader-inner">
							<div className="loader_spinner"></div>
							
						</div>

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


		if(this.state.codeVerified && !loading){
			return(
			<div className='step-five-body'>

			{header}
			<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>

		</div>
		)
		}
	}
}

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

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