StickyHeader.js
4.86 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
106
107
108
109
import React, { Component } from 'react'
import ActivationToolTip from './ActivationToolTip'
import * as SelectActionCreators from '../../actions/profilationSelect'
import { connect } from 'react-redux';
class StickyHeader extends Component {
render(){
const activeSolution=this.props.solutions.map((solution,index) => (
solution.isSelected &&
<div key={index} className="stickySelect stickyNav">
<div className="stickySelect--inner bigContainer ">
<span className="logo ">
<img className="logo_sticky" src="https://d33wubrfki0l68.cloudfront.net/c501caa0ae66e5fce66903eb43dd60a35fcbb757/c0c16/img/logo_repowert.svg" alt="" />
<div className="selectedOffer header--payoff">
<figure>
<img src={solution.icon} alt="" />
</figure>
<span className="selectedOffer--desc selectedOffer--desc__desk">
{this.props.steps[0].service==='both' && <span className="lighter">Elettricità e Gas</span>}
{this.props.steps[0].service==='light' && <span className="lighter">Elettricità</span>}
{this.props.steps[0].service==='gas' && <span className="lighter">Gas</span>}
<span className="m-t-5 m-translate"><strong>{solution.name}</strong></span>
</span>
<span className="selectedOffer--desc selectedOffer--desc__mobile">
<span className="lighter">{solution.name}</span>
{!this.props.activationTooltip&&
<span className='m-t-5 price-changed m-translate'><span>€</span><strong>{solution.price}</strong> <span className="slash">/</span> mese + IVA</span>
}
{this.props.activationTooltip&&
<span className='m-t-5 m-translate'><span>€</span><strong>{solution.price}</strong><span className="slash">/</span> mese + IVA</span>
}
</span>
</div>
{this.props.activationTooltip && <ActivationToolTip
lowerHigher={((this.props.activationSteps[1].lightVal!==''&&
this.props.lightVal_tmp>this.props.activationSteps[1].lightVal)||
(this.props.activationSteps[1].gasVal!==''&&
this.props.gasVal_tmp>this.props.activationSteps[1].gasVal))
}/>}
<p className="selectedOffer selectedOffer_mRight">
<span className="selectedOffer--desc selectedOffer--desc__desk">
<span className="lighter">Spesa fissa totale</span>
<span className={this.props.activationTooltip? 'm-t-5 activation-price-changed m-translate': "m-t-5 m-translate"}><span>€</span><strong>{solution.price}</strong> <span className="slash">/</span> mese + IVA</span>
</span>
<span className="selectedOffer--desc selectedOffer--desc__mobile">
<span id="show-modal-three" data-modal="modal-save" className="triggher_modal saveOffer">
<img src="https://d33wubrfki0l68.cloudfront.net/a6e0b3c4556ce07e9ed9c732fed7b8a4c981880b/eef1a/img/save.svg" alt="" />
</span>
</span>
</p>
</span>
<div className="navigation_right navigation_right--activation ">
<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>
<div className="close--header triggher_modal" data-modal="modal-quit" onClick={() => this.props.showModal('WAYOUT_MODAL')}>
<img src="https://d33wubrfki0l68.cloudfront.net/67d66100f26b0607f866e1324da9d34a6b6b13b8/d17e6/img/closed_icon.svg" alt="" />
</div>
</div>
</div>
</div>
))
return(
activeSolution
)
}
}
const mapStateToProps = state => {
return {
activationSteps:state.ProfilationSelectReducer.activationSteps,
steps:state.ProfilationSelectReducer.steps,
solutions:state.ProfilationSelectReducer.solutions,
saveModalOpen:state.ProfilationSelectReducer.saveModalOpen,
activationTooltip:state.ProfilationSelectReducer.activationTooltip,
lightVal_tmp:state.ProfilationSelectReducer.lightVal_tmp,
gasVal_tmp:state.ProfilationSelectReducer.gasVal_tmp,
}};
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)(StickyHeader);