Améliorations sur le comparateur de statut

fix #2792'

site/source/locales/ui-en.yaml

@@ -160,6 +160,7 @@ La pension calculée correspond à celle de <2>vos 25 meilleures années</2>, en
 Le montant de votre retraite est constitué de <2>votre retraite de base + votre retraite complémentaire</2>.:
   The amount of your pension is made up of <2>your basic pension + your
   supplementary pension</2>.
+Le montant demandé n'est <2>pas calculable...</2>: The amount requested <2>cannot be calculated.</2>..
 Les données de simulations se mettront automatiquement à jour après la modification d'un champ. <2>Un panneau s'ouvrira pour vous permettre d'apporter des précisions à la simulation, des résultats détaillés s'afficheront en dessous du formulaire et seront mis à jour quand vous modifierez ce dernier.</2>:
   Simulation data is automatically updated when you modify a field. <2>A panel
   will open to allow you to add details to the simulation, and detailed results

site/source/locales/ui-fr.yaml

@@ -166,6 +166,7 @@ La pension calculée correspond à celle de <2>vos 25 meilleures années</2>, en
 Le montant de votre retraite est constitué de <2>votre retraite de base + votre retraite complémentaire</2>.:
   Le montant de votre retraite est constitué de <2>votre retraite de base +
   votre retraite complémentaire</2>.
+Le montant demandé n'est <2>pas calculable...</2>: Le montant demandé n'est <2>pas calculable...</2>
 Les données de simulations se mettront automatiquement à jour après la modification d'un champ. <2>Un panneau s'ouvrira pour vous permettre d'apporter des précisions à la simulation, des résultats détaillés s'afficheront en dessous du formulaire et seront mis à jour quand vous modifierez ce dernier.</2>:
   Les données de simulations se mettront automatiquement à jour après la
   modification d'un champ. <2>Un panneau s'ouvrira pour vous permettre

site/source/pages/simulateurs/comparaison-statuts/components/DetailsRowCards.tsx

@@ -1,12 +1,14 @@
 import { DottedName } from 'modele-social'
 import Engine, { PublicodesExpression } from 'publicodes'
 import { ReactNode } from 'react'
+import { Trans } from 'react-i18next'
 import { styled } from 'styled-components'
 
 import Value, { Condition, WhenNotApplicable } from '@/components/EngineValue'
 import RuleLink from '@/components/RuleLink'
 import { HelpIcon } from '@/design-system/icons'
 import { Grid } from '@/design-system/layout'
+import { Strong } from '@/design-system/typography'
 import { Body } from '@/design-system/typography/paragraphs'
 
 import { getBestOption, OptionType } from '../utils'
