diff --git a/source/components/ComparativeSimulation.css b/source/components/ComparativeSimulation.css new file mode 100644 index 000000000..edb431ade --- /dev/null +++ b/source/components/ComparativeSimulation.css @@ -0,0 +1,30 @@ +#ComparativeSimulation { + padding: 0 1.5em; +} + +#ComparativeSimulation #simulationContent button { + padding: 0.6em 1em; + text-align: center; + border-radius: 6px; + font-weight: 500; +} +#ComparativeSimulation header { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin: 1em 0; +} +#ComparativeSimulation header > h1 { + font-size: 120%; + margin: 0.3em 0; +} + +#ComparativeSimulation .step-question h1 { + margin-top: 1rem; +} + +#ComparativeSimulation .conversationContainer { + margin-bottom: 10%; +} diff --git a/source/components/ComparativeSimulation.js b/source/components/ComparativeSimulation.js index bd7780308..24071d985 100644 --- a/source/components/ComparativeSimulation.js +++ b/source/components/ComparativeSimulation.js @@ -5,7 +5,7 @@ import Answers from 'Components/AnswerList' import Conversation from 'Components/conversation/Conversation' import withColours from 'Components/utils/withColours' import ComparativeTargets from 'Components/ComparativeTargets' -import './GenericSimulation.css' +import './ComparativeSimulation.css' import { nextStepsSelector, analysisWithDefaultsSelector @@ -34,13 +34,11 @@ export default compose( analysis: { controls } } = this.props return ( -
+
- -

Quel revenu au régime des indépendants ?

- +

{simulationConfig.titre}

-
+
{!isEmpty(previousAnswers) && (
diff --git a/source/components/ComparativeTargets.css b/source/components/ComparativeTargets.css new file mode 100644 index 000000000..8c0367484 --- /dev/null +++ b/source/components/ComparativeTargets.css @@ -0,0 +1,32 @@ +#targets { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +#targets > .content > ul > li { + margin: 1em; + border-radius: 6px; + background: var(--colour); + padding: 1em; + width: 16em; + display: flex; + justify-content: space-between; + align-items: center; +} +#targets > .icon { + margin: 0 0.6em; + font-size: 200%; + color: var(--colour); +} +#targets .value { + font-size: 180%; +} +#targets .unit { +} + +#targets .explanation { + font-size: 150%; + text-decoration: none; + line-height: 0; +} diff --git a/source/components/ComparativeTargets.js b/source/components/ComparativeTargets.js index f18942fd2..bb555767a 100644 --- a/source/components/ComparativeTargets.js +++ b/source/components/ComparativeTargets.js @@ -1,12 +1,13 @@ import React from 'react' import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors' import { connect } from 'react-redux' -import './Targets.css' +import './ComparativeTargets.css' import withColours from 'Components/utils/withColours' import { Link } from 'react-router-dom' import emoji from 'react-easy-emoji' import { compose } from 'ramda' import simulationConfig from './simulateur-rémunération-dirigeant.yaml' +import AnimatedTargetValue from './AnimatedTargetValue' export default compose( connect(state => ({ @@ -14,7 +15,7 @@ export default compose( })), withColours )( - class Targets extends React.Component { + class ComparativeTargets extends React.Component { render() { return (
@@ -23,12 +24,15 @@ export default compose( style={{ color: this.props.colours.textColour }}>
    {this.props.analyses.map((analysis, i) => { - let { title, nodeValue, dottedName } = analysis.targets[0] + let { title, nodeValue, dottedName } = analysis.targets[0], + name = simulationConfig.branches[i].nom return ( -
  • - {simulationConfig.branches[i].nom} +
  • + {name} - {nodeValue?.toFixed(1)}{' '} + + + {' '} h1 { diff --git a/source/components/PeriodSwitch.css b/source/components/PeriodSwitch.css index 9db38c1f5..96f03c7e7 100644 --- a/source/components/PeriodSwitch.css +++ b/source/components/PeriodSwitch.css @@ -23,7 +23,7 @@ input[type='radio'] + span { vertical-align: middle; border-radius: 20px; cursor: pointer; - box-shadow: 0 0 0px 1px rgb(41, 117, 209); + box-shadow: 0 0 0px 1px var(--colour); } input[type='radio'] ~ span { cursor: pointer; diff --git a/source/components/simulateur-rémunération-dirigeant.yaml b/source/components/simulateur-rémunération-dirigeant.yaml index 73bd0e4b3..08f0c9daf 100644 --- a/source/components/simulateur-rémunération-dirigeant.yaml +++ b/source/components/simulateur-rémunération-dirigeant.yaml @@ -1,23 +1,25 @@ +titre: | + Calcul du revenu du travailleur indépendant ou dirigeant d'entreprise en fonction de son choix de régime social. questions: - entreprise . chiffre d'affaires - entreprise . catégorie d'activité branches: - - nom: Revenu en indépendant - situation: - indépendant: oui - micro entreprise: non - contrat salarié: non - - nom: Revenu en micro-entreprise + - nom: Micro-entreprise situation: micro entreprise: oui indépendant: non contrat salarié: non - - nom: Revenu au régime général + - nom: Indépendant (ex-RSI) + situation: + indépendant: oui + micro entreprise: non + contrat salarié: non + - nom: Régime général (assimilé salarié) situation: micro entreprise: non indépendant: non contrat salarié: oui contrat salarié . assimilé salarié: oui - contrat salarié . rémunération . total: 100000 - +raccourcis: + contrat salarié . rémunération . total: entreprise . chiffre d'affaires diff --git a/source/règles/base.yaml b/source/règles/base.yaml index 602360c22..97a156db8 100644 --- a/source/règles/base.yaml +++ b/source/règles/base.yaml @@ -2562,7 +2562,7 @@ - espace: entreprise nom: chiffre d'affaires - question: Quel chiffre d'affaires ? + question: Quel est votre chiffre d'affaires ? période: flexible format: euros @@ -2572,6 +2572,7 @@ période: flexible - nom: entreprise . catégorie d'activité + question: Quelle est votre catégorie d'activité ? par défaut: prestation de service . libérale formule: une possibilité: diff --git a/source/selectors/analyseSelectors.js b/source/selectors/analyseSelectors.js index 0b4ff84fe..48d371703 100644 --- a/source/selectors/analyseSelectors.js +++ b/source/selectors/analyseSelectors.js @@ -147,10 +147,17 @@ export let exampleAnalysisSelector = createSelector( let makeAnalysisSelector = situationSelector => createDeepEqualSelector( - [parsedRulesSelector, targetNamesSelector, situationSelector], - (parsedRules, targetNames, situations) => { - let analyses = situations.map(s => - analyseMany(parsedRules, targetNames)(dottedName => s[dottedName]) + [ + parsedRulesSelector, + targetNamesSelector, + situationSelector, + (_, { raccourcis: valueShortcuts }) => valueShortcuts + ], + (parsedRules, targetNames, situations, valueShortcuts) => { + let analyses = situations.map(situation => + analyseMany(parsedRules, targetNames)( + dottedName => situation[valueShortcuts[dottedName] || dottedName] + ) ) return analyses }