From 45d73f11598d6f3a5380c4a83395c2d1ad59b200 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Thu, 17 Oct 2019 19:03:25 +0200 Subject: [PATCH] Ajoute une page qui liste les simulateurs --- source/components/RulePage.js | 19 ++-- .../components/conversation/Conversation.js | 40 ++++----- source/components/ui/Button/button.css | 23 ++--- source/components/ui/Card.css | 1 + source/components/utils/persistState.js | 2 +- .../pages/Company/AfterRegistration.js | 16 ++-- .../pages/Company/CompanyStatusNavigation.js | 4 +- .../pages/Company/CreationChecklist.js | 6 +- .../mon-entreprise.fr/pages/Company/Home.js | 2 +- .../pages/Company/PickLegalStatus.js | 6 +- .../pages/Company/PreviousAnswers.js | 10 +-- .../mon-entreprise.fr/pages/Gérer/index.js | 6 +- .../pages/Landing/Landing.js | 10 ++- .../pages/Simulateurs/Home.js | 90 +++++++++++++++++++ .../pages/Simulateurs/index.js | 55 ++++++++---- .../ÉconomieCollaborative/VotreSituation.js | 9 +- .../pages/ÉconomieCollaborative/index.js | 38 ++++---- 17 files changed, 216 insertions(+), 121 deletions(-) create mode 100644 source/sites/mon-entreprise.fr/pages/Simulateurs/Home.js diff --git a/source/components/RulePage.js b/source/components/RulePage.js index 18024d3d1..957dfcaeb 100644 --- a/source/components/RulePage.js +++ b/source/components/RulePage.js @@ -1,24 +1,17 @@ import { goBackToSimulation } from 'Actions/actions' import { ScrollToTop } from 'Components/utils/Scroll' -import { - decodeRuleName, - findRuleByDottedName -} from 'Engine/rules.js' +import { decodeRuleName, findRuleByDottedName } from 'Engine/rules.js' import { compose } from 'ramda' import React from 'react' -import emoji from 'react-easy-emoji' import { Trans } from 'react-i18next' import { connect } from 'react-redux' import { Redirect } from 'react-router-dom' -import { - flatRulesSelector, - noUserInputSelector, - situationBranchNameSelector -} from 'Selectors/analyseSelectors' +import { flatRulesSelector, noUserInputSelector, situationBranchNameSelector } from 'Selectors/analyseSelectors' import Rule from './rule/Rule' import './RulePage.css' import SearchButton from './SearchButton' + export default compose( connect(state => ({ valuesToShow: !noUserInputSelector(state), @@ -26,7 +19,7 @@ export default compose( brancheName: situationBranchNameSelector(state) })) )(function RulePage({ flatRules, match, valuesToShow, brancheName }) { - let name = match?.params?.name, + let name = match ?.params ?.name, decodedRuleName = decodeRuleName(name) const renderRule = dottedName => { @@ -59,9 +52,9 @@ const BackToSimulation = compose( function BackToSimulation({ goBackToSimulation }) { return ( ) } diff --git a/source/components/conversation/Conversation.js b/source/components/conversation/Conversation.js index f2f000b3a..4c188d6fd 100644 --- a/source/components/conversation/Conversation.js +++ b/source/components/conversation/Conversation.js @@ -6,11 +6,7 @@ import { findRuleByDottedName } from 'Engine/rules' import React from 'react' import emoji from 'react-easy-emoji' import { useDispatch, useSelector } from 'react-redux' -import { - currentQuestionSelector, - flatRulesSelector, - nextStepsSelector -} from 'Selectors/analyseSelectors' +import { currentQuestionSelector, flatRulesSelector, nextStepsSelector } from 'Selectors/analyseSelectors' import * as Animate from 'Ui/animate' import Aide from './Aide' import './conversation.css' @@ -53,14 +49,14 @@ export default function Conversation({ customEndMessages }) { <> )} @@ -70,20 +66,20 @@ export default function Conversation({ customEndMessages }) { ) : ( -
-

- {emoji('🌟')}{' '} - Vous avez complété cette simulation{' '} -

-

- {customEndMessages ? ( - customEndMessages - ) : ( - - Vous avez maintenant accès à l'estimation la plus précise possible. +

+

+ {emoji('🌟')}{' '} + Vous avez complété cette simulation{' '} +

+

+ {customEndMessages ? ( + customEndMessages + ) : ( + + Vous avez maintenant accès à l'estimation la plus précise possible. - )} -

-
- ) + )} +

+
+ ) } diff --git a/source/components/ui/Button/button.css b/source/components/ui/Button/button.css index 57cfcbe2c..716066b7e 100644 --- a/source/components/ui/Button/button.css +++ b/source/components/ui/Button/button.css @@ -1,5 +1,5 @@ .ui__.inverted-button:not(:disabled):not(.disabled):active, -.ui__.button:not(:disabled):not(.disabled):not(.skip):not(.left):active { +.ui__.button:not(:disabled):not(.disabled):not(.push-right):not(.push-left):active { animation: push-button-down 0.1s ease-out alternate-reverse 2; } @@ -53,6 +53,7 @@ ); background-size: 280%; background-position-x: 99%; + will-change: transform; } .ui__.button.plain { background-image: linear-gradient( @@ -165,22 +166,12 @@ opacity: 0.8; } -.ui__.button_next { - color: rgb(41, 117, 209); - color: var(--colour); -} - -.ui__.skip.button { - border: none; - padding: 0; - will-change: transform; -} - -.ui__.skip.button:not(:disabled):not(.disabled):hover { +.ui__.push-right.button:not(:disabled):not(.disabled):hover { opacity: 0.8; transform: translateX(3px); } -.ui__.button.left:not(:disabled):not(.disabled):hover { +.ui__.button.push-left:not(:disabled):not(.disabled):hover { + opacity: 0.8; transform: translateX(-3px); } @@ -188,10 +179,10 @@ opacity: 0.8; } -.ui__.skip.button:active { +.ui__.push-right.button:active { animation: push-button-right 0.1s ease-out alternate-reverse 2; } -.ui__.button.left:active { +.ui__.button.push-left:active { animation: push-button-left 0.1s ease-out alternate-reverse 2; } diff --git a/source/components/ui/Card.css b/source/components/ui/Card.css index 78df57600..d9fb60775 100644 --- a/source/components/ui/Card.css +++ b/source/components/ui/Card.css @@ -40,6 +40,7 @@ filter: saturate(0); } + .ui__.card.disabled .ui__.card.plain, .ui__.card.disabled.plain { background: linear-gradient( diff --git a/source/components/utils/persistState.js b/source/components/utils/persistState.js index 9faca0739..f6437b343 100644 --- a/source/components/utils/persistState.js +++ b/source/components/utils/persistState.js @@ -16,6 +16,6 @@ export const getInitialState = key => { export const usePersistingState = (key, defaultState) => { const initialState = getInitialState(key) return persistState(key)( - useState(initialState !== undefined ? initialState : defaultState) + useState(initialState != null ? initialState : defaultState) ) } diff --git a/source/sites/mon-entreprise.fr/pages/Company/AfterRegistration.js b/source/sites/mon-entreprise.fr/pages/Company/AfterRegistration.js index 45b7061ec..a4c40e8de 100644 --- a/source/sites/mon-entreprise.fr/pages/Company/AfterRegistration.js +++ b/source/sites/mon-entreprise.fr/pages/Company/AfterRegistration.js @@ -24,6 +24,15 @@ const AfterRegistration = ({ companyStatusChoice, sitePaths }: Props) => { return ( +
+ + ← Retour la création + +

Après la création

@@ -113,13 +122,6 @@ const AfterRegistration = ({ companyStatusChoice, sitePaths }: Props) => {

)} -

- - ← Démarche de création - -

) } diff --git a/source/sites/mon-entreprise.fr/pages/Company/CompanyStatusNavigation.js b/source/sites/mon-entreprise.fr/pages/Company/CompanyStatusNavigation.js index e9e453e82..4a34ba682 100644 --- a/source/sites/mon-entreprise.fr/pages/Company/CompanyStatusNavigation.js +++ b/source/sites/mon-entreprise.fr/pages/Company/CompanyStatusNavigation.js @@ -17,12 +17,12 @@ export default (connect( )(({ goBackToPreviousQuestion, onSkip }: Props) => (
{onSkip && ( - )} diff --git a/source/sites/mon-entreprise.fr/pages/Company/CreationChecklist.js b/source/sites/mon-entreprise.fr/pages/Company/CreationChecklist.js index de66b4690..fdfe52def 100644 --- a/source/sites/mon-entreprise.fr/pages/Company/CreationChecklist.js +++ b/source/sites/mon-entreprise.fr/pages/Company/CreationChecklist.js @@ -103,10 +103,8 @@ const CreateCompany = ({

-

diff --git a/source/sites/mon-entreprise.fr/pages/Company/Home.js b/source/sites/mon-entreprise.fr/pages/Company/Home.js index a838e6c0b..7b0c73f4d 100644 --- a/source/sites/mon-entreprise.fr/pages/Company/Home.js +++ b/source/sites/mon-entreprise.fr/pages/Company/Home.js @@ -88,7 +88,7 @@ const CreateMyCompany = ({ + className="ui__ simple push-right button"> Je connais mon statut →

diff --git a/source/sites/mon-entreprise.fr/pages/Company/PickLegalStatus.js b/source/sites/mon-entreprise.fr/pages/Company/PickLegalStatus.js index b93d6c2ef..6dc959516 100644 --- a/source/sites/mon-entreprise.fr/pages/Company/PickLegalStatus.js +++ b/source/sites/mon-entreprise.fr/pages/Company/PickLegalStatus.js @@ -31,8 +31,8 @@ const StatusButton = withSitePaths( {status.includes('auto-entrepreneur') ? ( Devenir ) : ( - Créer une - )}{' '} + Créer une + )}{' '} {t(status)} @@ -123,7 +123,7 @@ const SetMainStatus = ({
diff --git a/source/sites/mon-entreprise.fr/pages/Company/PreviousAnswers.js b/source/sites/mon-entreprise.fr/pages/Company/PreviousAnswers.js index d7d52d2ee..a9304ec0c 100644 --- a/source/sites/mon-entreprise.fr/pages/Company/PreviousAnswers.js +++ b/source/sites/mon-entreprise.fr/pages/Company/PreviousAnswers.js @@ -18,14 +18,14 @@ const requirementToText = (key, value) => { Entreprise individuelle ) : ( - Société - ) + Société + ) case 'directorStatus': return value === 'SELF_EMPLOYED' ? ( Indépendant ) : ( - Assimilé salarié - ) + Assimilé salarié + ) case 'autoEntrepreneur': return value ? Auto-entrepreneur : Pas en auto-entrepreneur case 'minorityDirector': @@ -48,7 +48,7 @@ const PreviousAnswers = ({ {!!Object.keys(legalStatus).length && ( )} diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/index.js b/source/sites/mon-entreprise.fr/pages/Gérer/index.js index 1a336d13a..50a5c7625 100644 --- a/source/sites/mon-entreprise.fr/pages/Gérer/index.js +++ b/source/sites/mon-entreprise.fr/pages/Gérer/index.js @@ -1,7 +1,6 @@ import { ScrollToTop } from 'Components/utils/Scroll' import { SitePathsContext } from 'Components/utils/withSitePaths' import React, { useContext } from 'react' -import emoji from 'react-easy-emoji' import { Route, Switch } from 'react-router' import { NavLink, useLocation } from 'react-router-dom' import Embaucher from './Embaucher' @@ -16,13 +15,12 @@ export default function Gérer() { <>
- {' '} - {emoji('⬅️')} Retour à mon activité + className="ui__ simple push-left small button"> + ← Retour à mon activité
diff --git a/source/sites/mon-entreprise.fr/pages/Landing/Landing.js b/source/sites/mon-entreprise.fr/pages/Landing/Landing.js index 1d781b336..94e6b2977 100644 --- a/source/sites/mon-entreprise.fr/pages/Landing/Landing.js +++ b/source/sites/mon-entreprise.fr/pages/Landing/Landing.js @@ -77,9 +77,17 @@ export default function Landing() { Commencer - +
+
+ + {emoji('🧮')} Voir la liste des simulateurs + +

Qui sommes-nous ?

diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/Home.js b/source/sites/mon-entreprise.fr/pages/Simulateurs/Home.js new file mode 100644 index 000000000..54df618f7 --- /dev/null +++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/Home.js @@ -0,0 +1,90 @@ +import { SitePathsContext } from 'Components/utils/withSitePaths' +import React, { useContext } from 'react' +import emoji from 'react-easy-emoji' +import { Link } from 'react-router-dom' + +export default function Simulateurs() { + const sitePaths = useContext(SitePathsContext) + return ( + <> + + +

+

Simulateurs disponibles

+ +
{emoji('☂️')}
+

Assimilé salarié

+

+ Calculer le revenu d'un dirigeant de SAS, SASU ou SARL minoritaire +

+ + +
{emoji('🃏')}
+

Indépendant

+

+ Calculer le revenu d'un dirigeant de EURL, EI, ou SARL majoritaire +

+ + +
{emoji('🧢')}
+

Auto-entrepreneur

+

+ Calculer le revenu (ou le chiffre d'affaires) d'un auto-entrepreneur +

+ + +
{emoji('🤝')}
+

Salarié

+

+ Calculer le salaire net, brut, ou total d'un salarié, stagiaire, ou + assimilé +

+ + +
{emoji('📊')}
+

Comparaison statuts

+

+ Simulez les différences entre les régimes (cotisations, retraite, maternité, maladie, etc.) +

+ + +
+
+ +

+ Tous les simulateurs sur ce site sont : +

+
    +
  • Maintenus à jour avec les dernières legislation
    • +
  • Améliorés en continu afin d'augmenter le nombre de dispositifs pris en compte (actuellement 320)
    • +
  • Développés en partenariat avec l'Urssaf
    • +
+
+ + ) +} diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/index.js b/source/sites/mon-entreprise.fr/pages/Simulateurs/index.js index 75f51ceb2..c66a07f57 100644 --- a/source/sites/mon-entreprise.fr/pages/Simulateurs/index.js +++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/index.js @@ -1,39 +1,58 @@ import { usePersistingState } from 'Components/utils/persistState' import { ScrollToTop } from 'Components/utils/Scroll' import { SitePathsContext } from 'Components/utils/withSitePaths' -import React, { useContext } from 'react' -import emoji from 'react-easy-emoji' +import React, { useContext, useEffect } from 'react' import { Route, Switch } from 'react-router' import { Link, useLocation } from 'react-router-dom' import AssimiléSalarié from './AssimiléSalarié' import AutoEntrepreneur from './AutoEntrepreneur' +import Home from './Home' import Indépendant from './Indépendant' import Salarié from './Salarié' import SchemeComparaison from './SchemeComparaison' export default function Simulateurs() { const sitePaths = useContext(SitePathsContext) - const { state } = useLocation() - const [lastState] = usePersistingState( - 'navigation::simulateurs::locationState::v2', - state + const { state, pathname } = useLocation() + const [lastState, setLastState] = usePersistingState( + 'navigation::simulateurs::locationState::v2' ) + useEffect(() => { + if (state) { + setLastState(state) + } + }, [setLastState, state]) return ( <> -
- {lastState ?.fromGérer && ( - - {emoji('⬅️')} Retour à mon activité - - )} - {lastState ?.fromCréer && ( - - {emoji('⬅️')} Retour à la création - - )} -
+ {pathname !== sitePaths.simulateurs.index && ( +
+ {lastState ?.fromGérer && ( + + ← Retour à mon activité + + )} + {lastState ?.fromCréer && ( + + ← Retour à la création + + )} + {!lastState || + (lastState ?.fromSimulateurs && ( + + ← Voir les autres simulateurs + + ))} +
+ )} + { - - Revenus de plateformes en ligne › - +
+ + ← Retour à la selection d'activités + +
@@ -38,4 +42,4 @@ export default withSitePaths(function ÉconomieCollaborative({ sitePaths }) { ) -}) +}