add deposit proof

openapi.json

@@ -850,7 +850,24 @@
         ],
         "responses": {
           "200": {
-            "description": "OK"
+            "description": "OK",
+            "content": {
+              "application/pdf": {
+                "schema": {
+                  "type": "string",
+                  "format": "binary"
+                }
+              }
+            },
+            "headers": {
+              "Content-Disposition": {
+                "description": "The filename of the returned PDF",
+                "schema": {
+                  "type": "string",
+                  "example": "attachment; filename=\"deposit_proof.pdf\""
+                }
+              }
+            }
           }
         }
       }

orval.config.ts

@@ -13,6 +13,14 @@ export default defineConfig({
           path: './src/api/axiosInstance.ts',
           name: 'stromaeInstance',
         },
+        operations: {
+          generateDepositProof: {
+            mutator: {
+              path: './src/api/axiosInstance.ts',
+              name: 'depositProofInstance',
+            },
+          },
+        },
       },
     },
     hooks: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stromae-dsfr",
   "private": true,
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
     "prepare": "vite-envs update-types",

src/api/06-survey-units.ts

@@ -30,6 +30,7 @@ import type {
   UpdateDataBody,
 } from '../model/api'
 import { stromaeInstance } from './axiosInstance'
+import { depositProofInstance } from './axiosInstance'
 
 type SecondParameter<T extends (...args: any) => any> = Parameters<T>[1]
 
