sad

frontend/src/pages/Payment.tsx

@@ -12,9 +12,16 @@ export default function Payment() {
   const navigate = useNavigate();
   const [contactEmail, setContactEmail] = useState("");
   const [note, setNote] = useState("");
+  const [error, setError] = useState("");
 
   const planSlug = useMemo(() => new URLSearchParams(location.search).get("plan") || "", [location.search]);
   const plan = planSlug ? PLAN_COPY[planSlug] : null;
+  const mailtoHref = useMemo(() => {
+    if (!plan || !contactEmail.trim()) return "";
+    const subject = encodeURIComponent(`Subscribe to ${plan.name}`);
+    const body = encodeURIComponent(`Plan: ${plan.name}\nEmail: ${contactEmail}\nNotes: ${note || "-"}`);
+    return `mailto:sales@igny8.com?subject=${subject}&body=${body}`;
+  }, [plan, contactEmail, note]);
 
   useEffect(() => {
     if (!plan) {
@@ -22,6 +29,20 @@ export default function Payment() {
     }
   }, [plan, navigate]);
 
+  const handleRequest = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (!plan) {
+      e.preventDefault();
+      navigate("/pricing", { replace: true });
+      return;
+    }
+    if (!contactEmail.trim()) {
+      e.preventDefault();
+      setError("Please enter a contact email.");
+      return;
+    }
+    setError("");
+  };
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4 py-16">
       <div className="w-full max-w-3xl bg-white rounded-2xl shadow-lg p-8 space-y-6 border border-slate-100">
@@ -74,14 +95,17 @@ export default function Payment() {
             Prefer the free plan? Start your trial
           </Link>
           <a
-            href={`mailto:sales@igny8.com?subject=Subscribe to ${plan?.name || ""}&body=Plan: ${
-              plan?.name || ""
-            }%0AEmail: ${encodeURIComponent(contactEmail)}%0ANotes: ${encodeURIComponent(note)}`}
-            className="inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
+            href={mailtoHref || "#"}
+            onClick={handleRequest}
+            className={`inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold text-white ${
+              contactEmail.trim() ? "bg-blue-600 hover:bg-blue-700" : "bg-blue-400 cursor-not-allowed"
+            }`}
+            aria-disabled={!contactEmail.trim()}
           >
             Request payment instructions
           </a>
         </div>
+        {error && <p className="text-sm text-red-600">{error}</p>}
       </div>
     </div>
   );