contact form with email

web/app/contact/page.js

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { useAuth } from "@/context/AuthContext";
 
 function getStoreImage(store) {
   if (store.imageUrl) return store.imageUrl;
@@ -12,10 +13,17 @@ function getStoreImage(store) {
 }
 
 export default function ContactPage() {
+  const { token } = useAuth();
   const [locations, setLocations] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
+  const [subject, setSubject] = useState("");
+  const [body, setBody] = useState("");
+  const [sending, setSending] = useState(false);
+  const [sendError, setSendError] = useState(null);
+  const [sendSuccess, setSendSuccess] = useState(false);
+
   useEffect(() => {
     const params = new URLSearchParams({ page: "0", size: "100", sort: "storeName,asc" });
     fetch(`/api/v1/stores?${params}`)
@@ -28,6 +36,27 @@ export default function ContactPage() {
       .finally(() => setLoading(false));
   }, []);
 
+  async function handleSend(e) {
+    e.preventDefault();
+    setSending(true);
+    setSendError(null);
+    try {
+      const res = await fetch("/api/v1/contact", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ subject, body }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      setSendSuccess(true);
+      setSubject("");
+      setBody("");
+    } catch (err) {
+      setSendError("Failed to send message. Please try again.");
+    } finally {
+      setSending(false);
+    }
+  }
+
   return (
     <main className="info-page">
       <section className="info-hero">
@@ -44,6 +73,44 @@ export default function ContactPage() {
           <p>Hours: Mon–Sat, 9:00 AM – 6:00 PM</p>
         </div>
 
+        {token && (
+          <div className="info-card">
+            <h2>Send Us a Message</h2>
+            {sendSuccess ? (
+              <p className="contact-success">Your message has been sent. We&apos;ll be in touch soon.</p>
+            ) : (
+              <form className="contact-form" onSubmit={handleSend}>
+                <label className="contact-label">
+                  Subject
+                  <input
+                    className="contact-input"
+                    type="text"
+                    value={subject}
+                    onChange={(e) => setSubject(e.target.value)}
+                    required
+                    maxLength={150}
+                  />
+                </label>
+                <label className="contact-label">
+                  Message
+                  <textarea
+                    className="contact-textarea"
+                    value={body}
+                    onChange={(e) => setBody(e.target.value)}
+                    required
+                    maxLength={2000}
+                    rows={6}
+                  />
+                </label>
+                {sendError && <p className="contact-error">{sendError}</p>}
+                <button className="contact-submit-btn" type="submit" disabled={sending}>
+                  {sending ? "Sending…" : "Send Message"}
+                </button>
+              </form>
+            )}
+          </div>
+        )}
+
         <div className="info-card">
           <h2>Store Locations</h2>
 

web/app/globals.css

@@ -2921,3 +2921,13 @@ html, body {
 img, video, iframe {
   max-width: 100%;
 }
+
+.contact-form { display: flex; flex-direction: column; gap: 1rem; }
+.contact-label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 500; color: #333; font-size: 0.95rem; }
+.contact-input, .contact-textarea { border: 1px solid #ddd; border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.95rem; font-family: inherit; resize: vertical; }
+.contact-input:focus, .contact-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
+.contact-submit-btn { align-self: flex-start; background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 0.65rem 1.4rem; font-size: 0.95rem; cursor: pointer; }
+.contact-submit-btn:hover:not(:disabled) { background: #1d4ed8; }
+.contact-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.contact-error { color: #c0392b; font-size: 0.9rem; }
+.contact-success { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.75rem 1rem; }