DetailsModal.js
4.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, { Component } from 'react'
import ReactModal from 'react-modal';
import closeIcon from '../../img/closed_modal.svg'
import {NavLink} from 'react-router-dom';
import * as SelectActionCreators from '../actions/profilationSelect'
import { connect } from 'react-redux';
class DetailsModal extends Component {
render(){
return(
<ReactModal
isOpen={true}
onRequestClose={() => this.props.hideModal()}
portalClassName='modal modal-mask modal_repower modal--offer isOpen'
overlayClassName='modal-wrapper'
className='modal-container'
>
<div className="close_modal" onClick={() => this.props.hideModal()}><img src={closeIcon} alt="" /></div>
<div className="modal-flex">
<div className="modal-header modal-header-left">
<img src={this.props.solutions[this.props.solutionInModal].icon} alt="" />
<h3>{this.props.solutions[this.props.solutionInModal].name}</h3>
<p>{this.props.solutions[this.props.solutionInModal].description}</p><div className="modal-body-right">
<div className="modal-body-boxShadow">
<div className="box-offer">
<p className="offers-type">Elettricità e gas</p>
<p className="offers-price"><span className="valuta"> €</span><strong>{this.props.solutions[this.props.solutionInModal].price}</strong> / mese + IVA</p>
<p className="offers-desc">Spesa fissa totale</p>
</div>
</div>
<NavLink to={`/activation`} activeClassName="active">
<button onClick={() => this.props.hideModal()} className="btn btn__red">Attiva Ora</button>
</NavLink>
</div>
</div>
<div className="modal-body modal-body-right">
<div className="modal-body-left">
<div className="modal-body-left-top">
<h3>Cosa vuol dire energia 100% verde?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue tristique ante, vel rhoncus quam pharetra id. Nunc blandit ornare felis non pellentesque. </p>
</div>
<div className="modal-body-left-btm">
<h3>Quali sono le garanzie di origine?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue tristique ante, vel rhoncus quam pharetra id. Nunc blandit ornare felis non pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue
tristique ante, vel rhoncus quam. </p>
</div>
<div className="modal-body-left-btm">
<h3>Quali sono le garanzie di origine?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue tristique ante, vel rhoncus quam pharetra id. Nunc blandit ornare felis non pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue
tristique ante, vel rhoncus quam. </p>
</div>
<div className="modal-body-left-btm">
<h3>Quali sono le garanzie di origine?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue tristique ante, vel rhoncus quam pharetra id. Nunc blandit ornare felis non pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue
tristique ante, vel rhoncus quam. </p>
</div>
</div>
</div>
</div>
<div className="modal-footer">
</div>
</ReactModal>
)
}
}
const mapStateToProps = state => {
return {
steps:state.ProfilationSelectReducer.steps,
solutions:state.ProfilationSelectReducer.solutions,
modalOpen:state.ProfilationSelectReducer.modalOpen,
solutionInModal:state.ProfilationSelectReducer.solutionInModal,
}};
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)(DetailsModal);