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 { +