Feature/interest email button

frontend/src/pages/Individual-product-page.tsx

@@ -1,4 +1,4 @@
 import { faPenToSquare, faHeart as faHeartSolid } from "@fortawesome/free-solid-svg-icons";
 import { faHeart as faHeartRegular } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useContext, useEffect, useState } from "react";
@@ -19,9 +19,10 @@
   }>();
   const [message, setMessage] = useState("");
   const [isHovered, setIsHovered] = useState(false);
   const [error, setError] = useState<String>();
   const [hasPermissions, setHasPermissions] = useState<boolean>(false);
   const COOLDOWN = 60 * 24 * 1000 * 60;
+  const [isSubmitting, setIsSubmitting] = useState(false);
   useEffect(() => {
     if (!message) return;
     const t = setTimeout(() => setMessage(""), 3000);
@@ -77,12 +78,16 @@
       setMessage("Please wait before sending another interest email.");
       return;
     }
-
+    if (isSubmitting) {
+      return;
+    }
+    setIsSubmitting(true);
     try {
       const response = await post("/api/interestEmail", { consumerId: user?.uid, productId: id });
       const result = await response.json();
       if (!response.ok) {
         setMessage(`Error: ${result.message}`);
+        setIsSubmitting(false);
         return;
       }
 
@@ -97,6 +102,7 @@
       }, COOLDOWN);
     } catch {
       setMessage("An unexpected error occurred.");
+      setIsSubmitting(false);
     }
   };
   const isCooling = Boolean(cooldownEnd && Date.now() < cooldownEnd);
@@ -105,10 +111,10 @@
   const totalMinutes = Math.ceil(msLeft / (1000 * 60)); // convert ms → minutes
   const hoursLeft = Math.floor(totalMinutes / 60);
   const minutesLeft = totalMinutes % 60;
   const [tick, setTick] = useState(0);
   useEffect(() => {
     if (!isCooling) return;
     const iv = setInterval(() => setTick((t) => t + 1), 60_000); // 60 000 ms = 1 min
     return () => clearInterval(iv);
   }, [isCooling]);
   let buttonLabel = "Interested?";
@@ -137,7 +143,7 @@
       const userRes = await get(`/api/users/${user.uid}`);
       const userData = await userRes.json();
       setIsSaved(userData.savedProducts.includes(id));
     } catch (error) {
       console.error("Error saving product:", error);
     }
   };
@@ -207,7 +213,7 @@
                 </div>
               )}
               {!hasPermissions && (
                 <div
                   onMouseEnter={() => setIsHovered(true)}
                   onMouseLeave={() => setIsHovered(false)}
                 >