Add src/components/onboarding/ActivationPending.jsx

src/components/onboarding/ActivationPending.jsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { MailCheck, RefreshCw, Clock, AlertCircle, CheckCircle2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { base44 } from "@/api/base44Client";
+import { createPageUrl } from "@/utils";
+
+const SESSION_TIMEOUT_SECONDS = 600; // 10 minutes
+
+export default function ActivationPending({ email, userId, expectedCode, onResend, autoStart = true, userData = null }) {
+  const [secondsLeft, setSecondsLeft] = useState(SESSION_TIMEOUT_SECONDS);
+  const [resending, setResending] = useState(false);
+  const [resendSuccess, setResendSuccess] = useState(false);
+  const [timedOut, setTimedOut] = useState(false);
+  const [timerActive, setTimerActive] = useState(autoStart);
+
+  const [code, setCode] = useState("");
+  const [verifying, setVerifying] = useState(false);
+  const [codeError, setCodeError] = useState("");
+  const [verified, setVerified] = useState(false);
+
+  useEffect(() => {
+    if (!timerActive) return;
+    if (secondsLeft <= 0) {
+      setTimedOut(true);
+      return;
+    }
+    const interval = setInterval(() => {
+      setSecondsLeft((s) => s - 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [secondsLeft, timerActive]);
+
+  const formatTime = (secs) => {
+    const m = Math.floor(secs / 60);
+    const s = secs % 60;
+    return `${m}:${s.toString().padStart(2, "0")}`;
+  };
+
+  const handleResend = async () => {
+    setResending(true);
+    await onResend();
+    setResending(false);
+    setResendSuccess(true);
+    setSecondsLeft(SESSION_TIMEOUT_SECONDS);
+    setTimedOut(false);
+    setTimerActive(true);
+    setCode("");
+    setCodeError("");
+    setTimeout(() => setResendSuccess(false), 4000);
+