Mise à jour de la page Outil Numérique

packages/site/app/contact/ContactForm.tsx

@@ -2,10 +2,11 @@
 
 import {ToastFloater} from '@components/floating-ui/ToastFloater';
 import classNames from 'classnames';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import {supabase} from '../initSupabase';
 import {options} from './data';
 import {Button} from '@tet/ui';
+import {useRouter, useSearchParams} from 'next/navigation';
 
 type FormData = {
   categorie: string;
@@ -29,6 +30,11 @@ const ContactForm = () => {
   const [formData, setFormData] = useState<FormData>(initFormData);
   const [status, setStatus] = useState<'success' | 'error' | null>(null);
 
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const isContactPanier = searchParams.get('panier') === 'true' ? true : false;
+
   const handleChange = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -66,6 +72,9 @@ const ContactForm = () => {
     if (data) {
       setStatus('success');
       setFormData(initFormData);
+      if (isContactPanier) {
+        router.push('/contact');
+      }
     } else if (error) {
       console.error(error);
       setStatus('error');
@@ -75,6 +84,29 @@ const ContactForm = () => {
     }
   };
 
+  useEffect(() => {
+    if (isContactPanier) {
+      const stringToFind = "Informations sur le panier d'actions à impact";
+      const optionGroup = options.find(opt =>
+        opt.options.some(o => o.label === stringToFind),
+      );
+      const option = optionGroup?.options.find(
+        opt => opt.label === stringToFind,
+      );
+
+      if (optionGroup && option) {
+        setFormData(prevState => ({
+          ...prevState,
+          categorie: optionGroup.group,
+          objet: option,
+          message:
+            'Bonjour, le panier d’actions à impact m’intéresse. Pourriez vous me recontacter ?',
+        }));
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <form onSubmit={handleSubmit}>
@@ -89,6 +121,7 @@ const ContactForm = () => {
             required
             onChange={handleChangeSelect}
             value={formData.objet.value}
+            disabled={isContactPanier}
           >
             <option value="" disabled hidden>
               Selectionnez une option
@@ -161,6 +194,7 @@ const ContactForm = () => {
             required
             onChange={handleChange}
             value={formData.message}
+            disabled={isContactPanier}
           />
         </div>
 

packages/site/app/contact/data.ts

@@ -37,13 +37,17 @@ export const options = [
         value: 7,
         label: 'Questions sur l’utilisation de la plateforme',
       },
+      {
+        value: 8,
+        label: "Informations sur le panier d'actions à impact",
+      },
     ],
   },
   {
     group: 'Aucun de ces sujets ?',
     options: [
       {
-        value: 8,
+        value: 9,
         label: 'Autre',
       },
     ],

packages/site/app/faq/ListeQuestions.tsx

@@ -1,31 +1,69 @@
 'use client';
 
-import {Accordion} from '@tet/ui';
+import {Accordion, Tab, Tabs} from '@tet/ui';
 import {FaqData} from './page';
 import Markdown from '@components/markdown/Markdown';
+import {useCallback, useEffect, useState} from 'react';
+import {usePathname, useRouter, useSearchParams} from 'next/navigation';
+
+const onglets = [
+  {title: 'Le programme Territoire Engagé', param: 'programme'},
+  {title: "L'outil numérique", param: 'outil-numerique'},
+];
 
 type ListeQuestionsProps = {
   questions: FaqData[];
 };
 
 const ListeQuestions = ({questions}: ListeQuestionsProps) => {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const ongletParam = searchParams.get('onglet');
+  const currentTab = ongletParam
+    ? onglets.findIndex(onglet => onglet.param === ongletParam)
+    : 0;
+
+  const handleChangeTab = (activeTab: number) => {
+    router.push(`${pathname}?onglet=${onglets[activeTab].param}`);
+  };
+
+  useEffect(() => {
+    if (currentTab === -1)
+      router.push(`${pathname}?onglet=${onglets[0].param}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
-    <div className="flex flex-col gap-4">
-      {questions.map(q => (
-        <div key={q.id}>
-          <Accordion
-            id={q.id.toString()}
-            title={q.titre}
-            content={
-              <Markdown
-                texte={q.contenu}
-                className="px-10 pt-6 border border-t-0 border-grey-4 rounded-b-lg"
-              />
-            }
-          />
-        </div>
+    <Tabs
+      defaultActiveTab={currentTab}
+      onChange={handleChangeTab}
+      tabsListClassName="!flex !w-fit !mx-auto"
+    >
+      {onglets.map((onglet, index) => (
+        <Tab key={index} label={onglet.title}>
+          <div className="flex flex-col gap-4">
+            {questions
+              .filter(question => question.onglet === onglet.title)
+              .map(q => (
+                <div key={q.id}>
+                  <Accordion
+                    id={q.id.toString()}
+                    title={q.titre}
+                    content={
+                      <Markdown
+                        texte={q.contenu}
+                        className="px-10 pt-6 border border-t-0 border-grey-4 rounded-b-lg bg-white"
+                      />
+                    }
+                  />
+                </div>
+              ))}
+          </div>
+        </Tab>
       ))}
-    </div>
+    </Tabs>
   );
 };
 

packages/site/app/faq/page.tsx

@@ -6,6 +6,7 @@ import {fetchCollection} from 'src/strapi/strapi';
 import {sortByRank} from 'src/utils/sortByRank';
 import ContactEquipe from './ContactEquipe';
 import ListeQuestions from './ListeQuestions';
+import NoResult from '@components/info/NoResult';
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
@@ -17,6 +18,7 @@ export type FaqData = {
   id: number;
   titre: string;
   contenu: string;
+  onglet: string;
 };
 
 const getData = async () => {
@@ -27,6 +29,7 @@ const getData = async () => {
         id: d.id,
         titre: d.attributes.Titre as unknown as string,
         contenu: d.attributes.Contenu as unknown as string,
+        onglet: d.attributes.onglet as unknown as string,
       }))
     : null;
 
@@ -36,14 +39,16 @@ const getData = async () => {
 const Faq = async () => {
   const questions: FaqData[] | null = await getData();
 
-  return (
+  return questions && questions.length > 0 ? (
     <>
-      <Section>
-        <h1>Questions fréquentes</h1>
+      <Section containerClassName="bg-primary-0">
+        <h1 className="text-center">Questions fréquentes</h1>
         {questions && <ListeQuestions questions={questions} />}
       </Section>
       <ContactEquipe />
     </>
+  ) : (
+    <NoResult />
   );
 };
 

packages/site/app/layout.tsx

@@ -16,10 +16,10 @@ export async function generateMetadata(): Promise<Metadata> {
 
   return {
     title: {
-      default: data.metaTitle ?? 'Territoires en Transitions',
-      template: `%s | ${data.metaTitle ?? 'Territoires en Transitions'}`,
+      default: data?.metaTitle ?? 'Territoires en Transitions',
+      template: `%s | ${data?.metaTitle ?? 'Territoires en Transitions'}`,
     },
-    description: data.metaDescription,
+    description: data?.metaDescription,
     icons: {
       icon: '/favicon.ico',
       other: [
@@ -48,11 +48,11 @@ export async function generateMetadata(): Promise<Metadata> {
       card: 'summary_large_image',
     },
     openGraph: {
-      title: data.metaTitle ?? 'Territoires en Transitions',
-      description: data.metaDescription,
+      title: data?.metaTitle ?? 'Territoires en Transitions',
+      description: data?.metaDescription,
       url: 'https://www.territoiresentransitions.fr',
-      siteName: data.metaTitle ?? 'Territoires en Transitions',
-      images: data.metaImage
+      siteName: data?.metaTitle ?? 'Territoires en Transitions',
+      images: data?.metaImage
         ? [
             {
               url: data.metaImage.url,