connetcted to backend: form request

components/layout/footer.tsx

@@ -7,6 +7,11 @@ import { Mail, Phone, MapPin } from "lucide-react";
 import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import axios from "axios";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
 
 export function Footer() {
   const locale = useLocale();
@@ -14,12 +19,25 @@ export function Footer() {
   const [email, setEmail] = useState("");
   const [subscribed, setSubscribed] = useState(false);
 
-  const handleSubscribe = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (email) {
+  const formRequest = useMutation({
+    mutationKey: [],
+    mutationFn: (data: any) => httpClient.post(endPoints.post.sendNumber, data),
+    onSuccess: () => {
+      toast.success(t("succes"));
       setSubscribed(true);
       setEmail("");
       setTimeout(() => setSubscribed(false), 3000);
+    },
+    onError: (error) => {
+      console.log("error: ", error);
+      toast.error(t("error"));
+    },
+  });
+
+  const handleSubscribe = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email) {
+      formRequest.mutate({ number: email });
     }
   };
 
@@ -49,9 +67,11 @@ export function Footer() {
               className="flex sm:flex-row flex-col w-full gap-2 md:w-auto"
             >
               <input
-                type="email"
+                type="text"
                 placeholder={t("enterPhone")}
                 value={email}
+                minLength={9}
+                maxLength={13}
                 onChange={(e) => setEmail(e.target.value)}
                 className="font-almarai flex-1 rounded-full bg-white px-6 py-3 text-gray-800 placeholder-gray-400 focus:outline-none md:w-64"
                 required
@@ -179,9 +199,7 @@ export function Footer() {
       <div className="border-t border-gray-800 px-4 py-8">
         <div className="mx-auto max-w-6xl">
           <div className="font-almarai flex flex-col justify-between gap-4 text-sm text-gray-400 md:flex-row md:items-center">
-            <div>
-              Copyright © 2025 Ignum Company. 
-            </div>
+            <div>Copyright © 2025 Ignum Company.</div>
             <div className="flex gap-6">
               <a href="#terms" className="hover:text-white">
                 Terms & Conditions