From f2fca74851845fc9fa079dea9ec28b82e4a0968b Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Mon, 19 Jun 2023 11:56:38 +0200 Subject: [PATCH] Branche la question sur l'association --- .../_components/Navigation.tsx | 95 ++++++------------- .../_components/StatutsDisponibles.tsx | 2 +- .../_components/useNextStep.ts | 40 ++++++++ .../choix-du-statut/association.tsx | 73 ++++++++++++-- .../pages/assistants/choix-du-statut/home.tsx | 11 +-- 5 files changed, 140 insertions(+), 81 deletions(-) create mode 100644 site/source/pages/assistants/choix-du-statut/_components/useNextStep.ts diff --git a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx index f6099406e..26512e856 100644 --- a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx +++ b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx @@ -1,72 +1,31 @@ import { Trans, useTranslation } from 'react-i18next' -import { useMatch } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import styled from 'styled-components' import { Button } from '@/design-system/buttons' import { Grid, Spacing } from '@/design-system/layout' -import { RelativeSitePaths, useSitePaths } from '@/sitePaths' +import { useSitePaths } from '@/sitePaths' -type ChoixStatut = RelativeSitePaths['assistants']['choix-du-statut'] -type Step = keyof ChoixStatut - -export const stepOrder: readonly Step[] = [ - 'recherche-activité', - 'détails-activité', - 'commune', - 'association', - 'associé', - 'rémunération', - 'statuts', - 'résultat', -] as const - -function useCurrentStep() { - const { relativeSitePaths, absoluteSitePaths } = useSitePaths() - const localizedStep = useMatch( - `${absoluteSitePaths.assistants['choix-du-statut'].index}/:step` - )?.params.step - if (!localizedStep) { - return null - } - - const entries = Object.entries( - relativeSitePaths.assistants['choix-du-statut'] - ) as [Step, ChoixStatut[Step]][] - - const [currentStep] = - entries.find(([, value]) => value === localizedStep) ?? [] - - if (!currentStep || !stepOrder.includes(currentStep)) { - return null - } - - return currentStep -} +import { useNextStep } from './useNextStep' export default function Navigation({ currentStepIsComplete, nextStepLabel, onNextStep, onPreviousStep, + assistantIsCompleted = false, }: { currentStepIsComplete: boolean nextStepLabel?: false | string onNextStep?: () => void onPreviousStep?: () => void + assistantIsCompleted?: boolean }) { const { t } = useTranslation() - const { absoluteSitePaths } = useSitePaths() - - const currentStep = useCurrentStep() - if (!currentStep) { - return null - } - - type PartialStep = Step | undefined - const nextStep = stepOrder[stepOrder.indexOf(currentStep) + 1] as PartialStep - const previousStep = stepOrder[ - stepOrder.indexOf(currentStep) - 1 - ] as PartialStep + const nextStep = useNextStep() + const navigate = useNavigate() + const resultatPath = + useSitePaths().absoluteSitePaths.assistants['choix-du-statut'].résultat return ( <> @@ -77,30 +36,19 @@ export default function Navigation({ - {nextStep && ( + {nextStep && !assistantIsCompleted && ( )} + {assistantIsCompleted && ( + + + + )} diff --git a/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx b/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx index 4e74d6597..a8a94ce0b 100644 --- a/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx +++ b/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx @@ -82,7 +82,7 @@ const StyledMessage = styled(Message)` function Statut({ statut }: { statut: DottedName }) { const engine = useEngine() const disabled = - engine.evaluate({ 'est non applicable': statut }).nodeValue === true + engine.evaluate({ '=': [statut, 'non'] }).nodeValue === true const acronyme = (engine.getRule(statut).rawNode.acronyme ?? engine.getRule(statut).title.toLocaleLowerCase()) as Statut diff --git a/site/source/pages/assistants/choix-du-statut/_components/useNextStep.ts b/site/source/pages/assistants/choix-du-statut/_components/useNextStep.ts new file mode 100644 index 000000000..e50695288 --- /dev/null +++ b/site/source/pages/assistants/choix-du-statut/_components/useNextStep.ts @@ -0,0 +1,40 @@ +import { useMatch } from 'react-router-dom' + +import { RelativeSitePaths, useSitePaths } from '@/sitePaths' + +type ChoixStatut = RelativeSitePaths['assistants']['choix-du-statut'] +type Step = keyof ChoixStatut + +const stepOrder: readonly Step[] = [ + 'recherche-activité', + 'détails-activité', + 'commune', + 'association', + 'associé', + 'rémunération', + 'statuts', + 'résultat', +] as const + +export function useNextStep() { + const { relativeSitePaths, absoluteSitePaths } = useSitePaths() + const localizedStep = useMatch( + `${absoluteSitePaths.assistants['choix-du-statut'].index}/:step` + )?.params.step + if (!localizedStep) { + return absoluteSitePaths.assistants['choix-du-statut'][stepOrder[0]] + } + + const entries = Object.entries( + relativeSitePaths.assistants['choix-du-statut'] + ) as [Step, ChoixStatut[Step]][] + + const [currentStep] = + entries.find(([, value]) => value === localizedStep) ?? [] + + const nextStep = + stepOrder[currentStep ? stepOrder.indexOf(currentStep) + 1 : 0] + console.log('huihuihi', nextStep) + + return absoluteSitePaths.assistants['choix-du-statut'][nextStep] +} diff --git a/site/source/pages/assistants/choix-du-statut/association.tsx b/site/source/pages/assistants/choix-du-statut/association.tsx index faf6ff5c8..0fb324253 100644 --- a/site/source/pages/assistants/choix-du-statut/association.tsx +++ b/site/source/pages/assistants/choix-du-statut/association.tsx @@ -1,15 +1,22 @@ +import { Evaluation } from 'publicodes' +import { useState } from 'react' import { Trans, useTranslation } from 'react-i18next' +import { useDispatch } from 'react-redux' +import { useEngine } from '@/components/utils/EngineContext' import { RadioCard, RadioCardGroup } from '@/design-system' import { HelpButtonWithPopover } from '@/design-system/buttons' import { Strong } from '@/design-system/typography' import { Body } from '@/design-system/typography/paragraphs' +import { batchUpdateSituation } from '@/store/actions/actions' import Layout from './_components/Layout' import Navigation from './_components/Navigation' export default function Association() { const { t } = useTranslation() + const [currentSelection, setCurrentSelection, reset] = + useAssociationSelection() return ( <> @@ -42,8 +49,8 @@ export default function Association() { 'choix-statut.association.question', 'Pourquoi créez vous cette entreprise ?' )} - // onChange={handleChange} - // value={currentSelection ?? undefined} + onChange={setCurrentSelection} + value={currentSelection} > gagner de l'argent } - // emoji={node.rawNode.icônes} - // description={node.rawNode.description} > @@ -64,15 +69,71 @@ export default function Association() { Dans un but non lucratif } - // emoji={node.rawNode.icônes} description={t( 'choix-statut.association.question.non-lucratif.description', 'Par exemple, en créant une association' )} /> - + ) } + +type RadioOption = 'gagner-argent' | 'non-lucratif' | undefined +function useAssociationSelection(): [ + RadioOption, + (value: RadioOption) => void, + () => void +] { + const isAssociation = useEngine().evaluate( + 'entreprise . catégorie juridique . association' + ).nodeValue as Evaluation + + const [currentSelection, setCurrentSelection] = useState( + isAssociation === true + ? 'non-lucratif' + : isAssociation === false + ? 'gagner-argent' + : undefined + ) + + const dispatch = useDispatch() + + const handleChange = (value: RadioOption) => { + setCurrentSelection(value) + + if (value === 'gagner-argent') { + dispatch( + batchUpdateSituation({ + 'entreprise . catégorie juridique . association': 'non', + 'entreprise . catégorie juridique': undefined, + }) + ) + } else if (value === 'non-lucratif') { + dispatch( + batchUpdateSituation({ + 'entreprise . catégorie juridique . association': undefined, + 'entreprise . catégorie juridique': "'association'", + }) + ) + } + } + + const reset = () => { + setCurrentSelection(undefined) + dispatch( + batchUpdateSituation({ + 'entreprise . catégorie juridique . association': undefined, + 'entreprise . catégorie juridique': undefined, + }) + ) + } + + return [currentSelection, handleChange, reset] +} diff --git a/site/source/pages/assistants/choix-du-statut/home.tsx b/site/source/pages/assistants/choix-du-statut/home.tsx index e90b407c7..bc90dbc5b 100644 --- a/site/source/pages/assistants/choix-du-statut/home.tsx +++ b/site/source/pages/assistants/choix-du-statut/home.tsx @@ -12,15 +12,15 @@ import { H3 } from '@/design-system/typography/heading' import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs' import useSimulatorsData from '@/hooks/useSimulatorsData' import { SimulateurCard } from '@/pages/simulateurs-et-assistants' -import { useSitePaths } from '@/sitePaths' -import { stepOrder } from './_components/Navigation' +import { useNextStep } from './_components/useNextStep' import créerSvg from './_illustrations/créer.svg' export default function AccueilChoixStatut() { const { t } = useTranslation() - const { relativeSitePaths } = useSitePaths() + const simulateurData = useSimulatorsData() + const nextStep = useNextStep() return ( <> @@ -58,10 +58,7 @@ export default function AccueilChoixStatut() { -