dasdas

frontend/src/pages/Payment.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate, Link } from "react-router-dom";
+import { useAuthStore } from "../store/authStore";
 
 const PLAN_COPY: Record<string, { name: string; price: string; credits: string }> = {
   starter: { name: "Starter", price: "$89/mo", credits: "1,000 credits/month" },
@@ -10,24 +11,31 @@ const PLAN_COPY: Record<string, { name: string; price: string; credits: string }
 export default function Payment() {
   const location = useLocation();
   const navigate = useNavigate();
+  const user = useAuthStore((s) => s.user);
   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 plan = useMemo(() => {
+    const slugFromAccount = user?.account?.plan?.slug;
+    const slug = planSlug || slugFromAccount || "";
+    return slug ? PLAN_COPY[slug] : null;
+  }, [planSlug, user?.account?.plan?.slug]);
   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 || "-"}`);
+    const subject = encodeURIComponent(`Payment submitted for ${plan.name}`);
+    const body = encodeURIComponent(
+      `Plan: ${plan.name}\nAccount: ${user?.account?.slug || user?.account?.id || "-"}\nEmail: ${contactEmail}\nNotes/Reference: ${note || "-"}`
+    );
     return `mailto:sales@igny8.com?subject=${subject}&body=${body}`;
-  }, [plan, contactEmail, note]);
+  }, [plan, contactEmail, note, user?.account?.slug, user?.account?.id]);
 
   useEffect(() => {
-    if (!plan) {
+    if (!plan || !user) {
       navigate("/pricing", { replace: true });
     }
-  }, [plan, navigate]);
+  }, [plan, navigate, user]);
 
   const handleRequest = (e: React.MouseEvent<HTMLAnchorElement>) => {
     if (!plan) {
@@ -62,7 +70,7 @@ export default function Payment() {
             <p className="text-slate-700">{plan.price}</p>
             <p className="text-sm text-slate-600">{plan.credits}</p>
             <p className="text-xs text-amber-700 mt-2">
-              Payment is completed offline (bank transfer). Submit your email below and we will send payment instructions.
+              Payment is completed offline (bank transfer). Submit your email and reference below; we will verify and activate your account.
             </p>
           </div>
         )}