feat: add documents section

InseeFr · Oct 31, 2024 · 2e7a6f2 · 2e7a6f2
1 parent d80ce80
commit 2e7a6f2
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 9 deletions.
diff --git a/public/documents/chi/courrier/courrier.png b/public/documents/chi/courrier/courrier.png
diff --git a/src/components/surveyHomepage/DocumentTile.tsx b/src/components/surveyHomepage/DocumentTile.tsx
@@ -50,20 +50,22 @@ export const DocumentTile = ({ title, description, url, pictogramUrl }: Props) =
     const link = document.createElement("a");
     link.setAttribute("data-fr-assess-file", "bytes");
     link.href = url;
-    link.download = `ressources.${file.extension}`;
+    link.download = getFileName(url, file.extension);
     link.click();
   };
 
+  if (!file.isDownloadable) {
+    return <></>;
+  }
+
   return (
     <div className="container">
       <Tile
-        disabled={!file.isDownloadable}
         desc={description}
         className="fr-mb-3w"
         detail={
           <p style={{ "color": fr.colors.decisions.text.mention.grey.default }} className="fr-text--xs">
-            {file.isDownloadable &&
-              `${file.extension && `${file.extension.toLocaleUpperCase()} - `} ${file.size && (file.size / 1024).toFixed(0)} Ko`}
+            {`${file.extension && `${file.extension.toLocaleUpperCase()} - `} ${file.size && (file.size / 1024).toFixed(0)} Ko`}
           </p>
         }
         imageSvg
@@ -79,3 +81,20 @@ export const DocumentTile = ({ title, description, url, pictogramUrl }: Props) =
     </div>
   );
 };
+
+const getFileName = (url: string, extension?: string) => {
+  if (url.includes("courrier")) {
+    return `courrier.${extension}`;
+  }
+  if (url.includes("mail")) {
+    return `mail.${extension}`;
+  }
+  if (url.includes("questionnaire")) {
+    return `questionnaire.${extension}`;
+  }
+  if (url.includes("notice")) {
+    return `notice.${extension}`;
+  }
+
+  return `ressource.${extension}`;
+};
diff --git a/src/components/surveyHomepage/SurveyHomepage.tsx b/src/components/surveyHomepage/SurveyHomepage.tsx
@@ -149,6 +149,7 @@ const SideMenuCustom = ({
       linkProps: {
         to: "/$survey/introduction",
         params: { survey: surveyId },
+        resetScroll: false,
       },
       text: t("survey introduction"),
     },
@@ -158,6 +159,7 @@ const SideMenuCustom = ({
         params: {
           survey: surveyId,
         },
+        resetScroll: false,
       },
       text: t("legal framework"),
     },
@@ -167,6 +169,7 @@ const SideMenuCustom = ({
         params: {
           survey: surveyId,
         },
+        resetScroll: false,
       },
       text: t("what are your answers for?"),
     },
@@ -176,6 +179,7 @@ const SideMenuCustom = ({
         params: {
           survey: surveyId,
         },
+        resetScroll: false,
       },
       text: t("documents to the surveyed"),
     },
@@ -185,6 +189,7 @@ const SideMenuCustom = ({
         params: {
           survey: surveyId,
         },
+        resetScroll: false,
       },
       text: t("some results"),
     },
@@ -194,6 +199,7 @@ const SideMenuCustom = ({
         params: {
           survey: surveyId,
         },
+        resetScroll: false,
       },
       text: supportTranslation("FAQ"),
     },
@@ -219,6 +225,7 @@ const SideMenuCustom = ({
                     params: {
                       survey: surveyId,
                     },
+                    resetScroll: false,
                   },
                   text: supportTranslation("contact support"),
                 },

diff --git a/src/routes/$survey/documents.tsx b/src/routes/$survey/documents.tsx
@@ -11,32 +11,57 @@ function DocumentsIndex() {
   const { survey } = Route.useParams();
   const { t: homeTranslation } = useTranslation("SurveyHomepage");
   const { t } = useTranslation("Documents");
+
   return (
     <section className={fr.cx("fr-col-12", "fr-col-md-6", "fr-pr-md-4w")}>
       <h3>{homeTranslation("documents to the surveyed")}</h3>
       <div>
         <DocumentTile
           title={t("downloadEMail")}
           description={t("downloadEMailDescription")}
-          url={`/img/${survey}/mail/img-01.png`}
+          url={`/documents/${survey}/mail/mail.pdf`}
+          pictogramUrl={"/static/img/mail-send.svg"}
+        />
+        <DocumentTile
+          title={t("downloadEMail")}
+          description={t("downloadEMailDescription")}
+          url={`/documents/${survey}/mail/mail.png`}
           pictogramUrl={"/static/img/mail-send.svg"}
         />
         <DocumentTile
           title={t("downloadInstructions")}
           description={t("downloadInstructionsDescription")}
-          url={`/img/${survey}/notice/img-01.png`}
+          url={`/documents/${survey}/notice/notice.pdf`}
+          pictogramUrl={"/static/img/document-download.svg"}
+        />
+        <DocumentTile
+          title={t("downloadInstructions")}
+          description={t("downloadInstructionsDescription")}
+          url={`/documents/${survey}/notice/notice.png`}
           pictogramUrl={"/static/img/document-download.svg"}
         />
         <DocumentTile
           title={t("downloadQuestioning")}
           description={t("downloadQuestioningDescription")}
-          url={`/img/${survey}/questionnaire/img-01.png`}
+          url={`/documents/${survey}/questionnaire/questionnaire.pdf`}
           pictogramUrl={"/static/img/document-signature.svg"}
         />
+        <DocumentTile
+          title={t("downloadQuestioning")}
+          description={t("downloadQuestioningDescription")}
+          url={`/documents/${survey}/questionnaire/questionnaire.png`}
+          pictogramUrl={"/static/img/document-signature.svg"}
+        />
+        <DocumentTile
+          title={t("downloadMail")}
+          description={t("downloadMailDescription")}
+          url={`/documents/${survey}/courrier/courrier.pdf`}
+          pictogramUrl={"/static/img/document.svg"}
+        />
         <DocumentTile
           title={t("downloadMail")}
           description={t("downloadMailDescription")}
-          url={`/img/${survey}/courrier/img-01.png`}
+          url={`/documents/${survey}/courrier/courrier.png`}
           pictogramUrl={"/static/img/document.svg"}
         />
       </div>

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -1,4 +1,4 @@
-import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
+import { createRootRouteWithContext, Outlet, ScrollRestoration } from "@tanstack/react-router";
 import { Footer } from "components/Footer";
 import { Header } from "components/Header";
 import { QueryClient } from "@tanstack/react-query";
@@ -35,6 +35,7 @@ function RootComponent() {
       />
       <Header />
       <main>
+        <ScrollRestoration />
         <Outlet />
       </main>
       <AutoLogoutCountdown />