Merge pull request #416 from betagouv/cas-types

Nouvelle page : quelques exemples de calcul

source/components/ui/index.css

@@ -34,7 +34,7 @@ button {
 
 .ui__.container {
 	width: 100%;
-	max-width: 750px;
+	max-width: 800px;
 	margin: auto;
 	padding: 0 0.6rem;
 }

source/règles/cas-types.yaml

@@ -0,0 +1,33 @@
+- nom: CDI au salaire médian
+  situation: 
+    contrat salarié . salaire . brut de base: 2300
+
+- nom: CDI au SMIC
+  situation: 
+    contrat salarié . salaire . brut de base: 1500
+
+
+- nom: CDI au SMIC temps partiel 24h / semaine
+  situation: 
+    contrat salarié . salaire . brut de base: 1030
+    contrat salarié . temps partiel: oui
+    contrat salarié . temps partiel . heures par semaine: 24
+
+- nom: CDI cadre salaire cadre médian
+  situation: 
+    contrat salarié . salaire . brut de base: 3600
+    contrat salarié . statut cadre: oui
+
+- nom: CDD usage de 2 mois
+  situation: 
+    contrat salarié . salaire . brut de base: 2300
+    contrat salarié . type de contrat: CDD
+    contrat salarié . CDD . motif: 'classique . usage'
+    contrat salarié . CDD . durée: 2
+
+- nom: CDD accroissement d'activité de 1 an
+  situation: 
+    contrat salarié . salaire . brut de base: 2300
+    contrat salarié . type de contrat: CDD
+    contrat salarié . CDD . motif: 'classique . accroissement activité'
+    contrat salarié . CDD . durée: 12

source/selectors/analyseSelectors.js

@@ -33,11 +33,11 @@ export let flatRulesSelector = createSelector(
 	(lang, rules) => rules || (lang === 'en' ? baseRulesEn : baseRulesFr)
 )
 
-let parsedRulesSelector = createSelector([flatRulesSelector], rules =>
+export let parsedRulesSelector = createSelector([flatRulesSelector], rules =>
 	parseAll(rules)
 )
 
-let ruleDefaultsSelector = createSelector([flatRulesSelector], rules =>
+export let ruleDefaultsSelector = createSelector([flatRulesSelector], rules =>
 	collectDefaults(rules)
 )
 

source/sites/embauche.gouv.fr/App.js

@@ -1,5 +1,6 @@
 import PageFeedback from 'Components/Feedback/PageFeedback'
 import Mecanisms from 'Components/Mecanisms'
+import ExampleSituations from './pages/ExampleSituations'
 import RulePage from 'Components/RulePage'
 import DisableScroll from 'Components/utils/DisableScroll'
 import TrackPageView from 'Components/utils/TrackPageView'
@@ -19,7 +20,6 @@ import { getIframeOption, inIframe } from '../../utils'
 import trackDomainActions from './middlewares/trackDomainActions'
 import About from './pages/About'
 import Contact from './pages/Contact'
-import Contribution from './pages/Contribution'
 import Couleur from './pages/Couleur'
 import { Header } from './pages/Header'
 import Home from './pages/Home'
@@ -78,10 +78,10 @@ class EmbaucheRoute extends Component {
 					<Route path="/règle/:name" component={RulePage} />
 					<Redirect from="/simu/*" to="/" />
 					<Route path="/règles" component={RulesList} />
+					<Route path="/exemples" component={ExampleSituations} />
 					<Route path="/mecanismes" component={Mecanisms} />
 					<Route path="/à-propos" component={About} />
 					<Route path="/intégrer" component={Integration} />
-					<Route path="/contribuer" component={Contribution} />
 					<Route path="/couleur" component={Couleur} />
 					<Route path="/integration-test" component={IntegrationTest} />
 					<Redirect from="/simulateur" to="/" />

source/sites/embauche.gouv.fr/pages/About.css

@@ -13,5 +13,12 @@
 	border: none;
 	height: auto;
 	background: yellow;
-	height: 6.5em;
+	height: 8em;
+	border-radius: 1em;
+}
+
+#about i {
+	font-size: 1.6em;
+	margin-left: 0.2em;
+	vertical-align: middle;
 }

source/sites/embauche.gouv.fr/pages/About.js

@@ -11,16 +11,14 @@ export default class About extends Component {
 				<h1>À propos</h1>
 				<section>
 					<p>
-						<a href="https://beta.gouv.fr">
-							L'incubateur des services numériques de l'État
-						</a>{' '}
-						a lancé en 2014 le développement d’une <em>ressource ouverte</em> de
-						calcul des prélèvements sociaux sur les revenus d'activité en
-						France, étape incontournable lors d'une embauche.
+						<a href="https://beta.gouv.fr">BetaGouv</a> a lancé en 2014 le
+						développement d’un moteur ouvert de calcul des cotisations sociales
+						en France, étape incontournable pour embaucher ou négocier un
+						salaire.
 					</p>
 					<p>
-						Ce premier service, un{' '}
-						<em>simulateur des sommes en jeu lors d'une embauche</em>, peut être{' '}
+						Ce premier service, un simulateur des sommes en jeu lors d'une
+						embauche, peut être{' '}
 						<Link to="/intégrer">intégré facilement et gratuitement</Link> par
 						toute organisation sur son site Web.
 					</p>
@@ -28,9 +26,11 @@ export default class About extends Component {
 					<p>
 						Début 2018, l'
 						<a href="https://acoss.fr">ACOSS</a> (la tête des URSSAF) nous
-						rejoint pour consolider ce simulateur.
+						rejoint pour consolider ce simulateur, le traduire en anglais et
+						lancer{' '}
+						<a href="https://mycompanyinfrance.fr">mycompanyinfrance.fr</a>, un
+						guide de création d'entreprise en France.
 					</p>
-
 					<p>
 						Suivez nos mises à jour sur{' '}
 						<a href="https://twitter.com/embauchegouv">
@@ -38,16 +38,23 @@ export default class About extends Component {
 						</a>
 					</p>
 				</section>
+				<h1>Contribuez !</h1>
 				<section>
 					<p>
-						Ce travail est fait en commun : venez définir avec nous la feuille
-						de route du service (implémentation des conventions collectives,
-						ajout des statuts autres que le travail salarié, ...).
+						Venez définir avec nous la feuille de route du service
+						(implémentation des conventions collectives, ajout des statuts
+						autres que le travail salarié, ...).
 					</p>
 					<MailChimp />
 					<p>
 						Ou <Link to="/contact">contactez-nous</Link> directement.
 					</p>
+					<p>
+						Le code est ouvert et contributif, rendez-vous sur{' '}
+						<a href="https://github.com/betagouv/syso/">
+							GitHub <i className="fa fa-github" aria-hidden="true" />
+						</a>
+					</p>
 				</section>
 				{/* <p>Notre prochaine rencontre OpenLab aura lieu <strong>le mercredi 18 janvier 2017 à 10h</strong>, au 86 allée de Bercy, 75012, salle 381-R</p> */}
 				<h1>Vie privée</h1>

source/sites/embauche.gouv.fr/pages/ExampleSituations.css

@@ -0,0 +1,37 @@
+#exampleSituations ul {
+	margin-top: 1.5em;
+}
+#exampleSituations .example {
+	border-bottom: 1px solid #eee;
+	width: 100%;
+	display: flex;
+	justify-items: space-between;
+	align-items: center;
+}
+#exampleSituations .example h2 {
+	width: 25%;
+	display: inline-block;
+	font-size: 120%;
+	text-align: center;
+}
+#exampleSituations .example ul {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	list-style: none;
+}
+#exampleSituations .example li {
+	padding-top: 0;
+}
+#exampleSituations .example h3 {
+	font-size: 95%;
+	font-weight: 600;
+	color: #444;
+}
+#exampleSituations .example .figure {
+	font-size: 110%;
+	text-align: center;
+	display: inline-block;
+	width: 100%;
+}

