incubateur-ademe · bjlaa · Oct 2, 2024 · Oct 2, 2024 · Oct 2, 2024 · Oct 3, 2024
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nosgestesclimat-site-nextjs",
   "license": "MIT",
-  "version": "2.9.4",
+  "version": "2.10.0",
   "description": "The leading open source climate footprint calculator",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.1",
     "@incubateur-ademe/legal-pages-react": "^0.2.0",
-    "@incubateur-ademe/nosgestesclimat": "3.5.1",
+    "@incubateur-ademe/nosgestesclimat": "3.5.4",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@next/bundle-analyzer": "^14.1.0",
@@ -67,6 +67,7 @@
     "next": "14.2.7",
     "next-i18n-router": "^4.1.1",
     "postcss": "8.4.36",
+    "posthog-js": "^1.217.2",
     "process": "^0.11.10",
     "publicodes": "1.4.0",
     "qrcode.react": "^3.1.0",

diff --git a/public/demo-iframeLazy.html b/public/demo-iframeLazy.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo Iframe Lazy</title>
+  </head>
+  <body>
+    <header>
+      <h2>iframe paramétré</h2>
+      <p>
+        Ci-dessous, nosgestesclimat.fr intégré comme un iframe paramétré. Son
+        chargement est déclenché lorsque l'utilisateur interagit avec la page.
+        Veuillez vous déplacer vers le bas de la page pour voir l'intégration.
+      </p>
+    </header>
+    <main style="margin-top: 1000px">
+      <script
+        id="nosgestesclimat"
+        src="/iframe.js"
+        data-share-data="true"></script>
+    </main>
+  </body>
+</html>
diff --git a/public/demo-iframeSimulationHomepage.html b/public/demo-iframeSimulationHomepage.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo Iframe Simulation with Homepage</title>
+  </head>
+  <body>
+    <header>
+      <h2>
+        Exemple d'intégration du test avec région fixée par l'intégrateur.
+      </h2>
+      <p>
+        Ci-dessous, nosgestesclimat.fr intégré comme un iframe paramétré pour
+        afficher uniquement le parcours utilisateur du test Nos Gestes Climat,
+        de la page d'accueil à la page de résultats.
+      </p>
+      <p>La hauteur de l'iframe est fixée à 500px.</p>
+    </header>
+    <main style="padding-bottom: 1000px; max-width: 600px">
+      <script
+        id="nosgestesclimat"
+        src="/iframeSimulation.js"
+        data-only-simulation="true"
+        data-with-homepage="true"
+        data-max-height="500"></script>
+    </main>
+  </body>
+</html>
diff --git a/public/iframe.js b/public/iframe.js
@@ -2,6 +2,10 @@ const script =
   document.getElementById('ecolab-climat') ||
   document.getElementById('nosgestesclimat')
 
+if (!script) {
+  console.error('Iframe Nos Gestes Climat: No target element found')
+}
+
 const integratorUrl = encodeURIComponent(window.location.href.toString())
 
 const srcURL = new URL(script.src)

diff --git a/public/iframeSimulation.js b/public/iframeSimulation.js
@@ -2,6 +2,10 @@ const script =
   document.getElementById('ecolab-climat') ||
   document.getElementById('nosgestesclimat')
 
+if (!script) {
+  console.error('Iframe Nos Gestes Climat: No target element found')
+}
+
 const integratorUrl = encodeURIComponent(window.location.href.toString())
 
 const srcURL = new URL(script.src)
@@ -13,24 +17,35 @@ const possibleOptions = [
   { key: 'lang' },
   { key: 'onlySimulation' },
   { key: 'pr' },
+  { key: 'withHomepage' },
+  { key: 'maxHeight' },
 ]
 
 const lang = script.dataset.lang
 
 const url = new URL(hostname)
 
-url.pathname = `/${lang ? lang + '/' : ''}simulateur/bilan`
+// Check if withHomepage is true
+const withHomepage = script.dataset.withHomepage
+
+if (withHomepage) {
+  url.pathname = `/${lang ? lang + '/accueil-iframe' : 'accueil-iframe'}`
+} else {
+  url.pathname = `/${lang ? lang + '/' : ''}simulateur/bilan`
+}
 
 url.searchParams.append('iframe', 'true')
 url.searchParams.append('integratorUrl', integratorUrl)
 
-possibleOptions.forEach(({ key, legacy }) => {
-  const value = script.dataset[key] || script.dataset[legacy]
+possibleOptions
+  .filter(({ key }) => key !== 'maxHeight')
+  .forEach(({ key, legacy }) => {
+    const value = script.dataset[key] || script.dataset[legacy]
 
-  if (value) {
-    url.searchParams.append(key === 'pr' ? 'PR' : key, value)
-  }
-})
+    if (value) {
+      url.searchParams.append(key === 'pr' ? 'PR' : key, value)
+    }
+  })
 
 const iframe = document.createElement('iframe')
 
