diff --git a/mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx b/mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx index b14b83012..320f2737f 100644 --- a/mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx +++ b/mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx @@ -18,6 +18,7 @@ import { useSelector } from 'react-redux' import { targetUnitSelector } from 'Selectors/simulationSelectors' import styled from 'styled-components' import AidesCovid from './AidesCovid' +import { DistributionSection } from './SalaryExplanation' export default function IndépendantExplanation() { const { t } = useTranslation() @@ -53,12 +54,9 @@ export default function IndépendantExplanation() { /> -
-

- À quoi servent mes cotisations ? -

+ -
+ ) } @@ -227,16 +225,18 @@ function Distribution() { const maximum = distribution.map(([, value]) => value).reduce(max, 0) return ( -
- {distribution.map(([sectionName, value]) => ( - - ))} -
+ <> +
+ {distribution.map(([sectionName, value]) => ( + + ))} +
+ ) } diff --git a/mon-entreprise/source/components/simulationExplanation/SalaryExplanation.tsx b/mon-entreprise/source/components/simulationExplanation/SalaryExplanation.tsx index 8f3d35569..afee70627 100644 --- a/mon-entreprise/source/components/simulationExplanation/SalaryExplanation.tsx +++ b/mon-entreprise/source/components/simulationExplanation/SalaryExplanation.tsx @@ -3,6 +3,7 @@ import PaySlip from 'Components/PaySlip' import StackedBarChart from 'Components/StackedBarChart' import * as Animate from 'Components/ui/animate' import { ThemeColorsContext } from 'Components/utils/colors' +import Emoji from 'Components/utils/Emoji' import { useInversionFail } from 'Components/utils/EngineContext' import { useContext, useRef } from 'react' import emoji from 'react-easy-emoji' @@ -114,11 +115,23 @@ function PaySlipSection() { ) } -const DistributionSection = () => ( +export const DistributionSection = ({ + children, +}: { + children: React.ReactNode +}) => (

À quoi servent mes cotisations ?

- + {children || } +

+ + Pour en savoir plus, rendez-vous sur le site{' '} + + aquoiserventlescotisations.urssaf.fr + + +

) diff --git a/mon-entreprise/source/locales/ui-en.yaml b/mon-entreprise/source/locales/ui-en.yaml index 29974198c..e855abd44 100644 --- a/mon-entreprise/source/locales/ui-en.yaml +++ b/mon-entreprise/source/locales/ui-en.yaml @@ -1,6 +1,9 @@ "404": action: Return to safe place message: This page does not exist or no longer exists +"<0> Pour en savoir plus, rendez-vous sur le site <3>aquoiserventlescotisations": + urssaf: + fr: <0> To find out more, go to <3>aquoiserventlescotisations.urssaf.fr "<0>Covid-19 et chômage partiel : <3>Calculez votre indemnité": "<0>Covid-19 and Short-Time Work: <3>Calculate Your Benefit" <0>Oui: <0>Yes A quoi servent mes cotisations ?: What's included in my contributions?