Repower / Repower_CHosoWebApi

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

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

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

import arrowDownRed from '../../img/arrow_down_red.svg'

import {NavLink} from 'react-router-dom';

import SpringScrollbars from './SpringScrollbars'


class AcceptPrivacyModal extends Component {
  constructor(props){
    super(props)
    this.state={
      scrollTop:0,
      activeBtn:false,
      bottomReached:false
    }
    this.handleUpdate=this.handleUpdate.bind(this)
    this.handleClick=this.handleClick.bind(this)
    this.handleCheckbox=this.handleCheckbox.bind(this)
    this.handleScrollStop=this.handleScrollStop.bind(this)
    this.arrowScroll=this.arrowScroll.bind(this)
    this.keyScroll=this.keyScroll.bind(this)
  }

  handleScrollStop(){
    const { scrollbars } = this.refs;
    this.setState({
            ...this.state,
            scrollTop:scrollbars.getScrollTop()
          })
    console.log(this.state.scrollTop)
  }

  arrowScroll(){
    const { scrollbars } = this.refs;

      console.log(scrollbars.getScrollTop())
      var scrollTo=scrollbars.getScrollTop()+300
      
      if(!this.state.activeBtn){
        scrollbars.scrollTop(scrollTo);
          
      }
      
      
  }

  keyScroll(e){
    const { scrollbars } = this.refs;

    if(e.keyCode===13 || e.keyCode===40  || e.keyCode===32){
      
      var scrollTo=scrollbars.getScrollTop()+50
      
      if(!this.state.activeBtn){
        scrollbars.scrollTop(scrollTo);
         
      }
      
    }

    if( e.keyCode===38){
      var scrollTarget=scrollbars.getScrollTop()-50
      
      scrollbars.scrollTop(scrollTarget);
      
    }
    
    
  }

  handleCheckbox(name){

    this.props.updateStoreValue(name,{
      ...this.props[name],
      value:!this.props[name].value,
      visible:this.props[name].value
    })
  }

  handleClick(){
    this.props.updateStoreValue('showSessionMessage',false)
    this.props.updateStoreValue('privacyAccepted',true)
    this.props.updateStoreValue('progressBar',7)
    this.props.hideModal()
    

  }
  handleUpdate(values) {
        const { shadowTop, shadowBottom } = this.refs;
        const { scrollTop, scrollHeight, clientHeight } = values;
        const shadowTopOpacity = 1 / 20 * Math.min(scrollTop, 20);
        const bottomScrollTop = scrollHeight - clientHeight;
        const shadowBottomOpacity = 1 / 20 * (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));
        css(shadowTop, { opacity: shadowTopOpacity });
        css(shadowBottom, { opacity: shadowBottomOpacity });
          var display='block'
          if(shadowBottomOpacity===0){
              display='none'
          }
      css(shadowBottom, { opacity: shadowBottomOpacity, display:display });

