Répare la navigation par branche des pages de documentation

source/actions/actions.js

@@ -3,7 +3,8 @@ import type {
 	ResetSimulationAction,
 	LoadPreviousSimulationAction,
 	DeletePreviousSimulationAction,
-	StartConversationAction
+	StartConversationAction,
+	SetSituationBranchAction
 } from 'Types/ActionsTypes'
 import { reset } from 'redux-form'
 import { deletePersistedSimulation } from '../storage/persistSimulation'
@@ -20,6 +21,11 @@ export const resetSimulation = () => (dispatch: any => void): void => {
 	)
 }
 
+export const setSituationBranch = (id: number): SetSituationBranchAction => ({
+	type: 'SET_SITUATION_BRANCH',
+	id
+})
+
 export const deletePreviousSimulation = () => (
 	dispatch: DeletePreviousSimulationAction => void
 ) => {

source/components/ComparativeTargets.js

@@ -1,5 +1,7 @@
 /* @flow */
+import { setSituationBranch } from 'Actions/actions'
 import RuleLink from 'Components/RuleLink'
+import withSitePaths from 'Components/utils/withSitePaths'
 import React from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
@@ -121,14 +123,19 @@ import SchemeCard from './ui/SchemeCard'
 // 	}
 // )
 const connectRègles = (situationBranchName: string) =>
-	connect(state => ({
-		revenuDisponible: règleAvecMontantSelector(state, {
-			situationBranchName
-		})('revenu disponible'),
-		prélèvements: règleAvecValeurSelector(state, {
-			situationBranchName
-		})('ratio de prélèvements')
-	}))
+	connect(
+		state => ({
+			revenuDisponible: règleAvecMontantSelector(state, {
+				situationBranchName
+			})('revenu disponible'),
+			prélèvements: règleAvecValeurSelector(state, {
+				situationBranchName
+			})('ratio de prélèvements')
+		}),
+		(dispatch: any => void, props) => ({
+			setSituationBranch: () => dispatch(setSituationBranch(props.branchIndex))
+		})
+	)
 
 const ComparativeTargets = () => (
 	<Animate.fromBottom config={config.gentle}>
@@ -140,18 +147,19 @@ const ComparativeTargets = () => (
 				justifyContent: 'center',
 				alignItems: 'stretch'
 			}}>
-			<Indépendant />
-			<AssimiléSalarié />
-			<MicroEntreprise />
+			<Indépendant branchIndex={1} />
+			<AssimiléSalarié branchIndex={2} />
+			<MicroEntreprise branchIndex={0} />
 		</div>
 	</Animate.fromBottom>
 )
 
 const Indépendant = connectRègles('Indépendant')(
-	({ revenuDisponible, prélèvements }) => (
+	({ revenuDisponible, prélèvements, setSituationBranch }) => (
 		<SchemeCard
 			title="Indépendants"
 			subtitle="La protection à la carte"
+			onAmountClick={setSituationBranch}
 			amount={revenuDisponible.montant}
 			amountNotice={<PrélèvementNotice prélèvements={prélèvements} />}
 			icon="👩‍🔧"
@@ -171,7 +179,7 @@ const Indépendant = connectRègles('Indépendant')(
 )
 
 const AssimiléSalarié = connectRègles('Assimilé salarié')(
-	({ revenuDisponible, prélèvements }) => (
+	({ revenuDisponible, prélèvements, setSituationBranch }) => (
 		<SchemeCard
 			title="Assimilé salarié"
 			subtitle="Le régime tout compris"
@@ -179,6 +187,7 @@ const AssimiléSalarié = connectRègles('Assimilé salarié')(
 			amountNotice={<PrélèvementNotice prélèvements={prélèvements} />}
 			featured="Le choix de 58% des entrepreneurs (hors EI)"
 			icon="☂"
+			onAmountClick={setSituationBranch}
 			amountDesc={<RuleLink {...revenuDisponible} />}
 			features={[
 				'Régime général',
@@ -195,11 +204,12 @@ const AssimiléSalarié = connectRègles('Assimilé salarié')(
 )
 
 const MicroEntreprise = connectRègles('Micro-entreprise')(
-	({ revenuDisponible, prélèvements }) => (
+	({ revenuDisponible, prélèvements, setSituationBranch }) => (
 		<SchemeCard
 			title="Micro-entreprise"
 			subtitle="Pour les petites activités"
 			amountDesc={<RuleLink {...revenuDisponible} />}
+			onAmountClick={setSituationBranch}
 			icon="🚶‍♂️"
 			amountNotice={<PrélèvementNotice prélèvements={prélèvements} />}
 			amount={revenuDisponible.montant}
@@ -216,7 +226,7 @@ const MicroEntreprise = connectRègles('Micro-entreprise')(
 	)
 )
 
-const PrélèvementNotice = ({ prélèvements }) => (
+const PrélèvementNotice = withSitePaths(({ prélèvements, sitePaths }) => (
 	<>
 		soit{' '}
 		<Montant
@@ -225,8 +235,10 @@ const PrélèvementNotice = ({ prélèvements }) => (
 			numFractionDigit={0}>
 			{prélèvements.valeur}
 		</Montant>{' '}
-		de <Link to={prélèvements.lien}>prélèvements</Link>
+		de{' '}
+		<Link to={sitePaths.documentation.index + '/' + prélèvements.lien}>
+			prélèvements
+		</Link>
 	</>
-)
-
+))
 export default ComparativeTargets

source/components/ui/SchemeCard.js

@@ -17,6 +17,7 @@ type Props = {
 	features: Array<Node>,
 	amountDesc: Node,
 	amountNotice: Node,
+	onAmountClick: () => void,
 	featured?: Node,
 	icon: string
 }
@@ -27,6 +28,7 @@ const SchemeCard = ({
 	amountDesc,
 	icon,
 	amountNotice,
+	onAmountClick,
 	featured,
 	features
 }: Props) => (
@@ -47,7 +49,7 @@ const SchemeCard = ({
 			<span className="scheme-card__icon">{emoji(icon)} </span>
 			<h3 className="scheme-card__title">{title}</h3>
 			{amount && (
-				<>
+				<div onClick={onAmountClick}>
 					<div className="ui__ card plain scheme-card__amount">
 						{amountDesc}
 						<p className="ui__ lead" style={{ margin: '0.6rem 0 0' }}>
@@ -57,7 +59,7 @@ const SchemeCard = ({
 					<p className="ui__ notice" style={{ marginTop: '-0.6rem' }}>
 						{amountNotice}
 					</p>
-				</>
+				</div>
 			)}
 			<h4 className="scheme-card__subtitle">{subtitle}</h4>
 			<ul className="scheme-card__content">

source/règles/base.yaml

@@ -3108,8 +3108,9 @@
     wikipedia: https://fr.wikipedia.org/wiki/Versement_transport
 
 - nom: ratio de prélèvements
-  description: | 
+  description: |
     Les prélèvements incluent les cotisations sociales, la CSG, l'impôt sur le revenu.
+
     Attention, pour les micro-entreprise, nous incluons les charges dans ce ratio de prélèvements, car les charges ne sont pas déductibles. Cela permet de comparer le ratio de prélèvements entre les différents régimes.
   formule: 1 - ratio de revenu
   période: flexible

source/types/ActionsTypes.js

@@ -14,6 +14,10 @@ export type StartConversationAction = {
 export type DeletePreviousSimulationAction = {
 	type: 'DELETE_PREVIOUS_SIMULATION'
 }
+export type SetSituationBranchAction = {
+	type: 'SET_SITUATION_BRANCH',
+	id: number
+}
 export type StepAction = {
 	type: 'STEP_ACTION',
 	name: 'fold' | 'unfold',
@@ -22,6 +26,7 @@ export type StepAction = {
 
 export type Action =
 	| StartConversationAction
+	| SetSituationBranchAction
 	| LoadPreviousSimulationAction
 	| ResetSimulationAction
 	| DeletePreviousSimulationAction