index.js 3.96 KB
import React, { Component } from 'react';
import logo from './img/logo.svg'
import close from './img/close_header.svg'
import greenCheckOutline from '../../img/outlineGreenCheck.svg'

import ProgressBar from '../ProgressBar'

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


class Header extends Component {
  constructor(props){
    super(props)
    this.state= {
      pathname:''
    }
  }

  componentDidUpdate(prevState){

    /*if(prevState.pathname!==this.props.history.location.pathname){
      this.setState({
        pathname:this.props.history.location.pathname
      })
    }*/
  }


    redirect(){
        window.location.href='http://preprod-rep-sketchin.netlify.com'
    }

    render(){
        const saved=(this.props.activationSteps[2].isComplete||this.props.modalContacts.activationSaveModal.contact.valid)
        return(
            <div>
                <header className="">
                    <div className="bigContainer">
                        <div className="logo ">
                            <img src={logo} alt={'logo'} />
                            <p className="header--payoff ">Costruisci in pochi secondi
                                <br />la tua tariffa flat, 100% online.
                            </p>

                        </div>
                        <nav className="main-navi">
                        </nav>
                        <div className="navigation_right navigation_right--activation ">

                         {(!saved && this.props.history.location.pathname!=='/')&&

          <div data-modal="modal-save" className="triggher_modal saveOffer" id="show-modal-three" onClick={() => this.props.showModal('SAVE_MODAL')}>
            <div className="outline-offer-cta-top">
              <img src="https://d33wubrfki0l68.cloudfront.net/a6e0b3c4556ce07e9ed9c732fed7b8a4c981880b/eef1a/img/save.svg" alt="" />
              <p>Salva e riprendi dopo</p>
            </div>
          </div>
         
        }

        {(saved && this.props.history.location.pathname!=='/') &&
          <div className='codeContainer'>
              <p className="saveProcess">Processo Salvato <span><img src={greenCheckOutline} alt=""/></span></p>
              <p className='title'>Codice Repower: <span className="code"><span><img src={greenCheckOutline} alt=""/></span> {this.props.activationCode} </span></p>

          </div>
          }
                            {this.props.history.location.pathname!=='/' &&
                        <div className="close--header" onClick={() => this.props.showModal('WAYOUT_MODAL')}>
                            <img src={close} alt="" />

                        </div> }

                            {this.props.history.location.pathname=='/' &&
                            <div className="close--header" onClick={()=>this.redirect()}>
                                <img src={close} alt="" />

                            </div> }
                        </div>
                        
                    </div>
                    
                      <ProgressBar/>
                    
                    
                </header>
            </div>

        )
    }
}


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

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

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