Merge branch 'develop' into feat/alimentation

detection/start.ts

@@ -60,19 +60,20 @@ const transformText = (element: Element, language: 'fr' | 'en', darkMode?: boole
 }
 export const initMatomo = () => {
   //@ts-expect-error: Matomo redefinition
-  const _paq_impactco2 = (window._paq_impactco2 = window._paq_impactco2 || [])
+  const _paq = (window._paq = window._paq || [])
   ;(function () {
     //@ts-expect-error: injected MATOMO_SITE_URL, MATOMO_SITE_ID constant from env var, see webpack.config.js
     const u = MATOMO_SITE_URL
-    _paq_impactco2.push(['setTrackerUrl', u + '/matomo.php'])
     //@ts-expect-error: injected MATOMO_SITE_URL, MATOMO_SITE_ID constant from env var, see webpack.config.js
-    _paq_impactco2.push(['setSiteId', MATOMO_SITE_ID])
+    _paq.push(['addTracker', u + '/matomo.php', MATOMO_SITE_ID])
+
     const d = document,
       g = d.createElement('script'),
       s = d.getElementsByTagName('script')[0]
     g.type = 'text/javascript'
     g.async = true
     g.src = u + '/matomo.js'
+
     //@ts-expect-error: Matomo redefinition
     s.parentNode.insertBefore(g, s)
   })()
@@ -81,7 +82,12 @@ export const initMatomo = () => {
   window.please = {}
   window.please.track = function (ary) {
     //@ts-expect-error: Matomo redefinition
-    window?._paq_impactco2?.push(ary)
+    const matomo = window.Matomo
+    if (matomo) {
+      //@ts-expect-error: injected MATOMO_SITE_URL, MATOMO_SITE_ID constant from env var, see webpack.config.js
+      const matomoTracker = matomo.getTracker(MATOMO_SITE_URL + '/matomo.php', MATOMO_SITE_ID)
+      matomoTracker.trackEvent(ary[0], ary[1], ary[2], ary[3])
+    }
   }
 }
 

package.json

@@ -26,7 +26,7 @@
     "build": "yarn webpack && next build",
     "build:analyze": "ANALYZE=true next build",
     "postbuild": "next-sitemap",
-    "webpack": "dotenv -e .env.local webpack",
+    "webpack": "dotenv -e .env webpack",
     "stats": "dotenv -e .env ts-node src/scripts/getStats.ts",
     "start": "next start",
     "lint": "next lint",
@@ -36,7 +36,7 @@
     "testIframes": "npx playwright install chromium; npx ts-node -r dotenv/config src/scripts/testIframes.ts"
   },
   "engines": {
-    "node": ">22",
+    "node": ">22.0.0",
     "yarn": "1.22"
   },
   "dependencies": {

src/components/Notion/Notion.module.css

@@ -76,14 +76,11 @@
   }
 
   :global(.notion-hash-link) {
-    &:focus {
-      opacity: 1;
-    }
+    display: none;
   }
 
   :global(summary),
