feat(about): submit contact form to api

src/pages/About.tsx

@@ -1,5 +1,6 @@
 import { useState, type FormEvent } from "react"
 import { Link, useNavigate } from "react-router-dom"
+import { toast } from "sonner"
 import {
   ArrowLeft,
   ArrowRight,
@@ -29,6 +30,7 @@ import { Input } from "../components/ui/input"
 import { TextAreaInput } from "../components/ui/TextAreaInput"
 import { useTheme } from "../components/ThemeProvider"
 import { useTranslation } from "../hooks/useTranslation"
+import { submitContactForm } from "../api/contact"
 import aboutContent from "../content/about.json"
 import { cn } from "../lib/utils"
 
@@ -50,6 +52,7 @@ export default function About() {
     mobile: "",
     message: "",
   })
+  const [isContactSubmitting, setIsContactSubmitting] = useState(false)
 
   const content = aboutContent[lang] as AboutContent
   const isAuthenticated = typeof window !== "undefined" && !!localStorage.getItem("accessToken")
@@ -62,21 +65,30 @@ export default function About() {
     setContactForm((current) => ({ ...current, [field]: value }))
   }
 
-  const submitContactForm = (event: FormEvent<HTMLFormElement>) => {
+  const handleContactSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault()
-    const subject = encodeURIComponent("Qlockify contact request")
-    const body = encodeURIComponent(
-      [
-        `First name: ${contactForm.firstName}`,
-        `Last name: ${contactForm.lastName}`,
-        `Email: ${contactForm.email}`,
-        `Mobile: ${contactForm.mobile}`,
-        "",
-        "Message:",
-        contactForm.message,
-      ].join("\n"),
-    )
-    window.location.href = `mailto:qlockify@gmail.com?subject=${subject}&body=${body}`
+    setIsContactSubmitting(true)
+    try {
+      await submitContactForm({
+        first_name: contactForm.firstName.trim(),
+        last_name: contactForm.lastName.trim(),
+        email: contactForm.email.trim(),
+        mobile: contactForm.mobile.trim(),
+        message: contactForm.message.trim(),
+      })
+      setContactForm({
+        firstName: "",
+        lastName: "",
+        email: "",
+        mobile: "",
+        message: "",
+      })
+      toast.success(content.contact.success)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : content.contact.error)
+    } finally {
+      setIsContactSubmitting(false)
+    }
   }
 
   return (
@@ -377,7 +389,7 @@ export default function About() {
             </div>
 
             <form
-              onSubmit={submitContactForm}
+              onSubmit={handleContactSubmit}
               className="animate-landing-rise rounded-[2rem] border border-white/70 bg-white/85 p-7 shadow-[0_30px_80px_-50px_rgba(15,23,42,0.6)] backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/70"
             >
               <div className="mb-6 flex items-center gap-3">
@@ -446,10 +458,11 @@ export default function About() {
 
               <Button
                 type="submit"
+                disabled={isContactSubmitting}
                 className="mt-6 h-14 w-full rounded-full bg-slate-950 px-7 text-base text-white hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
               >
                 <Send className="me-2 h-4 w-4" />
-                {content.contact.submit}
+                {isContactSubmitting ? content.contact.submitting : content.contact.submit}
               </Button>
             </form>
           </section>