dasdas

frontend/src/components/auth/SignUpForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "../../icons";
 import Label from "../form/Label";
@@ -6,7 +6,7 @@ import Input from "../form/input/InputField";
 import Checkbox from "../form/input/Checkbox";
 import { useAuthStore } from "../../store/authStore";
 
-export default function SignUpForm() {
+export default function SignUpForm({ planDetails: planDetailsProp, planLoading: planLoadingProp }: { planDetails?: any; planLoading?: boolean }) {
   const [showPassword, setShowPassword] = useState(false);
   const [isChecked, setIsChecked] = useState(false);
   const [formData, setFormData] = useState({
@@ -18,17 +18,52 @@ export default function SignUpForm() {
     accountName: "",
   });
   const [error, setError] = useState("");
+  const [planDetails, setPlanDetails] = useState<any | null>(planDetailsProp || null);
+  const [planLoading, setPlanLoading] = useState(planLoadingProp || false);
+  const [planError, setPlanError] = useState("");
   const navigate = useNavigate();
   const { register, loading } = useAuthStore();
+  const planSlug = useMemo(() => new URLSearchParams(window.location.search).get("plan") || "", []);
+  const paidPlans = ["starter", "growth", "scale"];
 
   useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const planSlug = params.get("plan");
-    const paidPlans = ["starter", "growth", "scale"];
     if (planSlug && paidPlans.includes(planSlug)) {
-      navigate(`/payment?plan=${planSlug}`, { replace: true });
+      setError("");
     }
-  }, [navigate]);
+  }, [planSlug]);
+
+  useEffect(() => {
+    if (planDetailsProp) {
+      setPlanDetails(planDetailsProp);
+      setPlanLoading(!!planLoadingProp);
+      setPlanError("");
+      return;
+    }
+    const fetchPlan = async () => {
+      if (!planSlug) return;
+      setPlanLoading(true);
+      setPlanError("");
+      try {
+        const API_BASE_URL = import.meta.env.VITE_BACKEND_URL || "https://api.igny8.com/api";
+        const res = await fetch(`${API_BASE_URL}/v1/auth/plans/?slug=${planSlug}`);
+        const data = await res.json();
+        const plan = data?.results?.[0];
+        if (!plan) {
+          setPlanError("Plan not found or inactive.");
+        } else {
+          const features = Array.isArray(plan.features)
+            ? plan.features.map((f: string) => f.charAt(0).toUpperCase() + f.slice(1))
+            : [];
+          setPlanDetails({ ...plan, features });
+        }
+      } catch (e: any) {
+        setPlanError("Unable to load plan details right now.");
+      } finally {
+        setPlanLoading(false);
+      }
+    };
+    fetchPlan();
+  }, [planSlug, planDetailsProp, planLoadingProp]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -53,18 +88,22 @@ export default function SignUpForm() {
       // Generate username from email if not provided
       const username = formData.username || formData.email.split("@")[0];
       
-      // No plan_id needed - backend auto-assigns free trial
-      await register({
+      const user = await register({
         email: formData.email,
         password: formData.password,
         username: username,
         first_name: formData.firstName,
         last_name: formData.lastName,
         account_name: formData.accountName,
+        plan_slug: planSlug || undefined,
       });
-      
-      // Redirect to dashboard/sites instead of payment page
-      navigate("/sites", { replace: true });
+
+      const status = user?.account?.status;
+      if (status === "pending_payment") {
+        navigate("/account/billing", { replace: true });
+      } else {
+        navigate("/sites", { replace: true });
+      }
     } catch (err: any) {
       setError(err.message || "Registration failed. Please try again.");
     }
@@ -88,7 +127,9 @@ export default function SignUpForm() {
               Start Your Free Trial
             </h1>
             <p className="text-sm text-gray-500 dark:text-gray-400">
-              No credit card required. 100 AI credits to get started.
+              {planSlug && paidPlans.includes(planSlug)
+                ? `You're signing up for the ${planSlug} plan. You'll be taken to billing to complete payment.`
+                : "No credit card required. 100 AI credits to get started."}
             </p>
           </div>
           <div>