SolutionSingleSlide.js 2.79 KB
import React, { Component } from 'react';

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

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

class SolutionSingleSlide extends Component {
	
  constructor(props){
    super(props)

    this.openModal=this.openModal.bind(this)
    this.selectSolution=this.selectSolution.bind(this)
  }

  selectSolution(){
    this.props.updateStoreValue('showSessionMessage',false)
    this.props.updateStoreValue('progressBar',6)
    this.props.changeSolution(this.props.index,'isSelected','true')
  }

  openModal(index,modal){

    this.props.updateStoreValue('solutionInModal',index)
    this.props.showModal(modal)

  }

	render(){

		return(
		<div>
          {this.props.solution.isActive && <h6>Consigliata per te</h6> }
          <div className="sliderItemTop">
            <figure>
              <img src={this.props.solution.icon} alt={this.props.solution.name} />
            </figure>
            <h2>{this.props.solution.name}</h2>
          </div>
          <div className="sliderItemContent">
            <p className="description lighter">{this.props.solution.description}</p>
            <p>{this.props.solution.service}</p>
            <p className="price">
              <span className="fiat"></span> <strong>{this.props.solution.price}</strong> <span className="month">/ mese + IVA</span>
            </p>
            <p>Spesa fissa totale</p>
          </div>
          <div className="sliderItemAction">
      <NavLink to={`/activation`} activeClassName="active">
              <button className="btn btn__gray" onClick={() => this.selectSolution()}>Attiva Ora</button>
            </NavLink>
            <a id="show-modal-two" data-modal="view-details" className="triggher_modal underline" onClick={() => this.openModal(this.props.index,'DETAILS_MODAL')}>Vedi dettagli</a>
          </div>
        </div>

        
        )
	}
}


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

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)),
    changeSolution: (index,prop,value) => 
    dispatch(SelectActionCreators.changeSolution(index,prop,value)),
   
});

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