DetailsModal.js
5.1 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
101
102
103
104
105
import React, { Component } from 'react'
import ReactModal from 'react-modal';
import {NavLink} from 'react-router-dom';
import * as SelectActionCreators from '../actions/profilationSelect'
import { connect } from 'react-redux';
/*
<div className="Modal Modal-mask modal_repower Modal--save isOpen">
<div className="Modal-wrapper">
<div className="Modal-container" >
*/
class DetailsModal extends Component {
render(){
console.log('modalprops',this.props)
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="https://d33wubrfki0l68.cloudfront.net/c0553300c767c895ee4900759828af6476c3e9e9/55953/img/closed_modal.svg" 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);