Add Tournament form

app/[lang]/contactez-nous/ContactForm.tsx

@@ -1,70 +1,37 @@
 "use client";
 
-import { useState, FormEvent } from "react";
+import { useState } from "react";
 import { useTranslations } from "next-intl";
 
-import sendMail from "@/lib/sendMail";
-import { errorLog } from "@/utils/logger";
 import useContactForm from "@/hooks/useContactForm";
+import { handleEmailSubmit } from "@/handlers/formHandlers";
+
+import InfoMessage from "@/app/[lang]/components/InfoMessage";
 
 const ContactForm = () => {
   const t = useTranslations("Contact");
   const { values, handleChange, resetForm } = useContactForm();
+  const [isSending, setIsSending] = useState(false);
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
     message: "",
   });
-  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={`${
-        responseMessage.isSuccessful ? "text-green-600" : "text-red-600"
-      } italic`}
-      data-test="info-message"
-    >
-      {responseMessage.message}
-    </p>
-  );
 
   return (
     <>
-      <form onSubmit={handleEmailSubmit} className="space-y-8">
+      <form
+        onSubmit={(e) =>
+          handleEmailSubmit(
+            e,
+            t,
+            setIsSending,
+            setResponseMessage,
+            values,
+            resetForm,
+          )
+        }
+        className="space-y-8"
+      >
         <div>
           <label
             htmlFor="email"
@@ -127,7 +94,7 @@ const ContactForm = () => {
         >
           {isSending ? t("sending") : t("sendButton")}
         </button>
-        {infoMessage}
+        <InfoMessage responseMessage={responseMessage} />
       </form>
     </>
   );