Skip to content

Commit

Permalink
modal Welcome Page
Browse files Browse the repository at this point in the history
  • Loading branch information
ddecrulle committed Feb 9, 2024
1 parent 4f481e4 commit 7148505
Show file tree
Hide file tree
Showing 8 changed files with 136 additions and 83 deletions.
3 changes: 2 additions & 1 deletion src/components/Orchestrator/CustomPages/EndPage.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
export function EndPage(props: { date: number }) {
const { date } = props
const formatedData = new Date(date).toLocaleString()
return (
<>
<h1>L’Insee vous remercie pour votre collaboration à cette enquête.</h1>
<p>Vos réponses ont été envoyées le {date} </p>
<p>Vos réponses ont été envoyées le {formatedData}.</p>
<p>
Si vous avez indiqué une adresse électronique, un accusé de réception
vous sera envoyé automatiquement.{' '}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Orchestrator/CustomPages/Validation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export function Validation() {
<h1>Vous êtes arrivé à la fin du questionnaire</h1>
<p>
Après envoi, vous ne pourrez plus modifier vos réponses et vous pourrez
télécharger un accusé de réception
télécharger un accusé de réception.
</p>
</>
)
Expand Down
20 changes: 6 additions & 14 deletions src/components/Orchestrator/CustomPages/ValidationModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import { assert } from 'tsafe/assert'

export type Props = {
actions: {
open?: () => Promise<{
doProceed: boolean
}>
open?: () => Promise<void>
}
}
export function ValidationModal(props: Props) {
Expand All @@ -23,17 +21,15 @@ export function ValidationModal(props: Props) {

const [openState, setOpenState] = useState<
| {
resolve: (params: { doProceed: boolean }) => void
}
resolve: () => void
}
| undefined
>(undefined)

useEffect(() => {
actions.open = () =>
new Promise<{ doProceed: boolean }>((resolve) => {
setOpenState({
resolve,
})
new Promise<void>((resolve) => {
setOpenState({ resolve })
modal.open()
})
}, [])
Expand All @@ -51,11 +47,7 @@ export function ValidationModal(props: Props) {
children: 'Envoyer mes réponses',
onClick: () => {
assert(openState !== undefined)

openState.resolve({
doProceed: true,
})

openState.resolve()
setOpenState(undefined)
},
},
Expand Down
84 changes: 44 additions & 40 deletions src/components/Orchestrator/CustomPages/Welcome.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,53 @@
import { fr } from '@codegouvfr/react-dsfr'
import Accordion from '@codegouvfr/react-dsfr/Accordion'
import { WelcomeModal } from './WelcomeModal'
import type { useStromaeNavigation } from '../useStromaeNavigation'

//export function Welcome(props: { metadata: unknown, personalization: unknown }) {
export function Welcome() {
//const { metadata, personalization } = props
export function Welcome(props: { initialCurrentPage: string | undefined, goToPage: ReturnType<typeof useStromaeNavigation>["goToPage"] }) {
const { initialCurrentPage, goToPage } = props

return (
<div className={fr.cx('fr-mb-1w')}>
<h1>
Bienvenue sur le questionnaire de réponse à l'Enquête statistique sur
les technologies de l’information et de la communication 2021.
</h1>
<p className={fr.cx('fr-text--lead')}>
Cette enquête permet de connaître l'équipement et les usages des
personnes dans le domaine des technologies de l'information et de la
communication (téléphone fixe et mobile, informatique, internet sur
support fixe et mobile).
</p>
<h2>Qui doit répondre à ce questionnaire ?</h2>
<ul>
<li>Jonh Doe</li>
<li>Julia Doe</li>
<li>Juliette Doe</li>
</ul>
<>
<div className={fr.cx('fr-mb-1w')}>
<h1>
Bienvenue sur le questionnaire de réponse à l'Enquête statistique sur
les technologies de l’information et de la communication 2021.
</h1>
<p className={fr.cx('fr-text--lead')}>
Cette enquête permet de connaître l'équipement et les usages des
personnes dans le domaine des technologies de l'information et de la
communication (téléphone fixe et mobile, informatique, internet sur
support fixe et mobile).
</p>
<h2>Qui doit répondre à ce questionnaire ?</h2>
<ul>
<li>Jonh Doe</li>
<li>Julia Doe</li>
<li>Juliette Doe</li>
</ul>

<h3>En savoir plus sur l'enquête TIC</h3>
<div className={fr.cx('fr-accordions-group')}>
<Accordion label="Connaître le cadre légal de l'enquête">
Vu l'avis favorable du Conseil national de l'information statistique,
cette enquête, reconnue d’intérêt général et de qualité statistique,
est obligatoire, en application de la loi n° 51-711 du 7 juin 1951 sur
l'obligation, la coordination et le secret en matière de statistiques.
Visa n°2021A054EC du Ministre de l'Économie, des Finances et de la
Relance, valable pour l'année 2021 - Arrêté en date du 23/11/2020. Les
réponses à ce questionnaire sont protégées par le secret statistique
et destinées à L’Institut national de la statistique et des études
économiques (Insee). Le règlement général 2016/679 du 27 avril 2016
sur la protection des données (RGPD) ainsi que la loi n° 78-17 du 6
janvier 1978 relative à l'informatique, aux fichiers et aux libertés,
s'appliquent à la présente enquête. Ils garantissent aux personnes
concernées un droit d'accès, de limitation ou de rectification pour
les données les concernant. Ce droit peut être exercé auprès de
l'Insee.
</Accordion>
<h3>En savoir plus sur l'enquête TIC</h3>
<div className={fr.cx('fr-accordions-group')}>
<Accordion label="Connaître le cadre légal de l'enquête">
Vu l'avis favorable du Conseil national de l'information statistique,
cette enquête, reconnue d’intérêt général et de qualité statistique,
est obligatoire, en application de la loi n° 51-711 du 7 juin 1951 sur
l'obligation, la coordination et le secret en matière de statistiques.
Visa n°2021A054EC du Ministre de l'Économie, des Finances et de la
Relance, valable pour l'année 2021 - Arrêté en date du 23/11/2020. Les
réponses à ce questionnaire sont protégées par le secret statistique
et destinées à L’Institut national de la statistique et des études
économiques (Insee). Le règlement général 2016/679 du 27 avril 2016
sur la protection des données (RGPD) ainsi que la loi n° 78-17 du 6
janvier 1978 relative à l'informatique, aux fichiers et aux libertés,
s'appliquent à la présente enquête. Ils garantissent aux personnes
concernées un droit d'accès, de limitation ou de rectification pour
les données les concernant. Ce droit peut être exercé auprès de
l'Insee.
</Accordion>
</div>
</div>
</div>
{initialCurrentPage && <WelcomeModal goBack={() => goToPage({ page: initialCurrentPage })} />}
</>
)
}
31 changes: 31 additions & 0 deletions src/components/Orchestrator/CustomPages/WelcomeModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { createModal } from '@codegouvfr/react-dsfr/Modal'
import { useId, useState } from 'react'

export function WelcomeModal(props: { goBack: () => void }) {
const { goBack } = props
const id = useId()

const [modal] = useState(() =>
createModal({
id: `welcomeModal-${id}`,
isOpenedByDefault: true,
})
)
return <modal.Component
title="Bienvenue "
buttons={[
{
doClosesModal: true, //Default true, clicking a button close the modal.
children: 'Revenir à la première page',
},
{
doClosesModal: true,
children: "Reprendre la où j'en étais",
onClick: goBack,
},
]}
concealingBackdrop={true}
>
Vous avez déjà commencé à renseigner le questionnaire. Souhaitez-vous reprendre la vous en étiez ou revenir à la première page ?
</modal.Component >
}
11 changes: 6 additions & 5 deletions src/components/Orchestrator/Orchestrator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,23 +36,24 @@ export function Orchestrator(props: {
isFirstPage,
isLastPage,
pageTag,
goToPage: goToLunaticPage
} = useLunatic(source, surveyUnitData?.data, {
// @ts-expect-error need some work on lunatic-dsfr to remove this
custom,
activeControls: true,
getReferentiel,
initialPage: initialCurrentPage,
})

const [validationModalActions] = useState<{
open?: () => Promise<{ doProceed: boolean }>
open?: () => Promise<void>
}>({})

const { currentPage, goNext, goPrevious } = useStromaeNavigation({
const { currentPage, goNext, goToPage, goPrevious } = useStromaeNavigation({
goNextLunatic,
goPrevLunatic,
isFirstPage,
isLastPage,
goToLunaticPage,
initialCurrentPage,
openValidationModal: () => {
assert(validationModalActions.open !== undefined)
Expand Down Expand Up @@ -86,7 +87,7 @@ export function Orchestrator(props: {
})
}

const isDownloadPage = currentPage === 'downloadPage'
const isDownloadPage = currentPage === 'downloadPage';

useEffect(() => {
if (!isDownloadPage) return
Expand All @@ -105,7 +106,7 @@ export function Orchestrator(props: {
handleDownloadData={handleDownloadData}
currentPage={currentPage}
>
{currentPage === 'welcomePage' && <Welcome />}
{currentPage === 'welcomePage' && <Welcome initialCurrentPage={initialCurrentPage} goToPage={goToPage} />}
{currentPage === 'lunaticPage' && (
<LunaticComponents
components={getComponents()}
Expand Down
66 changes: 45 additions & 21 deletions src/components/Orchestrator/useStromaeNavigation.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { useState } from 'react'
import type { PageType } from './type'
import { assert, type Equals } from 'tsafe/assert'
import type { useLunatic } from '@inseefr/lunatic'

type LunaticGoToPage = ReturnType<typeof useLunatic>["goToPage"]
type Params = {
isFirstPage: boolean
isLastPage: boolean
initialCurrentPage: string | undefined
goNextLunatic: () => void
goPrevLunatic: () => void
openValidationModal: () => Promise<{ doProceed: boolean }>
openValidationModal: () => Promise<void>
goToLunaticPage: LunaticGoToPage
}

export function useStromaeNavigation({
Expand All @@ -17,34 +20,32 @@ export function useStromaeNavigation({
goNextLunatic,
goPrevLunatic,
initialCurrentPage,
goToLunaticPage,
openValidationModal,
}: Params) {
const getInitialCurrentPage = () => {
switch (initialCurrentPage) {
case undefined:
return 'welcomePage'
case 'welcomePage':
case 'validationPage':
case 'endPage':
return initialCurrentPage
default:
//string value (pageTag in fact)
return 'lunaticPage'
}
}

// const getInitialCurrentPage = () => {
// switch (initialCurrentPage) {
// case undefined:
// return 'welcomePage'
// case 'welcomePage':
// case 'validationPage':
// case 'endPage':
// return initialCurrentPage
// default:
// //string value (pageTag in fact)
// return 'lunaticPage'
// }
// }

const [currentPage, setCurrentPage] = useState<PageType>(
getInitialCurrentPage //Avoiding recreating the initialState https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state
)
initialCurrentPage === "endPage" ? "endPage" : 'welcomePage')

const goNext = () => {
switch (currentPage) {
case 'validationPage':
//return setCurrentPage('validationModal')
openValidationModal().then(({ doProceed }) => {
if (!doProceed) {
return
}
openValidationModal().then(() => {
setCurrentPage('endPage')
})
return
Expand Down Expand Up @@ -73,5 +74,28 @@ export function useStromaeNavigation({
assert<Equals<typeof currentPage, never>>(false)
}

return { goNext, goPrevious, currentPage: currentPage }
const goToPage = (params: {
page: 'welcomePage'
| 'validationPage'
| 'endPage'
| 'downloadPage'
} | Parameters<LunaticGoToPage>[0]) => {
switch (params.page) {
case "validationPage":
case "downloadPage":
case 'endPage':
case 'welcomePage':
setCurrentPage(params.page)
return;
case 'lunaticPage':
//This should not happened
setCurrentPage("lunaticPage")
return;
default:
// Lunatic page
setCurrentPage("lunaticPage")
goToLunaticPage(params)
}
}
return { goNext, goPrevious, goToPage, currentPage: currentPage }
}
2 changes: 1 addition & 1 deletion src/pages/SiteMap/SiteMapPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function SiteMapPage() {
<Link to="/">Accueil</Link>
</li>
<li>
<Link to="">Mentions légales</Link>
<Link to="/mentions-legales">Mentions légales</Link>
</li>
<li>
<Link to="/accessibilite">Accessibilité</Link>
Expand Down

0 comments on commit 7148505

Please sign in to comment.