Merge pull request #279 from betagouv/irneutre

Impôt à la source (impôt neutre)

.gitconfig

@@ -0,0 +1,2 @@
+[core]
+    quotepath = false

circle.yml

@@ -21,6 +21,9 @@ jobs:
       - run:
           name: Install flow-typed
           command: yarn run flow-typed install
+      - run:
+          name: Change git config to support UTF8 filename
+          command: git config --global core.quotepath false
       - run:
           name: test
           command: yarn test

netlify.toml

@@ -24,7 +24,7 @@ status = 200
 
 [[redirects]]
 from = "/*"
-query = {site = "embauche"}
+query = {s = "e"}
 to = "/embauche.html"
 status = 200
 

package.json

@@ -30,7 +30,7 @@
 		"react-easy-emoji": "^1.2.0",
 		"react-helmet": "^5.2.0",
 		"react-highlight-words": "^0.11.0",
-		"react-hot-loader": "^4.3.3",
+		"react-hot-loader": "^4.3.5",
 		"react-i18next": "^7.5.0",
 		"react-redux": "^5.0.7",
 		"react-router": "^4.2.0",
@@ -126,12 +126,12 @@
 		"source-map-support": "^0.5.4",
 		"style-loader": "^0.20.3",
 		"url-loader": "^1.0.1",
-		"webpack": "^4.12.1",
+		"webpack": "^4.17.1",
 		"webpack-cli": "^3.0.8",
 		"webpack-pwa-manifest": "^3.6.2",
 		"webpack-serve": "^2.0.2",
 		"webpack-serve-overlay": "^0.2.2",
-		"webpack-serve-waitpage": "^1.0.0",
+		"webpack-serve-waitpage": "^1.0.2",
 		"workbox-webpack-plugin": "^3.3.1",
 		"yaml-loader": "^0.5.0"
 	}

source/components/PaySlip.css

@@ -57,7 +57,7 @@
 	padding-right: 0.2em;
 }
 