-  :global(.notion-link),
-  :global(.notion-hash-link) {
+  :global(.notion-link) {
     &:focus {
       outline-offset: 2px;
       outline: 3px solid var(--primary-40);

src/components/Notion/utils.ts

@@ -6,7 +6,7 @@ export const getNotionContentProps = async (id: string) => {
 }
 
 export const improveAccessibility = (ref: HTMLDivElement) => {
-  const elements = ref.getElementsByTagName('img')
+  const elements = ref.getElementsByTagName('svg')
   for (const element of elements) {
     element.setAttribute('alt', '')
   }

src/components/externalModules/detection/Detector.tsx

@@ -90,7 +90,8 @@ const Detector = ({ impact, language }: { impact: string; language: 'fr' | 'en'
   const etiquetteRef = useRef<HTMLDivElement>(null)
 
   // inspired from https://usehooks-ts.com/react-hook/use-intersection-observer
-  const [entry, setEntry] = useState<IntersectionObserverEntry>()
+  // Pas ouf de mettre React ici, mais sinon il est considere comme inutilisé et ca plante...
+  const [entry, setEntry] = React.useState<IntersectionObserverEntry>()
   const [observed, setObserved] = useState(false)
 
   useEffect(() => {
@@ -160,6 +161,7 @@ const Detector = ({ impact, language }: { impact: string; language: 'fr' | 'en'
   return (
     <div className={styles.container} ref={ref}>
       <button
+        aria-expanded={!!display}
         className={classNames(styles.value, 'impactCO2-etiquette-detected-value')}
         onClick={onClick}
         dangerouslySetInnerHTML={{

src/components/outils/TransportSimulator.tsx

@@ -3,7 +3,7 @@
 import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
 import { usePathname, useSearchParams } from 'next/navigation'
-import React, { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import DistanceSimulator from './DistanceSimulator'
 import ItineraireSimulator from './ItineraireSimulator'
@@ -36,8 +36,15 @@ const TransportSimulator = () => {
   useEffect(() => {
     if (pathName.includes(itineraire.value)) {
       setSelected('itineraire')
+    } else {
+      const tabsParam = searchParams.get('tabs')
+      const values = tabsParam?.split(',')
+
+      if (values && values.includes(itineraire.value)) {
+        setSelected('itineraire')
+      }
     }
-  }, [pathName, setSelected])
+  }, [pathName, setSelected, searchParams])
 
   const tabs = useMemo(() => {
     const tabsParam = searchParams.get('tabs')
@@ -53,10 +60,6 @@ const TransportSimulator = () => {
       return true
     }
 
-    if (values.includes(itineraire.value) && !pathName.includes(itineraire.value)) {
-      setSelected('itineraire')
-    }
-
     return false
   }, [pathName, searchParams])
 

src/components/outils/quiz/Question.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslations } from 'next-intl'
 import { SetStateAction } from 'preact/compat'
-import React, { Dispatch, ForwardedRef, forwardRef, useCallback, useEffect, useMemo } from 'react'
+import { Dispatch, ForwardedRef, forwardRef, useCallback, useEffect, useMemo } from 'react'
 import { computedEquivalents } from 'src/providers/equivalents'
 import { Question as QuestionType } from 'types/question'
 import Button from 'components/base/buttons/Button'
@@ -109,8 +109,7 @@ const Question = (
                 data-testid='quiz-more-info'
                 id='quiz-more-info'
                 className={styles.moreInfo}
-                //@ts-expect-error: inert not managed by react
-                inert={displayMore ? undefined : ''}>
+                inert={displayMore ? undefined : true}>
                 {question.moreInfo}
               </div>
             </div>

src/data/categories.tsx

@@ -141,7 +141,7 @@ export const categories: Category[] = [
         href: 'https://agribalyse.ademe.fr/app',
       },
     ],
-    description: 'Communiquer l’impact carbone de l’alimentation',
+    description: 'Communiquer sur l’impact carbone de l’alimentation',
     unit: 'kg',
     equivalents: [...computedEquivalents('alimentation', alimentation), ...computedEquivalents('alimentation', repas)],
   },

src/scripts/testIframes.config.ts

@@ -2,7 +2,6 @@ import { FrameLocator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { comparateurTest } from '../../teste/comparateur'
 import { detecteurCO2Test } from '../../teste/detecteur-co2'
-import { distanceComparisonTest, distanceTest } from '../../teste/distance'
 import { itineraireTest } from '../../teste/itineraire'
 import { usageNumeriqueTest } from '../../teste/usagenumerique'
 
@@ -144,13 +143,7 @@ export const checks = [
         { timeout: 10000 }
       )
       await iframe.getByLabel('Arrivée').clear({ force: true })
-
-      await distanceTest(iframe, true)
-      await iframe.getByTestId('cancel-button').click()
-      await iframe.getByText('Distance').first().click()
-      await iframe.getByText('Comparaison').click()
-      await iframe.getByTestId('input-km-value').fill('10')
-      await distanceComparisonTest(iframe, true)
+      await itineraireTest(iframe, true)
     },
   },
   {

webpack.config.js

@@ -70,7 +70,7 @@ module.exports = [
     plugins: [
       new webpack.DefinePlugin({
         MATOMO_SITE_URL: `'${process.env.NEXT_PUBLIC_MATOMO_SITE_URL || ''}'`,
-        MATOMO_SITE_ID: `'${process.env.NEXT_PUBLIC_MATOMO_SITE_ID || ''}'`,
+        MATOMO_SITE_ID: `'${process.env.NEXT_PUBLIC_MATOMO_DETECTOR_SITE_ID || ''}'`,
       }),
       //new BundleAnalyzerPlugin(),
       //new StatoscopeWebpackPlugin(),