StickyHeader.js
6.07 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import React, { Component } from 'react'
import ActivationToolTip from './ActivationToolTip'
import ProgressBar from '../../../components/ProgressBar'
import * as SelectActionCreators from '../../actions/profilationSelect'
import { connect } from 'react-redux';
import greenCheckOutline from '../../../img/outlineGreenCheck.svg'
class StickyHeader extends Component {
render(){
const saved=(this.props.activationSteps[2].isComplete||(this.props.modalContacts.activationSaveModal.contact.valid&&this.props.sessionSaved))
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">
<span className="lighter">{solution.service}</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>
{!saved &&<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>
{this.props.hideX!==true &&
<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>}
{saved &&<div className="navigation_right navigation_right--activation ">
<div className='codeContainer'>
<p className="saveProcess">Processo Salvato <span><img src={greenCheckOutline} alt=""/></span></p>
<p className='title'>Codice Repower: <span className="code"> <span><img src={greenCheckOutline} alt=""/></span>{this.props.activationCode} </span></p>
</div>
{this.props.hideX!==true &&
<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>
{this.props.hideProgressbar!==true &&
<ProgressBar location={typeof this.props.history!=='undefined'? this.props.history.location.pathname:'/'} />
}
</div>
))
return(
activeSolution
)
}
}
const mapStateToProps = state => {
return {
sessionSaved:state.ProfilationSelectReducer.sessionSaved,
activationSteps:state.ProfilationSelectReducer.activationSteps,
modalContacts:state.ProfilationSelectReducer.modalContacts,
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,
activationCode:state.ProfilationSelectReducer.activationCode,
}};
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);