Merge branch '6233-contribution-dsfr' into carolineBda/h1-cc

SocialGouv · Jan 9, 2025 · 4669b32 · 4669b32
2 parents d2f1e30 + 26ca99d
commit 4669b32
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/packages/code-du-travail-frontend/app/contribution/[slug]/page.tsx b/packages/code-du-travail-frontend/app/contribution/[slug]/page.tsx
@@ -20,10 +20,9 @@ export async function generateMetadata({ params }) {
 
 async function Contribution({ params }) {
   const { _id, ...source } = await getContribution(params.slug);
-  const relatedItems = await fetchRelatedItems({ _id }, params.slug);
   return (
     <DsfrLayout>
-      <ContributionLayout contribution={source} relatedItems={relatedItems} />
+      <ContributionLayout contribution={source} />
     </DsfrLayout>
   );
 }

diff --git a/packages/code-du-travail-frontend/src/modules/contributions/ContributionLayout.tsx b/packages/code-du-travail-frontend/src/modules/contributions/ContributionLayout.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import { css } from "@styled-system/css";
 import { fr } from "@codegouvfr/react-dsfr";
-import { RelatedItem } from "../documents";
+import { RelatedItem, sources } from "../documents";
 import { RelatedItems } from "../common/RelatedItems";
 import { Share } from "../common/Share";
 import { Feedback } from "../layout/feedback";
@@ -28,15 +28,24 @@ import { ListWithArrow } from "../common/ListWithArrow";
 import { useContributionTracking } from "./tracking";
 
 type Props = {
-  relatedItems: { items: RelatedItem[]; title: string }[];
   contribution: ContributionElasticDocument;
 };
 
-export function ContributionLayout({ relatedItems, contribution }: Props) {
+export function ContributionLayout({ contribution }: Props) {
   const getTitle = () => `/contribution/${slug}`;
   const { date, title, slug, idcc, metaDescription } = contribution;
   const isGeneric = idcc === "0000";
   const isNoCDT = contribution?.type === "generic-no-cdt";
+  const relatedItems = [
+    {
+      title: "Articles liés",
+      items: contribution.linkedContent.map((linked) => ({
+        title: linked.title,
+        url: linked.slug,
+        source: linked.source as (typeof sources)[number],
+      })),
+    },
+  ];
 
   const [displayContent, setDisplayContent] = useState(false);
   const [displaySlug, setDisplaySlug] = useState(`/contribution/${slug}`);
@@ -185,7 +194,7 @@ export function ContributionLayout({ relatedItems, contribution }: Props) {
               </span>
             </div>
             <Card
-              title={`${(contribution as ElasticSearchContributionConventionnelle).ccnShortTitle} IDCC${contribution.idcc}`}
+              title={`${(contribution as ElasticSearchContributionConventionnelle).ccnShortTitle} IDCC ${contribution.idcc}`}
               size="small"
               titleAs="h2"
               className={fr.cx("fr-mt-2w")}
@@ -207,7 +216,7 @@ export function ContributionLayout({ relatedItems, contribution }: Props) {
           </>
         )}
       </div>
-      {isGeneric && !isNoCDT && (
+      {isGeneric && !isNoCDT && !selectedAgreement && (
         <Button
           className={fr.cx(
             !displayContent ? "fr-unhidden" : "fr-hidden",
@@ -300,7 +309,7 @@ export function ContributionLayout({ relatedItems, contribution }: Props) {
                 contribution as ElasticSearchContributionConventionnelle
               }
               titleLevel={3}
-            ></ContributionContent>
+            />
             {contribution.references.length && (
               <Accordion label="Références">
                 <ListWithArrow
@@ -314,6 +323,21 @@ export function ContributionLayout({ relatedItems, contribution }: Props) {
                 />
               </Accordion>
             )}
+            <p className={fr.cx("fr-my-2w")}>
+              Consultez les questions-réponses fréquentes pour la convention
+              collective{" "}
+              <a
+                href={`/convention-collective/${
+                  (contribution as ElasticSearchContributionConventionnelle)
+                    .ccnSlug
+                }`}
+              >
+                {
+                  (contribution as ElasticSearchContributionConventionnelle)
+                    .ccnShortTitle
+                }
+              </a>
+            </p>
             {contribution.messageBlock && (
               <div className={fr.cx("fr-alert", "fr-alert--info", "fr-my-6w")}>
                 <>

diff --git a/...avail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx b/...avail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx
@@ -79,7 +79,7 @@ export const AgreementSearchInput = ({
           label={
             <>
               Nom de la convention collective ou son numéro
-              d’identification IDCC (4 chiffres)
+              d’identification IDCC (4&nbsp;chiffres)
             </>
           }
           state={getInputState()}

diff --git a/...ntend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearchInput.tsx b/...ntend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearchInput.tsx
@@ -38,8 +38,10 @@ export const EnterpriseAgreementSearchInput = ({
   onAgreementSelect,
   selectedAgreementAlert,
 }: Props) => {
-  const [selectedAgreement, setSelectedAgreement] =
-    useLocalStorageForAgreementOnPageLoad();
+  const [selectedAgreement, setSelectedAgreement] = useState<
+    EnterpriseAgreement | undefined
+  >();
+  const [_, setAgreementLocalStorage] = useLocalStorageForAgreementOnPageLoad();
   const [searchState, setSearchState] = useState<
     "noSearch" | "notFoundSearch" | "errorSearch" | "fullSearch" | "required"
   >("noSearch");
@@ -138,6 +140,7 @@ export const EnterpriseAgreementSearchInput = ({
         selectedEnterprise.conventions
       );
       setSelectedAgreement(enterpriseAgreement);
+      setAgreementLocalStorage(enterpriseAgreement);
     }
   }, [selectedEnterprise]);
   if (
@@ -163,7 +166,7 @@ export const EnterpriseAgreementSearchInput = ({
           )}
         >
           <Card
-            title={`${selectedAgreement.shortTitle} IDCC${selectedAgreement.id}`}
+            title={`${selectedAgreement.shortTitle} IDCC ${selectedAgreement.id}`}
             size="small"
             className={fr.cx("fr-col-10")}
             classes={{