ProfilationStep1.js
3.44 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
import React from "react";
import Select from "react-select";
import { Creatable } from "react-select";
import { AsyncCreatable } from "react-select";
import * as SelectActionCreators from '../../actions/profilationSelect'
import { connect } from 'react-redux';
import LemaApi from '../../../service/service.js'
// Prendo la lista dei prodotti
const getProductOptions = () => {
return LemaApi.getProductOptions();
}
const getJobOptions = () => {
console.log(LemaApi.getJobsOptions());
return LemaApi.getJobsOptions();
}
function changeField(name, event, props) {
var completed = true;
if (event !== null && event.value !== "") {
for (var property in props.step) {
if (props.step.hasOwnProperty(property)) {
if (
property !== name &&
property !== "isComplete" &&
property !== "isActive"
) {
completed = completed && props.step[property] !== "";
}
}
}
} else {
completed = false;
}
let step = {...props.step};
step[name] = event.value;
step.isComplete = completed;
props.updatePropValue(props.index, step);
}
const ProfilationStep1 = props => (
<div className="ProfilationStep ProfilationStep--one" onClick={e => props.activeStep(props.index)}>
<p className="ProfilationStep__bold">
Costruisci in pochi secondi la tua tariffa flat, 100% online.
</p>
<div className="d-flex">
<p> La mia attività si occupa di </p>
<AsyncCreatable
openOnClick={false}
autosize={true}
creatable={true}
name="job"
placeholder="placeholder"
value={props.step.job}
onChange={e => changeField("job", e, props)}
loadOptions={getJobOptions}
onFocus={e => props.activeStep(props.index)}
promptTextCreator={(label) => ` ${label} `}
className = "select-full-height select-z-index"
/>
<p>ed ho bisogno di </p>
<Select.Async
searchable={false}
autosize={true}
name="service"
placeholder="placeholder"
value={props.step.service}
onChange={e => changeField("service", e, props)}
loadOptions={getProductOptions}
onFocus={e => props.activeStep(props.index)}
className = "select-z-index"
/>
</div>
<p className="ProfilationStep__underline" onClick={() => props.showModal('CONTACT_MODAL')}>
Per il tuo business hai più sedi e forniture?
</p>
</div>
);
/*ProfilationStep1.propTypes = {
//isComplete: PropTypes.bool.isRequired,
//isActive: PropTypes.bool.isRequired
step: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
updatePropValue: PropTypes.func.isRequired
};
export default ProfilationStep1;*/
const mapStateToProps = state => {
return {
//steps:state.ProfilationSelectReducer.steps,
//solutions:state.ProfilationSelectReducer.solutions,
modalOpen:state.ProfilationSelectReducer.saveModalOpen
}};
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)(ProfilationStep1);