diff --git a/site/source/pages/Simulateurs/ComparateurStatuts/components/AllerPlusLoinRevenus.tsx b/site/source/pages/Simulateurs/ComparateurStatuts/components/AllerPlusLoinRevenus.tsx index ee2feac3b..c9c5dd01b 100644 --- a/site/source/pages/Simulateurs/ComparateurStatuts/components/AllerPlusLoinRevenus.tsx +++ b/site/source/pages/Simulateurs/ComparateurStatuts/components/AllerPlusLoinRevenus.tsx @@ -93,7 +93,9 @@ const AllerPlusLoinRevenus = ({ answerQuestion(DOTTEDNAME_ACRE, acreValuePassed ? 'oui' : 'non') ) - if (AEAcreValue !== null) { + if (!acreValuePassed) { + setIsAutoEntrepreneurACREEnabled(false) + } else if (AEAcreValue !== null) { setIsAutoEntrepreneurACREEnabled(AEAcreValue) } }} diff --git a/site/source/pages/Simulateurs/ComparateurStatuts/components/DetailsRowCards.tsx b/site/source/pages/Simulateurs/ComparateurStatuts/components/DetailsRowCards.tsx index 64ce1aa29..1f4df3d81 100644 --- a/site/source/pages/Simulateurs/ComparateurStatuts/components/DetailsRowCards.tsx +++ b/site/source/pages/Simulateurs/ComparateurStatuts/components/DetailsRowCards.tsx @@ -1,4 +1,4 @@ -import Engine, { formatValue } from 'publicodes' +import Engine from 'publicodes' import { ReactNode } from 'react' import styled from 'styled-components' @@ -11,9 +11,16 @@ import RuleLink from '@/components/RuleLink' import { HelpIcon } from '@/design-system/icons' import { Grid } from '@/design-system/layout' -import { BestOption, getBestOption } from '../utils' +import { OptionType, getBestOption } from '../utils' import StatusCard from './StatusCard' +const getStatusLabelsArray = (statusArray: OptionType[]) => + statusArray.map((statusOption) => statusOption.type) + +const getGridSizes = (statusArray: OptionType[]) => { + return { sizeXs: 12, sizeLg: 4 * statusArray.length } +} + const DetailsRowCards = ({ engines: [assimiléEngine, autoEntrepreneurEngine, indépendantEngine], dottedName, @@ -40,469 +47,136 @@ const DetailsRowCards = ({ valeur: dottedName, ...(unit && { unité: unit }), }) - const assimiléValue = formatValue(assimiléEvaluation, { - precision: 0, - }) as string const indépendantEvaluation = indépendantEngine.evaluate({ valeur: dottedName, ...(unit && { unité: unit }), }) - const indépendantValue = formatValue(indépendantEvaluation, { - precision: 0, - }) as string + const autoEntrepreneurEvaluation = autoEntrepreneurEngine.evaluate({ valeur: dottedName, ...(unit && { unité: unit }), }) - const autoEntrepreneurValue = formatValue(autoEntrepreneurEvaluation, { - precision: 0, - }) as string - - const options: BestOption[] = [ + const options: OptionType[] = [ { type: 'sasu', - value: assimiléEvaluation.nodeValue, + value: Math.round(assimiléEvaluation.nodeValue as number), + engine: assimiléEngine, + documentationPath: '/simulateurs/comparaison-régimes-sociaux/SASU', }, { type: 'ei', - value: indépendantEvaluation.nodeValue, + value: Math.round(indépendantEvaluation.nodeValue as number), + engine: indépendantEngine, + documentationPath: '/simulateurs/comparaison-régimes-sociaux/EI', }, { type: 'ae', - value: autoEntrepreneurEvaluation.nodeValue, + value: Math.round(autoEntrepreneurEvaluation.nodeValue as number), + engine: autoEntrepreneurEngine, + documentationPath: + '/simulateurs/comparaison-régimes-sociaux/auto-entrepreneur', }, ] const bestOptionValue = bestOption ?? getBestOption(options) - if ( - assimiléValue === indépendantValue && - indépendantValue === autoEntrepreneurValue - ) { - return ( - - - - - Ne s'applique pas - - - - - - {label && ' '} - {label && label} - - - - - {warnings?.sasu && warnings?.sasu} - - {evolutionDottedName && ( - - {' '} - {evolutionLabel} - - )} - {!evolutionDottedName && evolutionLabel && ( - {evolutionLabel} - )} - - - - - ) - } + const sortedStatus = [...options] + .reduce((acc: OptionType[][], option: OptionType) => { + const newAcc = [...acc] + const sameValues = options.filter( + (optionFiltered) => optionFiltered.value === option.value + ) + // Avoid duplicates + if ( + !newAcc.find((arrayOfStatus) => + arrayOfStatus.some( + (statusObject: OptionType) => statusObject.value === option.value + ) + ) + ) { + return [...newAcc, sameValues] + } - if (assimiléValue === indépendantValue) { - return ( - - - - - Ne s'applique pas - - - - - {label && ' '} - {label && label} - - - - - {warnings?.sasu || warnings?.ei - ? warnings?.sasu - ? warnings?.sasu - : warnings?.ei - : ''} - {evolutionDottedName && ( - - {' '} - {evolutionLabel} - - )} - {!evolutionDottedName && evolutionLabel && ( - {evolutionLabel} - )} - - - - - - - Ne s'applique pas - - - - - {label && ' '} - {label && label} - - - - - {warnings?.ae && warnings?.ae} - {evolutionDottedName && ( - - {' '} - {evolutionLabel} - - )} - {!evolutionDottedName && evolutionLabel && ( - {evolutionLabel} - )} - - - - - ) - } - - if (indépendantValue === autoEntrepreneurValue) { - return ( - - - - - Ne s'applique pas - - - - - {label && ' '} - {label && label} - - - - - {warnings?.sasu && warnings?.sasu} - {evolutionDottedName && ( - - {' '} - {evolutionLabel} - - )} - {!evolutionDottedName && evolutionLabel && ( - {evolutionLabel} - )} - - - - - - - Ne s'applique pas - - - - - {label && ' '} - {label && label} - - - - - {warnings?.ei || warnings?.ae - ? warnings?.ei - ? warnings?.ei - : warnings?.ae - : ''} - {evolutionDottedName && ( - - {' '} - {evolutionLabel} - - )} - {!evolutionDottedName && evolutionLabel && ( - {evolutionLabel} - )} - - - - - ) - } + return newAcc + }, [] as OptionType[][]) + .filter((arrayOfStatus: OptionType[]) => arrayOfStatus.length > 0) return ( - - - - Ne s'applique pas - - - - - {label && ' '} - {label && label} - - - - - {warnings?.sasu && warnings?.sasu} - {evolutionDottedName && ( - - {' '} - {evolutionLabel} - - )} - {!evolutionDottedName && evolutionLabel && ( - {evolutionLabel} - )} - - - - - - - Ne s'applique pas - - - - - {label && ' '} - {label && label} - - - - - {warnings?.ei && warnings?.ei} - {evolutionDottedName && ( - - {' '} - {evolutionLabel} - - )} - {!evolutionDottedName && evolutionLabel && ( - {evolutionLabel} - )} - - - - - - { + const statusObject: OptionType = statusArray[0] + + const { sizeXs, sizeLg } = getGridSizes(statusArray) + + return ( + - Ne s'applique pas - - - - - {label && ' '} - {label && label} - - - - - {warnings?.ae && warnings?.ae} - {evolutionDottedName && ( - - {' '} - {evolutionLabel} - - )} - {!evolutionDottedName && evolutionLabel && ( - {evolutionLabel} - )} - - - + + Ne s'applique pas + + + + + + {label && ' '} + {label && label} + + + + + {warnings?.[statusObject.type] && + warnings?.[statusObject.type]} + + {evolutionDottedName && ( + + {' '} + {evolutionLabel} + + )} + {!evolutionDottedName && evolutionLabel && ( + {evolutionLabel} + )} + + + + ) + })} ) } diff --git a/site/source/pages/Simulateurs/ComparateurStatuts/components/RevenuAprèsImpot.tsx b/site/source/pages/Simulateurs/ComparateurStatuts/components/RevenuAprèsImpot.tsx index a8ebe2a93..60149a42e 100644 --- a/site/source/pages/Simulateurs/ComparateurStatuts/components/RevenuAprèsImpot.tsx +++ b/site/source/pages/Simulateurs/ComparateurStatuts/components/RevenuAprèsImpot.tsx @@ -12,7 +12,7 @@ import { H2 } from '@/design-system/typography/heading' import { StyledLink } from '@/design-system/typography/link' import { Body } from '@/design-system/typography/paragraphs' -import { BestOption, getBestOption } from '../utils' +import { OptionType, getBestOption } from '../utils' import AllerPlusLoinRevenus from './AllerPlusLoinRevenus' import StatusCard from './StatusCard' import WarningTooltip from './WarningTooltip' @@ -40,7 +40,7 @@ const RevenuAprèsImpot = ({ unité: '€/mois', }).nodeValue - const options: BestOption[] = [ + const options: OptionType[] = [ { type: 'sasu', value: assimiléValue, diff --git a/site/source/pages/Simulateurs/ComparateurStatuts/utils.ts b/site/source/pages/Simulateurs/ComparateurStatuts/utils.ts index dd425b0aa..5d9cc520c 100644 --- a/site/source/pages/Simulateurs/ComparateurStatuts/utils.ts +++ b/site/source/pages/Simulateurs/ComparateurStatuts/utils.ts @@ -1,16 +1,22 @@ +import Engine from 'publicodes' + +import { DottedName } from '@/../../modele-social' + export type ValueType = | string | number | boolean | null | Record -export type BestOption = { +export type OptionType = { type: 'sasu' | 'ei' | 'ae' value?: ValueType + engine?: Engine + documentationPath?: string } -export const getBestOption = (options: BestOption[]) => { - const sortedOptions = options.sort( - (option1: BestOption, option2: BestOption) => { +export const getBestOption = (options: OptionType[]) => { + const sortedOptions = [...options].sort( + (option1: OptionType, option2: OptionType) => { if (option1.value === null || option1.value === undefined) { return 1 } @@ -19,7 +25,6 @@ export const getBestOption = (options: BestOption[]) => { } if (option1.value === option2.value) return 0 - // console.log(option1.value, option2.value, option1.value > option2.value) return option1.value > option2.value ? -1 : 1 }