Merge pull request #381 from mission-apprentissage/ui-infra/get-ifram…

…e-ready [UI - infra] Prépare l'exposition de l'iframe sur l'Onisep
mission-apprentissage · Dec 16, 2024 · 50da543 · 50da543
2 parents 6859acc + 2c6c846
commit 50da543
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/.infra/files/configs/reverse_proxy/locations/90_location_ui.conf.template b/.infra/files/configs/reverse_proxy/locations/90_location_ui.conf.template
@@ -6,5 +6,5 @@ location / {
 
     client_max_body_size 0;
 
-    add_header Content-Security-Policy "frame-ancestors 'self' *.onisep.fr *.onisep.fr:8000 *.beta.gouv.fr *.incubateur.net";
+    add_header Content-Security-Policy "frame-ancestors 'self' *.onisep.fr *.onisep.fr:8000 *.onisep-preprod.fr *.beta.gouv.fr *.incubateur.net";
 }
diff --git 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/iframes/IframeFormationPage.js b/ui/src/iframes/IframeFormationPage.js
@@ -37,13 +37,27 @@ const IframeFormationPage = () => {
 
   useEffect(() => {
     if (isSuccess) {
-      window.parent.postMessage({ siriusHeight: document.body.scrollHeight + 50 }, "*");
+      window.parent.postMessage(
+        {
+          src: window.location.href,
+          height: document.body.scrollHeight,
+          siriusHeight: document.body.scrollHeight + 50,
+        },
+        "*"
+      );
     }
   }, [isSuccess]);
 
   useEffect(() => {
     const handleResize = () => {
-      window.parent.postMessage({ siriusHeight: document.body.scrollHeight + 50 }, "*");
+      window.parent.postMessage(
+        {
+          src: window.location.href,
+          height: document.body.scrollHeight,
+          siriusHeight: document.body.scrollHeight + 50,
+        },
+        "*"
+      );
     };
 
     document.addEventListener("click", handleResize);

diff --git 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",
 };