Repower / Repower_CHosoWebApi

import React, { Component } from 'react';

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

import outlineGreenCheck from '../../../img/outlineGreenCheck.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,
			showText: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)

		this.toggleText=this.toggleText.bind(this)
	}

	toggleText(){
		this.setState({
			...this.state,
			showText:!this.state.showText
		})
	}

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

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

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

		


		
			return(
			<div className='step-five-body step-five-body__check'>

			{header}
			<div className='attivazione-step attivazione-step-5 verified activation-check'>
				<div className='attivazione-step-left-col attivazione-steps-inner'>
				<div className='attivazione-head'>
					<div className="wrapper-attivazione-head">
				    
				  <h2>Ci stiamo occupando della tua richiesta.</h2>
				  <p className="lighter_paragraph">
				  	Hai portato correttamente a termine la richiesta di attivazione per la fornitura della tua attività.
				  </p>
					</div>

				<p className="newDoubt">Hai qualche dubbio sulla tua richiesta? {!this.state.showText && <span onClick={() => this.toggleText()} className='underline'>Nessun problema, ti aiutiamo noi</span>}
                    {this.state.showText &&
					<span className="greenLabel">
						<span><img src={outlineGreenCheck} alt=""/></span>Messaggio inviato correttamente
					</span>

                    }
				</p>

				</div>
				<div className='attivazione-step-body'>
				
					<h2>A che punto è la mia richiesta?</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 activationCheck={'activationCheck'}/>
			
			}


		</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)),
});

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