refactor: contribution generic specific

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

@@ -19,10 +19,10 @@ export async function generateMetadata({ params }) {
 }
 
 async function Contribution({ params }) {
-  const { _id, ...source } = await getContribution(params.slug);
+  const contribution = await getContribution(params.slug);
   return (
     <DsfrLayout>
-      <ContributionLayout contribution={source} />
+      <ContributionLayout contribution={contribution} />
     </DsfrLayout>
   );
 }

packages/code-du-travail-frontend/src/modules/common/Autocomplete/Autocomplete.tsx

@@ -133,7 +133,7 @@ export const Autocomplete = <K,>({
                 onSearch?.(inputValue, results);
                 setSuggestions(results);
               } catch (error) {
-                onError?.(error);
+                onError?.(error.message);
                 setSuggestions([]);
               } finally {
                 setLoading(false);

packages/code-du-travail-frontend/src/modules/contributions/ContributionAgreemeentSelect.tsx

@@ -0,0 +1,60 @@
+"use client";
+import React from "react";
+import { Button } from "@codegouvfr/react-dsfr/Button";
+import { Card } from "@codegouvfr/react-dsfr/Card";
+import { css } from "@styled-system/css";
+import { fr } from "@codegouvfr/react-dsfr";
+import { removeCCNumberFromSlug } from "../common/utils";
+
+import { Contribution } from "./type";
+
+type Props = {
+  contribution: Contribution;
+};
+
+export function ContributionAgreementSelect({ contribution }: Props) {
+  const { slug } = contribution;
+
+  return (
+    <>
+      <div className={`${fr.cx("fr-p-3w", "fr-mt-6w")} ${block}`}>
+        <div className={"fr-grid-row"}>
+          <span className={fr.cx("fr-h3", "fr-mt-1w", "fr-mb-1w")}>
+            Votre convention collective
+          </span>
+        </div>
+        <Card
+          title={`${contribution.ccnShortTitle} (IDCC ${contribution.idcc})`}
+          size="small"
+          titleAs="h2"
+          className={fr.cx("fr-mt-2w")}
+          classes={{
+            content: fr.cx("fr-p-2w"),
+            title: cardTitle,
+            start: fr.cx("fr-m-0"),
+            end: fr.cx("fr-p-0", "fr-m-0"),
+          }}
+        ></Card>
+        <Button
+          className={fr.cx("fr-mt-2w")}
+          linkProps={{
+            href: `/contribution/${removeCCNumberFromSlug(slug)}`,
+          }}
+          priority="secondary"
+          iconId="fr-icon-arrow-go-back-line"
+          iconPosition="right"
+        >
+          Modifier
+        </Button>
+      </div>
+    </>
+  );
+}
+
+const cardTitle = css({
+  fontWeight: "normal!",
+});
+
+const block = css({
+  background: "var(--background-alt-blue-cumulus) !important",
+});

packages/code-du-travail-frontend/src/modules/contributions/ContributionAgreementContent.tsx

@@ -0,0 +1,78 @@
+"use client";
+import React from "react";
+import { fr } from "@codegouvfr/react-dsfr";
+import { ContributionContent } from "./ContributionContent";
+import Html from "../common/Html";
+import Link from "../common/Link";
+import Accordion from "@codegouvfr/react-dsfr/Accordion";
+import { ListWithArrow } from "../common/ListWithArrow";
+import { ElasticSearchContributionConventionnelle } from "@socialgouv/cdtn-types";
+import { RelatedItems } from "../common/RelatedItems";
+import { RelatedItem } from "../documents";
+import { Share } from "../common/Share";
+
+type Props = {
+  contribution: ElasticSearchContributionConventionnelle;
+  relatedItems: {
+    items: RelatedItem[];
+    title: string;
+  }[];
+};
+
+export function ContributionAgreementContent({
+  contribution,
+  relatedItems,
+}: Props) {
+  const { title, metas } = contribution;
+  return (
+    <>
+      <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters", "fr-my-6w")}>
+        <div
+          className={fr.cx(
+            "fr-col-12",
+            "fr-col-md-8",
+            "fr-mb-6w",
+            "fr-mb-md-0"
+          )}
+        >
+          <ContributionContent contribution={contribution} titleLevel={3} />
+          {!!contribution.references.length && (
+            <Accordion label="Références">
+              <ListWithArrow
+                items={contribution.references.map(({ title, url }) => {
+                  if (!url) return <></>;
+                  return (
+                    <Link key={title} href={url}>
+                      {title}
+                    </Link>
+                  );
+                })}
+              />
+            </Accordion>
+          )}
+          <p className={fr.cx("fr-my-2w")}>
+            Consultez les questions-réponses fréquentes pour la convention
+            collective{" "}
+            <a href={`/convention-collective/${contribution.ccnSlug}`}>
+              {contribution.ccnShortTitle}
+            </a>
+          </p>
+          {contribution.messageBlock && (
+            <div className={fr.cx("fr-alert", "fr-alert--info", "fr-my-6w")}>
+              <>
+                <div className={fr.cx("fr-h5")}>Attention</div>
+                <Html>{contribution.messageBlock}</Html>
+              </>
+            </div>
+          )}
+        </div>
+        <div className={fr.cx("fr-col-12", "fr-col-md-4")}>
+          {relatedItems && !!relatedItems[0].items.length && (
+            <RelatedItems relatedItems={relatedItems} />
+          )}
+          <Share title={title} metaDescription={metas.description} />
+        </div>
+      </div>
+    </>
+  );
+}

packages/code-du-travail-frontend/src/modules/contributions/ContributionGenericAgreementSearch.tsx

@@ -0,0 +1,121 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { Button } from "@codegouvfr/react-dsfr/Button";
+import { css } from "@styled-system/css";
+import { fr } from "@codegouvfr/react-dsfr";
+import Image from "next/image";
+import AgreementSearch from "../convention-collective/AgreementSearch.svg";
+
+import { AgreementSearchForm } from "../convention-collective/AgreementSearch/AgreementSearchForm";
+import { EnterpriseAgreement } from "../enterprise";
+import {
+  isAgreementValid,
+  isCCSupported,
+  isCCUnextended,
+} from "./contributionUtils";
+import { Contribution } from "./type";
+
+type Props = {
+  onAgreementSelect: (agreement?: EnterpriseAgreement, mode?: string) => void;
+  onDisplayClick: (ev: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+  contribution: Contribution;
+};
+
+export function ContributionGenericAgreementSearch({
+  contribution,
+  onAgreementSelect,
+  onDisplayClick,
+}: Props) {
+  const { slug } = contribution;
+
+  const [selectedAgreement, setSelectedAgreement] =
+    useState<EnterpriseAgreement>();
+  const [displaySlug, setDisplaySlug] = useState(`/contribution/${slug}`);
+  useEffect(() => {
+    setDisplaySlug(
+      selectedAgreement && isAgreementValid(contribution, selectedAgreement)
+        ? `/contribution/${selectedAgreement.num}-${slug}`
+        : ""
+    );
+  }, [selectedAgreement]);
+  const selectedAgreementAlert = (agreement: EnterpriseAgreement) => {
+    const isSupported = isCCSupported(contribution, agreement);
+    const isUnextended = isCCUnextended(contribution, agreement);
+    if (contribution.isNoCDT) {
+      if (isUnextended)
+        return (
+          <>
+            Les dispositions de cette convention n’ont pas été étendues. Cela
+            signifie qu&apos;elles ne s&apos;appliquent qu&apos;aux entreprises
+            adhérentes à l&apos;une des organisations signataires de
+            l&apos;accord. Dans ce contexte, nous ne sommes pas en mesure
+            d&apos;identifier si cette règle s&apos;applique ou non au sein de
+            votre entreprise. Vous pouvez toutefois consulter la convention
+            collective{" "}
+            <a target="_blank" href={agreement.url}>
+              ici
+            </a>{" "}
+            dans le cas où elle s&apos;applique à votre situation.
+          </>
+        );
+      if (!isSupported)
+        return (
+          <>
+            Nous vous invitons à consulter votre convention collective qui peut
+            prévoir une réponse. Vous pouvez consulter votre convention
+            collective{" "}
+            <a target="_blank" href={agreement.url}>
+              ici
+            </a>
+            .
+            <br />
+            {contribution.messageBlockGenericNoCDT}
+          </>
+        );
+    }
+    if (!isSupported)
+      return <>Vous pouvez consulter les informations générales ci-dessous.</>;
+  };
+  return (
+    <>
+      <div className={`${fr.cx("fr-p-3w", "fr-mt-6w")} ${block}`}>
+        <div className={"fr-grid-row"}>
+          <Image
+            priority
+            src={AgreementSearch}
+            alt="Personnalisez la réponse avec votre convention collective"
+            className={fr.cx("fr-unhidden-md", "fr-hidden")}
+          />
+          <span className={fr.cx("fr-h3", "fr-mt-1w", "fr-mb-1w")}>
+            Personnalisez la réponse avec votre convention collective
+          </span>
+        </div>
+        <div>
+          <AgreementSearchForm
+            onAgreementSelect={(agreement, mode) => {
+              onAgreementSelect(agreement, mode);
+              setSelectedAgreement(agreement);
+            }}
+            selectedAgreementAlert={selectedAgreementAlert}
+          />
+          {(!contribution.isNoCDT ||
+            isAgreementValid(contribution, selectedAgreement)) && (
+            <Button
+              className={fr.cx("fr-mt-2w")}
+              linkProps={{
+                href: displaySlug,
+                onClick: onDisplayClick,
+              }}
+            >
+              Afficher les informations
+            </Button>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+const block = css({
+  background: "var(--background-alt-blue-cumulus) !important",
+});