incubateur-ademe · bjlaa · Feb 6, 2025 · Feb 6, 2025 · Feb 10, 2025 · Feb 10, 2025
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/src/app/(simulation)/simulateur/[root]/_components/Simulateur.tsx b/src/app/(simulation)/simulateur/[root]/_components/Simulateur.tsx
@@ -22,7 +22,7 @@ export default function Simulateur({
   }
 
   return (
-    <div className="flex flex-1 flex-col px-4 pb-16 pt-16 md:pt-20 lg:px-0">
+    <div className="flex flex-1 flex-col px-4 py-16 md:pt-20 lg:px-0">
       {isQuestionListOpen && (
         <Summary
           toggleQuestionList={toggleQuestionList}

diff --git a/src/app/(simulation)/tutoriel/page.tsx b/src/app/(simulation)/tutoriel/page.tsx
@@ -32,7 +32,7 @@ export async function generateMetadata() {
 export default async function Tutoriel() {
   return (
     <ContentLarge className="mt-10 px-4 lg:px-0">
-      <div className="mx-auto flex h-screen max-w-3xl flex-col overflow-auto">
+      <div className="mx-auto flex max-w-3xl flex-col overflow-auto">
         <Title
           data-cypress-id="tutoriel-title"
           className="text-lg md:text-2xl"
@@ -48,24 +48,15 @@ export default async function Tutoriel() {
 
         <AvantDeCommencer />
 
-        <AutresQuestions />
-
-        {/* Check if body has the "iframe-mode" class name and if so add the static class to the footer */}
-        <div
-          className={twMerge(
-            'tutorial-footer fixed bottom-0 left-0 right-0 z-50 border-t-2 border-primary-200 bg-gray-100 py-3'
-          )}>
-          <div
-            className={twMerge(
-              'relative mx-auto flex w-full max-w-3xl justify-between gap-4 px-4 md:px-0 lg:justify-start'
-            )}>
-            <ButtonBack />
+        <div className={twMerge('mb-12 flex w-full gap-4 sm:px-4 md:px-0 ')}>
+          <ButtonBack />
 
-            <OrganisationMessage />
+          <OrganisationMessage />
 
-            <ButtonStart />
-          </div>
+          <ButtonStart />
         </div>
+
+        <AutresQuestions />
       </div>
     </ContentLarge>
   )

diff --git a/src/app/accueil-iframe/page.tsx b/src/app/accueil-iframe/page.tsx
@@ -0,0 +1,102 @@
+import DynamicCTAButtons from '@/components/cta/DynamicCTAButtons'
+import Partners from '@/components/landing-pages/Partners'
+import Trans from '@/components/translation/Trans'
+import { noIndexObject } from '@/constants/metadata'
+import { trackingActionClickCTA } from '@/constants/tracking/actions'
+import LandingPage from '@/design-system/layout/LandingPage'
+import { getServerTranslation } from '@/helpers/getServerTranslation'
+import { getMetadataObject } from '@/helpers/metadata/getMetadataObject'
+import {
+  getLandingClickCTARestart,
+  getLandingClickCTAResults,
+  getLandingClickCTAResume,
+  getLandingClickCTAStart,
+} from '@/helpers/tracking/landings'
+import { headers } from 'next/headers'
+import InteractiveIllustration from '../_components/InteractiveIllustration'
+
+export async function generateMetadata() {
+  const { t } = await getServerTranslation()
+  return getMetadataObject({
+    title: t('Calculez votre empreinte carbone et eau en 10 minutes !'),
+    description: t(
+      "2 millions de personnes ont déjà calculé leur empreinte sur le climat avec le calculateur Nos Gestes Climat ! Et vous, qu'attendez-vous pour faire le test ?"
+    ),
+    image: '/images/misc/calculer-empreinte-carbone-et-eau.png',
+    alternates: {
+      canonical: '',
+    },
+    robots: noIndexObject,
+  })
+}
+
+export default async function Homepage() {
+  const headersList = headers()
+  const pathname = headersList.get('x-pathname') || '/'
+
+  return (
+    <>
+      <LandingPage
+        heroIllustration={<InteractiveIllustration />}
+        heroTitle={<Trans>Connaissez-vous votre empreinte écologique ?</Trans>}
+        heroDescription={
+          <div className="flex flex-col items-center gap-6 md:items-start md:gap-10">
+            <p className="mb-0 text-base md:order-1 md:text-2xl">
+              <Trans>
+                Calculez votre{' '}
+                <strong className="text-primary-700">empreinte carbone</strong>{' '}
+                et votre{' '}
+                <strong className="text-primary-700">empreinte eau</strong> en{' '}
+                <strong className="text-secondary-700">
+                  seulement 10 minutes
+                </strong>
+                .
+              </Trans>
+            </p>
+
+            <div className="flex flex-col items-center gap-6 md:order-2 md:mt-0 md:max-w-[300px] md:items-start">
+              <DynamicCTAButtons
+                trackingEvents={{
+                  start: getLandingClickCTAStart(
+                    pathname,
+                    trackingActionClickCTA
+                  ),
+                  resume: getLandingClickCTAResume(
+                    pathname,
+                    trackingActionClickCTA
+                  ),
+                  results: getLandingClickCTAResults(
+                    pathname,
+                    trackingActionClickCTA
+                  ),
+                  restart: getLandingClickCTARestart(
+                    pathname,
+                    trackingActionClickCTA
+                  ),
+                }}
+                className="w-full"
+              />
+
+              {/* Displayed on mobile only */}
+              <div className="mx-auto mt-4 max-w-80 md:mt-0 md:hidden">
+                <InteractiveIllustration />
+              </div>
+
+              {/* Displayed on desktop only */}
+              <p>
+                <Trans>
+                  <strong className="text-primary-700">
+                    2 millions de personnes
+                  </strong>{' '}
+                  ont déjà calculé leur empreinte !
+                </Trans>
+              </p>
+            </div>
+          </div>
+        }
+        heroPartners={<Partners />}>
+        <></>
+      </LandingPage>
+    </>
+  )
+}