Ajoute un lien vers le site aquoiserventlescotisations.urssaf.fr

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() {
 					/>
 				</section>
 			</Condition>
-			<section>
-				<h2>
-					<Trans>À quoi servent mes cotisations ?</Trans>
-				</h2>
+			<DistributionSection>
 				<Distribution />
-			</section>
+			</DistributionSection>
 		</>
 	)
 }
@@ -227,16 +225,18 @@ function Distribution() {
 	const maximum = distribution.map(([, value]) => value).reduce(max, 0)
 
 	return (
-		<div className="distribution-chart__container">
-			{distribution.map(([sectionName, value]) => (
-				<DistributionBranch
-					key={sectionName}
-					dottedName={sectionName}
-					value={value}
-					maximum={maximum}
-				/>
-			))}
-		</div>
+		<>
+			<div className="distribution-chart__container">
+				{distribution.map(([sectionName, value]) => (
+					<DistributionBranch
+						key={sectionName}
+						dottedName={sectionName}
+						value={value}
+						maximum={maximum}
+					/>
+				))}
+			</div>
+		</>
 	)
 }
 

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
+}) => (
 	<section>
 		<h2>
 			<Trans>À quoi servent mes cotisations ?</Trans>
 		</h2>
-		<Distribution />
+		{children || <Distribution />}
+		<p className="ui__ notice">
+			<Trans>
+				<Emoji emoji="ℹ" /> Pour en savoir plus, rendez-vous sur le site{' '}
+				<a href="https://www.aquoiserventlescotisations.urssaf.fr/">
+					aquoiserventlescotisations.urssaf.fr
+				</a>
+			</Trans>
+		</p>
 	</section>
 )

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></0> Pour en savoir plus, rendez-vous sur le site <3>aquoiserventlescotisations":
+  urssaf:
+    fr</3>: <0></0> To find out more, go to <3>aquoiserventlescotisations.urssaf.fr</3>
 "<0>Covid-19 et chômage partiel </0>: <3>Calculez votre indemnité</3>": "<0>Covid-19 and Short-Time </0>Work: <3>Calculate Your Benefit</3>"
 <0>Oui</0>: <0>Yes</0>
 A quoi servent mes cotisations ?: What's included in my contributions?