diff --git a/src/components/common/copy-field.tsx b/src/components/common/copy-field.tsx index 342c345f..730e5eb1 100644 --- 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 (
@@ -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" > { - handleCopy(value, label)}> + {value}
diff --git a/src/components/sourcing/contacts/sourcing-contact-card.tsx b/src/components/sourcing/contacts/sourcing-contact-card.tsx index 8683d15b..4e5d10f2 100644 --- 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 = ({

{contact.label}

{ligne3}
- {contact.email && } - {contact.telephone && } + {contact.email && ( + trackEvent(COPY_EMAIL)} + /> + )} + {contact.telephone && ( + trackEvent(COPY_TELEPHONE)} /> + )} {contact.siteInternet && (
diff --git a/src/components/sourcing/contacts/sourcing-contact-save-button.tsx b/src/components/sourcing/contacts/sourcing-contact-save-button.tsx index 5734c4d8..5334eb34 100644 --- 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 index 09037e94..a5c8d561 100644 --- 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 index a80f981f..c1f37ba6 100644 --- 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", )} > +
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 index 2981f9a7..d0ca7308 100644 --- 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 index 0b0e4295..2cd02b1f 100644 --- 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 }) <>
+
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 index a0e95754..30831c79 100644 --- 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 = () => {
diff --git a/src/components/sourcing/side-panel/sourcing-side-panel-tracking.tsx b/src/components/sourcing/side-panel/sourcing-side-panel-tracking.tsx new file mode 100644 index 00000000..73cd8cce --- /dev/null +++ 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 index 5b8aba55..19b3bd02 100644 --- 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} »`, +});