Release 1.5.1

Changelog: 
- SEO / Google présente la version EN en deuxième lien [NGC-644] #555
- Now waiting for engine init before setting computed results #558
- Page de fin / Nouvelle version [NGC-814] #550
- Retire le formatage des situations + unformat uniquement les clés formatées [NGC-724] #554

package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@incubateur-ademe/nosgestesclimat": "2.4.0",
+    "@incubateur-ademe/nosgestesclimat": "2.4.1",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@next/bundle-analyzer": "^14.1.0",
@@ -72,6 +72,7 @@
     "recharts": "^2.12.3",
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "3.4.1",
+    "use-count-up": "^3.0.1",
     "uuid": "^9.0.1",
     "xlsx": "^0.18.5",
     "yargs": "^17.7.2",

src/app/(layout-with-navigation)/(simulation)/fin/_components/DocumentationBlock.tsx

@@ -0,0 +1,33 @@
+import BookClosedIcon from '@/components/icons/BookClosedIcon'
+import Trans from '@/components/translation/Trans'
+import { endClickDocumentation } from '@/constants/tracking/pages/end'
+import InlineLink from '@/design-system/inputs/InlineLink'
+import Title from '@/design-system/layout/Title'
+import { trackEvent } from '@/utils/matomo/trackEvent'
+
+export default function DocumentationBlock() {
+  return (
+    <div>
+      <Title tag="h2">
+        <Trans>Comment est calculée votre empreinte ?</Trans>
+      </Title>
+
+      <p>
+        <Trans>
+          Notre simulateur repose sur un modèle de données, dont l'intégralité
+          des calculs est documentée ; les données affichées sont directement
+          associées à votre test.
+        </Trans>
+      </p>
+
+      <InlineLink
+        href="/documentation/bilan"
+        className="flex items-center"
+        onClick={() => trackEvent(endClickDocumentation)}>
+        <BookClosedIcon className="mr-2 w-4 fill-primary-700" />
+
+        <Trans>Comprendre le calcul</Trans>
+      </InlineLink>
+    </div>
+  )
+}

src/app/(layout-with-navigation)/(simulation)/fin/_components/GetResultsByEmail.tsx

