From 7148505be48306e4be1706d0d8a5ca82bf86f742 Mon Sep 17 00:00:00 2001
From: Dylan Decrulle <81740200+ddecrulle@users.noreply.github.com>
Date: Fri, 9 Feb 2024 14:56:06 +0100
Subject: [PATCH] modal Welcome Page

---
 .../Orchestrator/CustomPages/EndPage.tsx      |  3 +-
 .../Orchestrator/CustomPages/Validation.tsx   |  2 +-
 .../CustomPages/ValidationModal.tsx           | 20 ++---
 .../Orchestrator/CustomPages/Welcome.tsx      | 84 ++++++++++---------
 .../Orchestrator/CustomPages/WelcomeModal.tsx | 31 +++++++
 src/components/Orchestrator/Orchestrator.tsx  | 11 +--
 .../Orchestrator/useStromaeNavigation.tsx     | 66 ++++++++++-----
 src/pages/SiteMap/SiteMapPage.tsx             |  2 +-
 8 files changed, 136 insertions(+), 83 deletions(-)
 create mode 100644 src/components/Orchestrator/CustomPages/WelcomeModal.tsx

diff --git a/src/components/Orchestrator/CustomPages/EndPage.tsx b/src/components/Orchestrator/CustomPages/EndPage.tsx
index 0cb87052..f13c0da1 100644
--- a/src/components/Orchestrator/CustomPages/EndPage.tsx
+++ b/src/components/Orchestrator/CustomPages/EndPage.tsx
@@ -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.{' '}
diff --git a/src/components/Orchestrator/CustomPages/Validation.tsx b/src/components/Orchestrator/CustomPages/Validation.tsx
index 25db7534..54677b81 100644
--- a/src/components/Orchestrator/CustomPages/Validation.tsx
+++ b/src/components/Orchestrator/CustomPages/Validation.tsx
@@ -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>
     </>
   )
diff --git a/src/components/Orchestrator/CustomPages/ValidationModal.tsx b/src/components/Orchestrator/CustomPages/ValidationModal.tsx
index 3c04aa75..3fb17620 100644
--- a/src/components/Orchestrator/CustomPages/ValidationModal.tsx
+++ b/src/components/Orchestrator/CustomPages/ValidationModal.tsx
@@ -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) {
@@ -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()
       })
   }, [])
@@ -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)
           },
         },
diff --git a/src/components/Orchestrator/CustomPages/Welcome.tsx b/src/components/Orchestrator/CustomPages/Welcome.tsx
index c5a86a91..865257af 100644
--- a/src/components/Orchestrator/CustomPages/Welcome.tsx
+++ b/src/components/Orchestrator/CustomPages/Welcome.tsx
@@ -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 })} />}
+    </>
   )
 }
diff --git a/src/components/Orchestrator/CustomPages/WelcomeModal.tsx b/src/components/Orchestrator/CustomPages/WelcomeModal.tsx
new file mode 100644
index 00000000..8fc753ea
--- /dev/null
+++ b/src/components/Orchestrator/CustomPages/WelcomeModal.tsx
@@ -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 >
+}
\ No newline at end of file
diff --git a/src/components/Orchestrator/Orchestrator.tsx b/src/components/Orchestrator/Orchestrator.tsx
index 7c77f7d2..f58d6245 100644
--- a/src/components/Orchestrator/Orchestrator.tsx
+++ b/src/components/Orchestrator/Orchestrator.tsx
@@ -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)
@@ -86,7 +87,7 @@ export function Orchestrator(props: {
     })
   }
 
-  const isDownloadPage = currentPage === 'downloadPage'
+  const isDownloadPage = currentPage === 'downloadPage';
 
   useEffect(() => {
     if (!isDownloadPage) return
@@ -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()}
diff --git a/src/components/Orchestrator/useStromaeNavigation.tsx b/src/components/Orchestrator/useStromaeNavigation.tsx
index e21162d0..ec3592c4 100644
--- a/src/components/Orchestrator/useStromaeNavigation.tsx
+++ b/src/components/Orchestrator/useStromaeNavigation.tsx
@@ -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({
@@ -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
@@ -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 }
 }
diff --git a/src/pages/SiteMap/SiteMapPage.tsx b/src/pages/SiteMap/SiteMapPage.tsx
index 2f600e07..6e7889ee 100644
--- a/src/pages/SiteMap/SiteMapPage.tsx
+++ b/src/pages/SiteMap/SiteMapPage.tsx
@@ -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>