@@ -1443,11 +1444,16 @@ export const useGetInterviewerSurveyUnits = <
  */
 export const generateDepositProof = (
   id: string,
-  options?: SecondParameter<typeof stromaeInstance>,
+  options?: SecondParameter<typeof depositProofInstance>,
   signal?: AbortSignal
 ) => {
-  return stromaeInstance<void>(
-    { url: `/api/survey-unit/${id}/deposit-proof`, method: 'GET', signal },
+  return depositProofInstance<Blob>(
+    {
+      url: `/api/survey-unit/${id}/deposit-proof`,
+      method: 'GET',
+      responseType: 'blob',
+      signal,
+    },
     options
   )
 }
@@ -1469,7 +1475,7 @@ export const getGenerateDepositProofQueryOptions = <
         TData
       >
     >
-    request?: SecondParameter<typeof stromaeInstance>
+    request?: SecondParameter<typeof depositProofInstance>
   }
 ) => {
   const { query: queryOptions, request: requestOptions } = options ?? {}
@@ -1513,7 +1519,7 @@ export const useGenerateDepositProof = <
         TData
       >
     >
-    request?: SecondParameter<typeof stromaeInstance>
+    request?: SecondParameter<typeof depositProofInstance>
   }
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } => {
   const queryOptions = getGenerateDepositProofQueryOptions(id, options)

src/api/axiosInstance.ts

@@ -20,8 +20,6 @@ const onRequest = async (config: any) => ({
     'Content-Type': 'application/json;charset=utf-8',
     Accept: 'application/json;charset=utf-8',
     ...(await (async () => {
-      // TODO : Remove this when oidc is in place
-      return undefined
       const accessToken = await getAccessToken()
 
       if (!accessToken) {
@@ -41,9 +39,20 @@ axiosInstance.interceptors.request.use(onRequest)
 export const stromaeInstance = <T>(
   config: AxiosRequestConfig,
   options?: AxiosRequestConfig
-): Promise<T> => {
-  return axiosInstance({
+) => {
+  return axiosInstance<T>({
     ...config,
     ...options,
   }).then(({ data }) => data)
 }
+
+//DepositProofInstance
+export const depositProofInstance = <T>(
+  config: AxiosRequestConfig,
+  options?: AxiosRequestConfig
+) => {
+  return axiosInstance<T>({
+    ...config,
+    ...options,
+  })
+}

src/components/Orchestrator/CustomPages/ValidationModal.tsx

@@ -7,8 +7,7 @@ export type Props = {
     open?: () => Promise<void>
   }>
 }
-export function ValidationModal({actionsRef}: Props) {
-
+export function ValidationModal({ actionsRef }: Props) {
   const id = useId()
 
   const [modal] = useState(() =>

src/components/Orchestrator/CustomPages/WelcomeModal.tsx

@@ -21,14 +21,14 @@ export function WelcomeModal(props: { goBack: () => void }) {
         },
         {
           doClosesModal: true,
-          children: "Reprendre la où j'en étais",
+          children: "Reprendre là 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 ?
+      reprendre là où vous en étiez ou revenir à la première page ?
     </modal.Component>
   )
 }

src/components/Orchestrator/Navigation.tsx

@@ -12,6 +12,7 @@ export function Navigation(
     handlePreviousClick: () => void
     handleNextClick: () => void
     handleDownloadData: () => void
+    handleDepositProofClick: () => Promise<void>
     mode: OrchestratorProps['mode']
   }>
 ) {
@@ -20,6 +21,7 @@ export function Navigation(
     handleNextClick,
     handlePreviousClick,
     handleDownloadData,
+    handleDepositProofClick,
     mode,
     children,
   } = props
@@ -63,7 +65,11 @@ export function Navigation(
           priority="primary"
           title={"Passer à l'étape suivante"}
           id="continue-button"
-          onClick={handleNextClick}
+          onClick={
+            currentPage === 'endPage'
+              ? handleDepositProofClick
+              : handleNextClick
+          }
         >
           {nextLabel}
         </Button>

src/components/Orchestrator/Orchestrator.tsx

@@ -11,7 +11,7 @@ import { downloadAsJson } from 'utils/downloadAsJson'
 import { useNavigate } from '@tanstack/react-router'
 import { Welcome } from './CustomPages/Welcome'
 import { Navigation } from './Navigation'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Validation } from './CustomPages/Validation'
 import { useStromaeNavigation } from './useStromaeNavigation'
 import { EndPage } from './CustomPages/EndPage'
@@ -46,14 +46,13 @@ export namespace OrchestratorProps {
       onSuccess?: () => void
     }) => void
     updateStateData: (params: { stateData: StateData }) => void
+    getDepositProof: () => Promise<void>
   }
 }
 
 export function Orchestrator(props: OrchestratorProps) {
   const { source, surveyUnitData, getReferentiel, mode } = props
 
-  const navigate = useNavigate()
-
   const initialCurrentPage = surveyUnitData?.stateData?.currentPage
 
   const {
@@ -120,6 +119,7 @@ export function Orchestrator(props: OrchestratorProps) {
     goToLunaticPage,
     initialCurrentPage,
     openValidationModal: () => validationModalActionsRef.current.open(),
+    mode,
   })
 
   const getCurrentStateData = (): StateData => {
@@ -128,9 +128,6 @@ export function Orchestrator(props: OrchestratorProps) {
         return { date: Date.now(), currentPage, state: 'VALIDATED' }
       case 'lunaticPage':
         return { date: Date.now(), currentPage: pageTag, state: 'INIT' }
-      case 'downloadPage':
-        //downloadPage is not really a page, this is only use internally to manage state
-        return { date: Date.now(), currentPage: 'endPage', state: 'VALIDATED' }
       case 'validationPage':
       case 'welcomePage':
       default:
@@ -150,15 +147,6 @@ export function Orchestrator(props: OrchestratorProps) {
     })
   })
 
-  const isDownloadPage = currentPage === 'downloadPage'
-
-  // When reaching the download page, start downloading the page
-  useEffect(() => {
-    if (!isDownloadPage || mode !== 'visualize') return
-    downloadAsJsonRef.current()
-    navigate({ to: '/visualize' })
-  }, [isDownloadPage, downloadAsJsonRef, navigate, mode])
-
   // Persist data when page change in "collect" mode
   useUpdateEffect(() => {
     if (mode !== 'collect') return
@@ -173,6 +161,20 @@ export function Orchestrator(props: OrchestratorProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentPage, pageTag])
 
+  const navigate = useNavigate()
+
+  const handleDepositProofClick = async () => {
+    switch (mode) {
+      case 'visualize': {
+        downloadAsJsonRef.current()
+        navigate({ to: '/visualize' })
+        break
+      }
+      case 'collect': {
+        return props.getDepositProof()
+      }
+    }
+  }
   return (
     <div className={fr.cx('fr-container--fluid', 'fr-mt-1w', 'fr-mb-7w')}>
       <Provider>
@@ -183,6 +185,7 @@ export function Orchestrator(props: OrchestratorProps) {
             handleDownloadData={downloadAsJsonRef.current}
             currentPage={currentPage}
             mode={mode}
+            handleDepositProofClick={handleDepositProofClick}
           >
             <div className={fr.cx('fr-mb-4v')}>
               {currentPage === 'welcomePage' && (

src/components/Orchestrator/useStromaeNavigation.tsx

@@ -15,6 +15,7 @@ type Params = {
   goPrevLunatic: LunaticGoPreviousPage
   openValidationModal: () => Promise<void>
   goToLunaticPage: LunaticGoToPage
+  mode: 'visualize' | 'collect'
 }
 
 export function useStromaeNavigation({
@@ -27,9 +28,7 @@ export function useStromaeNavigation({
   openValidationModal,
 }: Params) {
   const [currentPage, setCurrentPage] = useState<InternalPageType>(() =>
-    ['endPage', 'downloadPage'].includes(initialCurrentPage) //downloadPage should not be saved into state but to be sure i handle case
-      ? 'endPage'
-      : 'welcomePage'
+    initialCurrentPage === 'endPage' ? 'endPage' : 'welcomePage'
   )
 
   const goNext = () => {
@@ -44,8 +43,6 @@ export function useStromaeNavigation({
       case 'lunaticPage':
         return isLastPage ? setCurrentPage('validationPage') : goNextLunatic()
       case 'endPage':
-        return setCurrentPage('downloadPage')
-      case 'downloadPage':
         return
     }
     assert<Equals<typeof currentPage, never>>(false)
@@ -56,7 +53,6 @@ export function useStromaeNavigation({
         return setCurrentPage('lunaticPage')
       case 'lunaticPage':
         return isFirstPage ? setCurrentPage('welcomePage') : goPrevLunatic()
-      case 'downloadPage':
       case 'endPage':
       case 'welcomePage':
         return
@@ -73,7 +69,6 @@ export function useStromaeNavigation({
   ) => {
     switch (params.page) {
       case 'validationPage':
-      case 'downloadPage':
       case 'endPage':
       case 'welcomePage':
         setCurrentPage(params.page)

src/model/Page.ts

@@ -1,10 +1,6 @@
 import type { useLunatic } from '@inseefr/lunatic'
 
-export type StromaePage =
-  | 'welcomePage'
-  | 'validationPage'
-  | 'endPage'
-  | 'downloadPage'
+export type StromaePage = 'welcomePage' | 'validationPage' | 'endPage'
 
 export type PageType = StromaePage | ReturnType<typeof useLunatic>['pageTag']
 

src/pages/Collect/CollectPage.tsx

@@ -6,7 +6,11 @@ import type {
   LunaticGetReferentiel,
   Nomenclature,
 } from 'components/Orchestrator/utils/lunaticType'
-import { useSetStateData, useUpdateCollectedData } from 'api/06-survey-units'
+import {
+  getGenerateDepositProofQueryOptions,
+  useSetStateData,
+  useUpdateCollectedData,
+} from 'api/06-survey-units'
 import type { LunaticData } from '@inseefr/lunatic'
 import type { StateData } from 'model/StateData'
 import { useDocumentTitle } from 'hooks/useDocumentTitle'
@@ -45,6 +49,28 @@ export function CollectPage() {
   const updateStateData = (params: { stateData: StateData }) =>
     mutationUpdateStateData.mutate({ id: surveyUnitId, data: params.stateData })
 
+  const getDepositProof = () =>
+    queryClient
+      .ensureQueryData(getGenerateDepositProofQueryOptions(surveyUnitId))
+      .then((response) => {
+        const fileName =
+          (response.headers['content-disposition'].match(
+            /filename="(.+?)"/
+          )[1] as string) ?? 'document.pdf' //content-disposition is present in OpenAPI spec but not well inferred by type
+
+        const url = URL.createObjectURL(response.data)
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', fileName)
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+      })
+      .catch((error) => {
+        console.error('Error downloading PDF:', error)
+      })
+
   return (
     <Orchestrator
       mode="collect"
@@ -53,6 +79,7 @@ export function CollectPage() {
       getReferentiel={getReferentiel}
       updateCollectedData={updateCollectedData}
       updateStateData={updateStateData}
+      getDepositProof={getDepositProof}
     />
   )
 }

src/pages/Collect/route.tsx

@@ -18,8 +18,6 @@ export const collectRoute = createRoute({
     params: { questionnaireId, surveyUnitId },
     context: { queryClient },
   }) => {
-
-
     const sourcePr = queryClient
       .ensureQueryData(getGetQuestionnaireDataQueryOptions(questionnaireId))
       .then((e) => e.value as unknown as LunaticSource) // We'd like to use zod, but the files are heavy.

src/parser/page.ts

@@ -6,7 +6,6 @@ export const stromaePageSchema = z.enum([
   'welcomePage',
   'validationPage',
   'endPage',
-  'downloadPage',
 ])
 
 assert<Equals<z.infer<typeof stromaePageSchema>, StromaePage>>()