// ============================================================ // Husky Paths — SubmitFlow modal + ContactModal // ============================================================ // ── Submit flow: form → verifying → success ───────────────── const SubmitFlow = ({ isOpen, onClose, onSubmit, backendReady, authSession, onAuthChanged, backendStatus, tweaks, initialProfile = null, onSubmitForReview }) => { const [step, setStep] = useState("form"); // form | auth | verifying | success const [error, setError] = useState(""); const [otp, setOtp] = useState(""); const [authBusy, setAuthBusy] = useState(false); const [authResendSeconds, setAuthResendSeconds] = useState(0); const [shareCopied, setShareCopied] = useState(false); const [data, setData] = useState({ name: "", email: "", major: "", year: "2025", pathType: "Industry", orgName: "", roleDetail: "", city: "", openToConnect: true, linkedin: "", wechat: "", instagram: "", note: "", }); const [consent, setConsent] = useState(false); // 验证后若检测到该账号已有档案，存这里 → 防止空白覆盖 const [existingProfile, setExistingProfile] = useState(null); // 编辑模式（已有路径）默认视为已同意过 useEffect(() => { if (initialProfile) setConsent(true); }, [initialProfile?.id]); const verifySteps = [ { label: "Verifying @uw.edu", zh: "验证 @uw.edu" }, { label: "Checking duplicates", zh: "查重中" }, { label: "Pinning to atlas", zh: "标记地图" }, ]; const [verifyIdx, setVerifyIdx] = useState(0); const mode = (initialProfile || existingProfile) ? "edit" : "create"; const emptyData = { name: "", email: "", major: "", year: "2025", pathType: "Industry", orgName: "", roleDetail: "", city: "", openToConnect: true, linkedin: "", wechat: "", instagram: "", note: "", }; const dataFromProfile = (profile) => profile ? { name: profile.name === "Anonymous" ? "" : profile.name || "", email: profile.email || authSession?.user?.email || "", major: profile.major || "", year: profile.year || "2025", pathType: profile.pathType || "Industry", orgName: profile.orgName || "", roleDetail: profile.roleDetail || "", city: profile.city || "", openToConnect: !!profile.openToConnect, linkedin: profile.linkedin || "", wechat: profile.wechat || "", instagram: profile.instagram || "", note: profile.note || "", } : emptyData; useEffect(() => { if (isOpen && !existingProfile) { // 已带出旧档案时不再覆盖（afterVerified 已合并预填） setData(dataFromProfile(initialProfile)); } }, [isOpen, initialProfile?.id, authSession?.user?.email, existingProfile]); useEffect(() => { if (!isOpen) { // reset setTimeout(() => { setStep("form"); setError(""); setVerifyIdx(0); setOtp(""); setAuthBusy(false); setAuthResendSeconds(0); setShareCopied(false); setData(emptyData); setConsent(false); setExistingProfile(null); }, 300); } }, [isOpen]); useEffect(() => { if (authResendSeconds <= 0) return; const t = setTimeout(() => setAuthResendSeconds((s) => Math.max(0, s - 1)), 1000); return () => clearTimeout(t); }, [authResendSeconds]); useEffect(() => { if (step !== "verifying") return; let cancelled = false; let i = 0; setVerifyIdx(0); const t = setInterval(() => { i++; if (i >= verifySteps.length) { clearInterval(t); const newProfile = { ...data, id: `u-${Date.now()}`, name: data.name.trim() || "Anonymous", }; Promise.resolve(onSubmit(newProfile)) .then(() => { if (!cancelled) setStep("success"); }) .catch((err) => { if (!cancelled) { setError(err.message || "Could not save your path."); setStep("form"); } }); return; } setVerifyIdx(i); }, 700); return () => { cancelled = true; clearInterval(t); }; }, [step]); if (!isOpen) return null; const normalizedEmail = data.email.trim().toLowerCase(); const sessionEmail = authSession?.user?.email?.toLowerCase() || ""; const sendVerificationEmail = async () => { setAuthBusy(true); setError(""); try { await window.HuskyBackend.sendLoginLink(normalizedEmail); setAuthResendSeconds(60); setStep("auth"); } catch (err) { setError(err.message || "Could not send verification email."); } finally { setAuthBusy(false); } }; // 老用户:不必先填表，输入 @uw.edu 邮箱即可验证登录，验证后自动带出旧档案 const startLoginToEdit = async () => { setError(""); if (!/^[^@]+@uw\.edu$/.test(normalizedEmail)) { setError("Enter your @uw.edu email above first, then sign in to edit. · 先在上方填 @uw.edu 邮箱再登录。"); return; } await sendVerificationEmail(); }; // 安全网:旧档案打底，用户本次已填的非空字段覆盖 → 防止空白覆盖、保留联系方式 const mergeFormData = (existing, typed) => { const merged = { name: existing.name === "Anonymous" ? "" : (existing.name || ""), email: existing.email || normalizedEmail || "", major: existing.major || "", year: existing.year || "2025", pathType: existing.pathType || "Industry", orgName: existing.orgName || "", roleDetail: existing.roleDetail || "", city: existing.city || "", openToConnect: !!existing.openToConnect, linkedin: existing.linkedin || "", wechat: existing.wechat || "", instagram: existing.instagram || "", note: existing.note || "", }; ["name", "major", "orgName", "roleDetail", "city", "note", "linkedin", "wechat", "instagram"].forEach((k) => { if (typed[k] && String(typed[k]).trim()) merged[k] = typed[k]; }); if (typed.year && typed.year !== "2025") merged.year = typed.year; if (typed.pathType) merged.pathType = typed.pathType; if (typed.openToConnect) merged.openToConnect = true; return merged; }; // 验证成功后：若该账号已有档案且非编辑模式，预填旧档案回到表单（不直接覆盖提交） const afterVerified = async (session) => { const typedSnapshot = data; // 在 onAuthChanged 触发重渲染前先抓住用户已填内容 onAuthChanged?.(session); if (!initialProfile) { let existing = null; try { existing = await window.HuskyBackend.getMyProfile(); } catch (_e) { existing = null; } if (existing) { setExistingProfile(existing); setData(mergeFormData(existing, typedSnapshot)); setConsent(true); setError(""); setStep("form"); return; } } // 新用户：恢复用户填的内容（防止登录引发的预填 effect 把它清空），再进入提交 setData(typedSnapshot); setStep("verifying"); }; const handleVerifyOtp = async () => { setAuthBusy(true); setError(""); try { const session = await window.HuskyBackend.verifyOtp(normalizedEmail, otp); await afterVerified(session); } catch (err) { setError(err.message || "Verification failed."); } finally { setAuthBusy(false); } }; const handleMagicLinkReturn = async () => { setAuthBusy(true); setError(""); try { const session = await window.HuskyBackend.getSession(); if (!session?.user) { setError("No verified session found yet. Open the email link or paste the code first."); return; } if (session.user.email.toLowerCase() !== normalizedEmail) { setError(`You are signed in as ${session.user.email}. Use that email in the form.`); return; } await afterVerified(session); } catch (err) { setError(err.message || "Could not confirm your session."); } finally { setAuthBusy(false); } }; const handleSubmit = async (e) => { e.preventDefault(); setError(""); // 非 @uw.edu 邮箱 → 不再报错,转入审核队列(带着已填内容,邮箱作为身份线索) if (normalizedEmail && !/^[^@]+@uw\.edu$/.test(normalizedEmail) && onSubmitForReview) { onSubmitForReview({ name: data.name, major: data.major, year: data.year, pathType: data.pathType, orgName: data.orgName, roleDetail: data.roleDetail, city: data.city, note: data.note, contactHint: normalizedEmail, }); return; } if (!/^[^@]+@uw\.edu$/.test(normalizedEmail)) { setError(t("Please use a valid @uw.edu email address.", "请填写有效的 @uw.edu 邮箱。")); return; } if (!data.major || !data.orgName || !data.city) { setError(t("Major, company/school, and city are required.", "请填写专业、机构和城市。")); return; } if (!consent) { setError(t("Please confirm the submission terms before continuing.", "请先勾选下方确认条款。")); return; } if (backendReady && !authSession) { await sendVerificationEmail(); return; } if (backendReady && sessionEmail !== normalizedEmail) { setError(`You are signed in as ${sessionEmail}. Please use that UW email in the form.`); return; } setStep("verifying"); }; const handleInviteShare = async () => { const cityForShare = (data.city || "").trim(); const shareText = cityForShare ? `I just pinned my path to ${cityForShare} on Husky Paths — a student-built map of where UW grads land. Add yours so the next class can find people like us.` : "I just added my post-grad path to Husky Paths — a student-built map of where UW grads land. Add yours so the next class can find people like us."; const shareData = { title: "Husky Paths · UW alumni atlas", text: shareText, url: window.location.origin, }; try { if (navigator.share) { await navigator.share(shareData); } else { await navigator.clipboard?.writeText(`${shareData.text} ${shareData.url}`); setShareCopied(true); setTimeout(() => setShareCopied(false), 1800); } } catch (_err) { await navigator.clipboard?.writeText(`${shareData.text} ${shareData.url}`); setShareCopied(true); setTimeout(() => setShareCopied(false), 1800); } }; return (
e.stopPropagation()}> {step === "form" && ( <>

{mode === "edit" ? t("Update your path.", "更新你的路径。") : t("Tell us where you're headed.", "告诉我们你的去向。")}

{mode === "edit" ? t("Keep your destination and contact preferences current.", "让你的去向和联系偏好保持最新。") : t("Show the next class what's possible. Anonymous submissions are fine — just leave the name blank.", "让下一届看到更多可能。匿名提交也没问题——留空姓名即可。")}

{error &&
{error}
} {existingProfile && (
✦ {t("We found your existing path — review and update below. Your contact info is kept unless you change it.", "已带出你之前填的资料,核对后更新即可;联系方式会保留,除非你修改。")}
)} {!authSession && !existingProfile && mode !== "edit" && (
{t("Already added your path? ", "已经填过了?")} {onSubmitForReview && ( <>
{t("Not a UW email, or graduated & lost yours? ", "不是 UW 邮箱、或毕业后邮箱失效了?")} )}
)}
setData({ ...data, name: e.target.value })} placeholder={t("Leave blank for anon", "留空即匿名")}/>
setData({ ...data, email: e.target.value })} placeholder={t("netid@uw.edu or any email", "netid@uw.edu 或任意邮箱")} required/>

{t("Have a @uw.edu? You'll verify and appear on the map instantly. Any other email is welcome too — your entry just goes through a quick manual review before it shows.", "有 @uw.edu?验证后立即上墙。也欢迎用其他邮箱——你的资料会先经过一次快速人工审核再显示。")}

setData({ ...data, major: e.target.value })} placeholder={t("e.g. Computer Science", "如:计算机科学")} required/>
{PATH_TYPES.map((pt) => ( ))}
setData({ ...data, orgName: e.target.value })} placeholder={t("Where to?", "去了哪里?")} required/>
setData({ ...data, roleDetail: e.target.value })} placeholder={ data.pathType === "Grad School" ? t("e.g. MS in Computer Science", "如:计算机硕士方向") : data.pathType === "Startup" ? t("e.g. Founding Engineer", "如:创始团队角色") : data.pathType === "Gap Year" ? t("e.g. Traveling, research, applying", "如:旅行、科研、申请中") : t("e.g. Software Engineer", "如:软件工程师") } />