@@ -41,20 +56,13 @@ const iframeAttributes = {
   mozallowfullscreen: true,
   allow: 'fullscreen',
   id: 'iframeNGC',
-  style: 'border: none; width: 100%; display: block; height: 801px;',
+  style: `border: none; width: 100%; display: block; height: 801px; ${
+    script.dataset.maxHeight ? `max-height: ${script.dataset.maxHeight}px;` : ''
+  }`,
 }
 
 for (var key in iframeAttributes) {
   iframe.setAttribute(key, iframeAttributes[key])
 }
 
 script.parentNode.insertBefore(iframe, script)
-
-window.addEventListener('message', function (evt) {
-  if (
-    evt.data.kind === 'resize-height' &&
-    iframe.style.height !== `${evt.data.value}px`
-  ) {
-    iframe.style.height = `${evt.data.value}px`
-  }
-})
diff --git a/public/images/actions/README.md b/public/images/actions/README.md
diff --git a/src/app/(large-layout)/stats/_components/StatsContent.tsx b/src/app/(large-layout)/stats/_components/StatsContent.tsx
@@ -12,7 +12,7 @@ import {
   useCurrentMonthWebsites,
   useGetSharedSimulationEvents,
 } from '@/helpers/matomo'
-import { useNumberSubscribers } from '@/hooks/useNumberSubscriber'
+import { useMainNewsletter } from '@/hooks/useMainNewsletter'
 import type { UseQueryResult } from '@tanstack/react-query'
 import AcquisitionBlock from './content/AcquisitionBlock'
 import MetabaseIframe from './content/MetabaseIframe'
