From 2248ffe70c1b3da936d5e16177ad249adb5023bb Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Mon, 14 Jan 2019 18:53:18 +0100 Subject: [PATCH] :art: Change l'affichage de la comparaison des cotisations --- source/components/AnswerList.js | 2 +- source/components/ComparativeTargets.js | 315 +++++++++++------- source/components/Distribution.js | 2 +- source/components/PaySlip.js | 9 +- source/components/ResultView.js | 6 +- source/components/RulePage.js | 1 - source/components/SalarySimulation.js | 1 + source/components/SimpleSimulation.js | 27 +- source/components/TargetSelection.js | 2 +- source/components/conversation/SendButton.js | 12 +- source/components/conversation/TextArea.js | 2 +- .../components/conversation/conversation.css | 26 +- .../{ => ui}/AnimatedTargetValue.css | 0 .../{ => ui}/AnimatedTargetValue.js | 0 source/components/ui/Button/button.css | 10 +- source/components/ui/Card.css | 5 +- source/components/ui/Card.js | 6 - source/components/{ => ui}/Montant.css | 0 source/components/{ => ui}/Montant.js | 0 source/components/ui/SchemeCard.css | 23 ++ source/components/ui/SchemeCard.js | 40 +++ source/components/ui/Typography.css | 4 +- source/components/ui/index.css | 4 + source/règles/base.yaml | 1 + source/selectors/analyseSelectors.js | 19 +- source/selectors/regleSelectors.js | 8 +- .../mycompanyinfrance.fr/pages/Landing.css | 2 +- 27 files changed, 325 insertions(+), 202 deletions(-) rename source/components/{ => ui}/AnimatedTargetValue.css (100%) rename source/components/{ => ui}/AnimatedTargetValue.js (100%) delete mode 100644 source/components/ui/Card.js rename source/components/{ => ui}/Montant.css (100%) rename source/components/{ => ui}/Montant.js (100%) create mode 100644 source/components/ui/SchemeCard.css create mode 100644 source/components/ui/SchemeCard.js diff --git a/source/components/AnswerList.js b/source/components/AnswerList.js index 18d41a71c..8ef160b4f 100644 --- a/source/components/AnswerList.js +++ b/source/components/AnswerList.js @@ -1,7 +1,6 @@ /* @flow */ import { resetSimulation } from 'Actions/actions' -import Montant from 'Components/Montant' import Overlay from 'Components/Overlay' import RuleLink from 'Components/RuleLink' import withColours from 'Components/utils/withColours' @@ -13,6 +12,7 @@ import { Trans } from 'react-i18next' import { connect } from 'react-redux' import { createSelector } from 'reselect' import { règleAvecValeurSelector } from 'Selectors/regleSelectors' +import Montant from 'Ui/Montant' import { softCatch } from '../utils' import './AnswerList.css' diff --git a/source/components/ComparativeTargets.js b/source/components/ComparativeTargets.js index d7d5e8791..db39da3bb 100644 --- a/source/components/ComparativeTargets.js +++ b/source/components/ComparativeTargets.js @@ -1,126 +1,203 @@ -import PeriodSwitch from 'Components/PeriodSwitch' -import withColours from 'Components/utils/withColours' -import withSitePaths from 'Components/utils/withSitePaths' -import { encodeRuleName, findRuleByDottedName } from 'Engine/rules' -import { compose } from 'ramda' +/* @flow */ import React from 'react' -import emoji from 'react-easy-emoji' import { connect } from 'react-redux' -import { Link } from 'react-router-dom' -import { - analysisWithDefaultsSelector, - flatRulesSelector -} from 'Selectors/analyseSelectors' -import AnimatedTargetValue from './AnimatedTargetValue' +import { config } from 'react-spring' +import { règleAvecMontantSelector } from 'Selectors/regleSelectors' +import Animate from 'Ui/animate' import './ComparativeTargets.css' -export default compose( - connect( - state => ({ - target: findRuleByDottedName( - flatRulesSelector(state), - state.simulationConfig?.objectifs[0] - ), - simulationBranches: state.simulationConfig?.branches, - analyses: analysisWithDefaultsSelector(state) - }), - dispatch => ({ - setSituationBranch: id => dispatch({ type: 'SET_SITUATION_BRANCH', id }) - }) - ), - withColours, - withSitePaths -)( - class ComparativeTargets extends React.Component { - render() { - let { - colours, - analyses, - target, - setSituationBranch, - sitePaths, - simulationBranches - } = this.props - if (!simulationBranches) { - return null - } - // We retrieve the values necessary to compute the global % of taxes - // This is not elegant - let getRatioPrélèvements = analysis => - analysis.targets.find(t => t.dottedName === 'ratio de prélèvements') - return ( -
-