        this.setState({
            ...this.state,
            activeBtn:shadowBottomOpacity===0,
           
          })
      if(shadowBottomOpacity===0){
         this.setState({
            ...this.state,
            
           bottomReached: true
          })
      }

    }

    componentDidMount(){
      document.addEventListener('keydown',this.keyScroll)
      document.addEventListener('keydown',this.keyScroll)
    }
    componentWillUnmount(){
      document.removeEventListener('keydown',this.keyScroll)
    }

  render(){
    const { style } = this.props;
      var containerStyle = {
          ...style,
          height: 524,
          position: 'relative'
      };

      if(window.innerWidth<768){
          containerStyle = {
              ...style,
              height: 450,
              position: 'relative'
          };
      }

      if(window.innerWidth===1024){
          containerStyle = {
              ...style,
              height: 250,
              position: 'relative'
          };
      }

const shadowTopStyle = {
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: 50,
            background: 'linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)',
            zIndex:999
        };
        const shadowBottomStyle = {
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            height: 50,
            background: 'linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)',
            zIndex:999
        };

    return(
      <ReactModal
          isOpen={true}
          onRequestClose={() => this.props.hideModal()}
          portalClassName='modal modal-mask modal_repower accept-privacy-modal isOpen'
          overlayClassName='modal-wrapper'
          className='modal-container'
        >

          
        
          <div className="close_modal" onClick={() => this.props.hideModal()}><img src={closeIcon} alt="" /></div>



          <div className="modal-body modal-body__overflowHidden privacy-text" >
          <div className='acceptPrivacy-scroll-container' style={containerStyle}>

           <div
                    ref="shadowTop"
                    style={shadowTopStyle}/>
            <SpringScrollbars ref="scrollbars"
                    onUpdate={this.handleUpdate} 
                    onScrollStop={this.handleScrollStop}
                    >
                    

                    <div className=" modal-header">
          <img src={camIcon} alt="" />

            <h3>Prima di iniziare ti chiediamo di leggere e accettare la nostra normativa sulla privacy.</h3>
          </div>

            <span className="modal-description " onKeyPress={this.keyScroll}>

              <strong>Informativa della privacy:</strong><br/>

<p><strong>Informativa ai sensi del Codice in materia di protezione dei dati personali<br/>
(D.Lgs. 30 giugno 2003, n. 196)</strong></p>

<p>
I dati che il Cliente fornirà a Repower Vendita Italia spa saranno trattati nel pieno rispetto del D.Lgs. 196/2003 e delle sue successive modifiche per le finalità e il tempo strettamente funzionale alle stesse secondo con le modalità che di seguito si espongono.
</p>
<p>
<strong>1. Finalità del trattamento dei dati</strong>
a) Svolgimento di attività preliminari alla stipula di un contratto ed esecuzione degli obblighi contrattuali, ivi incluso l’adempimento delle incombenze amministrativo - contabili (tra cui, a titolo esemplificativo, fatturazione, archiviazioni storiche, controllo dell'affidabilità del cliente, recupero crediti -anche attuato mediante fattorizzazione, assicurazione del credito, cessione del credito, etc.) e l’individuazione delle caratteristiche di consumo della società; b)Analisi di mercato e realizzazione di studi sulla soddisfazione della clientela; c)Attività pubblicitarie, promozionali, di marketing e di informazione.
</p>
<p>
<strong>2. Modalità del trattamento</strong>
Il trattamento dei dati, per le sopra esposte finalità, avverrà sotto la direzione di Repower Vendita Italia spa sia con modalità automatizzate che non automatizzate per il tempo strettamente necessario all’esecuzione del contratto per cui i dati sono stati forniti.
</p>
<p>
<strong>3. Rilascio del consenso e conseguenze del rifiuto</strong>
Il consenso al trattamento dei dati raccolti presso il cliente per le finalità indicate nella lettera a) del punto 1 è strettamente funzionale all'esecuzione del contratto. Pertanto, in caso di rifiuto, Repower Vendita Italia spa si troverà nell'impossibilità di adempiere agli obblighi contrattuali. Al contrario in caso di mancato consenso al trattamento dei dati per le finalità di cui alle lettere b) e c) del punto 1 è ininfluente rispetto all'esecuzione delle prestazioni derivanti dal contratto e per questo in caso di rifiuto non vi sarà alcuna conseguenza sull'esecuzione degli obblighi derivanti dal contratto stipulato.
</p>
<p>
<strong>4. Titolare e responsabile del trattamento</strong>
Titolare del trattamento è Repower Vendita Italia spa, con sede legale in Milano, via Uberti 37. Il Responsabile del Trattamento è il Responsabile della Compliance.
</p>
<p>
<strong>5. Ambito di comunicazione e di diffusione dei dati</strong>
Ambito territoriale - I dati personali raccolti per le finalità sopra indicate potranno essere resi disponibili fuori dal territorio nazionale, anche presso paesi extra UE.
<br/>Ambito soggettivo - I dati personali forniti potranno essere comunicati per le finalità sopra descritte: (i) a soggetti che dovessero svolgere in outsourcing servizi in favore di Repower Vendita Italia spa; (ii) a banche ed istituti di credito, intermediari finanziari, istituti assicurativi del credito; (iii) a società controllanti, controllate e collegate; (iv) a fornitori, e ad ogni altro soggetto nell'adempimento di obblighi di contratto e di legge. Per le stesse finalità sopra descritte i suoi dati potranno essere diffusi al pubblico.
</p>
<p>
<strong>6. Diritti dell'interessato (art. 7 D.Lgs. 196/2003)</strong>
Ogni interessato può esercitare i diritti di cui all'art. 7 D. Lgs.196/2003 ed in particolare potrà ottenere la conferma dell'esistenza dei dati, la correzione, l'integrazione e la cancellazione degli stessi, scrivendo a Repower Vendita Italia spa, via Uberti 37, Milano oppure inviando una e-mail all'indirizzo di posta elettronica info.it@repower.com.
    </p>
            </span>

            <p className='accept-privacy__bold'>
                    Dopo aver preso visione dell'informativa sulla privacy, autorizzo al trattamento dei miei dati ai sensi del Decreto Legislativo 196/03 in materia di tutela dei dati personali.
                </p>
            <div className="wrapper-checkbox">

                <input className="privacy" name="contractAccepted" id="contractAccepted" type="checkbox" onChange={() =>this.handleCheckbox('contractAccepted')} value={this.props.contractAccepted.value} checked={!!this.props.contractAccepted.value}/>

                <label htmlFor="contractAccepted"><span className="isCheckbox"></span>  <span> "Adempimenti contrattuali (obbligatoria)" </span></label>

              </div>
            <div className="wrapper-checkbox">

                <input className="privacy" name="activationAdAccepted" id="activationAdAccepted" type="checkbox" onChange={() =>this.handleCheckbox('activationAdAccepted')} value={this.props.activationAdAccepted.value} checked={!!this.props.activationAdAccepted.value}/>


                <label htmlFor="activationAdAccepted"><span className="isCheckbox"></span>  <span> Autorizzo ad essere ricontattato, anche a fini pubblicitari e promozionali. </span></label>

              </div>
              <div className="wrapper-checkbox">

                <input className="privacy" name="commercialAccepted" id="commercialAccepted" type="checkbox" onChange={() =>this.handleCheckbox('commercialAccepted')} value={this.props.commercialAccepted.value} checked={!!this.props.commercialAccepted.value}/>

                <label htmlFor="commercialAccepted"><span className="isCheckbox"></span>  <span> Autorizzo all'utilizzo dei dati personali a fine di analisi di mercato.</span></label>

              </div>
                

            </SpringScrollbars>
            <div
                    ref="shadowBottom"
                    style={shadowBottomStyle}/>

            </div>

            

            
            <div className='privacy-modal-footer'>
                <div className="divider-privacy"></div>
                 

            <div className='modal-flex'>
            {!this.state.bottomReached &&
             <div className='arrowButton' onClick={()=> this.arrowScroll()}>
              <figure>
                <img src={arrowDownRed} alt="" />
              </figure>
            </div>}

             {this.state.bottomReached &&
            <button className='btn btn__outline' onClick={() => this.props.showModal('NO_PRIVACY')}>
              Non Acconsento
            </button>}

            {this.state.bottomReached &&
              <NavLink to={`/activation-steps`} activeClassName="active">
                <button className={(!(this.state.activeBtn) || !this.props.contractAccepted.value)
                  ? "btn btn__gray no-events":"btn btn__red"} onClick={() => this.handleClick()}>
                  Acconsento
                </button>
            </NavLink>}

            {!this.state.bottomReached && this.state.activeBtn &&
              
                <button className={(!(this.state.activeBtn) || !this.props.contractAccepted.value)
                  ? "btn btn__gray no-events":"btn btn__red"}>
                  Acconsento
                </button>
            }

                      
                    
            </div>
            </div>
          </div>

        </ReactModal>
      )
  }
}

const mapStateToProps = state => {
  return {
  steps:state.ProfilationSelectReducer.steps,
  solutions:state.ProfilationSelectReducer.solutions,
  modalOpen:state.ProfilationSelectReducer.modalOpen,
  adAccepted:state.ProfilationSelectReducer.adAccepted,
  activationAdAccepted:state.ProfilationSelectReducer.activationAdAccepted,
  commercialAccepted:state.ProfilationSelectReducer.commercialAccepted,
  contractAccepted:state.ProfilationSelectReducer.contractAccepted,
}};

const mapDispatchToProps = dispatch => ({
  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)),
});

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