fix(contributions): modification des events sur les contribs generiques pour être ISO avec ce qu'on avait avant le passage au DSFR (#6443)

Author: carolineBda

packages/code-du-travail-frontend/app/outils/convention-collective/convention/page.tsx

@@ -1,9 +1,7 @@
 import { DsfrLayout } from "../../../../src/modules/layout";
-import { DocumentElasticResult } from "../../../../src/modules/documents";
 import { fetchTool, FindAgreementLayout } from "../../../../src/modules/outils";
 import { notFound } from "next/navigation";
 import { generateDefaultMetadata } from "../../../../src/modules/common/metas";
-import { ElasticTool } from "../../../../src/modules/outils/type";
 import { AgreementSearch } from "../../../../src/modules/convention-collective";
 import { agreementRelatedItems } from "../../../../src/modules/convention-collective/agreementRelatedItems";
 import { SITE_URL } from "../../../../src/config";

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { css } from "@styled-system/css";
+import { fr } from "@codegouvfr/react-dsfr";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const BlueCard = ({ children, ...props }: Props): JSX.Element => {
+  return (
+    <div
+      {...props}
+      className={`${fr.cx("fr-px-1w", "fr-px-md-3w", "fr-py-3w", "fr-mb-6w")} ${block}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default BlueCard;
+
+const block = css({
+  background: "var(--background-alt-blue-cumulus)",
+});

packages/code-du-travail-frontend/src/modules/common/useLocalStorage.ts

@@ -73,13 +73,3 @@ export const getAgreementFromLocalStorage = ():
     console.error(e);
   }
 };
-
-export const removeAgreementFromLocalStorage = () => {
-  try {
-    if (window?.localStorage) {
-      window.localStorage.removeItem(STORAGE_KEY_AGREEMENT);
-    }
-  } catch (e) {
-    console.error(e);
-  }
-};

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

@@ -0,0 +1,60 @@
+"use client";
+import React from "react";
+import { css } from "@styled-system/css";
+import { fr } from "@codegouvfr/react-dsfr";
+import { ContributionAgreementContent } from "./ContributionAgreementContent";
+import { Contribution } from "./type";
+import { removeCCNumberFromSlug } from "../common/utils";
+import BlueCard from "../common/BlueCard";
+import Card from "@codegouvfr/react-dsfr/Card";
+import Button from "@codegouvfr/react-dsfr/Button";
+
+type Props = {
+  contribution: Contribution;
+};
+
+export function ContributionAgreement({ contribution }: Props) {
+  const { slug, relatedItems } = contribution;
+
+  return (
+    <>
+      <BlueCard>
+        <p className={fr.cx("fr-h3", "fr-mt-1w")}>
+          Votre convention collective
+        </p>
+        <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"),
+          }}
+        />
+        <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>
+      </BlueCard>
+
+      <ContributionAgreementContent
+        contribution={contribution}
+        relatedItems={relatedItems}
+      />
+    </>
+  );
+}
+
+const cardTitle = css({
+  fontWeight: "normal!",
+});

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

@@ -0,0 +1,105 @@
+"use client";
+import React, { useState } from "react";
+import { useContributionTracking } from "./tracking";
+import { isAgreementSupported, isAgreementValid } from "./contributionUtils";
+import { ContributionGenericContent } from "./ContributionGenericContent";
+import { Contribution } from "./type";
+import { useLocalStorageForAgreement } from "../common/useLocalStorage";
+import { ContributionGenericAgreementSearch } from "./ContributionGenericAgreementSearch";
+import { Button } from "@codegouvfr/react-dsfr/Button";
+import { fr } from "@codegouvfr/react-dsfr";
+
+type Props = {
+  contribution: Contribution;
+};
+
+export function ContributionGeneric({ contribution }: Props) {
+  const getTitle = () => `/contribution/${slug}`;
+  const { slug, isNoCDT, relatedItems } = contribution;
+
+  const [displayGeneric, setDisplayGeneric] = useState(false);
+
+  const [selectedAgreement, setSelectedAgreement] =
+    useLocalStorageForAgreement();
+  const {
+    emitAgreementTreatedEvent,
+    emitAgreementUntreatedEvent,
+    emitDisplayAgreementContent,
+    emitDisplayGeneralContent,
+    emitDisplayGenericContent,
+    emitClickP3,
+  } = useContributionTracking();
+
+  return (
+    <>
+      <ContributionGenericAgreementSearch
+        contribution={contribution}
+        onAgreementSelect={(agreement) => {
+          setSelectedAgreement(agreement);
+          setDisplayGeneric(false);
+          if (!agreement) return;
+
+          if (isAgreementSupported(contribution, agreement)) {
+            emitAgreementTreatedEvent(agreement.num);
+          } else {
+            emitAgreementUntreatedEvent(agreement.num);
+          }
+        }}
+        onDisplayClick={(ev) => {
+          setDisplayGeneric(!displayGeneric);
+          if (
+            !isAgreementValid(contribution, selectedAgreement) ||
+            !selectedAgreement
+          ) {
+            ev.preventDefault();
+            setDisplayGeneric(true);
+            if (selectedAgreement) {
+              emitDisplayGeneralContent(getTitle());
+            } else {
+              emitDisplayGenericContent(getTitle());
+            }
+          } else {
+            emitDisplayAgreementContent(getTitle());
+          }
+        }}
+        defaultAgreement={selectedAgreement}
+        trackingActionName={getTitle()}
+      />
+
+      {!isNoCDT && !isAgreementValid(contribution, selectedAgreement) && (
+        <>
+          {!displayGeneric && (
+            <Button
+              className={fr.cx("fr-mb-6w")}
+              priority="tertiary no outline"
+              onClick={() => {
+                setDisplayGeneric(true);
+                emitClickP3(getTitle());
+              }}
+            >
+              Afficher les informations sans sélectionner une convention
+              collective
+            </Button>
+          )}
+          <ContributionGenericContent
+            contribution={contribution}
+            relatedItems={relatedItems}
+            displayGeneric={displayGeneric}
+            alertText={
+              selectedAgreement &&
+              !isAgreementSupported(contribution, selectedAgreement) && (
+                <p>
+                  <strong>
+                    Cette réponse correspond à ce que prévoit le code du
+                    travail, elle ne tient pas compte des spécificités de la{" "}
+                    {selectedAgreement.shortTitle}
+                  </strong>
+                </p>
+              )
+            }
+          />
+        </>
+      )}
+    </>
+  );
+}

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

@@ -1,12 +1,10 @@
 "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 {
   isAgreementSupported,
@@ -15,21 +13,25 @@ import {
 } from "./contributionUtils";
 import { Contribution } from "./type";
 import Link from "../common/Link";
+import BlueCard from "../common/BlueCard";
+import { AgreementSearchForm } from "../convention-collective/AgreementSearch/AgreementSearchForm";
 
 type Props = {
-  onAgreementSelect: (agreement?: EnterpriseAgreement, mode?: string) => void;
+  onAgreementSelect: (agreement?: EnterpriseAgreement) => void;
   onDisplayClick: (ev: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
   contribution: Contribution;
   defaultAgreement?: EnterpriseAgreement;
+  trackingActionName: string;
 };
 
 export function ContributionGenericAgreementSearch({
   contribution,
   onAgreementSelect,
   onDisplayClick,
   defaultAgreement,
+  trackingActionName,
 }: Props) {
-  const { slug, isNoCDT } = contribution;
+  const { slug } = contribution;
 
   const [selectedAgreement, setSelectedAgreement] =
     useState<EnterpriseAgreement>();
@@ -80,12 +82,12 @@ export function ContributionGenericAgreementSearch({
       return <>Vous pouvez consulter les informations générales ci-dessous.</>;
   };
   return (
-    <div className={`${fr.cx("fr-p-3w", "fr-mt-6w")} ${block}`}>
+    <BlueCard>
       <div className={fr.cx("fr-grid-row")}>
         <Image
           priority
           src={AgreementSearch}
-          alt="Personnalisez la réponse avec votre convention collective"
+          alt=""
           className={fr.cx("fr-unhidden-md", "fr-hidden")}
         />
         <p className={fr.cx("fr-h3", "fr-mt-1w")}>
@@ -94,14 +96,15 @@ export function ContributionGenericAgreementSearch({
       </div>
       <div>
         <AgreementSearchForm
-          onAgreementSelect={(agreement, mode) => {
-            onAgreementSelect(agreement, mode);
+          onAgreementSelect={(agreement) => {
+            onAgreementSelect(agreement);
             setSelectedAgreement(
               isAgreementValid(contribution, agreement) ? agreement : undefined
             );
           }}
           selectedAgreementAlert={selectedAgreementAlert}
           defaultAgreement={defaultAgreement}
+          trackingActionName={trackingActionName}
         />
         {((contribution.isNoCDT && isValid) || !contribution.isNoCDT) && (
           <Button
@@ -117,10 +120,6 @@ export function ContributionGenericAgreementSearch({
           </Button>
         )}
       </div>
-    </div>
+    </BlueCard>
   );
 }
-
-const block = css({
-  background: "var(--background-alt-blue-cumulus)!",
-});