source/sites/embauche.gouv.fr/pages/ExampleSituations.js

@@ -0,0 +1,96 @@
+// Page listing the engine's currently implemented mecanisms and their tests
+import React, { Component } from 'react'
+import './ExampleSituations.css'
+import examples from 'Règles/cas-types.yaml'
+import { analyseMany } from 'Engine/traverse'
+import { connect } from 'react-redux'
+import {
+	ruleDefaultsSelector,
+	parsedRulesSelector
+} from 'Selectors/analyseSelectors'
+import withColours from 'Components/utils/withColours'
+import emoji from 'react-easy-emoji'
+
+class ExampleSituations extends Component {
+	render() {
+		return (
+			<div className="ui__ container" id="exampleSituations">
+				<h1>
+					{emoji('💡 ')}
+					Quelques exemples
+				</h1>
+				<ul>
+					{examples.map(ex => (
+						<Example ex={ex} key={ex.nom} />
+					))}
+				</ul>
+			</div>
+		)
+	}
+}
+@connect(state => ({
+	defaults: ruleDefaultsSelector(state),
+	parsedRules: parsedRulesSelector(state)
+}))
+@withColours
+class Example extends Component {
+	render() {
+		let {
+				ex: { nom, situation },
+				parsedRules,
+				defaults,
+				colours
+			} = this.props,
+			[total, net, netAprèsImpôts] = analyseMany(parsedRules, [
+				'total',
+				'net',
+				'net après impôt'
+			])(dottedName => ({ ...defaults, ...situation }[dottedName])).targets,
+			figures = [
+				total,
+				do {
+					let dottedName = 'contrat salarié . salaire . brut de base'
+					;({
+						dottedName,
+						nodeValue: situation[dottedName],
+						title: 'Salaire brut'
+					})
+				},
+				net,
+				{ ...netAprèsImpôts, title: 'Après impôt' }
+			]
+
+		return (
+			<li className="example">
+				<h2>{nom}</h2>
+				<ul>
+					{figures.map(t => (
+						<li key={t.dottedName}>
+							<h3>{t.title}</h3>
+							<span
+								style={{ color: colours.textColourOnWhite }}
+								className="figure">
+								{Math.round(t.nodeValue)} €
+							</span>
+						</li>
+					))}{' '}
+					<li key="%">
+						<h3>Prélèvements</h3>
+						<span
+							style={{ color: colours.textColourOnWhite }}
+							className="figure">
+							{do {
+								let de = figures[0].nodeValue,
+									à = figures[3].nodeValue
+								Math.round(((de - à) / de) * 100)
+							}}{' '}
+							%
+						</span>
+					</li>
+				</ul>
+			</li>
+		)
+	}
+}
+
+export default ExampleSituations

