From 22c3d910aaed4905340be17770ad66025f793233 Mon Sep 17 00:00:00 2001 From: Mael Date: Thu, 17 Jan 2019 15:34:44 +0100 Subject: [PATCH] WIP Fusion des composants de simulation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Travail fait * pour : - la simu indépendant - la simu salariés Les simus assimilé et micro devraient pouvoir être converties super facilement. La simu de comparation requiert au moins de rétablir un paramètre du genre displayTargetsOnlyAfterInput * aux bugs et animations près --- .../{QuickLink.js => QuickLinks.js} | 23 +- ...tView.css => SalaryCompactExplanation.css} | 0 ...ultView.js => SalaryCompactExplanation.js} | 20 +- source/components/SalaryExplanation.js | 41 +++ source/components/SalaryFirstExplanation.js | 58 +++++ source/components/SalarySimulation.js | 239 ------------------ source/components/SimpleSimulation.js | 58 +++-- .../{SalarySimulation.css => Simulation.css} | 0 source/components/Simulation.js | 94 +++++++ source/components/TargetSelection.js | 2 + .../simulationConfigs/indépendant.yaml | 4 + .../components/simulationConfigs/salarié.yaml | 7 + source/locales/en.yaml | 6 +- source/sites/embauche.gouv.fr/pages/Home.js | 4 +- .../pages/SocialSecurity/Indépendant.js | 22 +- .../pages/SocialSecurity/Salarié.js | 29 ++- 16 files changed, 301 insertions(+), 306 deletions(-) rename source/components/{QuickLink.js => QuickLinks.js} (78%) rename source/components/{ResultView.css => SalaryCompactExplanation.css} (100%) rename source/components/{ResultView.js => SalaryCompactExplanation.js} (75%) create mode 100644 source/components/SalaryExplanation.js create mode 100644 source/components/SalaryFirstExplanation.js delete mode 100644 source/components/SalarySimulation.js rename source/components/{SalarySimulation.css => Simulation.css} (100%) create mode 100644 source/components/Simulation.js diff --git a/source/components/QuickLink.js b/source/components/QuickLinks.js similarity index 78% rename from source/components/QuickLink.js rename to source/components/QuickLinks.js index 61f65780c..9a19df1a4 100644 --- a/source/components/QuickLink.js +++ b/source/components/QuickLinks.js @@ -16,20 +16,15 @@ type Props = { validInputEntered: boolean } -let quickLinks = { - CDD: 'contrat salarié . CDD', - Cadre: 'contrat salarié . statut cadre', - 'Temps partiel': 'contrat salarié . temps partiel', - Localisation: 'établissement . localisation', - Autres: null -} - -const QuickLink = ({ +const QuickLinks = ({ startConversation, location, - validInputEntered + validInputEntered, + quickLinks, + conversationStarted }: Props) => { - const show = !location.pathname.endsWith('/simulation') && validInputEntered + const show = validInputEntered && !conversationStarted + console.log(quickLinks) return ( ({ key: props.language, - validInputEntered: validInputEnteredSelector(state) + validInputEntered: validInputEnteredSelector(state), + conversationStarted: state.conversationStarted, + quickLinks: state.simulation?.config["questions à l'affiche"] }), { startConversation } ) -)(QuickLink) +)(QuickLinks) diff --git a/source/components/ResultView.css b/source/components/SalaryCompactExplanation.css similarity index 100% rename from source/components/ResultView.css rename to source/components/SalaryCompactExplanation.css diff --git a/source/components/ResultView.js b/source/components/SalaryCompactExplanation.js similarity index 75% rename from source/components/ResultView.js rename to source/components/SalaryCompactExplanation.js index 40e78c2c1..cc3dfd61b 100644 --- a/source/components/ResultView.js +++ b/source/components/SalaryCompactExplanation.js @@ -3,13 +3,9 @@ import Distribution from 'Components/Distribution' import PaySlip from 'Components/PaySlip' import SearchButton from 'Components/SearchButton' -import withTracker from 'Components/utils/withTracker' -import { compose } from 'ramda' import React, { Component } from 'react' import { Trans } from 'react-i18next' -import { connect } from 'react-redux' -import ficheDePaieSelectors from 'Selectors/ficheDePaieSelectors' -import './ResultView.css' +import './SalaryCompactExplanation.css' import type { Tracker } from 'Components/utils/withTracker' @@ -27,7 +23,7 @@ const resultViewTitle = { payslip: 'Fiche de paie' } -class ResultView extends Component { +export default class SalaryCompactExplanation extends Component { state = { resultView: this.props.conversationStarted ? 'payslip' : 'distribution' } @@ -67,15 +63,3 @@ class ResultView extends Component { ) } } - -export default compose( - withTracker, - connect( - state => ({ - conversationStarted: state.conversationStarted, - key: state.conversationStarted, - displayResults: !!ficheDePaieSelectors(state) - }), - {} - ) -)(ResultView) diff --git a/source/components/SalaryExplanation.js b/source/components/SalaryExplanation.js new file mode 100644 index 000000000..14535b81e --- /dev/null +++ b/source/components/SalaryExplanation.js @@ -0,0 +1,41 @@ +import React, { Component } from 'react' +import withTracker from 'Components/utils/withTracker' +import { compose } from 'ramda' +import { connect } from 'react-redux' +import ficheDePaieSelectors from 'Selectors/ficheDePaieSelectors' +import './SalaryCompactExplanation.css' +import SalaryFirstExplanation from './SalaryFirstExplanation' +import SalaryCompactExplanation from './SalaryCompactExplanation' +import * as Animate from 'Ui/animate' +import { startConversation } from 'Actions/actions' +import { formValueSelector } from 'redux-form' + +export default compose( + withTracker, + connect( + state => ({ + conversationStarted: state.conversationStarted, + displayResults: !!ficheDePaieSelectors(state), + arePreviousAnswers: state.conversationSteps.foldedSteps.length > 0, + period: formValueSelector('conversation')(state, 'période') + }), + { + startConversation + } + ) +)( + class SalaryExplanation extends Component { + render() { + return ( + + {!this.props.conversationStarted ? ( + + ) : ( + + )} +
+ + ) + } + } +) diff --git a/source/components/SalaryFirstExplanation.js b/source/components/SalaryFirstExplanation.js new file mode 100644 index 000000000..5e66792d0 --- /dev/null +++ b/source/components/SalaryFirstExplanation.js @@ -0,0 +1,58 @@ +/* @flow */ + +import Distribution from 'Components/Distribution' +import PaySlip from 'Components/PaySlip' +import SearchButton from 'Components/SearchButton' +import withTracker from 'Components/utils/withTracker' +import { compose } from 'ramda' +import React, { Component } from 'react' +import { Trans } from 'react-i18next' +import { connect } from 'react-redux' +import ficheDePaieSelectors from 'Selectors/ficheDePaieSelectors' + +import type { Tracker } from 'Components/utils/withTracker' + +export default class SalaryFirstExplanation extends Component { + render() { + return ( + <> +

+ A quoi servent mes cotisations ? +

+ + + {!(this.props.arePreviousAnswers && this.props.conversationStarted) && ( + <> +

+ Simulation personnalisée +

+

+ + Il s'agit pour l'instant d'une + première estimation sur la base d'un contrat + générique. La législation française prévoit une multitude de cas + particuliers et de règles spécifiques qui modifient + considérablement les montants de l'embauche. + +

+

+ +

+ + )} +

+ + {this.props.period === 'mois' + ? 'Fiche de paie mensuelle' + : 'Détail annuel des cotisations'} + +

+ + + ) + } +} diff --git a/source/components/SalarySimulation.js b/source/components/SalarySimulation.js deleted file mode 100644 index a0ef16968..000000000 --- a/source/components/SalarySimulation.js +++ /dev/null @@ -1,239 +0,0 @@ -import { startConversation } from 'Actions/actions' -import { Component, React, T } from 'Components' -import AnswerList from 'Components/AnswerList' -import Distribution from 'Components/Distribution' -import PaySlip from 'Components/PaySlip' -import { ScrollToTop } from 'Components/utils/Scroll' -import withColours from 'Components/utils/withColours' -import withLanguage from 'Components/utils/withLanguage' -import withSitePaths from 'Components/utils/withSitePaths' -import { compose } from 'ramda' -import emoji from 'react-easy-emoji' -import { Trans, withNamespaces } from 'react-i18next' -import { connect } from 'react-redux' -import { Redirect, withRouter } from 'react-router' -import { Link } from 'react-router-dom' -import { formValueSelector } from 'redux-form' -import { - blockingInputControlsSelector, - nextStepsSelector, - noUserInputSelector, - validInputEnteredSelector -} from 'Selectors/analyseSelectors' -import * as Animate from 'Ui/animate' -import { normalizeBasePath } from '../utils' -import Conversation from './conversation/Conversation' -import PageFeedback from './Feedback/PageFeedback' -import QuickLink from './QuickLink' -import ResultView from './ResultView' -import './SalarySimulation.css' -import TargetSelection from './TargetSelection' - -export default compose( - withRouter, - withColours, - withNamespaces(), // Triggers rerender when the language changes - connect( - state => ({ - blockingInputControls: blockingInputControlsSelector(state), - conversationStarted: state.conversationStarted, - validInputEntered: validInputEnteredSelector(state), - arePreviousAnswers: state.conversationSteps.foldedSteps.length !== 0, - nextSteps: state.conversationStarted && nextStepsSelector(state), - noUserInput: noUserInputSelector(state), - period: formValueSelector('conversation')(state, 'période') - }), - { - startConversation - } - ), - withLanguage, - withSitePaths -)( - class Simulation extends Component { - state = { - displayPreviousAnswers: false - } - render() { - let { - colours, - conversationStarted, - arePreviousAnswers, - nextSteps, - blockingInputControls, - displayHiringProcedures, - match, - validInputEntered, - - period, - location, - sitePaths, - noUserInput - } = this.props - const displayConversation = conversationStarted && !blockingInputControls - const simulationCompleted = - !blockingInputControls && conversationStarted && !nextSteps.length - const displayPreviousAnswers = - arePreviousAnswers && this.state.displayPreviousAnswers - const simulationHomePath = normalizeBasePath(match.path).replace( - /\/simulation\/$/, - '' - ) - return ( - <> -
- {noUserInput && ( -

- {emoji('🌟')}{' '} - - Le simulateur est à jour aux taux 2019 –{' '} - - détails - - -

- )} - - {location.pathname.endsWith('/simulation') && ( - <> - {!conversationStarted && } - -