@@ -121,50 +123,64 @@ const DetailsRowCards = ({
 									</WhenNotApplicable>
 								)}
 								{expressionOrDottedName && (
-									<Condition
-										expression={expressionOrDottedName}
-										engine={statusObject.engine}
-									>
-										<StyledDiv>
-											<span>
-												<Value
-													linkToRule={false}
-													expression={expressionOrDottedName}
-													engine={statusObject.engine}
-													precision={0}
-													unit={unit}
-													displayedUnit={displayedUnit}
-												/>
-												{label && ' '}
-												{label && label}
-											</span>
-											{dottedName && (
-												<StyledRuleLink
-													documentationPath={`${statusObject.name}`}
-													dottedName={dottedName}
-													engine={statusObject.engine}
-												>
-													<HelpIcon />
-												</StyledRuleLink>
+									<>
+										<Condition
+											expression={{ 'est défini': expressionOrDottedName }}
+											engine={statusObject.engine}
+										>
+											<StyledDiv>
+												<span>
+													<Value
+														linkToRule={false}
+														expression={expressionOrDottedName}
+														engine={statusObject.engine}
+														precision={0}
+														unit={unit}
+														displayedUnit={displayedUnit}
+													/>
+													{label && ' '}
+													{label && label}
+												</span>
+												{dottedName && (
+													<StyledRuleLink
+														documentationPath={`${statusObject.name}`}
+														dottedName={dottedName}
+														engine={statusObject.engine}
+													>
+														<HelpIcon />
+													</StyledRuleLink>
+												)}
+												{warning?.(statusObject.engine)}
+											</StyledDiv>
+											{evolutionDottedName && (
+												<Precisions>
+													<Value
+														linkToRule={false}
+														expression={evolutionDottedName}
+														engine={statusObject.engine}
+														precision={0}
+														unit={unit}
+													/>{' '}
+													{evolutionLabel}
+												</Precisions>
 											)}
-											{warning?.(statusObject.engine)}
-										</StyledDiv>
-										{evolutionDottedName && (
-											<Precisions>
-												<Value
-													linkToRule={false}
-													expression={evolutionDottedName}
-													engine={statusObject.engine}
-													precision={0}
-													unit={unit}
-												/>{' '}
-												{evolutionLabel}
-											</Precisions>
-										)}
-										{!evolutionDottedName && evolutionLabel && (
-											<Precisions>{evolutionLabel}</Precisions>
-										)}
-									</Condition>
+											{!evolutionDottedName && evolutionLabel && (
+												<Precisions>{evolutionLabel}</Precisions>
+											)}
+										</Condition>
+
+										<Condition
+											expression={{ 'est non défini': expressionOrDottedName }}
+											engine={statusObject.engine}
+										>
+											<StyledSmall>
+												<Trans>
+													Le montant demandé n'est{' '}
+													<Strong>pas calculable...</Strong>
+												</Trans>
+											</StyledSmall>
+										</Condition>
+									</>
 								)}
 							</StyledBody>
 						</StatusCard>
@@ -174,7 +190,11 @@ const DetailsRowCards = ({
 		</Grid>
 	)
 }
-
+const StyledSmall = styled.small`
+	color: ${({ theme }) => theme.colors.extended.grey[600]};
+	font-weight: normal;
+	font-size: 80%;
+`
 const StyledRuleLink = styled(RuleLink)`
 	display: inline-flex;
 	margin-left: ${({ theme }) => theme.spacings.xxs};

site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx

@@ -62,6 +62,7 @@ const Détails = ({
 
 						<HelpButtonWithPopover
 							type="info"
+							bigPopover
 							title={t('Calculer vos revenus')}
 						>
 							<RevenuTable namedEngines={namedEngines} />
@@ -72,39 +73,51 @@ const Détails = ({
 						namedEngines={namedEngines}
 						unit="€/mois"
 						footer={(engine) => (
-							<Ul>
-								<Li>
-									<Trans i18nKey="">
-										Soit{' '}
-										<Strong>
-											<Value
-												engine={engine}
-												expression="dirigeant . rémunération . net"
-												displayedUnit="€"
-												unit="€/mois"
-												precision={0}
-												linkToRule={false}
-											/>
-										</Strong>{' '}
-										avant impôts
-									</Trans>
-								</Li>{' '}
-								<Li>
-									<Trans i18nKey="">
-										Avec{' '}
-										<Strong>
-											<Value
-												engine={engine}
-												expression=" dirigeant . rémunération . cotisations / dirigeant . rémunération . totale"
-												unit="%"
-												precision={0}
-												linkToRule={false}
-											/>
-										</Strong>{' '}
-										de cotisations sociales
-									</Trans>
-								</Li>
-							</Ul>
+							<Condition
+								expression={{
+									'est défini': 'dirigeant . rémunération . net . après impôt',
+								}}
+								engine={engine}
+							>
+								<Ul>
+									<Li>
+										<Trans i18nKey="">
+											Soit{' '}
+											<Strong>
+												<Value
+													engine={engine}
+													expression="dirigeant . rémunération . net"
+													displayedUnit="€"
+													unit="€/mois"
+													precision={0}
+													linkToRule={false}
+												/>
+											</Strong>{' '}
+											avant impôts
+										</Trans>
+									</Li>{' '}
+									<Condition
+										engine={engine}
+										expression="dirigeant . rémunération . totale > 0"
+									>
+										<Li>
+											<Trans i18nKey="">
+												Avec{' '}
+												<Strong>
+													<Value
+														engine={engine}
+														expression="dirigeant . rémunération . cotisations / dirigeant . rémunération . totale"
+														unit="%"
+														precision={0}
+														linkToRule={false}
+													/>
+												</Strong>{' '}
+												de cotisations sociales
+											</Trans>
+										</Li>
+									</Condition>
+								</Ul>
+							</Condition>
 						)}
 						warning={(engine) => (
 							<Condition

site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx

@@ -82,7 +82,7 @@ export default function RevenuTable({
 							</th>
 							{namedEngines.map(({ name, engine }) => (
 								<td key={name}>
-									<StyledStatutTag statut={name} showIcon={false}>
+									<StyledTag color="grey">
 										<Value
 											expression="dirigeant . rémunération . cotisations"
 											engine={engine}
@@ -91,7 +91,7 @@ export default function RevenuTable({
 											displayedUnit="€"
 											linkToRule={false}
 										/>
-									</StyledStatutTag>
+									</StyledTag>
 								</td>
 							))}
 						</tr>
@@ -111,7 +111,7 @@ export default function RevenuTable({
 							</th>
 							{namedEngines.map(({ name, engine }) => (
 								<td key={name}>
-									<StyledStatutTag statut={name} showIcon={false}>
+									<StyledTag color="grey">
 										<Strong>
 											<Value
 												expression="dirigeant . rémunération . net"
@@ -122,7 +122,7 @@ export default function RevenuTable({
 												linkToRule={false}
 											/>
 										</Strong>
-									</StyledStatutTag>
+									</StyledTag>
 								</td>
 							))}
 						</tr>
@@ -157,7 +157,7 @@ export default function RevenuTable({
 							{namedEngines.map(({ name, engine }) => (
 								<td key={name}>
 									{/* // TODO : color */}
-									<StyledStatutTag statut={name} showIcon={false}>
+									<StyledTag color="grey">
 										<Value
 											expression="dirigeant . rémunération . impôt"
 											engine={engine}
@@ -166,7 +166,7 @@ export default function RevenuTable({
 											displayedUnit="€"
 											linkToRule={false}
 										/>
-									</StyledStatutTag>
+									</StyledTag>
 								</td>
 							))}
 						</tr>
@@ -186,18 +186,16 @@ export default function RevenuTable({
 							</th>
 							{namedEngines.map(({ name, engine }) => (
 								<td key={name}>
-									<StyledStatutTag statut={name} showIcon={false}>
-										<Strong>
-											<Value
-												expression="dirigeant . rémunération . net . après impôt"
-												engine={engine}
-												unit="€/an"
-												precision={0}
-												displayedUnit="€"
-												linkToRule={false}
-											/>
-										</Strong>
-									</StyledStatutTag>
+									<StyledTag color="grey">
+										<Value
+											expression="dirigeant . rémunération . net . après impôt"
+											engine={engine}
+											unit="€/an"
+											precision={0}
+											displayedUnit="€"
+											linkToRule={false}
+										/>
+									</StyledTag>
 								</td>
 							))}
 						</tr>