Localisation (#39)

* Localisation

* Update tests

* Fix map markers in English view

* Fix typo

components/ContactForm.tsx

@@ -1,10 +1,14 @@
 "use client";
 
-import { useState } from "react";
-import { handleEmailSubmit } from "@/handlers/formSubmitHandlers";
+import { useState, FormEvent } from "react";
+import { useTranslations } from "next-intl";
+
+import sendMail from "@/lib/sendMail";
+import { errorLog } from "@/utils/logger";
 import useContactForm from "@/hooks/useContactForm";
 
 const ContactForm = () => {
+  const t = useTranslations("Contact");
   const { values, handleChange, resetForm } = useContactForm();
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
@@ -12,6 +16,41 @@ const ContactForm = () => {
   });
   const [isSending, setIsSending] = useState(false);
 
+  const clearMessage = () => {
+    setTimeout(() => {
+      setResponseMessage({
+        isSuccessful: false,
+        message: "",
+      });
+    }, 10000);
+  };
+
+  const handleEmailSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsSending(true);
+    try {
+      const response = await sendMail(values);
+      if (response.status === 250) {
+        setResponseMessage({
+          isSuccessful: true,
+          message: t("success"),
+        });
+
+        resetForm();
+        clearMessage();
+        setIsSending(false);
+      }
+    } catch (error) {
+      errorLog(error);
+      setResponseMessage({
+        isSuccessful: false,
+        message: t("failure"),
+      });
+      clearMessage();
+      setIsSending(false);
+    }
+  };
+
   const infoMessage = (
     <p
       className={`${
@@ -25,31 +64,20 @@ const ContactForm = () => {
 
   return (
     <>
-      <form
-        onSubmit={(e) =>
-          handleEmailSubmit(
-            e,
-            values,
-            setResponseMessage,
-            resetForm,
-            setIsSending
-          )
-        }
-        className="space-y-8"
-      >
+      <form onSubmit={handleEmailSubmit} className="space-y-8">
         <div>
           <label
             htmlFor="email"
-            className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+            className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
           >
-            Adresse e-mail
+            {t("emailLabel")}
           </label>
           <input
             value={values.email}
             onChange={handleChange}
             type="email"
             id="email"
-            className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+            className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
             placeholder="nom@exemple.com"
             required
             data-test="email-input"
@@ -58,17 +86,17 @@ const ContactForm = () => {
         <div>
           <label
             htmlFor="subject"
-            className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+            className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
           >
-            Sujet
+            {t("subjectLabel")}
           </label>
           <input
             value={values.subject}
             onChange={handleChange}
             type="text"
             id="subject"
-            className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
-            placeholder="Le motif de ma demande"
+            className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            placeholder={t("subjectPlaceholder")}
             required
             data-test="subject-input"
           />
@@ -76,17 +104,17 @@ const ContactForm = () => {
         <div className="sm:col-span-2">
           <label
             htmlFor="message"
-            className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+            className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
           >
-            Votre message
+            {t("messageLabel")}
           </label>
           <textarea
             value={values.message}
             onChange={handleChange}
             id="message"
             rows={6}
-            className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-            placeholder="Détaillez ici votre demande..."
+            className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            placeholder={t("messagePlaceholder")}
             data-test="message-input"
             required
           ></textarea>
@@ -94,10 +122,10 @@ const ContactForm = () => {
         <button
           disabled={isSending}
           type="submit"
-          className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-teal-600 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 dark:text-white disabled:opacity-25"
+          className="hover:bg-primary-800 focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 rounded-lg bg-teal-600 px-5 py-3 text-center text-sm font-medium text-white focus:outline-none focus:ring-4 disabled:opacity-25 dark:text-white sm:w-fit"
           data-test="submit-button"
         >
-          {isSending ? "Envoi en cours..." : "Envoi Message"}
+          {isSending ? t("sending") : t("sendButton")}
         </button>
         {infoMessage}
       </form>