feat: manage engament time depending on simulator

Author: desoindx

app/(iframes)/iframes/livraison/etiquette-animee/page.tsx

@@ -5,7 +5,7 @@ import LivraisonEtiquette from 'components/outils/livraison/LivraisonEtiquette'
 const page = () => {
   return (
     <TranslationProvider>
-      <TrackingProvider tracking='Livraison etiquette'>
+      <TrackingProvider tracking='Livraison étiquette'>
         <LivraisonEtiquette id='animated' animated />
       </TrackingProvider>
     </TranslationProvider>

src/providers/TrackingProvider.tsx

@@ -1,19 +1,42 @@
 'use client'
 
+import { ReadonlyURLSearchParams, usePathname, useSearchParams } from 'next/navigation'
 import React, { ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { track } from 'utils/matomo'
 
 const TrackingContext = React.createContext<{
   trackOnce: (action: string) => void
 } | null>(null)
 
+const trackingTime: Record<string, number | ((pathname: string, params: ReadonlyURLSearchParams) => number)> = {
+  Numérique: 15000,
+  Habillement: 15000,
+  Mobilier: 15000,
+  Boisson: 15000,
+  Électroménager: 15000,
+  Repas: 15000,
+  Transport: (pathname: string, params: ReadonlyURLSearchParams) => {
+    if (pathname.includes('itineraire')) {
+      return 15000
+    }
+    const defaultMode = params.get('defaultMode')
+    if (defaultMode === 'comparison') {
+      return 15000
+    }
+
+    return 30000
+  },
+}
+
 export function TrackingProvider({ children, tracking }: { children: ReactNode; tracking: string }) {
   // inspired from https://usehooks-ts.com/react-hook/use-intersection-observer
   const ref = useRef<HTMLDivElement | null>(null)
   const [entry, setEntry] = useState<IntersectionObserverEntry>()
 
   const hasTracked = useRef(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const params = useSearchParams()
+  const pathname = usePathname()
 
   const trackOnce = useCallback(
     (action: string) => {
@@ -31,7 +54,7 @@ export function TrackingProvider({ children, tracking }: { children: ReactNode;
   )
 
   useEffect(() => {
-    const node = ref.current // DOM Ref
+    const node = ref.current
     const hasIOSupport = !!window.IntersectionObserver
     if (!hasIOSupport || !node) {
       return
@@ -45,18 +68,19 @@ export function TrackingProvider({ children, tracking }: { children: ReactNode;
   useEffect(() => {
     if (entry) {
       if (entry.isIntersecting) {
-        timeoutRef.current = setTimeout(
-          () => {
-            trackOnce('Temps')
-          },
-          tracking.toLowerCase().replace(/é/g, 'e').includes('etiquette') ? 15000 : 45000
-        )
+        let timing = trackingTime[tracking] || 15000
+        if (typeof timing !== 'number') {
+          timing = timing(pathname, params)
+        }
+        timeoutRef.current = setTimeout(() => {
+          trackOnce('Temps')
+        }, timing)
       } else if (timeoutRef.current) {
         clearTimeout(timeoutRef.current)
         timeoutRef.current = null
       }
     }
-  }, [tracking, entry])
+  }, [tracking, entry, params, pathname])
 
   return (
     <TrackingContext.Provider