// screens.jsx — Onboarding / form screens for the Invitino app // Each screen receives { state, setState, next, back } const { useState, useEffect, useRef } = React; // ───────────────────────────────────────────────────────────── // Shared chrome // ───────────────────────────────────────────────────────────── function ScreenHeader({ step, totalSteps, onBack }) { if (step == null) return null; return (
{onBack ? ( ) :
}
{Array.from({ length: totalSteps }).map((_, i) => (
))}
); } function CTAFooter({ children }) { return (
{children}
); } // ───────────────────────────────────────────────────────────── // 0. Welcome screen // ───────────────────────────────────────────────────────────── function WelcomeScreen({ onStart }) { return (
{/* Hero illustration block */}
{/* floating preview cards */}
{/* sparkles */}
{/* Copy block */}
INVITINO

Inviti per la festa
in 2 minuti.

Rispondi a 4 domande, scegli tra 4 anteprime e scarica il tuo invito senza watermark per 1€.

Senza account, senza app da scaricare Pronto da mandare su WhatsApp 4 stili grafici per ogni tema
Anteprime gratis. Paghi solo se ti piace.
); } function Bullet({ children }) { return (
{children}
); } // ───────────────────────────────────────────────────────────── // 1. Nome // ───────────────────────────────────────────────────────────── function NomeScreen({ state, setState, next, back, step, totalSteps }) { const inputRef = useRef(null); useEffect(() => { const t = setTimeout(() => inputRef.current?.focus(), 350); return () => clearTimeout(t); }, []); const valid = state.nome && state.nome.trim().length > 0; return (
DOMANDA 1 DI 4

Come si chiama
il festeggiato?

Solo il nome: andrà a stampa grande sull'invito.

setState({ ...state, nome: e.target.value })} onKeyDown={e => e.key === 'Enter' && valid && next()} maxLength={20} />
{valid && (
ANTEPRIMA
È la festa di {state.nome}!
)}
); } // ───────────────────────────────────────────────────────────── // 2. Età // ───────────────────────────────────────────────────────────── function EtaScreen({ state, setState, next, back, step, totalSteps }) { const valid = state.eta && state.eta > 0; return (
DOMANDA 2 DI 4

Quanti anni
compie {state.nome || '...'}?

{Array.from({ length: 12 }).map((_, i) => { const age = i + 1; const sel = state.eta === age; return ( ); })}
{valid && (
{state.eta}
{state.nome} compie {state.eta}
{state.eta === 1 ? 'anno' : 'anni'}
)}
); } // ───────────────────────────────────────────────────────────── // 3. Tema // ───────────────────────────────────────────────────────────── function TemaScreen({ state, setState, next, back, step, totalSteps }) { const valid = !!state.tema; return (
DOMANDA 3 DI 4

Scegli un tema.

Cambierà colori e illustrazioni dell'invito. Potrai vedere tutti gli stili tra un attimo.

{Object.values(THEMES).map(t => { const sel = state.tema === t.id; return (
setState({ ...state, tema: t.id })} style={{ aspectRatio: '1 / 1' }} >
); })}
); } // ───────────────────────────────────────────────────────────── // 4. Dettagli (data, ora, luogo) // ───────────────────────────────────────────────────────────── function DettagliScreen({ state, setState, next, back, step, totalSteps }) { const valid = state.data && state.ora && state.luogo && state.luogo.trim().length > 0; return (
DOMANDA 4 DI 4

Quando e dove?

setState({ ...state, data: e.target.value })} /> setState({ ...state, ora: e.target.value })} /> setState({ ...state, luogo: e.target.value })} />
💡
Potrai modificare tutto dopo aver scelto l'invito che ti piace di più.
); } function FieldRow({ label, children }) { return ( ); } // ───────────────────────────────────────────────────────────── // 5. Generating (loading) // ───────────────────────────────────────────────────────────── function GeneratingScreen({ state, onDone }) { const [phase, setPhase] = useState(0); const phases = [ 'Mescolo i colori...', 'Disegno le decorazioni...', 'Sistemo i dettagli...', 'Quasi fatto!', ]; useEffect(() => { let i = 0; const id = setInterval(() => { i++; setPhase(i); if (i >= phases.length) { clearInterval(id); setTimeout(onDone, 400); } }, 600); return () => clearInterval(id); }, []); return (
{/* spinner of mini cards */}
{[0, 1, 2, 3].map(i => { const angle = (i * 90) + (phase * 90); const r = 70; const x = Math.cos(angle * Math.PI / 180) * r; const y = Math.sin(angle * Math.PI / 180) * r; return (
); })} {/* center sparkle */}
Sto preparando
4 inviti per {state.nome}
{phases[Math.min(phase, phases.length - 1)]}
{/* progress */}
); } // ───────────────────────────────────────────────────────────── // 2.5 Foto (optional photo upload) // ───────────────────────────────────────────────────────────── function FotoScreen({ state, setState, next, back, step, totalSteps }) { const fileRef = useRef(null); const onPick = (e) => { const f = e.target.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = () => setState({ ...state, photo: reader.result }); reader.readAsDataURL(f); }; const removePhoto = () => setState({ ...state, photo: null }); return (
FOTO · OPZIONALE

Vuoi mettere una foto?

Una foto del bimbo o del suo personaggio preferito. Apparirà sull'invito al posto del cerchio con l'età.

{!state.photo ? ( ) : (
)}
💡
Per usare un personaggio dei cartoni (Bing, Peppa, ecc.) basta caricare una sua immagine dal telefono.
); } Object.assign(window, { WelcomeScreen, NomeScreen, EtaScreen, FotoScreen, TemaScreen, DettagliScreen, GeneratingScreen, ScreenHeader, CTAFooter, Bullet, });