@@ -126,7 +126,7 @@ export default function GetResultsByEmail({
     <Card
       id="email-block"
       className={twMerge(
-        'rainbow-border items-start rounded-xl p-6 shadow-none',
+        'rainbow-border items-start rounded-xl px-4 py-6 shadow-none',
         className
       )}>
       <form
@@ -135,7 +135,7 @@ export default function GetResultsByEmail({
         onSubmit={handleSubmit(onSubmit)}>
         <h3 className="flex items-center text-base sm:text-lg">
           <Trans>
-            Vous souhaitez recevoir vos résultats d’empreinte carbone ?
+            Vous souhaitez recevoir vos résultats d’empreinte carbone ?
           </Trans>
 
           <Emoji>💡</Emoji>
@@ -167,7 +167,7 @@ export default function GetResultsByEmail({
           {(!isSubscribedMainNewsletter ||
             !isSubscribedTransportNewsletter) && (
             <p className="mb-0">
-              <Trans>Recevez des conseils pour réduire votre empreinte :</Trans>
+              <Trans>Recevez des conseils pour réduire votre empreinte :</Trans>
             </p>
           )}
 
@@ -191,7 +191,7 @@ export default function GetResultsByEmail({
                 <span>
                   <Emoji>🚗</Emoji>{' '}
                   <Trans>
-                    <strong>Nos Gestes Transports</strong> : maîtrisez l'impact
+                    <strong>Nos Gestes Transports</strong> : maîtrisez l'impact
                     carbone de vos transports avec nos 4 infolettres
                   </Trans>
                 </span>

src/app/(layout-with-navigation)/(simulation)/fin/_components/Heading.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import Trans from '@/components/translation/Trans'
+import Title from '@/design-system/layout/Title'
+import HeadingButtons from './heading/HeadingButtons'
+
+export default function Heading() {
+  return (
+    <>
+      <div className="mb-4 flex flex-wrap items-start justify-between">
+        <Title
+          className="text-lg md:text-2xl"
+          title={<Trans>Mon empreinte</Trans>}
+        />
+        <HeadingButtons endPage />
+      </div>
+    </>
+  )
+}

src/app/(layout-with-navigation)/(simulation)/fin/_components/ShareBlock.tsx

@@ -0,0 +1,22 @@
+import { endClickShare } from '@/constants/tracking/pages/end'
+import CopyInput from '@/design-system/inputs/CopyInput'
+import Title from '@/design-system/layout/Title'
+import { useEndPageSharedUrl } from '@/hooks/useEndPageSharedUrl'
+import { trackEvent } from '@/utils/matomo/trackEvent'
+
+export default function ShareBlock() {
+  const { sharedUrl } = useEndPageSharedUrl()
+
+  return (
+    <div id="share-block" className="">
+      <Title tag="h2">Partager mon résultat</Title>
+
+      <CopyInput
+        textToCopy={sharedUrl}
+        textToDisplay={sharedUrl}
+        canShare
+        onClick={() => trackEvent(endClickShare)}
+      />
+    </div>
+  )
+}

src/app/(layout-with-navigation)/(simulation)/fin/_components/SmallFootprint.tsx

@@ -0,0 +1,27 @@
+import Trans from '@/components/translation/Trans'
+import Title from '@/design-system/layout/Title'
+import Actions from './subcategories/subcategory/Actions'
+
+export default function SmallFootprint() {
+  return (
+    <div>
+      <Title
+        tag="h2"
+        subtitle={
+          <Trans>
+            Vous êtes très nettement en dessous de la moyenne française.
+          </Trans>
+        }>
+        Bien joué 👏
+      </Title>
+      <p>
+        <Trans>
+          Il y a de grandes chances que votre temps soit plus efficace à{' '}
+          <strong>convaincre et aider les autres</strong> qu'à chercher à gagner
+          vos "tonnes en trop".
+        </Trans>
+      </p>
+      <Actions subcategory="ui . pédagogie . empreinte faible" shouldHideLink />
+    </div>
+  )
+}

src/app/(layout-with-navigation)/(simulation)/fin/_components/Subcategories.tsx

@@ -0,0 +1,25 @@
+import { useSortedSubcategoriesByFootprint } from '@/hooks/useSortedSubcategoriesByFootprint'
+import { useSortedUiCategoriesByFootprint } from '@/hooks/useSortedUiCategoriesByFootprint'
+import Subcategory from './subcategories/Subcategory'
+
+export default function Subcategories() {
+  const { sortedSubcategories } = useSortedSubcategoriesByFootprint()
+
+  const { sortedUiCategories } = useSortedUiCategoriesByFootprint()
+
+  const firstThreeSubcategories = (
+    sortedUiCategories.length > 0 ? sortedUiCategories : sortedSubcategories
+  ).slice(0, 3)
+
+  return (
+    <>
+      {firstThreeSubcategories.map((subcategory, index) => (
+        <Subcategory
+          key={subcategory}
+          subcategory={subcategory}
+          index={index}
+        />
+      ))}
+    </>
+  )
+}

src/app/(layout-with-navigation)/(simulation)/fin/_components/TargetBlock.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import Link from '@/components/Link'
+import CloseIcon from '@/components/icons/Close'
+import DownArrow from '@/components/icons/DownArrow'
+import Trans from '@/components/translation/Trans'
+import { endToggleTargetBlock } from '@/constants/tracking/pages/end'
+import ExternalLinkIcon from '@/design-system/icons/ExternalLinkIcon'
+import Button from '@/design-system/inputs/Button'
+import Title from '@/design-system/layout/Title'
+import { trackEvent } from '@/utils/matomo/trackEvent'
+import { useState } from 'react'
+import { twMerge } from 'tailwind-merge'
+import Hedgehog from './targetBlock/Hedgehog'
+import HedgehogAwareness from './targetBlock/HedgehogAwareness'
+import TargetChart from './targetBlock/TargetChart'
+import TargetQuestions from './targetBlock/TargetQuestions'
+
+export default function TargetBlock() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const [isHedgehog, setIsHedgehog] = useState(false)
+
+  const [isQuestionOpen, setIsQuestionOpen] = useState(false)
+
+  return (
+    <div className="relative">
+      <Hedgehog setIsHedgehog={setIsHedgehog} />
+      <div className="short:py-2 relative rounded-xl border-2 border-primary-50 bg-gray-100 px-4 py-6">
+        {isHedgehog ? (
+          <HedgehogAwareness />
+        ) : (
+          <>
+            <div className={twMerge('lg:hidden', isOpen ? '' : '-mb-8')}>
+              <Title
+                tag="h2"
+                className="text-lg lg:text-2xl"
+                hasSeparator={isOpen}
+                title={
+                  <Trans>
+                    <strong className="font-black text-secondary-700">
+                      2 tonnes
+                    </strong>{' '}
+                    en 2050 ?
+                  </Trans>
+                }
+              />
+            </div>
+            <div className="hidden lg:block">
+              <Title
+                tag="h2"
+                className=" text-lg lg:text-2xl"
+                title={
+                  <Trans>
+                    <strong className="font-black text-secondary-700">
+                      2 tonnes
+                    </strong>{' '}
+                    en 2050 ?
+                  </Trans>
+                }
+              />
+            </div>
+            <div
+              className={twMerge(
+                'lg:block',
+                isOpen || isHedgehog ? 'block' : 'hidden'
+              )}>
+              <p>
+                <Trans>
+                  C’est l’objectif à atteindre pour espérer limiter le
+                  réchauffement climatique à 2 degrés.
+                </Trans>
+              </p>
+              <TargetChart isQuestionOpen={isQuestionOpen} />
+              <TargetQuestions setIsQuestionOpen={setIsQuestionOpen} />
+              <div className="flex justify-end">
+                <Link
+                  className="text-sm"
+                  href="/empreinte-climat"
+                  target="_blank">
+                  En savoir plus{' '}
+                  <ExternalLinkIcon className="stroke-primary-700" />
+                </Link>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+      <Button
+        color={isOpen || isHedgehog ? 'text' : 'primary'}
+        className={twMerge(
+          'absolute right-4 top-4 h-12 w-12 p-0 lg:hidden',
+          isHedgehog ? '!block' : ''
+        )}
+        onClick={() => {
+          setIsOpen((prevIsOpen) => !prevIsOpen)
+          setIsHedgehog(false)
+          trackEvent(endToggleTargetBlock)
+        }}>
+        {isOpen || isHedgehog ? (
+          <CloseIcon className="h-7 w-7 fill-primary-700" />
+        ) : (
+          <DownArrow className="h-7 w-7 fill-white" />
+        )}
+      </Button>
+    </div>
+  )
+}