// 在线预约 / 咨询页 const BookingPage = () => { const t = useT(); const lang = useLang(); const b = t.bk; const auth = (typeof window.useAuth === 'function') ? window.useAuth() : null; const [type, setType] = React.useState(2); const [advisor, setAdvisor] = React.useState(0); const [day, setDay] = React.useState(2); const [slot, setSlot] = React.useState(3); // Step 4 contact form (M5.E2) — controlled inputs so we can POST them const [contact, setContact] = React.useState({ name: '', phone: '', wechat: '', grade: '', note: '' }); React.useEffect(() => { if (!auth?.user) return; setContact((c) => ({ name: c.name || auth.user.name || '', phone: c.phone || auth.user.phone || '', wechat: c.wechat, grade: c.grade, note: c.note, })); }, [auth?.user]); const setField = (k) => (e) => setContact((c) => ({ ...c, [k]: e.target.value })); const [submitting, setSubmitting] = React.useState(false); const [bookingResult, setBookingResult] = React.useState(null); // server-returned booking on success const [bookingError, setBookingError] = React.useState(null); const [fieldErrors, setFieldErrors] = React.useState({}); const onConfirm = async () => { setBookingError(null); setFieldErrors({}); if (!auth?.user) { // Send unauthenticated user to login, return here after navigateTo('/login?next=' + encodeURIComponent('#/booking')); return; } if (!contact.name || !contact.name.trim()) { setFieldErrors({ name: lang === 'zh' ? '此项必填' : 'Required' }); setBookingError(lang === 'zh' ? '请填写联系姓名' : 'Please enter your name'); return; } setSubmitting(true); try { const r = await fetch('/api/booking/create', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ typeIdx: type, advisorIdx: advisor, dayIdx: day, slotIdx: slot, name: contact.name.trim(), phone: contact.phone.trim(), wechat: contact.wechat.trim(), grade: contact.grade.trim(), note: contact.note.trim(), }), }); if (r.status === 401) { navigateTo('/login?next=' + encodeURIComponent('#/booking')); return; } let data = {}; try { data = await r.json(); } catch (_) { data = {}; } if (r.status === 201 && data.booking) { setBookingResult(data.booking); return; } if (r.status === 400 && data.fields) { setFieldErrors(data.fields); setBookingError(lang === 'zh' ? '请检查表单字段' : 'Please review the form'); return; } if (r.status === 429) { setBookingError(lang === 'zh' ? '请求过于频繁,请稍后再试' : 'Too many requests, try again later'); return; } setBookingError(lang === 'zh' ? '提交失败,请稍后再试' : 'Submission failed, please try again'); } catch (err) { setBookingError(lang === 'zh' ? '网络错误,请检查连接' : 'Network error, please check your connection'); } finally { setSubmitting(false); } }; const days = [ { d: '5/2', dow: lang === 'zh' ? '周五' : 'Fri', label: lang === 'zh' ? '今天' : 'Today' }, { d: '5/3', dow: lang === 'zh' ? '周六' : 'Sat' }, { d: '5/4', dow: lang === 'zh' ? '周日' : 'Sun' }, { d: '5/5', dow: lang === 'zh' ? '周一' : 'Mon' }, { d: '5/6', dow: lang === 'zh' ? '周二' : 'Tue' }, { d: '5/7', dow: lang === 'zh' ? '周三' : 'Wed' }, { d: '5/8', dow: lang === 'zh' ? '周四' : 'Thu' }, ]; const slots = ['10:00', '11:00', '14:00', '15:00', '16:00', '17:00', '19:00', '20:00', '21:00']; const unavailable = [0, 4, 7]; const advisors = [ { name: lang === 'zh' ? '王思琪' : 'Siqi Wang', tag: lang === 'zh' ? 'MIT MS · 美国 CS' : 'MIT MS · US CS', rating: 4.97, slots: 12 }, { name: lang === 'zh' ? '陈墨然' : 'Moran Chen', tag: lang === 'zh' ? 'Oxford · 英国 G5' : 'Oxford · UK G5', rating: 4.95, slots: 8 }, { name: lang === 'zh' ? '林皓' : 'Hao Lin', tag: lang === 'zh' ? 'Stanford · 美研 STEM' : 'Stanford · US Grad STEM', rating: 4.92, slots: 15 }, { name: lang === 'zh' ? '孟韫' : 'Yun Meng', tag: lang === 'zh' ? '高考志愿主任' : 'Gaokao Director', rating: 4.96, slots: 6 }, ]; return (
{b.eyebrow}

{b.title}

{b.sub}

{/* Step 1: type */}
1

{b.step1}

{b.types.map((tt, i) => (
setType(i)} style={{ padding: 20, border: type === i ? '2px solid var(--pb-navy-900)' : '1px solid var(--pb-border)', background: type === i ? 'var(--pb-navy-50)' : 'var(--pb-surface)', borderRadius: 'var(--pb-radius)', cursor: 'pointer' }}>

{tt.name}

{type === i && }

{tt.desc}

{tt.price}
))}
{/* Step 2: counselor */}
2

{b.step2}

{lang === 'zh' ? '系统已根据你的方向推荐' : 'Pre-filtered by your direction'}
{advisors.map((a, i) => (
setAdvisor(i)} style={{ padding: 16, border: advisor === i ? '2px solid var(--pb-navy-900)' : '1px solid var(--pb-border)', background: advisor === i ? 'var(--pb-navy-50)' : 'var(--pb-surface)', borderRadius: 'var(--pb-radius)', cursor: 'pointer', display: 'flex', gap: 14, alignItems: 'center' }}>
{a.name.slice(0, 2).toUpperCase()}
{a.name}
{a.tag}
★ {a.rating}
{a.slots} {lang === 'zh' ? '可约' : 'open'}
))}
{/* Step 3: time */}
3

{b.step3}

GMT+8 · {lang === 'zh' ? '北京时间' : 'Beijing'}
{/* Day picker */}
{days.map((dy, i) => (
setDay(i)} style={{ padding: '14px 0', textAlign: 'center', border: day === i ? '2px solid var(--pb-navy-900)' : '1px solid var(--pb-border)', background: day === i ? 'var(--pb-navy-900)' : 'var(--pb-surface)', color: day === i ? 'var(--pb-gold-500)' : 'var(--pb-fg)', borderRadius: 'var(--pb-radius)', cursor: 'pointer' }}>
{dy.dow}
{dy.d}
{dy.label &&
{dy.label}
}
))}
{/* Time slots */}
{slots.map((s, i) => { const isUnavail = unavailable.includes(i); const isSel = slot === i; return (
!isUnavail && setSlot(i)} style={{ padding: '10px', textAlign: 'center', border: isSel ? '2px solid var(--pb-gold-500)' : '1px solid var(--pb-border)', background: isSel ? 'var(--pb-gold-100)' : isUnavail ? 'var(--pb-surface-alt)' : 'var(--pb-surface)', color: isUnavail ? 'var(--pb-fg-muted)' : isSel ? 'var(--pb-gold-700)' : 'var(--pb-fg)', borderRadius: 'var(--pb-radius)', cursor: isUnavail ? 'not-allowed' : 'pointer', fontFamily: 'var(--pb-mono)', fontSize: 14, fontWeight: 600, textDecoration: isUnavail ? 'line-through' : 'none' }}> {s}
); })}
{/* Step 4: details */}
4

{b.step4}

{fieldErrors.name &&
{lang === 'zh' ? '此项必填' : 'Required'}
}
{fieldErrors.phone &&
{lang === 'zh' ? '电话号码格式不正确' : 'Invalid phone'}
}