// Multi-step booking — package confirmation, personal details, payment const { useState: useStateBook, useEffect: useEffectBook } = React; function BookingScreen({ selectedPkgId, onNav, onConfirm }) { const vp = useViewport(); const [step, setStep] = useStateBook(0); const [form, setForm] = useStateBook({ pkgId: selectedPkgId || "shmira", names: [{ first: "", mother: "" }], phone: "", email: "", concerns: "", asGift: false, payment: "card", }); const pkg = PACKAGES.find(p => p.id === form.pkgId) || PACKAGES[1]; const setF = (patch) => setForm({ ...form, ...patch }); // When switching package, trim names list if it exceeds the new maxNames React.useEffect(() => { const max = pkg.maxNames || 1; if (form.names.length > max) { setForm({ ...form, names: form.names.slice(0, max) }); } }, [form.pkgId]); const steps = ["החבילה", "שמות לטיפול", "תשלום ואישור"]; const validNames = form.names.every(n => n.first.trim().length > 1 && n.mother.trim().length > 1); const valid = { 0: !!form.pkgId, 1: validNames && /^[0-9\-+ ]{8,}$/.test(form.phone) && /.+@.+/.test(form.email), 2: true, }; return (
{/* Stepper */}
שלב {step + 1} מתוך {steps.length}
{steps.map((s, i) => (
{i < step ? "✓" : (i + 1)}
{(!vp.isMobile || i === step) && (
{s}
)}
{i < steps.length - 1 && (
)} ))}
{/* Step content + summary */}
{step === 0 && } {step === 1 && } {step === 2 && onConfirm(form)} />}
step === 0 ? onNav("packages") : setStep(step - 1)}> ‹ {step === 0 ? "ביטול" : "שלב קודם"} {step < steps.length - 1 && ( valid[step] && setStep(step + 1)} style={{ opacity: valid[step] ? 1 : .35, cursor: valid[step] ? "pointer" : "not-allowed" }}> המשך לשלב הבא › )}
); } // --- Step 1: package picker --- function StepPackage({ form, setF, vp = {} }) { return (

בחירת חבילה

אפשר לעבור בין החבילות בכל זמן עד לאישור הסופי.

{PACKAGES.map(p => { const active = form.pkgId === p.id; return ( ); })}
); } // --- Step 2: names + contact details --- function StepDetails({ form, setF, pkg, vp = {} }) { const maxNames = pkg.maxNames || 1; const canAddMore = form.names.length < maxNames; const updateName = (i, key, value) => { const next = form.names.map((n, idx) => idx === i ? { ...n, [key]: value } : n); setF({ names: next }); }; const addName = () => { if (!canAddMore) return; setF({ names: [...form.names, { first: "", mother: "" }] }); }; const removeName = (i) => { if (form.names.length === 1) return; setF({ names: form.names.filter((_, idx) => idx !== i) }); }; return (

שמות לטיפול

לפי המסורת, התיקון נעשה על השם הפרטי ושם האם בלבד. {maxNames > 1 ? <>אפשר להוסיף עד {maxNames} שמות בחבילה זו. : <>בחבילה זו ניתן להזין שם אחד.}

{/* Names list */}
1 ? 14 : 28 }}> {form.names.map((n, i) => (
{i + 1}
{i === 0 ? "שם ראשון" : `שם נוסף ${i}`}
{form.names.length > 1 && ( )}
updateName(i, "first", e.target.value)} placeholder="לדוגמה: דוד" /> updateName(i, "mother", e.target.value)} placeholder="לדוגמה: שרה" />
))}
{/* Add name button */} {maxNames > 1 && (
{canAddMore ? ( ) : (
הגעת למקסימום השמות בחבילה זו ({maxNames}). לתוספת — שדרגו לחבילת מגן עולם.
)}
)} {/* Contact details */}
פרטי קשר
setF({ phone: e.target.value })} placeholder="052-000-0000" dir="ltr"/> setF({ email: e.target.value })} placeholder="name@example.com" dir="ltr"/>