add review and first step for metadata

src/pages/Collect/CollectPage.tsx

@@ -19,9 +19,11 @@ export function CollectPage() {
   const loaderResults = collectRoute.useLoaderData()
 
   //TODO -> use Metadata
-  useDocumentTitle("Questionnaire | Filière d'Enquête")
 
-  const { source, surveyUnitData } = loaderResults
+  const { source, surveyUnitData, metadata } = loaderResults
+
+  useDocumentTitle(metadata.label ?? "Questionnaire | Filière d'Enquête")
+  console.log(metadata)
 
   const getReferentiel: LunaticGetReferentiel = (name: string) =>
     queryClient
@@ -87,6 +89,7 @@ export function CollectPage() {
 
   return (
     <Orchestrator
+      metadata={metadata}
       mode="collect"
       source={source}
       surveyUnitData={surveyUnitData}

src/pages/Review/ReviewPage.tsx

@@ -1,16 +1,27 @@
-import { declareComponentKeys } from 'i18n'
+import { useQueryClient } from '@tanstack/react-query'
+import { getGetNomenclatureByIdQueryOptions } from 'api/04-nomenclatures'
+import { Orchestrator } from 'shared/components/Orchestrator/Orchestrator'
+import type { LunaticGetReferentiel } from 'shared/components/Orchestrator/utils/lunaticType'
 import { reviewRoute } from './route'
 
 export function ReviewPage() {
-  const params = reviewRoute.useParams()
+  const queryClient = useQueryClient()
 
   const loaderResults = reviewRoute.useLoaderData()
 
-  console.log({ params, loaderResults })
+  const { source, surveyUnitData } = loaderResults
 
-  return <>Review Page</>
-}
-
-const { i18n } = declareComponentKeys()({ ReviewPage })
+  const getReferentiel: LunaticGetReferentiel = (name: string) =>
+    queryClient
+      .ensureQueryData(getGetNomenclatureByIdQueryOptions(name))
+      .then((result) => result)
 
-export type I18n = typeof i18n
+  return (
+    <Orchestrator
+      mode="review"
+      source={source}
+      surveyUnitData={surveyUnitData}
+      getReferentiel={getReferentiel}
+    />
+  )
+}

src/router/router.tsx

@@ -31,7 +31,7 @@ function RootComponent() {
     >
       <Header />
       <main id="main" role="main">
-        <Toaster  />
+        <Toaster />
         <Outlet />
       </main>
       <Footer />

src/shared/components/Orchestrator/CustomPages/WelcomePage.tsx

@@ -1,17 +1,19 @@
 import { fr } from '@codegouvfr/react-dsfr'
 import { declareComponentKeys, useTranslation } from 'i18n'
 import type { PageType } from 'model/Page'
+import type { SurveyUnitMetadata } from 'model/api'
 import { useEffect } from 'react'
 import type { useStromaeNavigation } from '../useStromaeNavigation'
 import { WelcomeModal } from './WelcomeModal'
 
 export function WelcomePage(props: {
   initialCurrentPage: PageType | undefined
   goToPage: ReturnType<typeof useStromaeNavigation>['goToPage']
+  metadata?: SurveyUnitMetadata
 }) {
-  const { initialCurrentPage, goToPage } = props
-
   const { t } = useTranslation({ WelcomePage })
+  const { initialCurrentPage, goToPage, metadata } = props
+
   useEffect(() => {
     // Reset the scroll on component unmount
     return () => {
@@ -23,14 +25,20 @@ export function WelcomePage(props: {
     <>
       <div className={fr.cx('fr-my-4w')}>
         <h1>{t('title')}</h1>
-        <p className={fr.cx('fr-text--lead')}>{t('paragraph')}</p>
-        {/* Not internationalized yet because must cames from metadata from backend */}
-        <h2>Qui doit répondre à ce questionnaire ?</h2>
-        <ul>
-          <li>Alice Doe</li>
-          <li>Bernard Doe</li>
-          <li>Charlotte Doe</li>
-        </ul>
+        <p className={fr.cx('fr-text--lead')}>
+          {metadata?.objectives ?? t('paragraph')}
+        </p>
+        {/* TODO Improve metadata type */}
+        {metadata?.context === 'household' ? (
+          <>
+            <h2>{t('title who answer')}</h2>
+            <ul>
+              <li>Alice Doe</li>
+              <li>Bernard Doe</li>
+              <li>Charlotte Doe</li>
+            </ul>
+          </>
+        ) : null}
       </div>
       {initialCurrentPage && (
         <WelcomeModal goBack={() => goToPage({ page: initialCurrentPage })} />
@@ -39,6 +47,8 @@ export function WelcomePage(props: {
   )
 }
 
-const { i18n } = declareComponentKeys<'title' | 'paragraph'>()({ WelcomePage })
+const { i18n } = declareComponentKeys<
+  'title' | 'paragraph' | 'title who answer'
+>()({ WelcomePage })
 
 export type I18n = typeof i18n

src/shared/components/Orchestrator/Orchestrator.tsx

@@ -9,6 +9,7 @@ import {
 import { useNavigate } from '@tanstack/react-router'
 import type { StateData } from 'model/StateData'
 import type { SurveyUnitData } from 'model/SurveyUnitData'
+import type { SurveyUnitMetadata } from 'model/api'
 import { useEffect, useRef, useState } from 'react'
 import { useAddPreLogoutAction } from 'shared/hooks/prelogout'
 import { downloadAsJson } from 'utils/downloadAsJson'
@@ -40,19 +41,28 @@ declare module '@inseefr/lunatic' {
 }
 
 export type OrchestratorProps = OrchestratorProps.Common &
-  (OrchestratorProps.Visualize | OrchestratorProps.Collect)
+  (
+    | OrchestratorProps.Visualize
+    | OrchestratorProps.Collect
+    | OrchestratorProps.Review
+  )
 
 export namespace OrchestratorProps {
   export type Common = {
     source: LunaticSource
     surveyUnitData?: SurveyUnitData
     getReferentiel: LunaticGetReferentiel
+    metadata?: SurveyUnitMetadata
   }
 
   export type Visualize = {
     mode: 'visualize'
   }
 
+  export type Review = {
+    mode: 'review'
+  }
+
   export type Collect = {
     mode: 'collect'
     updateDataAndStateData: (params: {
@@ -65,7 +75,7 @@ export namespace OrchestratorProps {
 }
 
 export function Orchestrator(props: OrchestratorProps) {
-  const { source, surveyUnitData, getReferentiel, mode } = props
+  const { source, surveyUnitData, getReferentiel, mode, metadata } = props
 
   const initialCurrentPage = surveyUnitData?.stateData?.currentPage
 
@@ -142,7 +152,6 @@ export function Orchestrator(props: OrchestratorProps) {
     goToLunaticPage,
     initialCurrentPage,
     openValidationModal: () => validationModalActionsRef.current.open(),
-    mode,
   })
 
   const getCurrentStateData = (): StateData => {
@@ -209,6 +218,9 @@ export function Orchestrator(props: OrchestratorProps) {
       case 'collect': {
         return props.getDepositProof()
       }
+      case 'review':
+      default:
+        break
     }
   }
 
@@ -271,6 +283,7 @@ export function Orchestrator(props: OrchestratorProps) {
                 <WelcomePage
                   initialCurrentPage={initialCurrentPage}
                   goToPage={goToPage}
+                  metadata={metadata}
                 />
               )}
               {currentPage === 'lunaticPage' && (

src/shared/components/Orchestrator/SurveyContainer.tsx

@@ -107,14 +107,16 @@ export function SurveyContainer(
               {t('button continue label', { currentPage })}
             </Button>
             {bottomContent}
-            {mode === 'visualize' && (
+            {['visualize', 'review'].includes(mode) && (
               <div style={{ justifyContent: 'flex-end', textAlign: 'right' }}>
                 <Button
                   iconId="ri-download-2-line"
                   priority="tertiary no outline"
                   onClick={handleDownloadData}
                   title={t('button download')}
-                />
+                >
+                  {t('button download')}
+                </Button>
               </div>
             )}
           </div>

src/shared/components/Orchestrator/useStromaeNavigation.tsx

@@ -15,7 +15,6 @@ type Params = {
   goPrevLunatic: LunaticGoPreviousPage
   openValidationModal: () => Promise<void>
   goToLunaticPage: LunaticGoToPage
-  mode: 'visualize' | 'collect'
 }
 
 export function useStromaeNavigation({