Merge branch 'develop'

app/(iframes)/iframes/quiz-infographie/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import QuizInfographieIframe from 'src/views/QuizInfographieIframe'
+
+const page = () => {
+  return <QuizInfographieIframe />
+}
+
+export default page

src/components/comparateur/overscreens/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from 'next-intl'
-import React, { ForwardedRef, forwardRef, useEffect, useState } from 'react'
+import { ForwardedRef, forwardRef, useEffect, useState } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { ComputedEquivalent } from 'types/equivalent'
 import { getName } from 'utils/Equivalent/equivalent'
@@ -34,7 +34,9 @@ const Checkbox = (
   }
 
   useEffect(() => {
-    setInteracted(false)
+    if (interacted) {
+      setInteracted(false)
+    }
   }, [equivalents])
 
   return (

src/components/comparateur/overscreens/EquivalentsOverscreen.tsx

@@ -1,11 +1,12 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { useSearchEquivalent } from 'src/providers/useSearchEquivalent'
 import { categories } from 'data/categories'
 import { track } from 'utils/matomo'
+import useDebounce from 'hooks/useDebounce'
 import Button from 'components/base/buttons/Button'
 import SearchIcon from 'components/base/icons/search'
 import HiddenLabel from 'components/form/HiddenLabel'
@@ -29,10 +30,13 @@ const EquivalentsOverscreen = () => {
   }, [equivalents])
 
   const [search, setSearch] = useState('')
-  const results = useSearchEquivalent(search, true)
+
+  const debouncedSearch: string = useDebounce(search)
+  const results = useSearchEquivalent(debouncedSearch, true, undefined, true)
 
   const t = useTranslations('comparateur.overscreen')
   const tModal = useTranslations('modal')
