Merge pull request #300 from incubateur-ademe/feat/sourcing-update-tr…

…acking feat: sourcing update tracking
incubateur-ademe · Dec 9, 2024 · 8f345ef · 8f345ef
2 parents 3ec79dd + 4d70e65
commit 8f345ef
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 9 deletions.
diff --git a/src/components/common/copy-field.tsx b/src/components/common/copy-field.tsx
@@ -5,9 +5,10 @@ interface CopyFieldProps {
   label: string;
   value?: string;
   className?: string;
+  onClick?: () => void;
 }
 
-export const CopyField = ({ label, value, className }: CopyFieldProps) => {
+export const CopyField = ({ label, value, className, onClick }: CopyFieldProps) => {
   const [copySuccess, setCopySuccess] = useState(false);
 
   const handleCopy = async (text?: string, field?: string) => {
@@ -18,6 +19,11 @@ export const CopyField = ({ label, value, className }: CopyFieldProps) => {
     }
   };
 
+  const handleClick = () => {
+    onClick && onClick();
+    handleCopy(value, label);
+  };
+
   return (
     <div className={"mb-2 flex gap-2"}>
       <span className="flex items-center justify-between">
@@ -26,7 +32,7 @@ export const CopyField = ({ label, value, className }: CopyFieldProps) => {
             "ri-file-copy-line relative h-4 w-4 cursor-pointer text-pfmv-navy before:!h-5 before:!w-5",
             "before:!mb-3",
           )}
-          onClick={() => handleCopy(value, label)}
+          onClick={handleClick}
           title="Cliquer pour copier"
         >
           <span
@@ -41,7 +47,7 @@ export const CopyField = ({ label, value, className }: CopyFieldProps) => {
           </span>
         </i>
       </span>
-      <span className={clsx("block cursor-pointer pt-[2px]", className)} onClick={() => handleCopy(value, label)}>
+      <span className={clsx("block cursor-pointer pt-[2px]", className)} onClick={handleClick}>
         {value}
       </span>
     </div>

diff --git a/src/components/sourcing/contacts/sourcing-contact-card.tsx b/src/components/sourcing/contacts/sourcing-contact-card.tsx
@@ -11,6 +11,8 @@ import Tag from "@codegouvfr/react-dsfr/Tag";
 import Badge from "@codegouvfr/react-dsfr/Badge";
 import Link from "next/link";
 import { SourcingRexContentSeeProject } from "@/src/components/sourcing/side-panel/sourcing-rex-content-see-project";
+import { trackEvent } from "@/src/helpers/matomo/track-matomo";
+import { COPY_EMAIL, COPY_TELEPHONE } from "@/src/helpers/matomo/matomo-tags";
 
 type SourcingContactCardProps = {
   contact: SourcingContact;
@@ -68,8 +70,17 @@ export const SourcingContactCard = ({
           <h4 className="mb-0 !text-base">{contact.label}</h4>
           <h5 className="mb-2 !text-base">{ligne3}</h5>
           <div>
-            {contact.email && <CopyField className="text-pfmv-navy underline" label="Email" value={contact.email} />}
-            {contact.telephone && <CopyField label="Téléphone" value={contact.telephone} />}
+            {contact.email && (
+              <CopyField
+                className="text-pfmv-navy underline"
+                label="Email"
+                value={contact.email}
+                onClick={() => trackEvent(COPY_EMAIL)}
+              />
+            )}
+            {contact.telephone && (
+              <CopyField label="Téléphone" value={contact.telephone} onClick={() => trackEvent(COPY_TELEPHONE)} />
+            )}
             {contact.siteInternet && (
               <div className="fr-icon-global-line text-pfmv-navy before:mb-[1px] before:mr-1 before:!h-5 before:!w-5">
                 <Link href={contact.siteInternet} prefetch={false} target="_blank">

diff --git a/src/components/sourcing/contacts/sourcing-contact-save-button.tsx b/src/components/sourcing/contacts/sourcing-contact-save-button.tsx
@@ -10,6 +10,9 @@ import { updateRexContactInProjetAction } from "@/src/actions/projets/update-rex
 import { useEffect, useState } from "react";
 import { RexContactId, SourcingContact } from "@/src/components/sourcing/types";
 import { updateUserContactInProjetAction } from "@/src/actions/projets/update-user-contact-in-projet-action";
+import { trackEvent } from "@/src/helpers/matomo/track-matomo";
+import { SOURCING_SAVING_CONTACT } from "@/src/helpers/matomo/matomo-tags";
+import { SOURCING_DELETING_CONTACT } from "@/src/helpers/matomo/matomo-tags";
 
 type SourcingContactSaveButtonProps = {
   projetId: number;
@@ -66,6 +69,8 @@ export const SourcingContactSaveButton = ({ projetId, contact, className }: Sour
 
     const result = isSaved ? await updater.delete.action() : await updater.add.action();
 
+    isSaved ? trackEvent(SOURCING_DELETING_CONTACT) : trackEvent(SOURCING_SAVING_CONTACT);
+
     if (result.type === "success" && result.projet) {
       addOrUpdateProjet(result.projet);
       setSaved(!isSaved);

diff --git a/src/components/sourcing/side-panel/sourcing-contacts-downloader.tsx b/src/components/sourcing/side-panel/sourcing-contacts-downloader.tsx
@@ -2,6 +2,8 @@ import { useTransition } from "react";
 import { generateSourcingContactsCsvAction } from "@/src/actions/projets/generate-sourcing-contacts-csv-action";
 import { downloadCsv } from "@/src/helpers/csv-utils";
 import clsx from "clsx";
+import { trackEvent } from "@/src/helpers/matomo/track-matomo";
+import { SOURCING_DOWNLOAD_CSV } from "@/src/helpers/matomo/matomo-tags";
 
 type SourcingContactsDownloaderProps = {
   projetId?: number;
@@ -12,6 +14,7 @@ export const SourcingContactsDownloader = ({ projetId, className }: SourcingCont
   const [isPending, startTransition] = useTransition();
 
   const handleDownload = () => {
+    trackEvent(SOURCING_DOWNLOAD_CSV);
     startTransition(async () => {
       if (projetId) {
         const result = await generateSourcingContactsCsvAction(projetId);

diff --git a/src/components/sourcing/side-panel/sourcing-in-progress-projet-content.tsx b/src/components/sourcing/side-panel/sourcing-in-progress-projet-content.tsx
@@ -11,6 +11,7 @@ import { useProjetsStore } from "@/src/stores/projets/provider";
 
 import { userProjetToSourcingContact } from "@/src/components/sourcing/helpers";
 import { selectEspaceByCode } from "@/src/helpers/type-espace-filter";
+import { SourcingSidePanelTracking } from "./sourcing-side-panel-tracking";
 
 export const SourcingInProgressProjetContent = ({ data }: { data: ProjetWithPublicRelations }) => {
   const currentProjetId = useProjetsStore((state) => state.currentProjetId);
@@ -26,6 +27,7 @@ export const SourcingInProgressProjetContent = ({ data }: { data: ProjetWithPubl
             "min-h-[11.5rem] px-5 pb-4 pt-6",
         )}
       >
+        <SourcingSidePanelTracking type="in-progress" name={data.nom} />
         <div className="flex items-center justify-between">
           <Badge small noIcon className="!mb-0 !bg-pfmv-navy !text-dsfr-background-alt-blue-france">
             Projet en cours

diff --git a/src/components/sourcing/side-panel/sourcing-rex-content-see-project.tsx b/src/components/sourcing/side-panel/sourcing-rex-content-see-project.tsx
@@ -1,10 +1,13 @@
 import Button from "@codegouvfr/react-dsfr/Button";
 import { useModalStore } from "@/src/stores/modal/provider";
+import { trackEvent } from "@/src/helpers/matomo/track-matomo";
+import { SOURCING_SIDE_PANEL_VIEW_PROJET_MODAL_OPEN } from "@/src/helpers/matomo/matomo-tags";
 
 export const SourcingRexContentSeeProject = ({ slug }: { slug: string }) => {
   const setCurrentSourcingRexProjet = useModalStore((state) => state.setCurrentSourcingRexProjet);
 
   const openModal = () => {
+    trackEvent(SOURCING_SIDE_PANEL_VIEW_PROJET_MODAL_OPEN(slug));
     setCurrentSourcingRexProjet(slug);
   };
 

diff --git a/src/components/sourcing/side-panel/sourcing-rex-content.tsx b/src/components/sourcing/side-panel/sourcing-rex-content.tsx
@@ -10,6 +10,7 @@ import { strapiContactToSourcingContact } from "@/src/components/sourcing/helper
 import Tag from "@codegouvfr/react-dsfr/Tag";
 import { SourcingRexContentSeeProject } from "./sourcing-rex-content-see-project";
 import { formatNumberWithSpaces } from "@/src/helpers/common";
+import { SourcingSidePanelTracking } from "./sourcing-side-panel-tracking";
 
 export const SourcingRexContent = ({ data }: { data: RetourExperienceResponse }) => {
   const currentProjetId = useProjetsStore((state) => state.currentProjetId);
@@ -22,10 +23,11 @@ export const SourcingRexContent = ({ data }: { data: RetourExperienceResponse })
     <>
       <div
         className={clsx(
-          "flex w-full flex-col bg-dsfr-background-alt-blue-france text-dsfr-text-title-grey" +
-            "min-h-[11.5rem] px-5 pb-4 pt-6",
+          "flex w-full flex-col bg-dsfr-background-alt-blue-france text-dsfr-text-title-grey",
+          "min-h-52 px-5 pb-4 pt-6",
         )}
       >
+        <SourcingSidePanelTracking type="rex" name={retourExperienceAttributes.titre} />
         <div className="flex items-center justify-between">
           <Badge small noIcon className="!mb-0 !bg-dsfr-text-default-success !text-dsfr-text-inverted-success">
             Projet réalisé

diff --git a/src/components/sourcing/side-panel/sourcing-rex-skeleton.tsx b/src/components/sourcing/side-panel/sourcing-rex-skeleton.tsx
@@ -6,8 +6,8 @@ export const SourcingRexSkeleton = () => {
     <div>
       <div
         className={clsx(
-          "flex w-full flex-col bg-dsfr-background-alt-blue-france text-dsfr-text-title-grey" +
-            "min-h-[11.5rem] px-5 pb-4 pt-6",
+          "flex w-full flex-col bg-dsfr-background-alt-blue-france text-dsfr-text-title-grey",
+          "min-h-52 px-5 pb-4 pt-6",
         )}
       >
         <div className="flex items-center justify-between">

diff --git a/src/components/sourcing/side-panel/sourcing-side-panel-tracking.tsx b/src/components/sourcing/side-panel/sourcing-side-panel-tracking.tsx
@@ -0,0 +1,16 @@
+import { trackEvent } from "@/src/helpers/matomo/track-matomo";
+import { useEffect, useRef } from "react";
+import { SOURCING_SIDE_PANEL_OPEN_REX, SOURCING_SIDE_PANEL_OPEN_IN_PROGRESS } from "@/src/helpers/matomo/matomo-tags";
+
+export const SourcingSidePanelTracking = ({ type, name }: { type: "rex" | "in-progress"; name: string }) => {
+  const hasTracked = useRef(false);
+
+  useEffect(() => {
+    if (!hasTracked.current) {
+      trackEvent(type === "rex" ? SOURCING_SIDE_PANEL_OPEN_REX(name) : SOURCING_SIDE_PANEL_OPEN_IN_PROGRESS(name));
+      hasTracked.current = true;
+    }
+  }, [name, type]);
+
+  return null;
+};
diff --git a/src/helpers/matomo/matomo-tags.ts b/src/helpers/matomo/matomo-tags.ts
@@ -7,12 +7,21 @@ export type MATOMO_EVENT = {
 export const MATOMO_CATEGORIES = {
   SITE_PUBLIC: "site-public",
   ESPACE_PROJET: "espace-projet",
+  ANNUAIRE: "annuaire",
 };
 
 export const MATOMO_ACTIONS = {
   SUBSCRIBE_WEBINAIRE: "webinaire-inscription",
   UPDATE_MATURITE: "update-maturite",
   OPEN_AGENT_BUTTON: "open-agent-button",
+  SOURCING_COPY_EMAIL: "sourcing-copy-email",
+  SOURCING_COPY_TELEPHONE: "sourcing-copy-telephone",
+  SOURCING_DOWNLOAD_CSV: "sourcing-download-csv",
+  SOURCING_SAVE_CONTACT: "sourcing-save-contact",
+  SOURCING_DELETE_CONTACT: "sourcing-delete-contact",
+  SOURCING_SIDE_PANEL_OPEN_REX: "sourcing-side-panel-open-rex",
+  SOURCING_SIDE_PANEL_OPEN_IN_PROGRESS: "sourcing-side-panel-open-in-progress",
+  SOURCING_SIDE_PANEL_VIEW_PROJET_MODAL_OPEN: "sourcing-side-panel-view-projet-modal-open",
 };
 
 export const WEBINAIRE_SUBSCRIPTION: MATOMO_EVENT = {
@@ -32,3 +41,51 @@ export const OPEN_ZEPHYR: MATOMO_EVENT = {
   action: MATOMO_ACTIONS.OPEN_AGENT_BUTTON,
   name: "Ouverture de l'Agent à partir du bouton",
 };
+
+export const COPY_EMAIL: MATOMO_EVENT = {
+  category: MATOMO_CATEGORIES.ANNUAIRE,
+  action: MATOMO_ACTIONS.SOURCING_COPY_EMAIL,
+  name: "[Annuaire] Copie de l'email d'un contact",
+};
+
+export const COPY_TELEPHONE: MATOMO_EVENT = {
+  category: MATOMO_CATEGORIES.ANNUAIRE,
+  action: MATOMO_ACTIONS.SOURCING_COPY_TELEPHONE,
+  name: "[Annuaire] Copie du téléphone d'un contact",
+};
+
+export const SOURCING_DOWNLOAD_CSV: MATOMO_EVENT = {
+  category: MATOMO_CATEGORIES.ANNUAIRE,
+  action: MATOMO_ACTIONS.SOURCING_DOWNLOAD_CSV,
+  name: "[Annuaire] Téléchargement du CSV des contacts",
+};
+
+export const SOURCING_SAVING_CONTACT: MATOMO_EVENT = {
+  category: MATOMO_CATEGORIES.ANNUAIRE,
+  action: MATOMO_ACTIONS.SOURCING_SAVE_CONTACT,
+  name: "[Annuaire] Sauvegarde d'un contact",
+};
+
+export const SOURCING_DELETING_CONTACT: MATOMO_EVENT = {
+  category: MATOMO_CATEGORIES.ANNUAIRE,
+  action: MATOMO_ACTIONS.SOURCING_DELETE_CONTACT,
+  name: "[Annuaire] Suppression d'un contact",
+};
+
+export const SOURCING_SIDE_PANEL_OPEN_REX = (name: string): MATOMO_EVENT => ({
+  category: MATOMO_CATEGORIES.ANNUAIRE,
+  action: MATOMO_ACTIONS.SOURCING_SIDE_PANEL_OPEN_REX,
+  name: `[Annuaire] Ouverture du pin rex : « ${name} »`,
+});
+
+export const SOURCING_SIDE_PANEL_OPEN_IN_PROGRESS = (name: string): MATOMO_EVENT => ({
+  category: MATOMO_CATEGORIES.ANNUAIRE,
+  action: MATOMO_ACTIONS.SOURCING_SIDE_PANEL_OPEN_IN_PROGRESS,
+  name: `[Annuaire] Ouverture du pin du projet en cours : « ${name} »`,
+});
+
+export const SOURCING_SIDE_PANEL_VIEW_PROJET_MODAL_OPEN = (name: string): MATOMO_EVENT => ({
+  category: MATOMO_CATEGORIES.ANNUAIRE,
+  action: MATOMO_ACTIONS.SOURCING_SIDE_PANEL_VIEW_PROJET_MODAL_OPEN,
+  name: `[Annuaire] Ouverture de la modal de visualisation du rex : « ${name} »`,
+});