413 lines
17 KiB
JavaScript
413 lines
17 KiB
JavaScript
import { useState, useEffect } from 'react';
|
||
import { useToast } from '../contexts/ToastContext.jsx';
|
||
import { useAuth } from '../contexts/AuthContext.jsx';
|
||
import { api } from '../utils/api.js';
|
||
|
||
export default function AddChildAliasModal({ features = {}, onClose }) {
|
||
const toast = useToast();
|
||
const { user: currentUser } = useAuth();
|
||
const loginType = features.loginType || 'guardian_only';
|
||
const isMixedAge = loginType === 'mixed_age';
|
||
|
||
// ── Guardian-only state (alias form) ──────────────────────────────────────
|
||
const [aliases, setAliases] = useState([]);
|
||
const [editingAlias, setEditingAlias] = useState(null);
|
||
const [form, setForm] = useState({ firstName: '', lastName: '', dob: '', phone: '', email: '' });
|
||
const [avatarFile, setAvatarFile] = useState(null);
|
||
const [saving, setSaving] = useState(false);
|
||
|
||
// ── Mixed-age state (real minor users) ────────────────────────────────────
|
||
const [minorPlayers, setMinorPlayers] = useState([]); // available + already-mine
|
||
const [selectedMinorId, setSelectedMinorId] = useState('');
|
||
const [addingMinor, setAddingMinor] = useState(false);
|
||
|
||
// ── Partner state (shared) ────────────────────────────────────────────────
|
||
const [partner, setPartner] = useState(null);
|
||
const [selectedPartnerId, setSelectedPartnerId] = useState('');
|
||
const [respondSeparately, setRespondSeparately] = useState(false);
|
||
const [allUsers, setAllUsers] = useState([]);
|
||
const [savingPartner, setSavingPartner] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const loads = [api.getPartner(), api.searchUsers('')];
|
||
if (isMixedAge) {
|
||
loads.push(api.getMinorPlayers());
|
||
} else {
|
||
loads.push(api.getAliases());
|
||
}
|
||
Promise.all(loads).then(([partnerRes, usersRes, thirdRes]) => {
|
||
const p = partnerRes.partner || null;
|
||
setPartner(p);
|
||
setSelectedPartnerId(p?.id?.toString() || '');
|
||
setRespondSeparately(p?.respond_separately || false);
|
||
setAllUsers((usersRes.users || []).filter(u => u.id !== currentUser?.id && !u.is_default_admin));
|
||
if (isMixedAge) {
|
||
setMinorPlayers(thirdRes.users || []);
|
||
} else {
|
||
setAliases(thirdRes.aliases || []);
|
||
}
|
||
}).catch(() => {});
|
||
}, [isMixedAge]);
|
||
|
||
// ── Helpers ───────────────────────────────────────────────────────────────
|
||
const set = k => e => setForm(p => ({ ...p, [k]: e.target.value }));
|
||
|
||
const resetForm = () => {
|
||
setEditingAlias(null);
|
||
setForm({ firstName: '', lastName: '', dob: '', phone: '', email: '' });
|
||
setAvatarFile(null);
|
||
};
|
||
|
||
const lbl = (text, required) => (
|
||
<label className="text-sm" style={{ color: 'var(--text-secondary)', display: 'block', marginBottom: 4 }}>
|
||
{text}{required && <span style={{ color: 'var(--error)', marginLeft: 2 }}>*</span>}
|
||
</label>
|
||
);
|
||
|
||
// ── Partner handlers ──────────────────────────────────────────────────────
|
||
const handleSavePartner = async () => {
|
||
setSavingPartner(true);
|
||
try {
|
||
if (!selectedPartnerId) {
|
||
await api.removePartner();
|
||
setPartner(null);
|
||
setRespondSeparately(false);
|
||
if (!isMixedAge) {
|
||
const { aliases: fresh } = await api.getAliases();
|
||
setAliases(fresh || []);
|
||
resetForm();
|
||
} else {
|
||
const { users: fresh } = await api.getMinorPlayers();
|
||
setMinorPlayers(fresh || []);
|
||
}
|
||
toast('Spouse/Partner/Co-Parent removed', 'success');
|
||
} else {
|
||
const { partner: p } = await api.setPartner(parseInt(selectedPartnerId), respondSeparately);
|
||
setPartner(p);
|
||
setRespondSeparately(p?.respond_separately || false);
|
||
if (!isMixedAge) {
|
||
const { aliases: fresh } = await api.getAliases();
|
||
setAliases(fresh || []);
|
||
}
|
||
toast('Spouse/Partner/Co-Parent saved', 'success');
|
||
}
|
||
} catch (e) {
|
||
toast(e.message, 'error');
|
||
} finally {
|
||
setSavingPartner(false);
|
||
}
|
||
};
|
||
|
||
// ── Guardian-only alias handlers ──────────────────────────────────────────
|
||
const handleSelectAlias = (a) => {
|
||
if (editingAlias?.id === a.id) { resetForm(); return; }
|
||
setEditingAlias(a);
|
||
setForm({
|
||
firstName: a.first_name || '',
|
||
lastName: a.last_name || '',
|
||
dob: a.date_of_birth ? a.date_of_birth.slice(0, 10) : '',
|
||
phone: a.phone || '',
|
||
email: a.email || '',
|
||
});
|
||
setAvatarFile(null);
|
||
};
|
||
|
||
const handleSaveAlias = async () => {
|
||
if (!form.firstName.trim() || !form.lastName.trim())
|
||
return toast('First and last name required', 'error');
|
||
setSaving(true);
|
||
try {
|
||
if (editingAlias) {
|
||
await api.updateAlias(editingAlias.id, {
|
||
firstName: form.firstName.trim(),
|
||
lastName: form.lastName.trim(),
|
||
dateOfBirth: form.dob || null,
|
||
phone: form.phone || null,
|
||
email: form.email || null,
|
||
});
|
||
if (avatarFile) await api.uploadAliasAvatar(editingAlias.id, avatarFile);
|
||
toast('Child alias updated', 'success');
|
||
} else {
|
||
const { alias } = await api.createAlias({
|
||
firstName: form.firstName.trim(),
|
||
lastName: form.lastName.trim(),
|
||
dateOfBirth: form.dob || null,
|
||
phone: form.phone || null,
|
||
email: form.email || null,
|
||
});
|
||
if (avatarFile) await api.uploadAliasAvatar(alias.id, avatarFile);
|
||
toast('Child alias added', 'success');
|
||
}
|
||
const { aliases: fresh } = await api.getAliases();
|
||
setAliases(fresh || []);
|
||
resetForm();
|
||
} catch (e) {
|
||
toast(e.message, 'error');
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleDeleteAlias = async (e, aliasId) => {
|
||
e.stopPropagation();
|
||
try {
|
||
await api.deleteAlias(aliasId);
|
||
setAliases(prev => prev.filter(a => a.id !== aliasId));
|
||
if (editingAlias?.id === aliasId) resetForm();
|
||
toast('Child alias removed', 'success');
|
||
} catch (err) { toast(err.message, 'error'); }
|
||
};
|
||
|
||
// ── Mixed-age minor handlers ──────────────────────────────────────────────
|
||
const myMinors = minorPlayers.filter(u => u.guardian_user_id === currentUser?.id);
|
||
const availableMinors = minorPlayers.filter(u => !u.guardian_user_id);
|
||
|
||
const handleAddMinor = async () => {
|
||
if (!selectedMinorId) return;
|
||
setAddingMinor(true);
|
||
try {
|
||
await api.addGuardianChild(parseInt(selectedMinorId));
|
||
const { users: fresh } = await api.getMinorPlayers();
|
||
setMinorPlayers(fresh || []);
|
||
setSelectedMinorId('');
|
||
toast('Child added and account activated', 'success');
|
||
} catch (e) {
|
||
toast(e.message, 'error');
|
||
} finally {
|
||
setAddingMinor(false);
|
||
}
|
||
};
|
||
|
||
const handleRemoveMinor = async (e, minorId) => {
|
||
e.stopPropagation();
|
||
try {
|
||
await api.removeGuardianChild(minorId);
|
||
const { users: fresh } = await api.getMinorPlayers();
|
||
setMinorPlayers(fresh || []);
|
||
toast('Child removed', 'success');
|
||
} catch (err) { toast(err.message, 'error'); }
|
||
};
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
|
||
<div className="modal">
|
||
|
||
{/* Header */}
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
|
||
<h2 className="modal-title" style={{ margin: 0 }}>Family Manager</h2>
|
||
<button className="btn-icon" onClick={onClose} aria-label="Close">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Spouse/Partner/Co-Parent section */}
|
||
<div style={{ marginBottom: 16 }}>
|
||
{lbl('Spouse/Partner/Co-Parent')}
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<select
|
||
className="input"
|
||
style={{ flex: 1 }}
|
||
value={selectedPartnerId}
|
||
onChange={e => setSelectedPartnerId(e.target.value)}
|
||
>
|
||
<option value="">— None —</option>
|
||
{allUsers.map(u => (
|
||
<option key={u.id} value={u.id}>{u.display_name || u.name}</option>
|
||
))}
|
||
</select>
|
||
<button
|
||
className="btn btn-primary"
|
||
onClick={handleSavePartner}
|
||
disabled={savingPartner}
|
||
style={{ whiteSpace: 'nowrap' }}
|
||
>
|
||
{savingPartner ? 'Saving…' : 'Save'}
|
||
</button>
|
||
</div>
|
||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, cursor: 'pointer', fontSize: 13, color: 'var(--text-secondary)' }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={respondSeparately}
|
||
onChange={e => setRespondSeparately(e.target.checked)}
|
||
style={{ width: 15, height: 15, cursor: 'pointer', accentColor: 'var(--primary)' }}
|
||
/>
|
||
Respond separately to events
|
||
</label>
|
||
{partner && (
|
||
<div className="text-sm" style={{ color: 'var(--text-secondary)', marginTop: 6 }}>
|
||
Linked with {partner.display_name || partner.name}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* ── Mixed Age: link real minor users ── */}
|
||
{isMixedAge && (
|
||
<>
|
||
{/* Current children list */}
|
||
{myMinors.length > 0 && (
|
||
<div style={{ marginBottom: 16 }}>
|
||
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>
|
||
Your Children
|
||
</div>
|
||
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
|
||
{myMinors.map((u, i) => (
|
||
<div
|
||
key={u.id}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 10,
|
||
padding: '9px 12px',
|
||
borderBottom: i < myMinors.length - 1 ? '1px solid var(--border)' : 'none',
|
||
}}
|
||
>
|
||
<span style={{ flex: 1, fontSize: 14 }}>{u.first_name} {u.last_name}</span>
|
||
{u.date_of_birth && (
|
||
<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>
|
||
{u.date_of_birth.slice(0, 10)}
|
||
</span>
|
||
)}
|
||
<button
|
||
onClick={e => handleRemoveMinor(e, u.id)}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--error)', fontSize: 18, lineHeight: 1, padding: '0 2px' }}
|
||
aria-label="Remove"
|
||
>×</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Add minor from players group */}
|
||
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>
|
||
Add Child
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<select
|
||
className="input"
|
||
style={{ flex: 1 }}
|
||
value={selectedMinorId}
|
||
onChange={e => setSelectedMinorId(e.target.value)}
|
||
>
|
||
<option value="">— Select a player —</option>
|
||
{availableMinors.map(u => (
|
||
<option key={u.id} value={u.id}>
|
||
{u.first_name} {u.last_name}{u.date_of_birth ? ` (${u.date_of_birth.slice(0, 10)})` : ''}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<button
|
||
className="btn btn-primary"
|
||
onClick={handleAddMinor}
|
||
disabled={addingMinor || !selectedMinorId}
|
||
style={{ whiteSpace: 'nowrap' }}
|
||
>
|
||
{addingMinor ? 'Adding…' : 'Add'}
|
||
</button>
|
||
</div>
|
||
{availableMinors.length === 0 && myMinors.length === 0 && (
|
||
<p className="text-sm" style={{ color: 'var(--text-tertiary)', marginTop: 8 }}>
|
||
No minor players available to link.
|
||
</p>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* ── Guardian Only: alias form ── */}
|
||
{!isMixedAge && (
|
||
<>
|
||
{/* Existing aliases list */}
|
||
{aliases.length > 0 && (
|
||
<div style={{ marginBottom: 16 }}>
|
||
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>
|
||
Your Children — click to edit
|
||
</div>
|
||
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
|
||
{aliases.map((a, i) => (
|
||
<div
|
||
key={a.id}
|
||
onClick={() => handleSelectAlias(a)}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 10,
|
||
padding: '9px 12px', cursor: 'pointer',
|
||
borderBottom: i < aliases.length - 1 ? '1px solid var(--border)' : 'none',
|
||
background: editingAlias?.id === a.id ? 'var(--primary-light)' : 'transparent',
|
||
}}
|
||
>
|
||
<span style={{ flex: 1, fontSize: 14, fontWeight: editingAlias?.id === a.id ? 600 : 400 }}>
|
||
{a.first_name} {a.last_name}
|
||
</span>
|
||
{a.date_of_birth && (
|
||
<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>
|
||
{a.date_of_birth.slice(0, 10)}
|
||
</span>
|
||
)}
|
||
<button
|
||
onClick={e => handleDeleteAlias(e, a.id)}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--error)', fontSize: 18, lineHeight: 1, padding: '0 2px' }}
|
||
aria-label="Remove"
|
||
>×</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Form section label */}
|
||
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>
|
||
{editingAlias
|
||
? `Editing: ${editingAlias.first_name} ${editingAlias.last_name}`
|
||
: 'Add Child'}
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
|
||
<div>
|
||
{lbl('First Name', true)}
|
||
<input className="input" value={form.firstName} onChange={set('firstName')}
|
||
autoComplete="off" autoCapitalize="words" />
|
||
</div>
|
||
<div>
|
||
{lbl('Last Name', true)}
|
||
<input className="input" value={form.lastName} onChange={set('lastName')}
|
||
autoComplete="off" autoCapitalize="words" />
|
||
</div>
|
||
<div>
|
||
{lbl('Date of Birth')}
|
||
<input className="input" placeholder="YYYY-MM-DD" value={form.dob} onChange={set('dob')}
|
||
autoComplete="off" />
|
||
</div>
|
||
<div>
|
||
{lbl('Phone')}
|
||
<input className="input" type="tel" value={form.phone} onChange={set('phone')}
|
||
autoComplete="off" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
{lbl('Email (optional)')}
|
||
<input className="input" type="email" value={form.email} onChange={set('email')}
|
||
autoComplete="off" />
|
||
</div>
|
||
<div>
|
||
{lbl('Avatar (optional)')}
|
||
<input type="file" accept="image/*"
|
||
onChange={e => setAvatarFile(e.target.files?.[0] || null)} />
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
|
||
{editingAlias && (
|
||
<button className="btn btn-secondary" onClick={resetForm}>Cancel Edit</button>
|
||
)}
|
||
<button className="btn btn-primary" onClick={handleSaveAlias} disabled={saving}>
|
||
{saving ? 'Saving…' : editingAlias ? 'Update Alias' : 'Add Alias'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|