source/sites/embauche.gouv.fr/pages/Header.js

@@ -8,9 +8,6 @@ import Logo from '../images/logo/logo-simulateur.svg'
 import './Header.css'
 
 @withRouter
-@connect(state => ({
-	textColourOnWhite: state.themeColours.textColourOnWhite
-}))
 @translate()
 export class Header extends Component {
 	state = {
@@ -58,14 +55,14 @@ export class Header extends Component {
 
 let Links = ({ toggle }) => (
 	<div id="links" onClick={toggle}>
+		<Link className="menu-item" to="/exemples">
+			Exemples
+		</Link>
 		<Link className="menu-item" to="/intégrer">
 			Intégrer le module
 		</Link>
-		<Link className="menu-item" to="/contribuer">
-			Contribuer
-		</Link>
 		<Link className="menu-item" to="/règles">
-			Toutes nos règles
+			Nos règles
 		</Link>
 		<Link className="menu-item" to="/à-propos">
 			À propos

source/webpack.common.js

@@ -85,7 +85,8 @@ module.exports = {
 		new HTMLPlugin({
 			template: 'index.html',
 			chunks: ['infrance'],
-			title: 'My company in France: A step-by-step guide to start a business in France',
+			title:
+				'My company in France: A step-by-step guide to start a business in France',
 			description:
 				'Find the type of company that suits you and follow the steps to register your company. Discover the French social security system by simulating your hiring costs. Discover the procedures to hire in France and learn the basics of French labour law.',
 			filename: 'infrance.html'
@@ -101,9 +102,18 @@ module.exports = {
 		new CopyPlugin([
 			'./manifest.webmanifest',
 			'./source/sites/embauche.gouv.fr/images/logo',
-			{ from: './source/sites/embauche.gouv.fr/robots.txt', to: 'robots.embauche.txt' },
-			{ from: './source/sites/mycompanyinfrance.fr/robots.txt', to: 'robots.infrance.txt' },
-			{ from: './source/sites/mycompanyinfrance.fr/sitemap.txt', to: 'sitemap.infrance.txt' },
+			{
+				from: './source/sites/embauche.gouv.fr/robots.txt',
+				to: 'robots.embauche.txt'
+			},
+			{
+				from: './source/sites/mycompanyinfrance.fr/robots.txt',
+				to: 'robots.infrance.txt'
+			},
+			{
+				from: './source/sites/mycompanyinfrance.fr/sitemap.txt',
+				to: 'sitemap.infrance.txt'
+			}
 		])
 	]
 }

test/real-rules.test.js

@@ -1,9 +1,3 @@
-/*
-  Les mécanismes sont testés dans mécanismes/ comme le sont les variables directement dans la base YAML.
-  On y créée dans chaque fichier une base YAML autonome, dans laquelle intervient le mécanisme à tester,
-  puis on teste idéalement tous ses comportements sans en faire intervenir d'autres.
-*/
-
 import { AssertionError } from 'chai'
 import { rules } from '../source/engine/rules'
 import { parseAll } from '../source/engine/traverse'