From 7aa01057d6dda5e54b3871dfedbe6545f630dfd6 Mon Sep 17 00:00:00 2001
From: Marine Heckler <53305047+mariheck@users.noreply.github.com>
Date: Wed, 16 Oct 2024 09:49:20 +0200
Subject: [PATCH] =?UTF-8?q?feat(site):=20Mise=20=C3=A0=20jour=20du=20formu?=
 =?UTF-8?q?laire=20de=20contact=20(#3339)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/site/app/contact/ContactForm.tsx     | 263 ++++++++++--------
 packages/site/app/contact/data.ts             |   6 +-
 packages/site/app/contact/page.tsx            |  32 +--
 packages/site/components/icones/PhoneIcon.tsx |  17 --
 packages/ui/src/design-system/Alert/Alert.tsx |  13 +-
 supabase/functions/site_send_message/index.ts |   8 +-
 6 files changed, 184 insertions(+), 155 deletions(-)
 delete mode 100644 packages/site/components/icones/PhoneIcon.tsx

diff --git a/packages/site/app/contact/ContactForm.tsx b/packages/site/app/contact/ContactForm.tsx
index 5baac9bd20..aa7f5850b6 100644
--- a/packages/site/app/contact/ContactForm.tsx
+++ b/packages/site/app/contact/ContactForm.tsx
@@ -5,7 +5,16 @@ import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import { supabase } from '../initSupabase';
 import { options } from './data';
-import { Button, useEventTracker } from '@tet/ui';
+import {
+  Button,
+  Field,
+  FormSectionGrid,
+  Input,
+  OptionValue,
+  Select,
+  Textarea,
+  useEventTracker,
+} from '@tet/ui';
 import { useRouter, useSearchParams } from 'next/navigation';
 
 type FormData = {
@@ -14,6 +23,7 @@ type FormData = {
   prenom: string;
   nom: string;
   email: string;
+  tel: string;
   message: string;
 };
 
@@ -23,12 +33,14 @@ const initFormData: FormData = {
   prenom: '',
   nom: '',
   email: '',
+  tel: '',
   message: '',
 };
 
 const ContactForm = () => {
   const [formData, setFormData] = useState<FormData>(initFormData);
   const [status, setStatus] = useState<'success' | 'error' | null>(null);
+  const [isError, setIsError] = useState(false);
 
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -47,44 +59,54 @@ const ContactForm = () => {
     });
   };
 
-  const handleChangeSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const option = event.target.options[event.target.selectedIndex];
-    const categorie = option.closest('optgroup')?.label ?? '';
+  const handleChangeSelect = (value: OptionValue) => {
+    const categorie = options.find((opt) =>
+      opt.options.some((o) => o.value === value)
+    );
+    const option = categorie?.options.find((opt) => opt.value === value);
 
     setFormData((prevState) => ({
       ...prevState,
-      categorie,
-      objet: { value: event.target.value, label: option.innerText },
+      categorie: categorie?.title ?? '',
+      objet: option ?? { value: '', label: '' },
     }));
   };
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    const sentData = {
-      ...formData,
-      objet: formData.objet.label,
-    };
-
-    const { data, error } = await supabase.functions.invoke(
-      'site_send_message',
-      {
-        body: sentData,
-      }
-    );
-
-    if (data) {
-      setStatus('success');
-      setFormData(initFormData);
-      if (objet !== null) {
-        router.push('/contact');
-      }
-    } else if (error) {
-      console.error(error);
-      setStatus('error');
+    if (
+      !formData.objet ||
+      !formData.nom ||
+      !formData.prenom ||
+      !formData.email
+    ) {
+      setIsError(true);
     } else {
-      console.error('site_send_message : aucune donnée reçue');
-      setStatus('error');
+      setIsError(false);
+      const sentData = {
+        ...formData,
+        objet: formData.objet.label,
+      };
+      const { data, error } = await supabase.functions.invoke(
+        'site_send_message',
+        {
+          body: sentData,
+        }
+      );
+      if (data) {
+        setStatus('success');
+        setFormData(initFormData);
+        if (objet !== null) {
+          router.push('/contact');
+        }
+      } else if (error) {
+        console.error(error);
+        setStatus('error');
+      } else {
+        console.error('site_send_message : aucune donnée reçue');
+        setStatus('error');
+      }
     }
   };
 
@@ -105,7 +127,7 @@ const ContactForm = () => {
       if (optionGroup && option) {
         setFormData((prevState) => ({
           ...prevState,
-          categorie: optionGroup.group,
+          categorie: optionGroup.title,
           objet: option,
           message:
             objet === 'panier'
@@ -124,97 +146,110 @@ const ContactForm = () => {
           handleSubmit(event);
           tracker('envoyer_message', {});
         }}
+        className="border border-grey-4 rounded-lg max-md:p-4 md:max-lg:p-10 p-20"
       >
-        <div className="fr-input-group">
-          <label className="fr-label" htmlFor="input-objet">
-            Objet de votre message
-          </label>
-          <select
-            className="fr-select"
-            id="objet"
-            name="objet"
-            required
-            onChange={handleChangeSelect}
-            value={formData.objet.value}
-            disabled={objet !== null}
+        <FormSectionGrid>
+          <Field
+            title="Objet de votre message *"
+            className="col-span-2"
+            state={isError && !formData.objet.value ? 'error' : 'default'}
+            message={
+              isError && !formData.objet.value
+                ? 'Ce champ est obligatoire'
+                : undefined
+            }
           >
-            <option value="" disabled hidden>
-              Selectionnez une option
-            </option>
-            {options.map((group) => (
-              <optgroup key={group.group} label={group.group}>
-                {group.options.map((opt) => (
-                  <option key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </option>
-                ))}
-              </optgroup>
-            ))}
-          </select>
-        </div>
+            <Select
+              options={options}
+              onChange={handleChangeSelect}
+              values={formData.objet.value}
+              disabled={objet !== null}
+            />
+          </Field>
 
-        <div className="fr-input-group">
-          <label className="fr-label" htmlFor="input-name">
-            Votre prénom
-          </label>
-          <input
-            className="fr-input"
-            type="text"
-            id="prenom"
-            name="prenom"
-            required
-            onChange={handleChange}
-            value={formData.prenom}
-          />
-        </div>
+          <Field
+            title="Votre prénom *"
+            className="max-md:col-span-2"
+            state={isError && !formData.prenom ? 'error' : 'default'}
+            message={
+              isError && !formData.prenom
+                ? 'Ce champ est obligatoire'
+                : undefined
+            }
+          >
+            <Input
+              type="text"
+              id="prenom"
+              name="prenom"
+              onChange={handleChange}
+              value={formData.prenom}
+            />
+          </Field>
 
-        <div className="fr-input-group">
-          <label className="fr-label" htmlFor="input-surname">
-            Votre nom
-          </label>
-          <input
-            className="fr-input"
-            type="text"
-            id="nom"
-            name="nom"
-            required
-            onChange={handleChange}
-            value={formData.nom}
-          />
-        </div>
+          <Field
+            title="Votre nom *"
+            className="max-md:col-span-2"
+            state={isError && !formData.nom ? 'error' : 'default'}
+            message={
+              isError && !formData.nom ? 'Ce champ est obligatoire' : undefined
+            }
+          >
+            <Input
+              type="text"
+              id="nom"
+              name="nom"
+              onChange={handleChange}
+              value={formData.nom}
+            />
+          </Field>
 
-        <div className="fr-input-group">
-          <label className="fr-label" htmlFor="input-email">
-            Votre adresse email professionnelle
-          </label>
-          <input
-            className="fr-input"
-            type="email"
-            id="email"
-            name="email"
-            required
-            onChange={handleChange}
-            value={formData.email}
-          />
-        </div>
+          <Field
+            title="Votre adresse email professionnelle *"
+            className="max-md:col-span-2"
+            state={isError && !formData.email ? 'error' : 'default'}
+            message={
+              isError && !formData.email
+                ? 'Ce champ est obligatoire'
+                : undefined
+            }
+          >
+            <Input
+              type="text"
+              id="email"
+              name="email"
+              onChange={handleChange}
+              value={formData.email}
+            />
+          </Field>
 
-        <div className="fr-input-group">
-          <label className="fr-label" htmlFor="input-message">
-            Votre message
-          </label>
-          <textarea
-            className="fr-input"
-            id="message"
-            name="message"
-            required
-            onChange={handleChange}
-            value={formData.message}
-          />
-        </div>
+          <Field
+            title="Votre numéro de téléphone"
+            className="max-md:col-span-2"
+            message="Ce champ nous permet de vous recontacter plus rapidement en fonction de votre demande"
+          >
+            <Input
+              type="tel"
+              id="tel"
+              name="tel"
+              onChange={handleChange}
+              value={formData.tel}
+            />
+          </Field>
 
-        <div className="flex justify-end">
-          <Button>Envoyer</Button>
-        </div>
+          <Field title="Votre message" className="col-span-2">
+            <Textarea
+              id="message"
+              name="message"
+              onChange={handleChange}
+              value={formData.message}
+              rows={5}
+            />
+          </Field>
+        </FormSectionGrid>
+
+        <Button type="submit" className="ml-auto mt-6">
+          Envoyer
+        </Button>
       </form>
 
       <ToastFloater
diff --git a/packages/site/app/contact/data.ts b/packages/site/app/contact/data.ts
index 29c6e8ace8..32c94e9ef7 100644
--- a/packages/site/app/contact/data.ts
+++ b/packages/site/app/contact/data.ts
@@ -1,6 +1,6 @@
 export const options = [
   {
-    group:
+    title:
       'Questions relatives au programme Territoire Engagé Transition Écologique',
     options: [
       {
@@ -23,7 +23,7 @@ export const options = [
     ],
   },
   {
-    group: 'Questions relatives à la plateforme Territoires en transitions',
+    title: 'Questions relatives à la plateforme Territoires en transitions',
     options: [
       {
         value: 5,
@@ -44,7 +44,7 @@ export const options = [
     ],
   },
   {
-    group: 'Aucun de ces sujets ?',
+    title: 'Aucun de ces sujets ?',
     options: [
       {
         value: 9,
diff --git a/packages/site/app/contact/page.tsx b/packages/site/app/contact/page.tsx
index 67c7a72797..e61d9f4bab 100644
--- a/packages/site/app/contact/page.tsx
+++ b/packages/site/app/contact/page.tsx
@@ -3,12 +3,11 @@
 import NoResult from '@tet/site/components/info/NoResult';
 import Section from '@tet/site/components/sections/Section';
 import { StrapiImage } from '@tet/site/components/strapiImage/StrapiImage';
-import PhoneIcon from '@tet/site/components/icones/PhoneIcon';
 import ContactForm from './ContactForm';
 import { Metadata, ResolvingMetadata } from 'next';
 import { getStrapiData } from './utils';
 import { getUpdatedMetadata } from '@tet/site/src/utils/getUpdatedMetadata';
-import { TrackPageView } from '@tet/ui';
+import { Alert, TrackPageView } from '@tet/ui';
 
 export async function generateMetadata(
   params: { params: unknown },
@@ -33,23 +32,24 @@ const Contact = async () => {
       <TrackPageView pageName={'site/contact'} properties={{}} />
 
       {data ? (
-        <Section>
-          <h1>{data.titre ?? "Contacter l'équipe"}</h1>
+        <Section className="gap-6">
+          <h1 className="text-primary-8 mb-0">
+            {data.titre ?? "Contacter l'équipe"}
+          </h1>
 
-          {!!data.description && <p className="text-xl">{data.description}</p>}
+          {!!data.description && (
+            <p className="text-xl text-primary-10">{data.description}</p>
+          )}
+
+          <ContactForm />
 
-          <div className="p-4 md:p-14 lg:px-28 bg-gray-100 mb-6">
-            <p className="text-sm">Tous les champs sont obligatoires</p>
-            <ContactForm />
-          </div>
           {!!data.telephone && (
-            <div>
-              <p className="font-bold flex gap-2 mb-0">
-                <PhoneIcon />
-                Tél. : {data.telephone}
-              </p>
-              <p className="text-[#666]">{data.horaires}</p>
-            </div>
+            <Alert
+              title={`Tél. : ${data.telephone}`}
+              description={data.horaires}
+              customIcon="phone-fill"
+              rounded
+            />
           )}
 
           {!!data.couverture && (
diff --git a/packages/site/components/icones/PhoneIcon.tsx b/packages/site/components/icones/PhoneIcon.tsx
deleted file mode 100644
index 417a62821b..0000000000
--- a/packages/site/components/icones/PhoneIcon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-const PhoneIcon = ({className}: {className?: string}) => (
-  <svg
-    className={className}
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M18 13.42V16.956C18.0001 17.2092 17.9042 17.453 17.7316 17.6382C17.559 17.8234 17.3226 17.9363 17.07 17.954C16.633 17.984 16.276 18 16 18C7.163 18 0 10.837 0 2C0 1.724 0.015 1.367 0.046 0.93C0.0637224 0.677444 0.176581 0.441011 0.361804 0.268409C0.547026 0.0958068 0.790823 -0.000114433 1.044 2.56579e-07H4.58C4.70404 -0.000125334 4.8237 0.045859 4.91573 0.12902C5.00776 0.212182 5.0656 0.326583 5.078 0.45C5.101 0.68 5.122 0.863 5.142 1.002C5.34073 2.38892 5.748 3.73783 6.35 5.003C6.445 5.203 6.383 5.442 6.203 5.57L4.045 7.112C5.36445 10.1865 7.81455 12.6365 10.889 13.956L12.429 11.802C12.4919 11.714 12.5838 11.6509 12.6885 11.6237C12.7932 11.5964 12.9042 11.6068 13.002 11.653C14.267 12.2539 15.6156 12.6601 17.002 12.858C17.141 12.878 17.324 12.9 17.552 12.922C17.6752 12.9346 17.7894 12.9926 17.8724 13.0846C17.9553 13.1766 18.0012 13.2961 18.001 13.42H18Z"
-      fill="#161616"
-    />
-  </svg>
-);
-
-export default PhoneIcon;
diff --git a/packages/ui/src/design-system/Alert/Alert.tsx b/packages/ui/src/design-system/Alert/Alert.tsx
index 1892c6fc63..aa4bbeed06 100644
--- a/packages/ui/src/design-system/Alert/Alert.tsx
+++ b/packages/ui/src/design-system/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@tet/ui/design-system/Icon';
+import { Icon, IconValue } from '@tet/ui/design-system/Icon';
 import classNames from 'classnames';
 import { AlertState, alertClassnames, stateToIcon } from './utils';
 import { useState } from 'react';
@@ -12,10 +12,14 @@ type AlertProps = {
   footer?: React.ReactNode;
   /** Etat du bloc alerte */
   state?: AlertState;
+  /** Remplace l'icône par défaut */
+  customIcon?: IconValue;
   /** Initialisation de l'état open */
   isOpen?: boolean;
   /** Gestion de l'affichage pour les alertes sur toute la largeur de page */
   fullPageWidth?: boolean;
+  /** Arrondi des angles de la div */
+  rounded?: boolean;
   /** Classname custom */
   className?: string;
   /** Détecte la fermeture du bloc */
@@ -31,8 +35,10 @@ export const Alert = ({
   description,
   footer,
   state = 'info',
+  customIcon,
   isOpen = true,
   fullPageWidth = false,
+  rounded = false,
   className,
   onClose,
 }: AlertProps) => {
@@ -44,7 +50,7 @@ export const Alert = ({
   return (
     <div
       className={classNames(
-        { 'w-full px-4 lg:px-6': fullPageWidth },
+        { 'w-full px-4 lg:px-6': fullPageWidth, 'rounded-lg': rounded },
         styles.background,
         className
       )}
@@ -56,13 +62,14 @@ export const Alert = ({
             hidden: !isOpen,
             'px-4': !fullPageWidth,
             'w-full mx-auto xl:max-w-7xl 2xl:max-w-8xl': fullPageWidth,
+            'rounded-lg': rounded,
           },
           styles.background
         )}
       >
         {/* Icône à gauche du bloc */}
         <Icon
-          icon={stateToIcon[state]}
+          icon={customIcon ? customIcon : stateToIcon[state]}
           className={classNames('mt-0.5', styles.text)}
         />
 
diff --git a/supabase/functions/site_send_message/index.ts b/supabase/functions/site_send_message/index.ts
index 9cfd3adf2b..25f80ec40e 100644
--- a/supabase/functions/site_send_message/index.ts
+++ b/supabase/functions/site_send_message/index.ts
@@ -11,7 +11,8 @@ serve(async (req: Request) => {
   }
 
   try {
-    const { categorie, objet, prenom, nom, email, message } = await req.json();
+    const { categorie, objet, prenom, nom, email, tel, message } =
+      await req.json();
 
     let destEmail = '';
 
@@ -40,7 +41,9 @@ serve(async (req: Request) => {
         from: 'contact@territoiresentransitions.fr',
         to: destEmail,
         subject: `Homepage : ${objet}`,
-        html: `<p>De : ${prenom} ${nom} (${email})</p><p>${message}</p>`,
+        html: `<p>De : ${prenom} ${nom} (${email}${
+          tel !== '' ? `,Tél. : ${tel}` : ''
+        })</p><p>${message}</p>`,
       }),
     });
 
@@ -60,6 +63,7 @@ serve(async (req: Request) => {
           prenom,
           nom,
           email,
+          tel,
           message,
         }),
       })