+
   return (
     <>
       <div className={styles.header}>
@@ -63,7 +67,7 @@ const EquivalentsOverscreen = () => {
           {tModal('close')}
         </Button>
       </div>
-      {search ? (
+      {debouncedSearch ? (
         results.length > 0 ? (
           <ul className={styles.content}>
             <Equivalents

src/components/outils/CategorySimulator.tsx

@@ -1,7 +1,9 @@
+'use client'
+
 import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
 import Image from 'next/image'
-import React, { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from 'react'
 import useParamContext, { Params } from 'src/providers/ParamProvider'
 import { ComputedEquivalent } from 'types/equivalent'
 import { TransportSimulateur } from 'types/transport'
@@ -33,6 +35,7 @@ const CategorySimulator = ({
   moreText,
   withSimulator,
   type,
+  reverse,
 }: {
   tracking: string
   equivalents: ComputedEquivalent[]
@@ -41,6 +44,7 @@ const CategorySimulator = ({
   moreText?: string
   withSimulator?: boolean
   type?: TransportSimulateur
+  reverse?: boolean
 }) => {
   const params = useParamContext()
   const t = useTranslations('category-simulator')
@@ -80,7 +84,7 @@ const CategorySimulator = ({
       <ul ref={ref} id='category-equivalents-list'>
         {equivalents &&
           equivalents
-            .sort((a, b) => getValue(a, initialParams, type) - getValue(b, initialParams, type))
+            .sort((a, b) => (getValue(a, initialParams, type) - getValue(b, initialParams, type)) * (reverse ? -1 : 1))
             .map((equivalent, index) => {
               const usagePercent = (100 * formatUsage(equivalent)) / equivalent.value
               const barExplanation = `usage : ${usagePercent.toFixed(0)}% et construction : ${(100 - usagePercent).toFixed(0)}%`

src/components/outils/quiz/QuizInfography.module.css

@@ -0,0 +1,20 @@
+.category {
+  padding: 2rem 1.5rem;
+  max-height: 19.5rem;
+  overflow: hidden;
+}
+
+.displayAll {
+  max-height: none;
+  overflow: auto;
+}
+
+.text {
+  text-align: center;
+  color: var(--neutral-50);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+}

src/components/outils/quiz/QuizInfography.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import useParamContext from 'src/providers/ParamProvider'
+import { useTranslations } from 'use-intl'
+import Shareable from 'components/shareable/Shareable'
+import { overScreenQuizInfographyValues } from 'components/shareable/overScreens/Values'
+import shareableStyles from '../../shareable/Shareable.module.css'
+import CategoryDisplayAll from '../CategoryDisplayAll'
+import CategorySimulator from '../CategorySimulator'
+import styles from './QuizInfography.module.css'
+import { getQuizEquivalents } from './question.config'
+
+const QuizInfography = () => {
+  const { language } = useParamContext()
+  const t = useTranslations('quiz')
+  const [displayAll, setDisplayAll] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const equivalents = useMemo(() => getQuizEquivalents(language), [language])
+
+  useEffect(() => {
+    if (ref.current) {
+      if (displayAll) {
+        ref.current.getElementsByTagName('a')[0].focus()
+      } else {
+        ref.current.getElementsByTagName('a')[0].scrollIntoView({ behavior: 'smooth', block: 'end' })
+      }
+    }
+  }, [ref, displayAll])
+
+  return (
+    <>
+      <div className={shareableStyles.separatorBothBorders} />
+      <div
+        className={classNames(styles.category, { [styles.displayAll]: displayAll })}
+        inert={displayAll ? undefined : true}>
+        <p className={styles.text}>{t('infography')}</p>
+        <Shareable slug='quiz-infographie' tracking='Quiz infographie' overScreens={overScreenQuizInfographyValues}>
+          <div ref={ref}>
+            <CategorySimulator tracking='Quiz infographie' equivalents={equivalents} reverse />
+          </div>
+        </Shareable>
+      </div>
+      <CategoryDisplayAll
+        displayAll={displayAll}
+        setDisplayAll={setDisplayAll}
+        tracking='Quiz infographie'
+        displayAllText={t('displayAll')}
+        hideAllText={t('hideAll')}
+      />
+      <div className={shareableStyles.separatorBothBorders} />
+    </>
+  )
+}
+
+export default QuizInfography

src/components/outils/quiz/QuizSimulator.tsx

@@ -3,7 +3,7 @@
 import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
 import Image from 'next/image'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { track } from 'utils/matomo'
 import Resource from 'components/base/Resource'
 import Button from 'components/base/buttons/Button'
@@ -12,6 +12,7 @@ import DropdownArrowUpIcon from 'components/base/icons/dropdown-arrow-up'
 import FullArrowLeftIcon from 'components/base/icons/full-arrow-left'
 import shareableStyles from '../../shareable/Shareable.module.css'
 import Question from './Question'
+import QuizInfography from './QuizInfography'
 import styles from './QuizSimulator.module.css'
 import { questions } from './question.config'
 
@@ -137,7 +138,7 @@ const QuizSimulator = () => {
               {t('restart')}
             </Button>
           </div>
-          <div className={shareableStyles.separatorBothBorders} />
+          <QuizInfography />
           <div className={styles.ressources}>
             <p>{t('read-more')}</p>
             <Resource

src/components/outils/quiz/question.config.tsx

@@ -1,4 +1,7 @@
+import { computedEquivalents } from 'src/providers/equivalents'
+import { ComputedEquivalent, Language } from 'types/equivalent'
 import { Question } from 'types/question'
+import { getNameWithoutSuffix } from 'utils/Equivalent/equivalent'
 import AvocatPoisson from './infos/AvocatPoisson'
 import BoeufTGV from './infos/BoeufTGV'
 import EauThe from './infos/EauThe'
@@ -22,3 +25,28 @@ export const questions: Question[] = [
   { answer: 'A', slugA: 'email', valueA: 1000, slugB: 'smartphone', moreInfo: <EmailSmartphone /> },
   { answer: 'A', slugA: 'veloelectrique', valueA: 10, slugB: 'mangue', moreInfo: <VeloMangue />, last: true },
 ]
+
+export const getQuizEquivalents = (language: Language) =>
+  questions
+    .flatMap((question) => [
+      {
+        ...(computedEquivalents.find((equivalent) => equivalent.slug === question.slugA) as ComputedEquivalent),
+        number: question.valueA || undefined,
+      },
+      {
+        ...(computedEquivalents.find((equivalent) => equivalent.slug === question.slugB) as ComputedEquivalent),
+        number: question.valueB || undefined,
+      },
+    ])
+    .map((equivalent) => {
+      console.log(equivalent)
+      return equivalent.number
+        ? {
+            ...equivalent,
+            name: `${equivalent.number} ${getNameWithoutSuffix(language, equivalent, true, equivalent.number, true)}`,
+            value: equivalent.value * equivalent.number,
+            number: undefined,
+          }
+        : equivalent
+    })
+    .filter((value, index, array) => array.findIndex((t) => t.slug === value.slug) === index)

src/components/shareable/overScreens/Values.tsx

@@ -187,6 +187,17 @@ export const overScreenExtraSimulatorValues: (slug: string) => Record<string, Ov
   }
 }
 
+export const overScreenQuizInfographyValues = {
+  partager: {
+    title: 'share',
+    children: <Share tracking='Quiz infographie' path='iframes/quiz-infographie' />,
+  },
+  integrer: {
+    title: 'integrate',
+    children: <Integrate path='quiz-infographie' tracking='Quiz infographie' />,
+  },
+}
+
 export const overScreenCategoryValues: (category: Category) => Record<string, OverScreenInfo> = (category) => {
   const values = {
     partager: {

src/providers/locales/en.json

@@ -1,5 +1,8 @@
 {
   "quiz": {
+    "infography": "REVIEW THE ORDERS OF MAGNITUDE",
+    "hideAll": "Collapse the list of orders of magnitude",
+    "displayAll": "Show all orders of magnitude",
     "question": "Question",
     "previous": "Prev.",
     "title": "In your opinion, what has <important>the least</important> impact on the climate?",

src/providers/locales/es.json

@@ -1,5 +1,8 @@
 {
   "quiz": {
+    "infography": "REVISAR LOS PEDIDOS DE TALLAS",
+    "hideAll": "Ocultar la lista de órdenes de magnitud",
+    "displayAll": "Mostrar todas las órdenes de magnitud",
     "question": "Pregunta",
     "previous": "Ant.",
     "title": "Según tú, ¿qué tiene <important>menos</important> impacto en el clima?",
@@ -352,8 +355,6 @@
     "Approvisionnement": "Abastecimiento",
     "hypothesis": {
       "pre": {
-        "the": "Suponemos una taza de 250ml (simplificada aquí como 250mg).",
-        "cafe": "Suponemos una taza de 250ml (simplificada aquí como 250mg).",
         "avion-pny": "Distancia total recorrida: 11,600 km.",
         "tgv-paris-berlin": "Distancia total recorrida: 2,478 km.",
         "tgv-paris-marseille": "Distancia total recorrida: 1,504 km.",

src/providers/locales/fr.json

@@ -1,5 +1,8 @@
 {
   "quiz": {
+    "infography": "REVOIR LES ORDRES DE GRANDEURS",
+    "hideAll": "Replier la liste des ordres de grandeur",
+    "displayAll": "Afficher tous les ordres de grandeur",
     "question": "Question",
     "previous": "Prec.",
     "title": "D’après vous, qu’est-ce qui a <important>le moins</important> d’impact sur le climat ?",

src/providers/useSearchEquivalent.ts

@@ -38,7 +38,12 @@ const equivalents = computedEquivalents
   })
   .flatMap(getEquivalentWithCarpool)
 
-export const useSearchEquivalent = (search: string, excludeEmpty?: boolean, category?: number) => {
+export const useSearchEquivalent = (
+  search: string,
+  excludeEmpty?: boolean,
+  category?: number,
+  emptyResults?: boolean
+) => {
   const [results, setResults] = useState<ComputedEquivalent[]>([])
   const [fuses, setFuses] = useState<{ fuse: Fuse<ComputedEquivalent>; nonEmptyFuse: Fuse<ComputedEquivalent> }>()
 
@@ -72,17 +77,23 @@ export const useSearchEquivalent = (search: string, excludeEmpty?: boolean, cate
 
   useEffect(() => {
     if (fuses) {
-      setResults(
-        excludeEmpty
-          ? search.length > 0
-            ? fuses.nonEmptyFuse.search(search.normalize('NFD').replace(/[\u0300-\u036f]/g, '')).map(({ item }) => item)
-            : computedEquivalents.filter((equivalent) => equivalent.value).sort((a, b) => (a.slug > b.slug ? 1 : -1))
-          : search.length > 0
-            ? fuses.fuse.search(search.normalize('NFD').replace(/[\u0300-\u036f]/g, '')).map(({ item }) => item)
-            : computedEquivalents.sort((a, b) => (a.slug > b.slug ? 1 : -1))
-      )
+      if (emptyResults && search.length === 0) {
+        setResults([])
+      } else {
+        setResults(
+          excludeEmpty
+            ? search.length > 0
+              ? fuses.nonEmptyFuse
+                  .search(search.normalize('NFD').replace(/[\u0300-\u036f]/g, ''))
+                  .map(({ item }) => item)
+              : computedEquivalents.filter((equivalent) => equivalent.value).sort((a, b) => (a.slug > b.slug ? 1 : -1))
+            : search.length > 0
+              ? fuses.fuse.search(search.normalize('NFD').replace(/[\u0300-\u036f]/g, '')).map(({ item }) => item)
+              : computedEquivalents.sort((a, b) => (a.slug > b.slug ? 1 : -1))
+        )
+      }
     }
-  }, [search, fuses])
+  }, [search, fuses, emptyResults])
 
   return results
 }

src/scripts/getYearlyStats.ts

@@ -43,6 +43,19 @@ export const getMatomoStats = async () => {
       .filter((event) => event.label.startsWith('Quiz_'))
       .reduce((acc, event) => acc + event.nb_events, 0)
   )
+
+  console.log(
+    'Vue iframe comparateur :',
+    allEventsByCategory
+      .filter((event) => event.Events_EventAction && event.Events_EventAction.includes('iframes/comparateur?'))
+      .reduce((acc, event) => acc + event.nb_visits, 0)
+  )
+  console.log(
+    'Vue iframe transport :',
+    allEventsByCategory
+      .filter((event) => event.Events_EventAction && event.Events_EventAction.includes('iframes/transport'))
+      .reduce((acc, event) => acc + event.nb_visits, 0)
+  )
 }
 
 getMatomoStats()

src/views/QuizInfographieIframe.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useMemo } from 'react'
+import useParamContext from 'src/providers/ParamProvider'
+import CategorySimulator from 'components/outils/CategorySimulator'
+import { getQuizEquivalents } from 'components/outils/quiz/question.config'
+import Shareable from 'components/shareable/Shareable'
+import { overScreenQuizInfographyValues } from 'components/shareable/overScreens/Values'
+
+const QuizInfographieIframe = () => {
+  const { language } = useParamContext()
+  const equivalents = useMemo(() => getQuizEquivalents(language), [language])
+
+  return (
+    <Shareable slug='quiz-infographie' tracking='Quiz infographie' overScreens={overScreenQuizInfographyValues}>
+      <CategorySimulator tracking='Quiz infographie' equivalents={equivalents} reverse />
+    </Shareable>
+  )
+}
+
+export default QuizInfographieIframe