@@ -70,7 +70,7 @@ export default function StatsContent() {
   const currentMonthWebsites = useCurrentMonthWebsites()
   const currentMonthSocials = useCurrentMonthSocials()
   const allSharedSimulationEvents = useGetSharedSimulationEvents()
-  const allSubscribers = useNumberSubscribers()
+  const { data: mainNewsletter } = useMainNewsletter()
 
   return (
     <div>
@@ -127,7 +127,7 @@ export default function StatsContent() {
             currentMonthIframeVisitsData,
           ]) => (
             <AcquisitionBlock
-              allSubscribers={allSubscribers}
+              mainNewsletter={mainNewsletter}
               allSharedSimulationEventsData={allSharedSimulationEventsData}
               currentMonthWebsitesData={currentMonthWebsitesData}
               currentMonthSocialsData={currentMonthSocialsData}

diff --git a/src/app/(large-layout)/stats/_components/content/AcquisitionBlock.tsx b/src/app/(large-layout)/stats/_components/content/AcquisitionBlock.tsx
@@ -1,11 +1,12 @@
 import Trans from '@/components/translation/Trans'
 import Card from '@/design-system/layout/Card'
 import { useLocale } from '@/hooks/useLocale'
+import type { Newsletter } from '@/hooks/useMainNewsletter'
 import { formatPercentage, formatValue } from '../utils/formatFigure'
 import Sources from './Sources'
 
 type Props = {
-  allSubscribers: any
+  mainNewsletter?: Newsletter
   allSharedSimulationEventsData: any
   currentMonthWebsitesData: any
   currentMonthSocialsData: any
@@ -14,7 +15,7 @@ type Props = {
 }
 
 export default function AcquisitionBlock({
-  allSubscribers,
+  mainNewsletter,
   allSharedSimulationEventsData,
   currentMonthWebsitesData,
   currentMonthSocialsData,
@@ -27,9 +28,11 @@ export default function AcquisitionBlock({
       <div className="mt-4">
         <div className="flex flex-row gap-4">
           <Card className="flex-1">
-            <strong className="text-3xl">
-              {formatValue(allSubscribers?.data, locale)}
-            </strong>{' '}
+            {!!mainNewsletter && (
+              <strong className="text-3xl">
+                {formatValue(mainNewsletter.totalSubscribers, locale)}
+              </strong>
+            )}
             <p className="mb-0 text-sm">
               <Trans>inscrits à l'infolettre</Trans>
             </p>

diff --git a/src/app/(simulation)/(large-layout)/actions/[...dottedName]/_components/ActionDetail.tsx b/src/app/(simulation)/(large-layout)/actions/[...dottedName]/_components/ActionDetail.tsx
@@ -14,7 +14,7 @@ import {
   useTempEngine,
   useUser,
 } from '@/publicodes-state'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import type { DottedName, NGCRuleNode } from '@incubateur-ademe/nosgestesclimat'
 import { utils } from 'publicodes'
 import ActionForm from '../../_components/actionsContent/actions/ActionForm'

diff --git a/src/app/(simulation)/(large-layout)/actions/_components/ActionsTutorial.tsx b/src/app/(simulation)/(large-layout)/actions/_components/ActionsTutorial.tsx
@@ -8,7 +8,7 @@ import Emoji from '@/design-system/utils/Emoji'
 import { getCarbonFootprint } from '@/helpers/actions/getCarbonFootprint'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
 import { useCurrentSimulation, useEngine, useUser } from '@/publicodes-state'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 
 export default function ActionsTutorial() {
   const { t, i18n } = useClientTranslation()

diff --git a/src/app/(simulation)/(large-layout)/actions/_components/actionsContent/AllerPlusLoin.tsx b/src/app/(simulation)/(large-layout)/actions/_components/actionsContent/AllerPlusLoin.tsx
@@ -6,7 +6,7 @@ import Trans from '@/components/translation/Trans'
 import { actionsClickAdeme } from '@/constants/tracking/pages/actions'
 import Card from '@/design-system/layout/Card'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 
 export default function AllerPlusLoin() {
   const { t } = useClientTranslation()

diff --git a/...app/(simulation)/(large-layout)/actions/_components/actionsContent/actions/ActionCard.tsx b/...app/(simulation)/(large-layout)/actions/_components/actionsContent/actions/ActionCard.tsx
@@ -26,7 +26,7 @@ import {
   useTempEngine,
   useUser,
 } from '@/publicodes-state'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import { encodeRuleName } from '@/utils/publicodes/encodeRuleName'
 import type { DottedName } from '@incubateur-ademe/nosgestesclimat'
 import { useCallback } from 'react'

diff --git a/...app/(simulation)/(large-layout)/actions/_components/actionsContent/actions/ActionList.tsx b/...app/(simulation)/(large-layout)/actions/_components/actionsContent/actions/ActionList.tsx
@@ -8,7 +8,7 @@ import {
   useEngine,
   useUser,
 } from '@/publicodes-state'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import { Fragment } from 'react'
 import ActionCard from './ActionCard'
 import ActionForm from './ActionForm'

diff --git a/...(simulation)/(large-layout)/actions/_components/actionsContent/categoryFilters/Filter.tsx b/...(simulation)/(large-layout)/actions/_components/actionsContent/categoryFilters/Filter.tsx
@@ -7,7 +7,7 @@ import {
   getTextDarkColor,
 } from '@/helpers/getCategoryColorClass'
 import { useRule } from '@/publicodes-state'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import type { DottedName } from '@incubateur-ademe/nosgestesclimat'
 import { useRouter, useSearchParams } from 'next/navigation'
 

diff --git a/.../(simulation)/(large-layout)/amis/creer/vos-informations/_component/GroupCreationForm.tsx b/.../(simulation)/(large-layout)/amis/creer/vos-informations/_component/GroupCreationForm.tsx
@@ -7,8 +7,8 @@ import EmailInput from '@/design-system/inputs/EmailInput'
 import PrenomInput from '@/design-system/inputs/PrenomInput'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
 import { useUser } from '@/publicodes-state'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import { formatEmail } from '@/utils/format/formatEmail'
-import { trackEvent } from '@/utils/matomo/trackEvent'
 import { useRouter } from 'next/navigation'
 import { useForm as useReactHookForm } from 'react-hook-form'
 

diff --git a/src/app/(simulation)/(large-layout)/amis/creer/votre-groupe/_components/NameForm.tsx b/src/app/(simulation)/(large-layout)/amis/creer/votre-groupe/_components/NameForm.tsx
@@ -11,8 +11,8 @@ import { useEndPage } from '@/hooks/navigation/useEndPage'
 import { useSimulateurPage } from '@/hooks/navigation/useSimulateurPage'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
 import { useCurrentSimulation, useUser } from '@/publicodes-state'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import { formatEmail } from '@/utils/format/formatEmail'
-import { trackEvent } from '@/utils/matomo/trackEvent'
 import { captureException } from '@sentry/react'
 import { useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'

diff --git a/src/app/(simulation)/(large-layout)/amis/resultats/_components/EditableGroupTitle.tsx b/src/app/(simulation)/(large-layout)/amis/resultats/_components/EditableGroupTitle.tsx
@@ -14,7 +14,7 @@ import { useIsGroupOwner } from '@/hooks/groups/useIsGroupOwner'
 import { useUpdateGroup } from '@/hooks/groups/useUpdateGroup'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
 import type { Group } from '@/types/groups'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import { captureException } from '@sentry/react'
 import { useState } from 'react'
 

diff --git a/src/app/(simulation)/(large-layout)/amis/resultats/_components/groupResults/InviteBlock.tsx b/src/app/(simulation)/(large-layout)/amis/resultats/_components/groupResults/InviteBlock.tsx
@@ -5,7 +5,7 @@ import { amisDashboardCopyLink } from '@/constants/tracking/pages/amisDashboard'
 import Button from '@/design-system/inputs/Button'
 import Emoji from '@/design-system/utils/Emoji'
 import type { Group } from '@/types/groups'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import { useEffect, useRef, useState } from 'react'
 
 const SubmitButton = ({

diff --git a/...(simulation)/(large-layout)/amis/resultats/_components/groupResults/OwnerAdminSection.tsx b/...(simulation)/(large-layout)/amis/resultats/_components/groupResults/OwnerAdminSection.tsx
@@ -12,7 +12,7 @@ import { linkToClassement } from '@/helpers/navigation/classementPages'
 import { useDeleteGroup } from '@/hooks/groups/useDeleteGroup'
 import { useUser } from '@/publicodes-state'
 import type { Group } from '@/types/groups'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import { captureException } from '@sentry/react'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState } from 'react'

diff --git a/.../(simulation)/(large-layout)/classements/_components/Organisations/CreateOrganisation.tsx b/.../(simulation)/(large-layout)/classements/_components/Organisations/CreateOrganisation.tsx
@@ -5,7 +5,7 @@ import Trans from '@/components/translation/Trans'
 import { classementCreateOrganisation } from '@/constants/tracking/pages/classements'
 import ButtonLink from '@/design-system/inputs/ButtonLink'
 import type { Organisation } from '@/types/organisations'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 
 type Props = {
   organisations?: Organisation[]

diff --git a/...ation)/(large-layout)/classements/_components/Organisations/pollList/OrganisationItem.tsx b/...ation)/(large-layout)/classements/_components/Organisations/pollList/OrganisationItem.tsx
@@ -6,7 +6,7 @@ import Trans from '@/components/translation/Trans'
 import { classementClickOrganisation } from '@/constants/tracking/pages/classements'
 import Badge from '@/design-system/layout/Badge'
 import type { Organisation } from '@/types/organisations'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 
 export default function OrganisationItem({
   organisation,

diff --git a/...p/(simulation)/(large-layout)/classements/_components/Organisations/pollList/PollItem.tsx b/...p/(simulation)/(large-layout)/classements/_components/Organisations/pollList/PollItem.tsx
@@ -6,7 +6,7 @@ import Trans from '@/components/translation/Trans'
 import { classementClickOrganisation } from '@/constants/tracking/pages/classements'
 import { getLinkToPollDashboard } from '@/helpers/navigation/pollPages'
 import type { Organisation, OrganisationPoll } from '@/types/organisations'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 
 type Props = {
   organisation: Organisation

diff --git a/...e-layout)/classements/_components/groups/createOtherGroupsSection/groupList/GroupItem.tsx b/...e-layout)/classements/_components/groups/createOtherGroupsSection/groupList/GroupItem.tsx
@@ -8,7 +8,7 @@ import Emoji from '@/design-system/utils/Emoji'
 import { getLinkToGroupDashboard } from '@/helpers/navigation/groupPages'
 import { useUser } from '@/publicodes-state'
 import type { Group } from '@/types/groups'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 
 type Props = {
   group: Group

diff --git a/src/app/(simulation)/(large-layout)/infos/_components/Navigation.tsx b/src/app/(simulation)/(large-layout)/infos/_components/Navigation.tsx
@@ -16,7 +16,7 @@ import {
 import Button from '@/design-system/inputs/Button'
 import ButtonLink from '@/design-system/inputs/ButtonLink'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 
 type Props = {
   linkToPrev: string

diff --git a/src/app/(simulation)/(large-layout)/infos/commencer/page.tsx b/src/app/(simulation)/(large-layout)/infos/commencer/page.tsx
@@ -13,7 +13,7 @@ import Emoji from '@/design-system/utils/Emoji'
 import { useSimulateurPage } from '@/hooks/navigation/useSimulateurPage'
 import { usePollQueryParams } from '@/hooks/organisations/usePollQueryParams'
 import { useCurrentSimulation } from '@/publicodes-state'
-import { trackEvent } from '@/utils/matomo/trackEvent'
+import { trackEvent } from '@/utils/analytics/trackEvent'
 import { useContext, useEffect, useState } from 'react'
 import { InfosContext } from '../_components/InfosProvider'