-.payslip__salaireNetàPayer {
+.payslip__salaireNet {
 	font-weight: bold;
 }
 

source/components/PaySlip.js

@@ -24,15 +24,17 @@ const PaySlip = ({
 	const {
 		salaireBrut,
 		avantagesEnNature,
-		salaireNet,
+		salaireNetDeCotisations,
 		salaireDeBase,
 		salaireChargé,
 		salaireNetImposable,
 		nombreHeuresTravaillées,
-		salaireNetàPayer,
+		salaireNet,
 		réductionsDeCotisations,
 		cotisations,
-		totalCotisations
+		totalCotisations,
+		salaireNetAprèsImpôt,
+		impôt
 	} = ficheDePaie
 	return (
 		<div className="payslip__container">
@@ -116,27 +118,28 @@ const PaySlip = ({
 				<h4 className="payslip__salaryTitle">
 					<Trans>Salaire net</Trans>
 				</h4>
+				{/* Salaire net imposable */}
+				<RuleLink {...salaireNetImposable} />
+				<Montant>{salaireNetImposable.montant}</Montant>
 				{/* Salaire net */}
-				<RuleLink {...salaireNet} />
-				<Montant>{salaireNet.montant}</Montant>
+				<RuleLink {...salaireNetDeCotisations} />
+				<Montant>{salaireNetDeCotisations.montant}</Montant>
 				{avantagesEnNature.montant !== 0 ? (
 					<>
 						{/* Avantages en nature */}
 						<RuleLink {...avantagesEnNature} />
 						<Montant>{-avantagesEnNature.montant}</Montant>
-						{/* Salaire net à payer */}
-						<RuleLink
-							className="payslip__salaireNetàPayer"
-							{...salaireNetàPayer}
-						/>
-						<Montant className="payslip__salaireNetàPayer">
-							{salaireNetàPayer.montant}
+						{/* Salaire net */}
+						<RuleLink className="payslip__salaireNet" {...salaireNet} />
+						<Montant className="payslip__salaireNet">
+							{salaireNet.montant}
 						</Montant>
 					</>
 				) : null}
-				{/* Salaire net imposable */}
-				<RuleLink {...salaireNetImposable} />
-				<Montant>{salaireNetImposable.montant}</Montant>
+				<RuleLink {...impôt} />
+				<Montant>{-impôt.montant}</Montant>
+				<RuleLink {...salaireNetAprèsImpôt} />
+				<Montant>{salaireNetAprèsImpôt.montant}</Montant>
 			</div>
 			<br />
 			<p className="ui__ notice">

source/components/RulePage.css

@@ -3,23 +3,15 @@
 }
 .rule-page__header {
 	display: flex;
-	flex-direction: column;
+	justify-content: space-between;
+	margin-bottom: 1.3em;
+	text-decoration: none;
 }
 .rule-page__search {
 	align-self: flex-end;
-	text-decoration: none !important;
-}
-#toSimulation {
-	margin: 0.6em 0;
-	text-decoration: none !important;
-	display: block;
-	color: white;
-	font-size: 150%;
-	text-align: center;
-	padding: 0.6em 0.6em;
-	border-radius: 0.2em;
+	text-decoration: none;
 }
 
 #toSimulation i {
-	margin: 0 0.6em;
+	margin: 0 0.4em;
 }

source/components/RulePage.js

@@ -51,9 +51,10 @@ export default class RulePage extends Component {
 			<div id="RulePage" className="ui__ container">
 				<ScrollToTop />
 				<div className="rule-page__header">
-					{!this.props.noUserInputSelector && (
-						<BackToSimulation colour={this.props.themeColours.colour} />
-					)}
+					<BackToSimulation
+						visible={this.props.valuesToShow}
+						colour={this.props.themeColours.colour}
+					/>
 					<SearchButton
 						className="rule-page__search"
 						rulePageBasePath="../règle"
@@ -78,16 +79,17 @@ export default class RulePage extends Component {
 @translate() // Triggers rerender when the language changes
 class BackToSimulation extends Component {
 	render() {
-		let { colour, setExample } = this.props
+		let { colour, setExample, visible } = this.props
 		return (
 			<Link
 				id="toSimulation"
 				to=".."
 				onClick={() => {
 					setExample(null)
 				}}
-				style={{ background: colour }}>
-				⬅️ <Trans i18nKey="back">Reprendre la simulation</Trans>
+				style={{ color: colour, visibility: visible ? 'visible' : 'hidden' }}>
+				<i className="fa fa-arrow-left" aria-hidden="true" />
+				<Trans i18nKey="back">Reprendre la simulation</Trans>
 			</Link>
 		)
 	}

source/components/TargetSelection.css

@@ -62,23 +62,36 @@
 #targetSelection .optionTitle {
 	font-size: 115%;
 }
-#targetSelection .optionTitle a {
+#targetSelection .optionTitle a,
+#targetSelection #aidesGlimpse a {
 	color: inherit;
 	text-decoration: none;
 	font-weight: 500;
 }
-#targetSelection .optionTitle a:hover {
+#targetSelection .optionTitle a:hover,
+#targetSelection #aidesGlimpse a:hover {
 	text-decoration: underline;
 }
 
+#targetSelection #labelNew {
+	background: #e2011c; /* Couleur de la marianne */
+	border-radius: 0.3em;
+	padding: 0 0.3em;
+}
+
 #targetSelection .targetInputOrValue {
 	font-size: 135%;
-	display: flex;
-	justify-content: flex-end;
-	align-items: flex-end;
 	margin-left: 0.6em;
+	text-align: right;
 }
 
+#targetSelection #aidesGlimpse {
+	font-size: 75%;
+	margin-top: 0.3em;
+}
+#targetSelection #aidesGlimpse a {
+	font-weight: 300;
+}
 #targetSelection .editable {
 	border-bottom: 1px dashed #ffffff91;
 	min-width: 2.5em;

source/components/TargetSelection.js

@@ -21,6 +21,8 @@ import Controls from './Controls'
 import CurrencyInput from './CurrencyInput/CurrencyInput'
 import ProgressCircle from './ProgressCircle'
 import './TargetSelection.css'
