update tracking

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/contributions/ContributionGenericAgreementSearch.tsx

@@ -1,12 +1,11 @@
 "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 { AgreementSearchForm } from "../outils/convention-collective/AgreementSearchForm";
 import { EnterpriseAgreement } from "../enterprise";
 import {
   isAgreementSupported,
@@ -22,15 +21,17 @@ type Props = {
   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>();
@@ -103,6 +104,7 @@ export function ContributionGenericAgreementSearch({
           }}
           selectedAgreementAlert={selectedAgreementAlert}
           defaultAgreement={defaultAgreement}
+          trackingActionName={trackingActionName}
         />
         {((contribution.isNoCDT && isValid) || !contribution.isNoCDT) && (
           <Button

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

@@ -50,7 +50,7 @@ export function ContributionGenericContent({
     <>
       {!displayContent && (
         <Button
-          className={fr.cx("fr-mt-2w", "fr-mb-6w")}
+          className={fr.cx("fr-mb-6w")}
           priority="tertiary no outline"
           onClick={() => {
             setDisplayContent(true);

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

@@ -117,6 +117,7 @@ export function ContributionLayout({ contribution }: Props) {
             }
           }}
           defaultAgreement={selectedAgreement}
+          trackingActionName={getTitle()}
         />
       ) : (
         <ContributionAgreementSelect contribution={contribution} />

packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearch.tsx

@@ -3,8 +3,11 @@ import { fr } from "@codegouvfr/react-dsfr";
 import { useState } from "react";
 
 import Button from "@codegouvfr/react-dsfr/Button";
-import { AgreementSearchInput } from "./AgreementSearchInput";
-import { useAgreementSearchTracking } from "../tracking";
+import { AgreementSearchInput } from "../../outils/convention-collective/AgreementSearchInput";
+import {
+  TrackingAgreementSearchAction,
+  useAgreementSearchTracking,
+} from "../tracking";
 
 export const AgreementSearch = () => {
   const [noResult, setNoResult] = useState(false);
@@ -15,6 +18,7 @@ export const AgreementSearch = () => {
         onSearch={(query, result) => {
           setNoResult(query.length > 2 && !result?.length);
         }}
+        trackingActionName={TrackingAgreementSearchAction.AGREEMENT_SEARCH}
       />
       <div className={fr.cx("fr-mt-2w", "fr-grid-row")}>
         <Button

packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/index.ts

@@ -1,3 +1,2 @@
 export * from "./AgreementSearch";
-export * from "./AgreementSearchInput";
 export * from "./AgreementSearchIntro";

packages/code-du-travail-frontend/src/modules/convention-collective/index.ts

@@ -2,5 +2,5 @@ export * from "./queries";
 export * from "./Agreements/Agreements";
 export * from "./AgreementSearch/AgreementSearch";
 export * from "./AgreementSearch/AgreementSearchIntro";
-export * from "./AgreementSearch/AgreementSearchInput";
+export * from "../outils/convention-collective/AgreementSearchInput";
 export * from "./search";

packages/code-du-travail-frontend/src/modules/convention-collective/tracking.ts

@@ -59,10 +59,10 @@ export const useAgreementSearchTracking = () => {
     });
   };
 
-  const emitSelectEvent = (idcc: string) => {
+  const emitSelectEvent = (idcc: string, action: string) => {
     sendEvent({
       category: TrackingAgreementSearchCategory.CC_SELECT_P1,
-      action: TrackingAgreementSearchAction.AGREEMENT_SEARCH,
+      action: action,
       name: idcc,
       value: generateUUID(),
     });

packages/code-du-travail-frontend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearch.tsx

@@ -4,6 +4,7 @@ import Button from "@codegouvfr/react-dsfr/Button";
 import { EnterpriseAgreementSearchInput } from "./EnterpriseAgreementSearchInput";
 import { useSearchParams } from "next/navigation";
 import { useEnterpriseAgreementSearchTracking } from "./tracking";
+import { TrackingAgreementSearchAction } from "../../convention-collective/tracking";
 
 type Props = {
   widgetMode?: boolean;
@@ -21,6 +22,7 @@ export const EnterpriseAgreementSearch = ({ widgetMode = false }: Props) => {
         widgetMode={widgetMode}
         defaultSearch={defaultSearch}
         defaultLocation={defaultLocation}
+        trackingActionName={TrackingAgreementSearchAction.AGREEMENT_SEARCH}
       />
       {!widgetMode && (
         <div className={fr.cx("fr-mt-2w")}>

packages/code-du-travail-frontend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearchInput.tsx

@@ -28,6 +28,7 @@ type Props = {
   ) => NonNullable<ReactNode> | undefined;
   defaultSearch?: string;
   defaultLocation?: ApiGeoResult;
+  trackingActionName: string;
 };
 
 export const EnterpriseAgreementSearchInput = ({
@@ -36,6 +37,7 @@ export const EnterpriseAgreementSearchInput = ({
   defaultLocation,
   onAgreementSelect,
   selectedAgreementAlert,
+  trackingActionName,
 }: Props) => {
   const [selectedAgreement, setSelectedAgreement] = useState<
     EnterpriseAgreement | undefined
@@ -109,7 +111,11 @@ export const EnterpriseAgreementSearchInput = ({
       setSearchState("required");
       return;
     }
-    emitEnterpriseAgreementSearchInputEvent(search, location);
+    emitEnterpriseAgreementSearchInputEvent(
+      trackingActionName,
+      search,
+      location
+    );
     setLoading(true);
     try {
       const result = await searchEnterprises({
@@ -217,13 +223,14 @@ export const EnterpriseAgreementSearchInput = ({
           window.scrollTo(0, 0);
         }}
         onAgreementSelect={(agreement) => {
-          emitSelectEnterpriseEvent({
+          emitSelectEnterpriseEvent(trackingActionName, {
             label: selectedEnterprise.label,
             siren: selectedEnterprise.siren,
           });
           if (onAgreementSelect) onAgreementSelect(agreement);
           setSelectedAgreement(agreement);
         }}
+        trackingActionName={trackingActionName}
       />
     );
   }
@@ -368,7 +375,7 @@ export const EnterpriseAgreementSearchInput = ({
                   ? {
                       href: `/${widgetMode ? "widgets" : "outils"}/convention-collective/entreprise/${enterprise.siren}${getQueries()}`,
                       onClick: () => {
-                        emitSelectEnterpriseEvent({
+                        emitSelectEnterpriseEvent(trackingActionName, {
                           label: enterprise.label,
                           siren: enterprise.siren,
                         });
@@ -381,9 +388,10 @@ export const EnterpriseAgreementSearchInput = ({
                         setSelectedEnterprise(enterprise);
                         if (enterprise.conventions.length === 1) {
                           emitSelectEnterpriseAgreementEvent(
-                            `idcc${enterprise.conventions[0].id}`
+                            `idcc${enterprise.conventions[0].num}`,
+                            trackingActionName
                           );
-                          emitSelectEnterpriseEvent({
+                          emitSelectEnterpriseEvent(trackingActionName, {
                             label: enterprise.label,
                             siren: enterprise.siren,
                           });

packages/code-du-travail-frontend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSelectionForm.tsx

@@ -13,12 +13,14 @@ type Props = {
   enterprise: Omit<Enterprise, "complements">;
   goBack: () => void;
   onAgreementSelect?: (agreement: EnterpriseAgreement) => void;
+  trackingActionName: string;
 };
 
 export const EnterpriseAgreementSelectionForm = ({
   enterprise,
   goBack,
   onAgreementSelect,
+  trackingActionName,
 }: Props) => {
   const { emitSelectEnterpriseAgreementEvent } =
     useEnterpriseAgreementSearchTracking();
@@ -57,7 +59,10 @@ export const EnterpriseAgreementSelectionForm = ({
                   onChange: () => {
                     onAgreementSelect(agreement);
                     setAgreement(agreement);
-                    emitSelectEnterpriseAgreementEvent(`idcc${agreement.id}`);
+                    emitSelectEnterpriseAgreementEvent(
+                      `idcc${agreement.id}`,
+                      trackingActionName
+                    );
                   },
                 }
               : {}),

packages/code-du-travail-frontend/src/modules/enterprise/EnterpriseAgreementSearch/tracking.ts

@@ -1,44 +1,51 @@
 import { v4 as generateUUID } from "uuid";
 import { sendEvent } from "../../utils";
-import { ApiGeoResult } from "src/modules/Location/searchCities";
+import { ApiGeoResult } from "../../Location/searchCities";
 import {
   TrackingAgreementSearchAction,
   TrackingAgreementSearchCategory,
-} from "src/modules/convention-collective/tracking";
+} from "../../convention-collective/tracking";
 
 export const useEnterpriseAgreementSearchTracking = () => {
   const emitEnterpriseAgreementSearchInputEvent = (
+    action: string,
     query: string,
     apiGeoResult?: ApiGeoResult
   ) => {
     sendEvent({
       category: TrackingAgreementSearchCategory.ENTERPRISE_SEARCH,
-      action: TrackingAgreementSearchAction.AGREEMENT_SEARCH,
+      action: action,
       name: JSON.stringify({ query, apiGeoResult }),
       value: generateUUID(),
     });
   };
 
-  const emitSelectEnterpriseEvent = (enterprise: {
-    label: string;
-    siren: string;
-  }) => {
-    sendEvent({
-      category: TrackingAgreementSearchCategory.CC_ENTERPRISE_SELECT,
-      action: TrackingAgreementSearchAction.AGREEMENT_SEARCH,
-      name: JSON.stringify(enterprise),
-      value: generateUUID(),
-    });
-  };
+    const emitSelectEnterpriseEvent = (
+      action: string,
+      enterprise: {
+        label: string;
+        siren: string;
+      }
+    ) => {
+      sendEvent({
+        category: TrackingAgreementSearchCategory.CC_ENTERPRISE_SELECT,
+        action: action,
+        name: JSON.stringify(enterprise),
+        value: generateUUID(),
+      });
+    };
 
-  const emitSelectEnterpriseAgreementEvent = (idcc: string) => {
-    sendEvent({
-      category: TrackingAgreementSearchCategory.CC_SELECT_P2,
-      action: TrackingAgreementSearchAction.AGREEMENT_SEARCH,
-      name: idcc,
-      value: generateUUID(),
-    });
-  };
+    const emitSelectEnterpriseAgreementEvent = (
+      idcc: string,
+      action: string
+    ) => {
+      sendEvent({
+        category: TrackingAgreementSearchCategory.CC_SELECT_P2,
+        action: action,
+        name: idcc,
+        value: generateUUID(),
+      });
+    };
 
   const emitPreviousEvent = () => {
     sendEvent({

packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchForm.tsx → packages/code-du-travail-frontend/src/modules/outils/convention-collective/AgreementSearchForm.tsx

@@ -13,12 +13,14 @@ type Props = {
     agreement?: EnterpriseAgreement
   ) => NonNullable<ReactNode> | undefined;
   defaultAgreement?: EnterpriseAgreement;
+  trackingActionName: string;
 };
 
 export const AgreementSearchForm = ({
   onAgreementSelect,
   selectedAgreementAlert,
   defaultAgreement,
+  trackingActionName,
 }: Props) => {
   const [mode, setMode] = useState<
     "agreementSearch" | "enterpriseSearch" | "noSearch" | undefined
@@ -57,6 +59,7 @@ export const AgreementSearchForm = ({
           }}
           selectedAgreementAlert={selectedAgreementAlert}
           defaultAgreement={defaultAgreement}
+          trackingActionName={trackingActionName}
         />
       )}
       {mode === "enterpriseSearch" && (
@@ -65,6 +68,7 @@ export const AgreementSearchForm = ({
             if (onAgreementSelect) onAgreementSelect(agreement, "p2");
           }}
           selectedAgreementAlert={selectedAgreementAlert}
+          trackingActionName={trackingActionName}
         />
       )}
     </>

packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx → packages/code-du-travail-frontend/src/modules/outils/convention-collective/AgreementSearchInput.tsx

@@ -6,9 +6,9 @@ import { ReactNode, useState } from "react";
 
 import { Autocomplete } from "../../common/Autocomplete";
 import { Agreement } from "../../../outils/types";
-import { searchAgreement } from "../search";
+import { searchAgreement } from "../../convention-collective/search";
 import { EnterpriseAgreement } from "../../enterprise";
-import { useAgreementSearchTracking } from "../tracking";
+import { useAgreementSearchTracking } from "../../convention-collective/tracking";
 
 type Props = {
   onSearch?: (query: string, value?: Agreement[]) => void;
@@ -17,13 +17,15 @@ type Props = {
     agreement?: EnterpriseAgreement
   ) => NonNullable<ReactNode> | undefined;
   defaultAgreement?: EnterpriseAgreement;
+  trackingActionName: string;
 };
 
 export const AgreementSearchInput = ({
   onSearch,
   onAgreementSelect,
   selectedAgreementAlert,
   defaultAgreement,
+  trackingActionName,
 }: Props) => {
   const [selectedAgreement, setSelectedAgreement] = useState(defaultAgreement);
   const [searchState, setSearchState] = useState<
@@ -68,11 +70,10 @@ export const AgreementSearchInput = ({
         Précisez et sélectionnez votre convention collective
       </h2>
       <div className={fr.cx("fr-mt-2w")}>
-        <div className={fr.cx("fr-col-12", "fr-mb-0")}>
+        <div className={fr.cx("fr-col-12")}>
           <Autocomplete<EnterpriseAgreement>
             defaultValue={selectedAgreement}
             dataTestId="AgreementSearchAutocomplete"
-            className={fr.cx("fr-col-12", "fr-mb-0")}
             hintText="Ex : transport routier ou 1486"
             label={
               <>
@@ -86,7 +87,7 @@ export const AgreementSearchInput = ({
               setSelectedAgreement(agreement);
               if (onAgreementSelect) onAgreementSelect(agreement);
               if (agreement) {
-                emitSelectEvent(`idcc${agreement.id}`);
+                emitSelectEvent(`idcc${agreement.id}`, trackingActionName);
               }
             }}
             displayLabel={(item) => {

packages/code-du-travail-frontend/src/modules/convention-collective/__tests__/AgreementSearchForm.test.tsx → packages/code-du-travail-frontend/src/modules/outils/convention-collective/__tests__/AgreementSearchForm.test.tsx

@@ -2,13 +2,13 @@ import { render, screen } from "@testing-library/react";
 import React, { useRef } from "react";
 import { wait } from "@testing-library/user-event/dist/utils";
 import { searchEnterprises } from "../../enterprise/queries";
-import { sendEvent } from "../../utils";
+import { sendEvent } from "../../../common/utils";
 import { ui } from "./ui";
 import { ui as enterpriseUi } from "../../enterprise/EnterpriseAgreementSearch/__tests__/ui";
-import { UserAction } from "src/common";
-import { AgreementSearchForm } from "../AgreementSearch/AgreementSearchForm";
+import { UserAction } from "../../../../common";
+import { AgreementSearchForm } from "../../common/AgreementSearchForm/AgreementSearchForm";
 
-jest.mock("../../utils", () => ({
+jest.mock("../../../common/utils", () => ({
   sendEvent: jest.fn(),
 }));