{target.title}

- -
    - {analyses.map((analysis, i) => { - if (!analysis.targets) return null - let { nodeValue, dottedName } = analysis.targets[0], - name = simulationBranches[i].nom +import SchemeCard from './ui/SchemeCard' +// export default compose( +// connect( +// state => ({ +// target: findRuleByDottedName( +// flatRulesSelector(state), +// state.simulationConfig?.objectifs[0] +// ), +// simulationBranches: state.simulationConfig?.branches, +// analyses: analysisWithDefaultsSelector(state) +// }), +// dispatch => ({ +// setSituationBranch: id => dispatch({ type: 'SET_SITUATION_BRANCH', id }) +// }) +// ), +// withColours, +// withSitePaths +// )( +// class ComparativeTargets extends React.Component { +// render() { +// let { +// colours, +// analyses, +// target, +// setSituationBranch, +// sitePaths, +// simulationBranches +// } = this.props +// if (!simulationBranches) { +// return null +// } +// // We retrieve the values necessary to compute the global % of taxes +// // This is not elegant +// let getRatioPrélèvements = analysis => +// analysis.targets.find(t => t.dottedName === 'ratio de prélèvements') +// return ( +// <> +// {analyses.map((analysis, i) => { +// if (!analysis.targets) return null +// let { nodeValue, dottedName } = analysis.targets[0], +// name = simulationBranches[i].nom - let microNotApplicable = - name === 'Micro-entreprise' && - analysis.controls?.find(({ test }) => - test.includes('base des cotisations > plafond') - ) +// let microNotApplicable = +// name === 'Micro-entreprise' && +// analysis.controls?.find(({ test }) => +// test.includes('base des cotisations > plafond') +// ) - let ratioPrélèvements = getRatioPrélèvements(analysis) +// let ratioPrélèvements = getRatioPrélèvements(analysis) - return ( -
  • - {name} - {microNotApplicable ? ( -

    {microNotApplicable.message}

    - ) : ( - <> - - - - {' '} - setSituationBranch(i)} - className="explanation"> - {emoji('📖')} - - - - Soit{' '} - {Math.round((1 - ratioPrélèvements.nodeValue) * 100)} % - de{' '} - - prélèvements - - - - )} -
    • - ) - })} -
