Brouillon de nouveau design pour l'accueil

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 (
+			<div>
+				{' '}
+				<TargetSelection colours={this.props.colours} />
+			</div>
+		)
+	}
+}

source/components/TargetSelection.css

@@ -41,7 +41,7 @@
 	font-weight: 400;
 }
 
-#targetSelection input {
+#targetSelection input[type='checkbox'] {
 	position: absolute;
 	z-index: -1;
 	opacity: 0;

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 (
 			<section id="targetSelection">
-				<h1>
-					<Trans i18nKey="targetSelection">Que voulez-vous estimer ?</Trans>
-				</h1>
+				<h1>Entrez un salaire mensuel</h1>
 				{this.renderOutputList()}
-				<div id="action">
-					<p style={{ color: this.props.themeColours.textColourOnWhite }}>
-						<Trans i18nKey="selectMany">
+
+				{false && (
+					<div id="action">
+						<p style={{ color: this.props.colours.textColourOnWhite }}>
 							Vous pouvez faire plusieurs choix
-						</Trans>
-					</p>
-					<Link to={'/simu/' + targets.join('+')}>
-						<BlueButton disabled={!ready}>
-							<Trans>Valider</Trans>
-						</BlueButton>
-					</Link>
-				</div>
+						</p>
+						<Link to={'/simu/' + targets.join('+')}>
+							<BlueButton disabled={!ready}>Valider</BlueButton>
+						</Link>
+					</div>
+				)}
 			</section>
 		)
 	}
 
 	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 {
 									</p>
 								</div>
 							</label>
+							{s.name.includes('salaire') &&
+							this.state.activeInput === s.dottedName ? (
+								<Field
+									name={s.dottedName}
+									component="input"
+									type="text"
+									placeholder="mon salaire"
+								/>
+							) : (
+								<span
+									style={{ width: '6em' }}
+									onClick={() => this.setState({ activeInput: s.dottedName })}>
+									{do {
+										let rule = this.props.targets.find(
+												propEq('dottedName', s.dottedName)
+											),
+											value = rule && rule.nodeValue
+										;<RuleValue value={value} />
+									}}
+								</span>
+							)}
 						</div>
 					))}
 				</div>

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
 						}}
 					/>
 					<p style={opacityStyle}>
@@ -34,7 +32,7 @@ export default class Home extends Component {
 					</p>
 				</div>
 				<div id="content">
-					<TargetSelection themeColours={this.props.themeColours} />
+					<TargetSelection colours={this.props.colours} />
 				</div>
 			</div>
 		)

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;
 }

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
-		;<span
-			key={name}
-			className={classNames('RuleValueVignette', {
-				unsatisfied,
-				irrelevant,
-				number
-			})}
-		>
-			<Link to={'/règle/' + encodeRuleName(name)}>
-				<div className="rule-box">
-					<span className="rule-name">{flatRule.title}</span>
-					<RuleValue
-						{...{ unsatisfied, irrelevant, conversationStarted, ruleValue }}
-					/>
-				</div>
-			</Link>
-		</span>
-	}
+export default ({ name, type, title, nodeValue: ruleValue }) => (
+	<span key={name} className="RuleValueVignette">
+		<Link to={'/règle/' + encodeRuleName(name)}>
+			<div className="rule-box">
+				<span className="rule-name">{title}</span>
+				<RuleValue ruleValue={ruleValue} />
+			</div>
+		</Link>
+	</span>
+)
 
-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) + ' €']
-
-		{
-			/*<p><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Pourquoi ?</em></p> */
-		}
-
+				: ['figure', humanFigure(0)(value) + ' €']
 		;<ReactCSSTransitionGroup
 			transitionName="flash"
 			transitionEnterTimeout={100}
-			transitionLeaveTimeout={100}
-		>
-			<span key={text} className="rule-value">
+			transitionLeaveTimeout={100}>
+			<span key={text} className="Rule-value">
 				{' '}
-				{conversationStarted && <span className={className}><Trans i18nKey={className}>{text}</Trans></span>}
+				<span className={className}>{text}</span>
 			</span>
 		</ReactCSSTransitionGroup>
 	}

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 (
-			<I18nextProvider i18n={ i18next }>
+			<I18nextProvider i18n={i18next}>
 				<Router history={piwik.connectToHistory(this.history)}>
 					<>
 						<Header />
@@ -62,6 +63,7 @@ export default class Layout extends Component {
 							<Redirect from="/simu/surcoût-CDD/intro" to="/" />
 							<Redirect from="/simu/surcoût-CDD" to="/" />
 							<Route path="/simu/:targets" component={Simulateur} />
+							<Route path="/simu2" component={Simu} />
 							<Route path="/à-propos" component={About} />
 							<Route path="/intégrer" component={Integration} />
 							<Route path="/contribuer" component={Contribution} />