From 47a45685bc70efc1bab458804232d13edc3144bc Mon Sep 17 00:00:00 2001 From: Mael Date: Fri, 26 Oct 2018 15:44:33 +0000 Subject: [PATCH 1/7] Nouvelle page d'exemples de simulations types --- source/règles/cas-types.yaml | 32 ++++++++ source/selectors/analyseSelectors.js | 4 +- source/sites/embauche.gouv.fr/App.js | 2 + .../pages/ExampleSituations.css | 34 ++++++++ .../pages/ExampleSituations.js | 79 +++++++++++++++++++ source/webpack.common.js | 18 ++++- test/real-rules.test.js | 6 -- 7 files changed, 163 insertions(+), 12 deletions(-) create mode 100644 source/règles/cas-types.yaml create mode 100644 source/sites/embauche.gouv.fr/pages/ExampleSituations.css create mode 100644 source/sites/embauche.gouv.fr/pages/ExampleSituations.js diff --git a/source/règles/cas-types.yaml b/source/règles/cas-types.yaml new file mode 100644 index 000000000..4825d17be --- /dev/null +++ b/source/règles/cas-types.yaml @@ -0,0 +1,32 @@ +- 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: SMIC temps partiel 24h / semaine + situation: + contrat salarié . salaire . brut de base: 1030 + contrat salarié . temps partiel . heures par semaine: 24 + +- nom: CDI cadre salaire 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: 3600 + contrat salarié . type de contrat: CDD + contrat salarié . CDD . motif: 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: accroissement activité + contrat salarié . CDD . durée: 12 diff --git a/source/selectors/analyseSelectors.js b/source/selectors/analyseSelectors.js index c7e680bb2..eaad74789 100644 --- a/source/selectors/analyseSelectors.js +++ b/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) ) diff --git a/source/sites/embauche.gouv.fr/App.js b/source/sites/embauche.gouv.fr/App.js index b75520da4..8a42ec3f0 100644 --- a/source/sites/embauche.gouv.fr/App.js +++ b/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' @@ -78,6 +79,7 @@ class EmbaucheRoute extends Component { + diff --git a/source/sites/embauche.gouv.fr/pages/ExampleSituations.css b/source/sites/embauche.gouv.fr/pages/ExampleSituations.css new file mode 100644 index 000000000..5ee9972d5 --- /dev/null +++ b/source/sites/embauche.gouv.fr/pages/ExampleSituations.css @@ -0,0 +1,34 @@ +#exampleSituations .example { + border-bottom: 1px solid #eee; + width: 100%; + display: flex; + justify-items: space-between; +} +#exampleSituations .example h2 { + width: 30%; + display: inline-block; +} +#exampleSituations .example ul { + width: 100%; + display: flex; + align-items: center; + justify-content: space-around; + list-style: none; +} +#exampleSituations .example h2 { + font-size: 120%; +} +#exampleSituations .example li { + padding-top: 0; +} +#exampleSituations .example h3 { + font-size: 100%; + font-weight: 600; + color: #444; +} +#exampleSituations .example .figure { + font-size: 110%; + text-align: center; + display: inline-block; + width: 100%; +} diff --git a/source/sites/embauche.gouv.fr/pages/ExampleSituations.js b/source/sites/embauche.gouv.fr/pages/ExampleSituations.js new file mode 100644 index 000000000..0b7af7b77 --- /dev/null +++ b/source/sites/embauche.gouv.fr/pages/ExampleSituations.js @@ -0,0 +1,79 @@ +// 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' + +class ExempleSituations extends Component { + render() { + return ( +
+

Exemples de calculs

+
    + {examples.map(ex => ( + + ))} +
+
+ ) + } +} +@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: 'Net après impôt' } + ] + + return ( +
  • +

    {nom}

    +
      + {figures.map(t => ( +
    • +

      {t.title}

      + + {Math.round(t.nodeValue)} € + +
      • + ))}{' '} +
    +
    • + ) + } +} + +export default ExempleSituations diff --git a/source/webpack.common.js b/source/webpack.common.js index d898ac080..95db28282 100644 --- a/source/webpack.common.js +++ b/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' + } ]) ] } diff --git a/test/real-rules.test.js b/test/real-rules.test.js index 58ca4b246..ceb6afbab 100644 --- a/test/real-rules.test.js +++ b/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' From c9c1469bf5414e8fa6c639a865d2bb9ad0e3ccf1 Mon Sep 17 00:00:00 2001 From: Mael Date: Fri, 26 Oct 2018 15:53:20 +0000 Subject: [PATCH 2/7] :art: Travail visuel sur les exemples de calcul --- .../sites/embauche.gouv.fr/pages/ExampleSituations.css | 4 ++++ .../sites/embauche.gouv.fr/pages/ExampleSituations.js | 10 +++++++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/source/sites/embauche.gouv.fr/pages/ExampleSituations.css b/source/sites/embauche.gouv.fr/pages/ExampleSituations.css index 5ee9972d5..5152de5dd 100644 --- a/source/sites/embauche.gouv.fr/pages/ExampleSituations.css +++ b/source/sites/embauche.gouv.fr/pages/ExampleSituations.css @@ -1,8 +1,12 @@ +#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: 30%; diff --git a/source/sites/embauche.gouv.fr/pages/ExampleSituations.js b/source/sites/embauche.gouv.fr/pages/ExampleSituations.js index 0b7af7b77..2d6de1468 100644 --- a/source/sites/embauche.gouv.fr/pages/ExampleSituations.js +++ b/source/sites/embauche.gouv.fr/pages/ExampleSituations.js @@ -9,12 +9,16 @@ import { parsedRulesSelector } from 'Selectors/analyseSelectors' import withColours from 'Components/utils/withColours' +import emoji from 'react-easy-emoji' -class ExempleSituations extends Component { +class ExampleSituations extends Component { render() { return (
    -

    Exemples de calculs

    +

    + {emoji('💡 ')} + Quelques exemples... +

      {examples.map(ex => ( @@ -76,4 +80,4 @@ class Example extends Component { } } -export default ExempleSituations +export default ExampleSituations From 86aaf50d5d818a6626da833d65e5b9ec997c7766 Mon Sep 17 00:00:00 2001 From: Mael Date: Mon, 29 Oct 2018 10:31:32 +0000 Subject: [PATCH 3/7] =?UTF-8?q?Lien=20du=20menu=20"Contribuer"=20d=C3=A9pl?= =?UTF-8?q?ac=C3=A9=20dans=20"A=20propos"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/sites/embauche.gouv.fr/App.js | 2 -- source/sites/embauche.gouv.fr/pages/About.css | 9 ++++- source/sites/embauche.gouv.fr/pages/About.js | 33 +++++++++++-------- source/sites/embauche.gouv.fr/pages/Header.js | 3 -- 4 files changed, 28 insertions(+), 19 deletions(-) diff --git a/source/sites/embauche.gouv.fr/App.js b/source/sites/embauche.gouv.fr/App.js index 8a42ec3f0..1ac6ae7e6 100644 --- a/source/sites/embauche.gouv.fr/App.js +++ b/source/sites/embauche.gouv.fr/App.js @@ -20,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' @@ -83,7 +82,6 @@ class EmbaucheRoute extends Component { - diff --git a/source/sites/embauche.gouv.fr/pages/About.css b/source/sites/embauche.gouv.fr/pages/About.css index 05bab9ba6..358b82ac3 100644 --- a/source/sites/embauche.gouv.fr/pages/About.css +++ b/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; } diff --git a/source/sites/embauche.gouv.fr/pages/About.js b/source/sites/embauche.gouv.fr/pages/About.js index 1274d4f36..85c76128b 100644 --- a/source/sites/embauche.gouv.fr/pages/About.js +++ b/source/sites/embauche.gouv.fr/pages/About.js @@ -11,16 +11,14 @@ export default class About extends Component {

      À propos

      - - L'incubateur des services numériques de l'État - {' '} - a lancé en 2014 le développement d’une ressource ouverte de - calcul des prélèvements sociaux sur les revenus d'activité en - France, étape incontournable lors d'une embauche. + BetaGouv 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.

      - Ce premier service, un{' '} - simulateur des sommes en jeu lors d'une embauche, peut être{' '} + Ce premier service, un simulateur des sommes en jeu lors d'une + embauche, peut être{' '} intégré facilement et gratuitement par toute organisation sur son site Web.

      @@ -28,9 +26,11 @@ export default class About extends Component {

      Début 2018, l' ACOSS (la tête des URSSAF) nous - rejoint pour consolider ce simulateur. + rejoint pour consolider ce simulateur, le traduire en anglais et + lancer{' '} + mycompanyinfrance.fr, un + guide de création d'entreprise en France.

      -

      Suivez nos mises à jour sur{' '} @@ -38,16 +38,23 @@ export default class About extends Component {

      +

      Contribuez !

      - 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é, ...).

      Ou contactez-nous directement.

      +

      + Le code est ouvert et contributif, rendez-vous sur{' '} + + GitHub