-
- ) - } - } +// return ( +//
  • +// {name} +// {microNotApplicable ? ( +//

    {microNotApplicable.message}

    +// ) : ( +// <> +// +// +// +// {' '} +// setSituationBranch(i)} +// className="explanation"> +// {emoji('📖')} +// +// +// +// Soit{' '} +// {Math.round((1 - ratioPrélèvements.nodeValue) * 100)} % +// de{' '} +// +// prélèvements +// +// +// +// )} +//
    • +// ) +// })} +// +// +// ) +// } +// } +// ) + +const ComparativeTargets = () => ( +
    + + + + + +
    ) + +const Indépendant = connect(state => ({ + revenuDisponible: règleAvecMontantSelector(state, { + situationBranchName: 'Indépendant' + })('revenu disponible') +}))(({ revenuDisponible }) => ( + +)) + +const AssimiléSalarié = connect(state => ({ + revenuDisponible: règleAvecMontantSelector(state, { + situationBranchName: 'Assimilé salarié' + })('revenu disponible') +}))(({ revenuDisponible }) => ( + +)) + +const MicroEntreprise = connect(state => ({ + revenuDisponible: règleAvecMontantSelector(state, { + situationBranchName: 'Micro-entreprise' + })('revenu disponible') +}))(({ revenuDisponible }) => ( + +)) + +export default ComparativeTargets diff --git a/source/components/Distribution.js b/source/components/Distribution.js index 0a70d8d4f..fdc286f0d 100644 --- a/source/components/Distribution.js +++ b/source/components/Distribution.js @@ -9,9 +9,9 @@ import { connect } from 'react-redux' import { config, Spring } from 'react-spring' import { compose } from 'redux' import répartitionSelector from 'Selectors/repartitionSelectors' +import Montant from 'Ui/Montant' import { isIE } from '../utils' import './Distribution.css' -import Montant from './Montant' import './PaySlip' import RuleLink from './RuleLink' import type { Répartition } from 'Types/ResultViewTypes.js' diff --git a/source/components/PaySlip.js b/source/components/PaySlip.js index 3a2563301..7fc8ebb7d 100644 --- a/source/components/PaySlip.js +++ b/source/components/PaySlip.js @@ -6,7 +6,7 @@ import React, { Fragment } from 'react' import { Trans } from 'react-i18next' import { connect } from 'react-redux' import FicheDePaieSelectors from 'Selectors/ficheDePaieSelectors' -import Montant from './Montant' +import Montant from 'Ui/Montant' import './PaySlip.css' import RuleLink from './RuleLink' @@ -166,8 +166,11 @@ const PaySlip = ({

    - Il ne prend pour l'instant pas en compte les accords et - conventions collectives, ni la myriade d'aides aux entreprises. Trouvez votre convention collective ici, et explorez les aides sur  + Il ne prend pour l'instant pas en compte les accords et conventions + collectives, ni la myriade d'aides aux entreprises. Trouvez votre + convention collective{' '} + ici + , et explorez les aides sur  aides-entreprises.fr.

    diff --git a/source/components/ResultView.js b/source/components/ResultView.js index 5098114ef..40e78c2c1 100644 --- a/source/components/ResultView.js +++ b/source/components/ResultView.js @@ -9,8 +9,8 @@ import React, { Component } from 'react' import { Trans } from 'react-i18next' import { connect } from 'react-redux' import ficheDePaieSelectors from 'Selectors/ficheDePaieSelectors' -import Card from 'Ui/Card' import './ResultView.css' + import type { Tracker } from 'Components/utils/withTracker' type State = { @@ -55,13 +55,13 @@ class ResultView extends Component { - +
    {this.state.resultView === 'payslip' ? ( ) : ( )} - +
    ) ) diff --git a/source/components/RulePage.js b/source/components/RulePage.js index fa627bdb8..6ad6a59d1 100644 --- a/source/components/RulePage.js +++ b/source/components/RulePage.js @@ -57,7 +57,6 @@ export default compose( } renderRule(dottedName) { let { brancheName, sitePaths } = this.props - console.log(brancheName) return (
    diff --git a/source/components/SalarySimulation.js b/source/components/SalarySimulation.js index eaac08889..a0ef16968 100644 --- a/source/components/SalarySimulation.js +++ b/source/components/SalarySimulation.js @@ -64,6 +64,7 @@ export default compose( displayHiringProcedures, match, validInputEntered, + period, location, sitePaths, diff --git a/source/components/SimpleSimulation.js b/source/components/SimpleSimulation.js index 36c16bd0c..a7e9cc725 100644 --- a/source/components/SimpleSimulation.js +++ b/source/components/SimpleSimulation.js @@ -1,5 +1,6 @@ import Answers from 'Components/AnswerList' import Conversation from 'Components/conversation/Conversation' +import { ScrollToElement } from 'Components/utils/Scroll' import withColours from 'Components/utils/withColours' import { compose, isEmpty } from 'ramda' import React from 'react' @@ -42,18 +43,20 @@ export default compose( Mes réponses )} - - {noNextSteps && ( - <> -

    Plus de questions !

    -

    Vous avez atteint l'estimation la plus précise.

    - - )} - {(!hideUntilUserInput || !noUserInput) && ( - {children} - )} + + + {noNextSteps && ( + <> +

    Plus de questions !

    +

    Vous avez atteint l'estimation la plus précise.

    + + )} + {(!hideUntilUserInput || !noUserInput) && ( + {children} + )} +     ) } diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js index 6168713bf..250d0c9cd 100644 --- a/source/components/TargetSelection.js +++ b/source/components/TargetSelection.js @@ -19,7 +19,7 @@ import { flatRulesSelector, noUserInputSelector } from 'Selectors/analyseSelectors' -import AnimatedTargetValue from './AnimatedTargetValue' +import AnimatedTargetValue from 'Ui/AnimatedTargetValue' import CurrencyInput from './CurrencyInput/CurrencyInput' import ProgressCircle from './ProgressCircle' import './TargetSelection.css' diff --git a/source/components/conversation/SendButton.js b/source/components/conversation/SendButton.js index 31d51dfb4..cd842a396 100644 --- a/source/components/conversation/SendButton.js +++ b/source/components/conversation/SendButton.js @@ -1,13 +1,11 @@ import HoverDecorator from 'Components/utils/HoverDecorator' -import withColours from 'Components/utils/withColours' import { compose } from 'ramda' import React, { Component } from 'react' import { Trans, withNamespaces } from 'react-i18next' export default compose( HoverDecorator, - withNamespaces(), - withColours + withNamespaces() )( class SendButton extends Component { getAction() { @@ -28,16 +26,12 @@ export default compose( this.getAction()('enter') } render() { - let { disabled, colours, hover } = this.props + let { disabled, hover } = this.props return ( +

    +
    +) + +export default SchemeCard diff --git a/source/components/ui/Typography.css b/source/components/ui/Typography.css index 0bff95de0..9846d321f 100644 --- a/source/components/ui/Typography.css +++ b/source/components/ui/Typography.css @@ -74,8 +74,8 @@ ul { margin: 0 0 1rem; } p.ui__.lead { - font-size: 1.7rem; - line-height: 2.5rem; + font-size: 150%; + line-height: 150%; font-weight: 300; } ul { diff --git a/source/components/ui/index.css b/source/components/ui/index.css index 22bcb55be..c655d43fb 100644 --- a/source/components/ui/index.css +++ b/source/components/ui/index.css @@ -1,5 +1,6 @@ @import './Button/button.css'; @import './Typography.css'; +@import './Card.css'; @import './reset.css'; :root { @@ -40,6 +41,9 @@ button { margin: auto; padding: 0 0.6rem; } +.ui__.container .ui__.full-width { + margin: 0 calc((800px - 100vw) / 2); +} .ui__.notice { font-size: 90%; diff --git a/source/règles/base.yaml b/source/règles/base.yaml index 9cfe80b24..b374e32b4 100644 --- a/source/règles/base.yaml +++ b/source/règles/base.yaml @@ -2551,6 +2551,7 @@ - nom: revenu disponible titre: Revenu disponible + format: euros résumé: Après déductions des cotisations et de l'impôt période: flexible question: Quel revenu voulez-vous toucher ? diff --git a/source/selectors/analyseSelectors.js b/source/selectors/analyseSelectors.js index acfe7cc18..f9052f13a 100644 --- a/source/selectors/analyseSelectors.js +++ b/source/selectors/analyseSelectors.js @@ -171,15 +171,28 @@ export let exampleAnalysisSelector = createSelector( let makeAnalysisSelector = situationSelector => createDeepEqualSelector( - [parsedRulesSelector, targetNamesSelector, situationSelector], - (parsedRules, targetNames, situations) => { - return mapOrApply( + [ + parsedRulesSelector, + targetNamesSelector, + situationSelector, + (_, props) => props?.situationBranchName, + branchesSelector + ], + (parsedRules, targetNames, situations, branchName, branches) => { + const analysedSituations = mapOrApply( situation => analyseMany(parsedRules, targetNames)(dottedName => { return situation[dottedName] }), situations ) + if (!Array.isArray(analysedSituations) || !branchName || !branches) { + return analysedSituations + } + const branchIndex = branches.findIndex( + branch => branch.nom === branchName + ) + return analysedSituations[branchIndex] } ) diff --git a/source/selectors/regleSelectors.js b/source/selectors/regleSelectors.js index 800a3ade4..3c642f6f2 100644 --- a/source/selectors/regleSelectors.js +++ b/source/selectors/regleSelectors.js @@ -69,13 +69,7 @@ export const règleValeurSelector = createSelector( : Array.isArray(situation) ? situation[0][dottedName] : situation[dottedName] - console.log( - dottedName, - valeur, - situation, - analysis.cache, - analysis.cache[dottedName] - ) + if (isNil(valeur)) { console.warn( `[règleValeurSelector] Impossible de trouver la valeur associée à la règle "${dottedName}". Pensez à vérifier l'orthographe et que l'écriture est bien sous forme dottedName. Vérifiez aussi qu'il ne manque pas une valeur par défaut à une règle nécessaire au calcul.` diff --git a/source/sites/mycompanyinfrance.fr/pages/Landing.css b/source/sites/mycompanyinfrance.fr/pages/Landing.css index 5c0a1b02b..ed78a47dd 100644 --- a/source/sites/mycompanyinfrance.fr/pages/Landing.css +++ b/source/sites/mycompanyinfrance.fr/pages/Landing.css @@ -71,7 +71,7 @@ border: 1px solid; border-color: rgba(41, 117, 209); opacity: 0.8 !important; - border-radius: 0.6rem; + border-radius: 0.3rem; text-decoration: none; font-size: 1.2rem; transition: opacity, box-shadow 0.2s;