feat: add legal informations page

src/components/Footer.tsx

@@ -32,9 +32,8 @@ export function Footer({ className }: { className?: string }) {
           imgUrl: logoInsee,
           orientation: "vertical",
         }}
-        // TODO change link
         termsLinkProps={{
-          href: "/",
+          to: "/mentions-legales",
         }}
         domains={["insee.fr", "legifrance.gouv.fr", "service-public.fr", "cnil.fr"]}
         // TODO: change links

src/components/LegalInformation.tsx

@@ -0,0 +1,66 @@
+import { declareComponentKeys } from "i18nifty/declareComponentKeys";
+import { useTranslation } from "i18n";
+import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb";
+
+export function LegalInformation() {
+  const { t } = useTranslation("LegalInformation");
+
+  return (
+    <section id="content" className="fr-container">
+      <Breadcrumb
+        currentPageLabel={t("pageTitle")}
+        className="fr-mb-1w"
+        homeLinkProps={{
+          to: "/",
+        }}
+        segments={[]}
+      />
+      <h2>{t("pageTitle")}</h2>
+      <TitleWithText title={t("servicePresentationTitle")} text={t("servicePresentationText")} />
+      <TitleWithText title={t("legalFrameworkTitle")} text={t("legalFrameworkText")} />
+      <TitleWithText title={t("cookiesTitle")} text={t("cookiesText")} />
+      <TitleWithText title={t("copyrightTitle")} text={t("copyrightText")} />
+
+      <div aria-label={t("publisherInformationTitle")}>
+        <h3 className="fr-mb-2w">{t("publisherInformationTitle")}</h3>
+        <p className="fr-mb-1w">{t("address")}</p>
+        <p className="fr-mb-1w">{t("streetInformation")}</p>
+        <p className="fr-mb-1w">{t("cityInformation")}</p>
+        <p className="fr-mb-1w">{`${t("phone")} 01 87 69 50 00`}</p>
+      </div>
+    </section>
+  );
+}
+
+type Props = {
+  title: string;
+  text: string;
+};
+
+export const TitleWithText = ({ title, text }: Props) => {
+  return (
+    <div aria-label={title}>
+      <h3 className="fr-mb-2w">{title}</h3>
+      <p>{text}</p>
+    </div>
+  );
+};
+
+const { i18n } = declareComponentKeys<
+  | "pageTitle"
+  | "servicePresentationTitle"
+  | "servicePresentationText"
+  | "legalFrameworkTitle"
+  | "legalFrameworkText"
+  | "cookiesTitle"
+  | "cookiesText"
+  | "copyrightTitle"
+  | "copyrightText"
+  | "publisherInformationTitle"
+  | "address"
+  | "streetInformation"
+  | "cityInformation"
+  | "phone"
+>()("LegalInformation");
+
+export type I18n = typeof i18n;

src/i18n/resources/en.tsx

@@ -215,6 +215,24 @@ export const translations: Translations<"en"> = {
     "downloadMail": "Download the mail",
     "downloadMailDescription": "View the details of a letter",
   },
-
+  LegalInformation: {
+    "pageTitle": "Legal Notice",
+    "servicePresentationTitle": "Service Presentation",
+    "servicePresentationText":
+      "The online response service is intended for households and businesses surveyed as part of a public statistics survey. These users can complete their questionnaires directly online via the Internet. To access the online response service, the user must log in by providing the access code and password listed on the letter sent to them. The service also provides users with information about the survey and an online assistance system in case of any issues encountered.",
+    "legalFrameworkTitle": "Legal Framework of the Survey",
+    "legalFrameworkText": "It is available on the promotional portal for this survey.",
+    "cookiesTitle": "Cookie Management",
+    "cookiesText":
+      "This portal does not use any cookies that require user consent. Therefore, you do not need to accept their use before continuing your browsing.",
+    "copyrightTitle": "Copyright",
+    "copyrightText":
+      "Any reproduction of trademarks and logos displayed on this site for purposes other than strictly private is strictly prohibited.",
+    "publisherInformationTitle": "Publisher Information",
+    "address": "Institut National de la Statistique et des Études Économiques CS 70058",
+    "streetInformation": "88 avenue Verdier",
+    "cityInformation": "92541 MONTROUGE CEDEX FRANCE",
+    "phone": "Phone:",
+  },
   /* spell-checker: enable */
 };

src/i18n/resources/fr.tsx

@@ -216,5 +216,24 @@ export const translations: Translations<"fr"> = {
     "downloadMail": "Télécharger le courrier",
     "downloadMailDescription": "Voir le détail d’un courrier",
   },
+  LegalInformation: {
+    "pageTitle": "Mentions légales",
+    "servicePresentationTitle": "Présentation du service",
+    "servicePresentationText":
+      "Le service d'accès au site de réponse en ligne est destiné aux ménages et entreprises qui sont interrogées dans le cadre d'une enquête de la statistique publique. Ces usagers peuvent saisir leurs questionnaires directement en ligne par Internet. Pour accéder au service de réponse en ligne, l'utilisateur doit s'identifier en fournissant son code d'accès et son mot de passe figurant sur le courrier qui lui a été adressé. L'utilisateur du service dispose également d'informations concernant l'enquête et d'un systéme d'assistance en ligne en cas de difficulté rencontrée.",
+    "legalFrameworkTitle": "Cadre juridique de l'enquête",
+    "legalFrameworkText": "Il figure sur le portail de promotion de cette enquête.",
+    "cookiesTitle": "Gestion des cookies",
+    "cookiesText":
+      "Ce portail n’utilise aucun cookie nécessitant un consentement des usagers. C’est pourquoi vous n’avez pas à accepter leur utilisation avant de poursuivre votre navigation.",
+    "copyrightTitle": "Copyright",
+    "copyrightText":
+      "Toute reproduction pour un usage autre que strictement privé des marques et logos affichés sur le présent site est rigoureusement interdite.",
+    "publisherInformationTitle": "Informations éditeurs",
+    "address": "Institut National de la Statistique et des Études Économiques CS 70058",
+    "streetInformation": "88 avenue Verdier",
+    "cityInformation": "92541 MONTROUGE CEDEX FRANCE",
+    "phone": "Tél. :",
+  },
   /* spell-checker: enable */
 };

src/i18n/types.ts

@@ -23,7 +23,8 @@ export type ComponentKey =
   | import("components/myAccount/PostalAddressInformations").I18n
   | import("components/surveyHomepage/Faq").I18n
   | import("../routes/$survey/documents").I18n
-  | import("components/surveyHomepage/SupportForm").I18n;
+  | import("components/surveyHomepage/SupportForm").I18n
+  | import("components/LegalInformation").I18n;
 
 export type Translations<L extends Language> = GenericTranslations<
   ComponentKey,

src/routes/mentions-legales.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { LegalInformation } from "components/LegalInformation";
+import { useTranslation } from "i18n";
+import { Helmet } from "react-helmet-async";
+
+export const Route = createFileRoute("/mentions-legales")({
+  component: Index,
+});
+
+function Index() {
+  const { t: headerTranslation } = useTranslation("Header");
+  const { t } = useTranslation("LegalInformation");
+
+  return (
+    <div>
+      <Helmet>
+        <title>{`${t("pageTitle")} - ${headerTranslation("service tagline")}`} </title>
+      </Helmet>
+      <LegalInformation />
+    </div>
+  );
+}