feat(infographics): ajout des infographies sur le front (#6911)

* feat(infographics): ajout des infographies sur le front

* feat(infographics): ajout de la page infographie

* feat(infographics): ajout des références sur la page infographie

* feat: ajout des documents liés

* feat: ajout de la pages des infographies

* fix: review feedbacks

* fix: review feedbacks

* fix: test e2e

* fix: back

Author: m-maillot

packages/code-du-travail-frontend/app/contribution/page.tsx

@@ -1,23 +1,28 @@
-import { DsfrLayout } from "../../src/modules/layout";
+import { DsfrLayout, ListLayout } from "../../src/modules/layout";
 import { generateDefaultMetadata } from "../../src/modules/common/metas";
-import { ContributionsList } from "../../src/modules/contributions";
-import { getGenericContributionsGroupByThemes } from "../../src/api";
+import { fetchContributions } from "../../src/modules/contributions";
+import { groupByThemes } from "../../src/modules/utils";
+import { SOURCES } from "@socialgouv/cdtn-utils";
+import { Metadata } from "next";
 
-export const metadata = generateDefaultMetadata({
+export const metadata: Metadata = generateDefaultMetadata({
   title: "Fiches pratiques",
   description:
     "Obtenez une réponse personnalisée selon votre convention collective",
   path: "/contribution",
 });
 
 async function Index() {
-  const { documents } = await getContributions();
+  const documents = await getContributions();
 
   return (
     <DsfrLayout>
-      <ContributionsList
-        contributions={documents}
-        popularContributionSlugs={[
+      <ListLayout
+        title="Fiches pratiques"
+        description="Obtenez une réponse personnalisée selon votre convention collective"
+        source={SOURCES.CONTRIBUTIONS}
+        data={documents}
+        popularSlugs={[
           "en-cas-darret-maladie-du-salarie-lemployeur-doit-il-assurer-le-maintien-de-salaire",
           "les-conges-pour-evenements-familiaux",
           "a-quelles-indemnites-peut-pretendre-un-salarie-qui-part-a-la-retraite",
@@ -31,8 +36,11 @@ async function Index() {
 }
 
 const getContributions = async () => {
-  const data = await getGenericContributionsGroupByThemes();
-  return data;
+  const data = await fetchContributions(
+    ["title", "source", "description", "slug", "breadcrumbs"],
+    { generic: true }
+  );
+  return groupByThemes(data);
 };
 
 export default Index;

packages/code-du-travail-frontend/app/infographie/[slug]/page.tsx

@@ -0,0 +1,71 @@
+import { notFound } from "next/navigation";
+import { DsfrLayout } from "src/modules/layout";
+
+import { generateDefaultMetadata } from "src/modules/common/metas";
+import { getRouteBySource, SOURCES } from "@socialgouv/cdtn-utils";
+import {
+  fetchInfographic,
+  format,
+  Infographic,
+  Infographie,
+} from "src/modules/infographie";
+import { Metadata } from "next";
+
+export async function generateMetadata(
+  props: PageProps<"/infographie/[slug]">
+): Promise<Metadata> {
+  const params = await props.params;
+  const information = await fetchInfographic(params.slug, [
+    "title",
+    "metaDescription",
+  ]);
+
+  if (!information) {
+    return notFound();
+  }
+
+  return generateDefaultMetadata({
+    title: information?.title,
+    description: information?.metaDescription,
+    path: `/${getRouteBySource(SOURCES.INFOGRAPHICS)}/${params.slug}`,
+  });
+}
+
+async function InfographiePage(props: PageProps<"/infographie/[slug]">) {
+  const params = await props.params;
+  const infographic = await getInfographic(params.slug);
+
+  if (!infographic) {
+    return notFound();
+  }
+
+  return (
+    <DsfrLayout>
+      <Infographie infographic={infographic} />
+    </DsfrLayout>
+  );
+}
+
+const getInfographic = async (slug: string): Promise<Infographic> => {
+  const infographic = await fetchInfographic(slug, [
+    "title",
+    "meta_title",
+    "date",
+    "description",
+    "meta_description",
+    "svgFilename",
+    "pdfFilename",
+    "pdfFilesizeOctet",
+    "transcription",
+    "breadcrumbs",
+    "references",
+    "linkedContent",
+  ]);
+
+  if (!infographic) {
+    return notFound();
+  }
+  return format(infographic);
+};
+
+export default InfographiePage;

packages/code-du-travail-frontend/app/infographie/page.tsx

@@ -0,0 +1,54 @@
+import { DsfrLayout, ListLayout } from "../../src/modules/layout";
+import { generateDefaultMetadata } from "../../src/modules/common/metas";
+import { fetchInfographics } from "../../src/modules/infographie";
+import { groupByThemes } from "../../src/modules/utils";
+import { SOURCES } from "@socialgouv/cdtn-utils";
+import { Metadata } from "next";
+
+export const metadata: Metadata = generateDefaultMetadata({
+  title: "Infographies",
+  description:
+    "Découvrez toutes nos infographies : des visuels clairs pour comprendre vos droits, obligations et démarches en un coup d'oeil.",
+  path: "/infographie",
+});
+
+async function Index() {
+  const documents = await getInfographics();
+
+  return (
+    <DsfrLayout>
+      <ListLayout
+        title="Infographies"
+        description="Découvrez toutes nos infographies : des visuels clairs pour comprendre vos droits, obligations et démarches en un coup d'oeil."
+        source={SOURCES.INFOGRAPHICS}
+        data={documents}
+        popularSlugs={[
+          "licenciement-pour-inaptitude-medicale",
+          "rupture-conventionnelle-les-etapes-de-la-procedure-et-les-delais",
+          "report-des-conges-en-cas-de-maladie-de-courte-duree-moins-de-1-an",
+          "que-se-passe-t-il-en-cas-dabandon-de-poste",
+          "partage-de-la-valeur-nouvelles-regles-pour-les-entreprises-de-11-a-49-salaries",
+          "refus-des-propositions-de-cdi-quelles-consequences",
+        ]}
+      />
+    </DsfrLayout>
+  );
+}
+
+const getInfographics = async () => {
+  const data = await fetchInfographics([
+    "title",
+    "source",
+    "meta_description",
+    "slug",
+    "breadcrumbs",
+  ]);
+  return groupByThemes(
+    data.map((item) => ({
+      ...item,
+      description: item.meta_description,
+    }))
+  );
+};
+
+export default Index;

packages/code-du-travail-frontend/cypress/integration/light/infographies/infographies.spec.ts

@@ -0,0 +1,54 @@
+describe("Pages infographies", () => {
+  it("je vois la liste de toutes les infographies par thèmes", () => {
+    cy.visit("/");
+    cy.findByRole("heading", { level: 1 })
+      .should("have.text", "Bienvenue sur le Code du travail numérique")
+      .click();
+    cy.get("#fr-header-main-navigation").contains("Code du travail").click();
+    cy.get("#fr-header-main-navigation").contains("Nos infographies").click();
+    cy.isIndexable();
+    cy.urlEqual("/infographie");
+    cy.canonicalUrlEqual("/infographie");
+    cy.titleAndMetaDescriptionEqual(
+      "Infographies - Code du travail numérique",
+      "Découvrez toutes nos infographies : des visuels clairs pour comprendre vos droits, obligations et démarches en un coup d'oeil."
+    );
+    cy.get("h1").should("have.text", "Infographies");
+    cy.get("body").should(
+      "contain",
+      "Découvrez toutes nos infographies : des visuels clairs pour comprendre vos droits, obligations et démarches en un coup d'oeil."
+    );
+    cy.findAllByRole("heading", { level: 2 }).should("have.length", 8);
+    cy.findAllByRole("heading", { level: 2 }).eq(0).should("contain", "Résumé");
+    cy.findAllByRole("heading", { level: 2 })
+      .eq(1)
+      .should("contain", "Contenus populaires");
+    cy.findAllByRole("heading", { level: 2 })
+      .eq(2)
+      .should("contain", "Embauche et contrat de travail");
+    cy.findAllByRole("heading", { level: 3 }).should("have.length.at.least", 1);
+    cy.findAllByRole("heading", { level: 3 }).first().click();
+    cy.urlEqual("/infographie/licenciement-pour-inaptitude-medicale");
+  });
+
+  it("je vois une page infographie classique", () => {
+    cy.visit("/infographie/que-se-passe-t-il-en-cas-dabandon-de-poste");
+    cy.isIndexable();
+    cy.canonicalUrlEqual(
+      "/infographie/que-se-passe-t-il-en-cas-dabandon-de-poste"
+    );
+
+    cy.titleAndMetaDescriptionEqual(
+      "Que se passe-t-il en cas d'abandon de poste ? - Code du travail numérique",
+      "Cette infographie détaille la marche à suivre pour l’employeur en cas d’abandon de poste d’un salarié. Elle précise les effets possibles sur le contrat de travail selon que le salarié justifie son absence, reprenne son poste dans le délai imparti ou ne le fasse pas."
+    );
+    cy.findByRole("heading", { level: 1 }).should(
+      "have.text",
+      "Que se passe-t-il en cas d'abandon de poste ?"
+    );
+    cy.get("body").should(
+      "contain",
+      "Cette infographie détaille la marche à suivre pour l’employeur en cas d’abandon de poste d’un salarié."
+    );
+  });
+});

packages/code-du-travail-frontend/package.json

@@ -41,7 +41,7 @@
     "@opentelemetry/instrumentation-net": "^0.47.0",
     "@sentry/nextjs": "10.9.0",
     "@socialgouv/cdtn-elasticsearch": "^2.44.2",
-    "@socialgouv/cdtn-types": "^2.57.0",
+    "@socialgouv/cdtn-types": "^2.61.0",
     "@socialgouv/cdtn-utils": "workspace:^",
     "@socialgouv/matomo-next": "1.10.0",
     "@socialgouv/modeles-social": "workspace:^",
@@ -54,7 +54,7 @@
     "katex": "^0.16.21",
     "lodash.deburr": "^4.1.0",
     "memoizee": "^0.4.15",
-    "next": "16.0.1",
+    "next": "16.0.3",
     "publicodes": "1.0.0-beta.60",
     "react": "19.2.0",
     "react-dom": "19.2.0",

packages/code-du-travail-frontend/public/static/assets/img/infographies-download.svg

@@ -55,61 +55,3 @@ exports[`Contributions getByIdsContributions 1`] = `
   },
 ]
 `;
-
-exports[`Contributions getGenericContributions 1`] = `
-{
-  "documents": {
-    "Congés et repos": [
-      {
-        "breadcrumbs": [
-          {
-            "label": "Congés et repos",
-            "position": 3,
-            "slug": "/themes/conges-et-repos",
-          },
-          {
-            "label": "Congés",
-            "position": 1,
-            "slug": "/themes/conges",
-          },
-          {
-            "label": "Congés pour événement familial",
-            "position": 3,
-            "slug": "/themes/conges-pour-evenement-familial",
-          },
-        ],
-        "description": "Le code du travail prévoit que le salarié bénéficie de congés à l’occasion de certains événements familiaux. Ils n’entrainent aucune diminution de la rémunération…",
-        "slug": "les-conges-pour-evenements-familiaux",
-        "source": "contributions",
-        "theme": "Congés et repos",
-        "title": "Les congés pour événements familiaux",
-      },
-    ],
-    "Départ de l’entreprise": [
-      {
-        "breadcrumbs": [
-          {
-            "label": "Départ de l’entreprise",
-            "position": 7,
-            "slug": "/themes/depart-de-lentreprise",
-          },
-          {
-            "label": "Autres départs",
-            "position": 6,
-            "slug": "/themes/autres-departs",
-          },
-        ],
-        "description": "Le décès de l’employeur a des conséquences différentes sur le contrat de travail, selon que l’employeur est une entreprise individuelle ou un employeur…",
-        "slug": "quand-le-salarie-a-t-il-droit-a-une-prime-danciennete-quel-est-son-montant",
-        "source": "contributions",
-        "theme": "Départ de l’entreprise",
-        "title": "Quand le salarié a-t-il droit à une prime d’ancienneté ? Quel est son montant ?",
-      },
-    ],
-  },
-  "themes": [
-    "Congés et repos",
-    "Départ de l’entreprise",
-  ],
-}
-`;

packages/code-du-travail-frontend/src/api/modules/contributions/__tests__/__snapshots__/service.es.test.ts.snap

@@ -3,18 +3,10 @@
 import {
   getAllContributionsGroupByQuestion,
   getByIdsContributions,
-  getGenericContributionsGroupByThemes,
 } from "../service";
 import { getAllAgreements } from "../../agreements";
 
 describe("Contributions", () => {
-  it("getGenericContributions", async () => {
-    const result = await getGenericContributionsGroupByThemes();
-    expect(result).toHaveProperty("themes");
-    expect(result).toHaveProperty("documents");
-    expect(result).toMatchSnapshot();
-  });
-
   it("getByIdsContributions", async () => {
     const result = await getByIdsContributions(["eba7a4592f"]);
     expect(result).toMatchSnapshot();