feat: développer la page convention collective (#6225)

* fix: dsfr * fix: dsfr * fix: dsfr * fix: tests * fix: build * fix: build * fix: build * feat(dsfr): ajout du footer (#6079) * feat: add code * fix: tests * fix: tests * fix: tests * fix: tests * fix: tests * fix: dernier titi * fix: autoclick * fix: bug * feat(css): ajout de la lib `panda-css` (zero-runtime) (#6085) * fix: pandacss * fix: build * fix: build * feat(dsfr): ajout de la page stats (#6090) * fix: pandacss * fix: build * fix: build * fix(stats): add page * fix: stats * fix: tests * fix: tests * Update packages/code-du-travail-frontend/src/modules/mentions-legales/index.tsx Co-authored-by: Martial Maillot <[email protected]> * fix(recherche): remonter les pré-qualifiés dans la recherche (#6082) * chore(release): version 4.151.1 * fix(csp): remove reporting on sentry (#6092) * fix: config * fix: config * fix: config * empty * fix: config * empty * Update packages/code-du-travail-frontend/src/modules/mentions-legales/index.tsx Co-authored-by: Martial Maillot <[email protected]> * Update packages/code-du-travail-frontend/src/modules/mentions-legales/index.tsx Co-authored-by: Martial Maillot <[email protected]> * fix: config * chore(dsfr): mise à jour de la version DSFR * fix(dsfr): ignore les exceptions d'hydratation * feat(tests): ajout du module de testing (#6096) * fix: tests * fix: tests * fix: command * fix: merge date * fix: tests * fix: tests * fix: tests * fix: tests * fix(dsfr): ignore les exceptions d'hydratation * fix: readme * feat(DSFR): migration de la page article du code du travail (#6099) * feat: 6093 dsfr page politique de confidentialit (#6094) * feat: implémentation page politique confidentialité dsfr * chore: clean * fix: iframe dark mode * chore: refacto + e2e test * feat: convert a to Link * chore: review * chore: rename test --------- Co-authored-by: victor <[email protected]> * feat(dsfr): ajout des liens d'évitement (#6120) * feat(dsfr): migration de la page plan du site (#6097) * feat(dsfr): mise à jour des snapshots * feat(dsfr): mise à jour des snapshots * chore(dsfr): mise à jour de la lib DSFR * feat(dsfr): ajout du composant "Avez-vous trouvé une réponse à votre question" (#6121) * fix: merge date * fix: satisfaction * fix: retours preavis * fix: retours preavis * fix: tests * move feedback component to the page articleCodeDuTravail.tsx * clean-up css * fix: feedback * fix: feedback * fix: tests * fix: tests * feat(dsfr): création du composant "Besoin de plus d'information" (#6135) * fix: ui * fix: composant --------- Co-authored-by: carolineBda <[email protected]> Co-authored-by: Martial Maillot <[email protected]> * fix: retours * fix: tests * feat: nouvelle API pour les articles du code du travail (#6132) Co-authored-by: carolineBda <[email protected]> * fix(spec) : fix de la spec article-code-du-travail.spec.ts * fix(dsfr): ajout de la config pour supprimer le `insafe-inline` des `scripts` dans les `csp` (#6151) * feat(dsfr): ajout de matomo pour tracker les events (#6157) * fix: matomo * fix: matomo --------- Co-authored-by: Martial Maillot <[email protected]> * fix(feedback): ajout d'une logique de caractères restants (#6156) * fix: tests * feat: limiter à 500 caractères la saisie * feat: limiter à 500 caractères la saisie --------- Co-authored-by: Martial Maillot <[email protected]> * feat(dsfr): ajout du nouveau logo (#6159) * feat(dsfr): ajout des pages d'erreurs (404 + 500) (#6146) * fix: pages * fix: 404 * fix: tests * fix: tests * fix: tests * fix: lint * test error * fix errors * Fix spec * add button to test error page * feat: force error 500 for testing purpose * feat: revert errors --------- Co-authored-by: carolineBda <[email protected]> Co-authored-by: Martial Maillot <[email protected]> * feat: séparation des anciennes API et des nouvelles (#6183) * fix(article code du travail): retrait du tag Code du travail (#6182) * feat(config): correction de `husky`, ajout de `prettier` pour le formattage et de `lint-staged` pour runner le formattage au `precommit` (#6192) * fix: prettier * fix: prettier * fix: readme * fix: readme * fix: bug * fix: prettier * fix: prettier * fix: tests * fix: tests * fix: prettier * fix: prettier * fix: branch * merge dev * feat: implémentation simulateur brut net * chore: fix ts * chore: snap * chore: clean * chore: clean * chore: clean * chore: review * feat: update responsive * Revert "Merge branch 'dev' into simulateur-brut-net-dsfr" This reverts commit 0748928, reversing changes made to cd15bc7. * chore: clean * feat: chore clean * chore: clean * chore: remove undesired files * chore: remove undesired files * chore: clean * feat: implementation page convention collective * feat: update button link * fix: meta description share * feat: switch simu brut net couleur par defaut * feat: ajout de l'icone * feat: update svg * fix: ts * fix: bug load * chore: review * fix: mobile display * chore: review * chore: review * chore: review * chore review * fix: TU * chore: review * fix: validate html * chore: review * chore: clean --------- Co-authored-by: maxgfr <[email protected]> Co-authored-by: Caroline <[email protected]> Co-authored-by: Martial Maillot <[email protected]> Co-authored-by: Social Groovy Bot <[email protected]> Co-authored-by: victor <[email protected]> Co-authored-by: carolineBda <[email protected]>
SocialGouv · Nov 7, 2024 · 30694a9 · 30694a9
1 parent 47b8d9d
commit 30694a9
Show file tree

Hide file tree

Showing 11 changed files with 329 additions and 98 deletions.
diff --git a/packages/code-du-travail-frontend/app/convention-collective/page.tsx b/packages/code-du-travail-frontend/app/convention-collective/page.tsx
@@ -0,0 +1,48 @@
+import { DsfrLayout } from "../../src/modules/layout";
+import {
+  Agreements,
+  AgreementsPerLetter,
+} from "../../src/modules/convention-collective/Agreements";
+import { fetchAllAgreements } from "../../src/modules/convention-collective";
+import { generateDefaultMetadata } from "../../src/modules/common/metas";
+
+export const metadata = generateDefaultMetadata({
+  title: "Votre convention collective",
+  description:
+    "Retrouvez les questions/réponses fréquentes organisées par thème pour votre convention collective",
+  path: "/convention-collective",
+});
+
+const removeAccents = (text: string) =>
+  text.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+
+async function AgreementPage() {
+  const agreements = await fetchAllAgreements(
+    ["slug", "shortTitle"],
+    "shortTitle"
+  );
+  const firstLettersAgreements = agreements.reduce<AgreementsPerLetter>(
+    (agreementPerletter, agreement) => {
+      const { shortTitle } = agreement;
+      const firstLetter = removeAccents(shortTitle[0]);
+      if (!agreementPerletter[firstLetter]) {
+        return {
+          ...agreementPerletter,
+          [firstLetter]: [agreement],
+        };
+      }
+      return {
+        ...agreementPerletter,
+        [firstLetter]: [...agreementPerletter[firstLetter], agreement],
+      };
+    },
+    {}
+  );
+  return (
+    <DsfrLayout>
+      <Agreements firstLettersAgreements={firstLettersAgreements} />
+    </DsfrLayout>
+  );
+}
+
+export default AgreementPage;
diff --git a/packages/code-du-travail-frontend/cypress/integration/light/conventions-collectives.spec.ts b/packages/code-du-travail-frontend/cypress/integration/light/conventions-collectives.spec.ts
@@ -4,17 +4,21 @@ describe("Conventions collectives", () => {
     cy.get("#navigation").contains("Votre convention collective").click();
     cy.url().should("include", "/convention-collective");
 
-    cy.get("h1").should("have.text", "Votre convention collective");
+    cy.findByRole("heading", { level: 1 }).should(
+      "have.text",
+      "Votre convention collective"
+    );
     cy.get("body").should(
       "contain",
       "Retrouvez les questions/réponses fréquentes organisées par thème"
     );
-    cy.get("#content li").should("have.length", 49);
-    cy.get("#content li").first().click();
+    cy.get("#content a").should("have.length", 49);
+    cy.get("#content a").first().click();
     cy.url().should(
       "include",
       "/convention-collective/2941-aide-accompagnement-soins-et-services-a-domicile-bad"
     );
+
     cy.get('[data-accordion-component="Accordion"]')
       .eq(0)
       .find('[data-accordion-component="AccordionItemButton"]')

diff --git a/packages/code-du-travail-frontend/cypress/integration/light/validate-html.spec.ts b/packages/code-du-travail-frontend/cypress/integration/light/validate-html.spec.ts
@@ -3,7 +3,6 @@ import { localConfig } from "../html-validation/validate-html.spec";
 
 describe("Validation de l'html d'un échantillon de pages", () => {
   [
-    "/convention-collective",
     "/convention-collective/3248-metallurgie",
     "/contribution",
     "/contribution/les-conges-pour-evenements-familiaux",

diff --git a/packages/code-du-travail-frontend/pages/convention-collective/index.tsx b/packages/code-du-travail-frontend/pages/convention-collective/index.tsx
diff --git a/.../code-du-travail-frontend/src/modules/convention-collective/AgreementSearch.svg b/.../code-du-travail-frontend/src/modules/convention-collective/AgreementSearch.svg
diff --git a/packages/code-du-travail-frontend/src/modules/convention-collective/Agreements.tsx b/packages/code-du-travail-frontend/src/modules/convention-collective/Agreements.tsx
@@ -0,0 +1,44 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import { ContainerSimulator } from "../layout/ContainerSimulator";
+import { ElasticAgreement } from "@socialgouv/cdtn-types";
+import { AgreementsSection } from "./AgreementsSection";
+import { AgreementsGlossaire } from "./AgreementsGlossaire";
+import { AgreementsIntro } from "./AgreementsIntro";
+
+type Agreement = Pick<ElasticAgreement, "shortTitle" | "slug">;
+
+export type AgreementsPerLetter = {
+  [letter: string]: Agreement[];
+};
+
+type Props = {
+  firstLettersAgreements: AgreementsPerLetter;
+};
+
+export const Agreements = ({ firstLettersAgreements }: Props) => {
+  return (
+    <ContainerSimulator
+      title="Votre convention collective"
+      description="Retrouvez les questions/réponses fréquentes organisées par thème pour votre convention collective"
+      relatedItems={[]}
+      segments={[]}
+    >
+      <h1 id="convention-collective" className={fr.cx("fr-mt-0", "fr-mb-6w")}>
+        Votre convention collective
+      </h1>
+      <AgreementsIntro />
+      <div className={fr.cx("fr-mb-6w")}>
+        <AgreementsGlossaire letters={Object.keys(firstLettersAgreements)} />
+      </div>
+      <div id="content" className={fr.cx("fr-col-12", "fr-col-md-7")}>
+        {Object.entries(firstLettersAgreements).map(([letter, agreements]) => (
+          <AgreementsSection
+            key={letter}
+            agreements={agreements}
+            letter={letter}
+          />
+        ))}
+      </div>
+    </ContainerSimulator>
+  );
+};
diff --git a/packages/code-du-travail-frontend/src/modules/convention-collective/AgreementsGlossaire.tsx b/packages/code-du-travail-frontend/src/modules/convention-collective/AgreementsGlossaire.tsx
@@ -0,0 +1,49 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import Link from "next/link";
+import { css } from "../../../styled-system/css";
+
+type Props = {
+  letters: string[];
+};
+
+export const AgreementsGlossaire = ({ letters }: Props) => {
+  return (
+    <>
+      <h2>Les conventions collectives traitées</h2>
+      <p className={fr.cx("fr-mb-6w")}>
+        Les conventions collectives présentées sont les plus représentatives en
+        termes de nombre de salariés.
+      </p>
+      <div>
+        <ul className={`${fr.cx("fr-pl-0", "fr-m-0", "fr-grid-row")} ${ul}`}>
+          {letters.map((letter, index) => (
+            <>
+              <li
+                key={letter}
+                className={`${fr.cx("fr-mb-0", "fr-mx-1v")}${index !== 0 ? ` ${li}` : ""}`}
+              >
+                <Link href={`#${letter}`} className={fr.cx("fr-h3")}>
+                  {letter}
+                </Link>
+              </li>
+            </>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+};
+
+const ul = css({
+  listStyle: "none!",
+  display: "flex",
+  flexDirection: "row",
+});
+
+const li = css({
+  _before: {
+    content: `"- "`,
+    fontSize: "28px",
+    fontWeight: "bold",
+  },
+});
diff --git a/packages/code-du-travail-frontend/src/modules/convention-collective/AgreementsIntro.tsx b/packages/code-du-travail-frontend/src/modules/convention-collective/AgreementsIntro.tsx
@@ -0,0 +1,84 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import Link from "next/link";
+import { css } from "../../../styled-system/css";
+import Image from "next/image";
+import { Highlight } from "@codegouvfr/react-dsfr/Highlight";
+import AgreementSearch from "./AgreementSearch.svg";
+
+export const AgreementsIntro = () => {
+  return (
+    <>
+      <div className={`${fr.cx("fr-p-3w", "fr-mb-6w")} ${block}`}>
+        <div className={fr.cx("fr-mb-4v", "fr-grid-row")}>
+          <Image
+            priority
+            src={AgreementSearch}
+            alt="Trouver sa convention collective"
+            className={`${fr.cx("fr-unhidden-md", "fr-hidden")} ${ImageContainer}`}
+          />
+          <h2 className={fr.cx("fr-mt-md-2v")}>
+            Trouver sa convention collective
+          </h2>
+        </div>
+        <Highlight size="lg">
+          <span>
+            La convention collective est un texte conclu au niveau d&apos;une
+            branche d&apos;activité (Ex&nbsp;: Transports routiers). Elle adapte
+            les règles du Code du travail sur des points précis, en fonction des
+            situations particulières de la branche (primes, congés, salaires
+            minima, préavis, prévoyance...)
+          </span>
+          <br />
+          <br />
+          <span className={fr.cx("fr-text--bold")}>
+            Vous pouvez retrouver le nom de votre convention collective sur
+            votre bulletin de paie ou sur votre contrat de travail.
+          </span>
+        </Highlight>
+        <div
+          className={`${fr.cx(
+            "fr-grid-row",
+            "fr-grid-row--center",
+            "fr-px-0",
+            "fr-px-md-4w",
+            "fr-px-1w",
+            "fr-mt-2w",
+            "fr-mb-0"
+          )}`}
+        >
+          <Link
+            href="/outils/convention-collective/convention"
+            className={`${fr.cx(
+              "fr-btn",
+              "fr-btn--icon-right",
+              "fr-icon-arrow-right-line",
+              "fr-px-9v",
+              "fr-col-12",
+              "fr-col-md-3",
+              "fr-mr-md-6w",
+              "fr-mb-md-0",
+              "fr-mb-2w",
+              "fr-btns-group--center"
+            )}`}
+          >
+            Je connais ma convention collective je la saisis
+          </Link>
+          <Link
+            href="/outils/convention-collective/entreprise"
+            className={`${fr.cx("fr-btn", "fr-btn--icon-right", "fr-icon-arrow-right-line", "fr-col-12", "fr-col-md-3", "fr-px-6v", "fr-btns-group--center")}`}
+          >
+            Je cherche mon entreprise pour trouver ma convention collective
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const block = css({
+  background: "var(--background-alt-blue-cumulus)",
+});
+
+const ImageContainer = css({
+  height: "52px",
+});