+import emoji from 'react-easy-emoji'
+import { mainTargetNames } from '../config'
 
 let salaries = [
 	'contrat salarié . salaire . total',
@@ -88,7 +90,7 @@ export default class TargetSelection extends Component {
 	}
 
 	renderOutputList() {
-		let displayedTargets = displayedTargetNames.map(target =>
+		let displayedTargets = mainTargetNames.map(target =>
 				findRuleByDottedName(this.props.flatRules, target)
 			),
 			{
@@ -162,6 +164,12 @@ let Header = ({
 				)}
 
 			<span className="texts">
+				{!conversationStarted &&
+					target.dottedName.includes('net après impôt') && (
+						<div>
+							<span id="labelNew">Janvier 2019</span>
+						</div>
+					)}
 				<span className="optionTitle">
 					<Link to={match.path + 'règle/' + encodeRuleName(target.dottedName)}>
 						{target.title || target.name}
@@ -217,11 +225,12 @@ let TargetInputOrValue = withLanguage(
 					}}
 				/>
 			)}
+			{target.dottedName.includes('rémunération . total') && <AidesGlimpse />}
 		</span>
 	)
 )
 @connect(
-	() => ({}),
+	null,
 	dispatch => ({
 		setFormValue: (field, name) => dispatch(change('conversation', field, name))
 	})
@@ -235,7 +244,7 @@ class TargetValue extends Component {
 			value = targetWithValue && targetWithValue.nodeValue
 
 		return (
-			<span
+			<div
 				className={classNames({
 					editable: target.question,
 					attractClick:
@@ -245,7 +254,7 @@ class TargetValue extends Component {
 				onClick={this.showField(value)}
 				onFocus={this.showField(value)}>
 				<AnimatedTargetValue value={value} />
-			</span>
+			</div>
 		)
 	}
 	showField(value) {
@@ -259,3 +268,26 @@ class TargetValue extends Component {
 		}
 	}
 }
+
+@withColours
+@connect(state => ({ analysis: analysisWithDefaultsSelector(state) }))
+class AidesGlimpse extends Component {
+	render() {
+		let targets = this.props.analysis.targets,
+			aides =
+				targets &&
+				targets.find(t => t.dottedName === 'contrat salarié . aides employeur')
+		if (!aides || !aides.nodeValue) return null
+		return (
+			<div id="aidesGlimpse">
+				{' '}
+				- <AnimatedTargetValue value={aides.nodeValue} />{' '}
+				<Link
+					to={'/règle/' + encodeRuleName('contrat salarié . aides employeur')}
+					style={{ color: this.props.colours.textColour }}>
+					d'aides {emoji(aides.icon)}
+				</Link>
+			</div>
+		)
+	}
+}

source/components/rule/Destinataire.css

@@ -1,40 +1,22 @@
 #destinataire {
-	margin-top: 2em;
-	margin-bottom: 1.5em;
-	border: 2px solid rgb(41, 117, 209, 0.7);
-	color: rgb(41, 117, 209, 0.7);
-	padding: 1em;
 	border-radius: 3px;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	justify-content: center;
 }
 
-@media (min-width: 600px) {
-	#destinataire {
-		float: right;
-		clear: right;
-		margin: 1em;
-		margin-top: 0;
-		margin-right: 0;
-	}
-}
-
-#destinataire h3 {
-	text-decoration: none;
-	color: inherit;
-	margin: 0;
-	font-size: inherit;
-	font-weight: 400;
+#destinataire a::after {
+	display: none;
 }
 #destinataire img {
-	max-width: 150px;
-	opacity: 0.8;
+	max-width: 100px;
 	margin: auto;
 	display: block;
 }
 #destinataireName {
 	text-align: center;
-	font-size: 70%;
 	line-height: 1em;
-	margin-top: 0.3em;
 }
 #destinataire #calligraphy {
 	font-size: 150%;

source/components/rule/Destinataire.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
-import { Trans, translate } from 'react-i18next'
 import possiblesDestinataires from 'Règles/ressources/destinataires/destinataires.yaml'
 import './Destinataire.css'
+import { Trans, translate } from 'react-i18next'
 
 @translate()
 export default class Rule extends Component {
@@ -10,10 +10,10 @@ export default class Rule extends Component {
 			destinataireData = possiblesDestinataires[destinataire]
 
 		return destinataire && destinataireData ? (
-			<div id="destinataire">
-				<h3>
-					<Trans>Destinataire</Trans>
-				</h3>
+			<div className="infobox__item" id="destinataire">
+				<h4>
+					<Trans>Destinataire</Trans>&nbsp;:
+				</h4>
 				<div>
 					<a href={destinataireData.lien} target="_blank">
 						{destinataireData.image && (