// Profile.jsx — Edit-account screen // // Data model (DB-ready). Maps 1:1 to a `users` row in Postgres. // // Provided by Google OAuth (basic scope) — pre-filled, mostly immutable: // id, googleId, email, createdAt, avatarUrl (initial), displayName (initial) // // NOT provided by Google → must be asked of the user post-signup: // phone — SMS reminders, group communication // birthDate — birthday recognition, age-aware ministries // role — what they do at the church // church — which LaVid campus they belong to // instrument — for musicians / worship leaders // bio — short self-intro // language — UI preference // timeZone — IANA tz; auto-detected on first signup, editable // nationalId — DNI/NIE (sensitive: encrypt at rest, needed for fiscal receipts) // emergencyContact — contacted only during retreats / ministry trips // notifications — granular opt-ins // // Real implementation will: // - Hydrate from `GET /me` on mount // - On first login, prompt user to fill required-but-empty fields (phone, birthDate) // - PATCH /me on save (only dirty fields) // - Sign out via /auth/logout (clears session cookie) const ROLES = [ { id: 'worship_leader', label: 'Líder de alabanza', short: 'Líder' }, { id: 'musician', label: 'Músico', short: 'Músico' }, { id: 'vocalist', label: 'Vocalista', short: 'Vocal' }, { id: 'tech', label: 'Técnico', short: 'Técnico' }, { id: 'member', label: 'Miembro', short: 'Miembro' }, ]; const CHURCHES = [ { id: 'lavid_valencia', label: 'LaVid Valencia' }, { id: 'lavid_torrevieja', label: 'LaVid Torrevieja' }, ]; const LANGUAGES = [ { id: 'es', label: 'Español' }, { id: 'en', label: 'English' }, { id: 'pt', label: 'Português' }, ]; const TIMEZONES = [ { id: 'Europe/Madrid', label: 'Madrid (CET)' }, { id: 'Atlantic/Canary', label: 'Canarias (WET)' }, { id: 'America/Mexico_City', label: 'Ciudad de México' }, { id: 'America/Bogota', label: 'Bogotá' }, { id: 'America/Lima', label: 'Lima' }, { id: 'America/Buenos_Aires', label: 'Buenos Aires' }, { id: 'America/Sao_Paulo', label: 'São Paulo' }, ]; const RELATIONSHIPS = [ { id: 'spouse', label: 'Esposo/a' }, { id: 'parent', label: 'Padre / Madre' }, { id: 'sibling', label: 'Hermano/a' }, { id: 'child', label: 'Hijo/a' }, { id: 'friend', label: 'Amigo/a' }, { id: 'other', label: 'Otro' }, ]; const MOCK_USER = { // From Google OAuth id: 'usr_01HXYZ', googleId: '108374561239847562930', email: 'lucas.morales@lavid.es', displayName: 'Lucas Morales', avatarUrl: null, // null → render initial createdAt: '2024-04-26T10:00:00Z', updatedAt: '2026-04-27T07:00:00Z', // Asked of user (not in Google scopes) phone: '+34 612 345 678', // E.164-friendly; empty for fresh users birthDate: '1990-04-26', // ISO date YYYY-MM-DD; empty for fresh users role: 'worship_leader', church: 'lavid_valencia', instrument: 'Guitarra acústica', bio: 'Liderando alabanza desde 2019. Padre de dos.', language: 'es', timeZone: 'Europe/Madrid', // IANA; auto-detected at signup via Intl.DateTimeFormat() nationalId: '12345678Z', // DNI/NIE; encrypt at rest, used for fiscal receipts emergencyContact: { name: 'María Morales', phone: '+34 678 123 456', relationship: 'spouse', }, notifications: { setlistUpdates: true, newSongs: true, reminders: false, }, }; // -- Helpers -------------------------------------------------------------- function initialsOf(name) { return (name || '?').split(/\s+/).filter(Boolean).slice(0, 2).map(s => s[0]).join('').toUpperCase(); } function formatJoinDate(iso) { const d = new Date(iso); return d.toLocaleDateString('es-ES', { month: 'short', year: 'numeric' }); } // -- iOS-style toggle ----------------------------------------------------- function Toggle({ checked, onChange, label }) { return ( ); } // -- Section primitives --------------------------------------------------- function Section({ title, subtitle, children }) { return (
{title}
{children}
{subtitle && (
{subtitle}
)}
); } function Row({ label, children, last = false }) { return (
{label}
{children}
); } function InlineInput({ value, onChange, placeholder, type = 'text', readOnly = false, maxLength }) { return ( onChange && onChange(e.target.value)} placeholder={placeholder} readOnly={readOnly} maxLength={maxLength} style={{ background: 'transparent', border: 'none', outline: 'none', textAlign: 'right', color: readOnly ? 'rgba(255,255,255,0.4)' : '#fff', fontSize: 15, fontFamily: 'var(--hl-font-ui)', fontWeight: 500, letterSpacing: -0.2, width: '100%', padding: 0, minWidth: 0, }} /> ); } function PickerRow({ label, value, options, onPick, last }) { const [open, setOpen] = React.useState(false); const current = options.find(o => o.id === value); return ( <> {open && (
{options.map(o => ( ))}
)} ); } // -- ProfileScreen -------------------------------------------------------- function ProfileScreen({ user = MOCK_USER, onBack, onSave, onLogout, onReplayTutorial }) { const [draft, setDraft] = React.useState(user); const [saving, setSaving] = React.useState(false); const dirty = React.useMemo(() => JSON.stringify(draft) !== JSON.stringify(user), [draft, user]); const set = (patch) => setDraft(d => ({ ...d, ...patch })); const setNotif = (key, v) => setDraft(d => ({ ...d, notifications: { ...d.notifications, [key]: v } })); const setEmergency = (key, v) => setDraft(d => ({ ...d, emergencyContact: { ...(d.emergencyContact || {}), [key]: v }, })); const handleSave = async () => { if (!dirty || saving) return; setSaving(true); // Real impl: PATCH /me with diff(draft, user). Prototype just simulates the spinner. await new Promise(r => setTimeout(r, 600)); setSaving(false); onSave && onSave(draft); }; return (
{/* ambient orbs */}
{/* Nav bar */}
Perfil
{/* Scrollable body */}
{/* Avatar hero */}
{/* halo */}
{!draft.avatarUrl && initialsOf(draft.displayName)}
{/* edit overlay */}
{draft.displayName || 'Sin nombre'}
{draft.email}
set({ displayName: v })} placeholder="Tu nombre" maxLength={60} /> set({ phone: v })} placeholder="+34 600 000 000" maxLength={20} /> set({ birthDate: e.target.value })} max={new Date().toISOString().slice(0, 10)} min="1900-01-01" style={{ background: 'transparent', border: 'none', outline: 'none', textAlign: 'right', color: draft.birthDate ? '#fff' : 'rgba(255,255,255,0.4)', fontSize: 15, fontFamily: 'var(--hl-font-ui)', fontWeight: 500, letterSpacing: -0.2, padding: 0, colorScheme: 'dark', }} /> set({ role: v })} /> {(draft.role === 'musician' || draft.role === 'worship_leader') && ( set({ instrument: v })} placeholder="Guitarra, piano…" maxLength={40} /> )}
set({ church: v })} /> set({ language: v })} /> set({ timeZone: v })} last />
set({ nationalId: v.toUpperCase() })} placeholder="12345678Z" maxLength={9} />
setEmergency('name', v)} placeholder="Nombre completo" maxLength={60} /> setEmergency('phone', v)} placeholder="+34 600 000 000" maxLength={20} /> setEmergency('relationship', v)} last />
setNotif('setlistUpdates', v)} label="Cambios en setlist" /> setNotif('newSongs', v)} label="Nuevas canciones" /> setNotif('reminders', v)} label="Recordatorios" />