From 2c6c846a2fd4954c30aed873c4e2e051b9f1d352 Mon Sep 17 00:00:00 2001
From: Yohann Gablowski <yohann.gablowski@gmail.com>
Date: Mon, 16 Dec 2024 11:13:47 +0100
Subject: [PATCH] feat(iframeFormation): add missing tracking event

---
 .../Components/TrouverUneEntrepriseRating.js        | 13 ++++++++++++-
 ui/src/matomo.js                                    |  4 +++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/ui/src/iframes/Components/TrouverUneEntrepriseRating.js b/ui/src/iframes/Components/TrouverUneEntrepriseRating.js
index 86162b14..dbd80cf4 100644
--- a/ui/src/iframes/Components/TrouverUneEntrepriseRating.js
+++ b/ui/src/iframes/Components/TrouverUneEntrepriseRating.js
@@ -9,6 +9,8 @@ import school from "../../assets/images/school-small.svg";
 import search from "../../assets/images/search.svg";
 import selfTraining from "../../assets/images/self-training.svg";
 import useBreakpoints from "../../hooks/useBreakpoints";
+import useMatomoEvent from "../../hooks/useMatomoEvent";
+import { MATOMO_ACTION, MATOMO_CATEGORY } from "../../matomo";
 import {
   CardsContainer,
   DidYouKnowContainer,
@@ -53,6 +55,7 @@ const TrouverEntrepriseCard = ({ percentage, count, label, position, seeMore })
 
 const TrouverUneEntrepriseRating = ({ data, etablissementsCount }) => {
   const [seeMore, setSeeMore] = useState(false);
+  const trackEvent = useMatomoEvent();
 
   return (
     <TrouverUneEntrepriseRatingContainer>
@@ -81,7 +84,15 @@ const TrouverUneEntrepriseRating = ({ data, etablissementsCount }) => {
           <TrouverEntrepriseCard key={item.label} {...item} position={index + 1} seeMore={seeMore} />
         ))}
       </CardsContainer>
-      <p onClick={() => setSeeMore((prevValue) => !prevValue)}>
+      <p
+        onClick={() => {
+          trackEvent(
+            MATOMO_CATEGORY.IFRAME_FORMATION,
+            seeMore ? MATOMO_ACTION.CLICK_TROUVER_ENTREPRISE_SEE_LESS : MATOMO_ACTION.CLICK_TROUVER_ENTREPRISE_SEE_MORE
+          );
+          setSeeMore((prevValue) => !prevValue);
+        }}
+      >
         {seeMore ? "Voir moins" : "Voir plus"}{" "}
         <span className={fr.cx(seeMore ? "fr-icon-arrow-up-s-line" : "fr-icon-arrow-down-s-line")} />
       </p>
diff --git a/ui/src/matomo.js b/ui/src/matomo.js
index 8126b3de..1cbef27c 100644
--- a/ui/src/matomo.js
+++ b/ui/src/matomo.js
@@ -7,7 +7,7 @@ export const MATOMO_ACTION = {
   CLICK_CAROUSEL_PREVIOUS: "Click carousel précédent",
   CLICK_CAROUSEL_NEXT: "Click carousel suivant",
   CLICK_CAROUSEL_SEE_MORE: "Click carousel voir plus de témoignages",
-  CLICK_THEMATIC_FROM_GRAPH: "Click thématique depuis graphique", //todo
+  CLICK_THEMATIC_FROM_GRAPH: "Click thématique depuis graphique",
   CLICK_GRAPHIC_VIEW: "Click passage en mode graphique",
   CLICK_TABLE_VIEW: "Click passage en mode tableau",
   CLICK_VERBATIM_SEE_MORE: "Click voir plus",
@@ -16,4 +16,6 @@ export const MATOMO_ACTION = {
   CLICK_QUESTION: "Click question",
   CLICK_GO_BACK_THEMATICS: "Click revenir en arrière thématiques",
   CLICK_GO_BACK_QUESTIONS: "Click revenir en arrière questions",
+  CLICK_TROUVER_ENTREPRISE_SEE_MORE: "Click voir plus trouver une entreprise",
+  CLICK_TROUVER_ENTREPRISE_SEE_LESS: "Click voir moins trouver une entreprise",
 };