diff --git a/source/components/Simu.js b/source/components/Simu.js
new file mode 100644
index 000000000..08ccc3499
--- /dev/null
+++ b/source/components/Simu.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+//import styles from './Simu.css'
+import TargetSelection from './TargetSelection'
+import withColours from './withColours'
+
+@withColours
+export default class extends Component {
+ render() {
+ return (
+
+ {' '}
+
+
+ )
+ }
+}
diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css
index f3f6aa4b1..28cb5dd84 100644
--- a/source/components/TargetSelection.css
+++ b/source/components/TargetSelection.css
@@ -41,7 +41,7 @@
font-weight: 400;
}
-#targetSelection input {
+#targetSelection input[type='checkbox'] {
position: absolute;
z-index: -1;
opacity: 0;
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index fad9880f4..ee2350598 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -1,54 +1,85 @@
import React, { Component } from 'react'
import { Trans, translate } from 'react-i18next'
-import { findRuleByName } from 'Engine/rules'
-import { reject, curry, pipe, equals, filter, contains, length } from 'ramda'
import { connect } from 'react-redux'
+import { rules, findRuleByName } from 'Engine/rules'
+import {
+ reject,
+ propEq,
+ curry,
+ pipe,
+ equals,
+ filter,
+ contains,
+ length
+} from 'ramda'
import { Link } from 'react-router-dom'
import './TargetSelection.css'
import BlueButton from './BlueButton'
+import { Field, reduxForm, formValueSelector } from 'redux-form'
+import { connect } from 'react-redux'
+import { RuleValue } from './rule/RuleValueVignette'
-export let salaries = ['salaire net', 'salaire brut', 'salaire total']
+export let salaries = ['salaire net', 'salaire de base', 'salaire total']
+let popularTargetNames = [...salaries, 'aides employeur']
-@connect(state => ({
- flatRules: state.flatRules
-}))
@translate()
+@reduxForm({
+ form: 'conversation'
+})
+@connect(
+ state => ({
+ getTargetValue: dottedName =>
+ formValueSelector('conversation')(state, dottedName),
+ targets: state.analysis ? state.analysis.targets : [],
+ flatRules: state.flatRules
+ }),
+ dispatch => ({
+ startConversation: (targetNames, fromScratch = false) =>
+ dispatch({ type: 'START_CONVERSATION', targetNames, fromScratch })
+ })
+)
export default class TargetSelection extends Component {
state = {
- targets: []
+ targets: [],
+ activeInput: null
+ }
+
+ componentWillMount() {
+ this.props.startConversation(popularTargetNames)
}
render() {
let { targets } = this.state,
ready = targets.length > 0
+ console.log('yayayay', this.props.targets)
+
+ if (this.props.targets.length == 0) return null
+
return (
-
- Que voulez-vous estimer ?
-
+ Entrez un salaire mensuel
{this.renderOutputList()}
-
-
-
+
+ {false && (
+
+
Vous pouvez faire plusieurs choix
-
-
-
-
- Valider
-
-
-
+
+
+
Valider
+
+
+ )}
)
}
renderOutputList() {
- let popularTargets = [...salaries, 'aides employeur'].map(
+ let popularTargets = popularTargetNames.map(
curry(findRuleByName)(flatRules)
),
{ targets } = this.state,
- textColourOnWhite = this.props.themeColours.textColourOnWhite,
+ textColourOnWhite = this.props.colours.textColourOnWhite,
// You can't select 3 salaries, as one must be an input in the next step
optionDisabled = name =>
contains('salaire', name) &&
@@ -111,6 +142,27 @@ export default class TargetSelection extends Component {
+ {s.name.includes('salaire') &&
+ this.state.activeInput === s.dottedName ? (
+
+ ) : (
+ this.setState({ activeInput: s.dottedName })}>
+ {do {
+ let rule = this.props.targets.find(
+ propEq('dottedName', s.dottedName)
+ ),
+ value = rule && rule.nodeValue
+ ;
+ }}
+
+ )}
))}
diff --git a/source/components/pages/Home.js b/source/components/pages/Home.js
index 3f25f361d..982148fda 100644
--- a/source/components/pages/Home.js
+++ b/source/components/pages/Home.js
@@ -3,12 +3,10 @@ import { Trans, translate } from 'react-i18next'
import './Pages.css'
import './Home.css'
import TargetSelection from '../TargetSelection'
-import { connect } from 'react-redux'
+import withColours from '../withColours'
-@connect(state => ({
- themeColours: state.themeColours
-}))
@translate()
+@withColours
export default class Home extends Component {
state = {}
componentDidMount() {
@@ -24,7 +22,7 @@ export default class Home extends Component {
aria-hidden="true"
style={{
...opacityStyle,
- color: this.props.themeColours.textColourOnWhite
+ color: this.props.colours.textColourOnWhite
}}
/>
@@ -34,7 +32,7 @@ export default class Home extends Component {
-
+
)
diff --git a/source/components/rule/RuleValueVignette.css b/source/components/rule/RuleValueVignette.css
index 3cf7c387a..43371c1af 100644
--- a/source/components/rule/RuleValueVignette.css
+++ b/source/components/rule/RuleValueVignette.css
@@ -1,14 +1,9 @@
-
-
-.RuleValueVignette li a {
- text-decoration: none;
-}
.RuleValueVignette .rule-box {
display: flex;
justify-content: space-between;
}
-.RuleValueVignette .rule-box:hover {
- background: rgba(255, 255, 255, 0.16)
+.rule-box:hover {
+ background: rgba(255, 255, 255, 0.16);
}
.RuleValueVignette .rule-box > span {
@@ -18,29 +13,27 @@
font-weight: 600;
font-size: 105%;
}
-.RuleValueVignette .rule-value {
- transition: background .8s;
+.Rule-value {
+ transition: background 0.8s;
font-size: 105%;
}
-.RuleValueVignette .rule-value .unsatisfied {
+.Rule-value .unsatisfied {
font-style: italic;
font-size: 85%;
}
-.RuleValueVignette .rule-value .irrelevant {
+.Rule-value .irrelevant {
font-style: normal;
}
-.RuleValueVignette .rule-value .figure {
+.Rule-value .figure {
font-weight: bold;
}
-
-
/* Animation of summary figures changes : flash ! */
.flash-enter {
- background: rgba(255, 255, 255, 1);
+ background: rgba(255, 255, 255, 1);
}
.flash-leave {
- /* Completely hide the button while it's being animated and before it's removed from the DOM. */
- display: none;
+ /* Completely hide the button while it's being animated and before it's removed from the DOM. */
+ display: none;
}
diff --git a/source/components/rule/RuleValueVignette.js b/source/components/rule/RuleValueVignette.js
index e029d852b..6e897e17d 100644
--- a/source/components/rule/RuleValueVignette.js
+++ b/source/components/rule/RuleValueVignette.js
@@ -8,56 +8,33 @@ import { humanFigure } from '../../utils'
import './RuleValueVignette.css'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
-export default ({
- name,
- type,
- conversationStarted,
- flatRule,
- nodeValue: ruleValue
-}) =>
- do {
- let unsatisfied = ruleValue == null,
- irrelevant = ruleValue == 0,
- number = typeof ruleValue == 'number' && ruleValue > 0
- ;
-
-
- {flatRule.title}
-
-
-
-
- }
+export default ({ name, type, title, nodeValue: ruleValue }) => (
+
+
+
+ {title}
+
+
+
+
+)
-let RuleValue = ({ unsatisfied, irrelevant, conversationStarted, ruleValue }) =>
+export let RuleValue = ({ value }) =>
do {
+ let unsatisfied = value == null,
+ irrelevant = value == 0
let [className, text] = irrelevant
? ['irrelevant', "Vous n'êtes pas concerné"]
: unsatisfied
? ['unsatisfied', 'En attente de vos réponses...']
- : ['figure', humanFigure(0)(ruleValue) + ' €']
-
- {
- /*Pourquoi ?
*/
- }
-
+ : ['figure', humanFigure(0)(value) + ' €']
;
-
+ transitionLeaveTimeout={100}>
+
{' '}
- {conversationStarted && {text}}
+ {text}
}
diff --git a/source/containers/Layout.js b/source/containers/Layout.js
index ea38ec460..90ca69a4c 100644
--- a/source/containers/Layout.js
+++ b/source/containers/Layout.js
@@ -1,4 +1,4 @@
-import { I18nextProvider } from 'react-i18next';
+import { I18nextProvider } from 'react-i18next'
import i18next from 'i18next'
import React, { Component } from 'react'
@@ -12,6 +12,7 @@ import RulePage from 'Components/RulePage'
import Route404 from 'Components/Route404'
import Contact from 'Components/Contact'
import Simulateur from 'Components/Simulateur'
+import Simu from 'Components/Simu'
import RulesList from 'Components/pages/RulesList'
import Mecanisms from 'Components/Mecanisms'
import Contribution from 'Components/pages/Contribution'
@@ -42,7 +43,7 @@ export default class Layout extends Component {
// track the initial pageview
ReactPiwik.push(['trackPageView'])
return (
-
+
<>
@@ -62,6 +63,7 @@ export default class Layout extends Component {
+