// my-agenda-drawer.jsx — Painel "Minha Agenda" do agente. // Permite configurar horário de atendimento por dia da semana, // bloquear/liberar slots manualmente e compartilhar um link público // para que clientes possam agendar diretamente. const MY_AG_WD = [ { id: 1, abbr: 'SEG', full: 'Segunda' }, { id: 2, abbr: 'TER', full: 'Terça' }, { id: 3, abbr: 'QUA', full: 'Quarta' }, { id: 4, abbr: 'QUI', full: 'Quinta' }, { id: 5, abbr: 'SEX', full: 'Sexta' }, { id: 6, abbr: 'SÁB', full: 'Sábado' }, { id: 0, abbr: 'DOM', full: 'Domingo' }, ]; const MY_AG_DEFAULT_AVAIL = { 1: { on: true, ranges: [{ from: '09:00', to: '12:00' }, { from: '14:00', to: '18:00' }] }, 2: { on: true, ranges: [{ from: '09:00', to: '12:00' }, { from: '14:00', to: '18:00' }] }, 3: { on: true, ranges: [{ from: '09:00', to: '12:00' }, { from: '14:00', to: '18:00' }] }, 4: { on: true, ranges: [{ from: '09:00', to: '12:00' }, { from: '14:00', to: '18:00' }] }, 5: { on: true, ranges: [{ from: '09:00', to: '12:00' }, { from: '14:00', to: '17:00' }] }, 6: { on: false, ranges: [{ from: '09:00', to: '12:00' }] }, 0: { on: false, ranges: [{ from: '09:00', to: '12:00' }] }, }; // Generate slot times like 08:00, 08:30, …, 19:30 function myAgGenSlots(stepMin = 30, dayStart = 7, dayEnd = 20) { const out = []; for (let m = dayStart * 60; m < dayEnd * 60; m += stepMin) { out.push(`${String(Math.floor(m / 60)).padStart(2, '0')}:${String(m % 60).padStart(2, '0')}`); } return out; } function myAgTimeToMin(t) { const [h, m] = t.split(':').map(Number); return h * 60 + m; } // Build "default availability map" from weekly availability config function myAgBuildAvailMap(avail, slots) { const map = {}; MY_AG_WD.forEach(wd => { map[wd.id] = {}; const cfg = avail[wd.id]; slots.forEach(slot => { if (!cfg.on) { map[wd.id][slot] = 'blocked'; return; } const m = myAgTimeToMin(slot); const inside = cfg.ranges.some(r => m >= myAgTimeToMin(r.from) && m < myAgTimeToMin(r.to)); map[wd.id][slot] = inside ? 'available' : 'blocked'; }); }); return map; } // ============================================================================ // Main drawer // ============================================================================ function MyAgendaDrawer({ agentName = 'Júlia', agentTitle = 'Atendimento', onClose }) { const [tab, setTab] = React.useState('horarios'); const [slotDuration, setSlotDuration] = React.useState(30); const [bufferMin, setBufferMin] = React.useState(0); const [advanceMin, setAdvanceMin] = React.useState(60); const [horizon, setHorizon] = React.useState(30); // days ahead const [avail, setAvail] = React.useState(MY_AG_DEFAULT_AVAIL); // overrides: { 'wd-slot': 'blocked' | 'available' } — per-weekday template overrides const [overrides, setOverrides] = React.useState({ '2-10:00': 'blocked', // exemplo: ter 10h ocupado '4-15:30': 'blocked', // exemplo: qui 15h30 ocupado }); const slots = React.useMemo(() => myAgGenSlots(slotDuration), [slotDuration]); const baseMap = React.useMemo(() => myAgBuildAvailMap(avail, slots), [avail, slots]); // Final state per slot: blocked|available|busy const stateFor = (wdId, slot) => { const key = `${wdId}-${slot}`; if (overrides[key]) return overrides[key]; return baseMap[wdId][slot]; }; const toggleSlot = (wdId, slot) => { const cur = stateFor(wdId, slot); const key = `${wdId}-${slot}`; setOverrides(prev => { const next = { ...prev }; if (cur === 'available') next[key] = 'blocked'; else if (cur === 'blocked' && baseMap[wdId][slot] === 'available') next[key] = 'available'; else delete next[key]; return next; }); }; const publicLink = `atende.ai/agendar/${agentName.toLowerCase()}-iguabela`; const fullLink = `https://${publicLink}`; return (
Salvo automaticamente
{ window.showToast({ tipo: 'sucesso', titulo: 'Agenda atualizada' }); onClose && onClose(); }} /> } > {/* Public link banner — always visible */} {/* Tab nav */}
{[ ['horarios', 'Disponibilidade', 'clock'], ['semana', 'Esta semana', 'calendar'], ['preview', 'Página pública', 'external-link'], ['regras', 'Regras', 'settings'], ].map(([id, label, icon]) => ( ))}
{tab === 'horarios' && ( )} {tab === 'semana' && ( setOverrides({})} /> )} {tab === 'preview' && ( )} {tab === 'regras' && ( )} ); } // ============================================================================ // Public link card // ============================================================================ function MyAgPublicLinkCard({ link, display, agentName, agentTitle }) { const [copied, setCopied] = React.useState(false); const copy = () => { try { navigator.clipboard?.writeText(link); } catch (_) {} setCopied(true); setTimeout(() => setCopied(false), 1800); }; return (
Link público de agendamento
{display}
Envie este link para clientes — eles escolhem um horário livre e agendam direto com {agentName}.
); } // ============================================================================ // Tab 1 — Hours per weekday // ============================================================================ function MyAgHoursPanel({ avail, setAvail, slotDuration }) { const setDay = (id, patch) => setAvail(a => ({ ...a, [id]: { ...a[id], ...patch } })); const addRange = (id) => { const last = avail[id].ranges[avail[id].ranges.length - 1]; const start = last ? last.to : '14:00'; const end = last ? '18:00' : '17:00'; setDay(id, { ranges: [...avail[id].ranges, { from: start, to: end }] }); }; const removeRange = (id, idx) => setDay(id, { ranges: avail[id].ranges.filter((_, i) => i !== idx) }); const updateRange = (id, idx, patch) => setDay(id, { ranges: avail[id].ranges.map((r, i) => i === idx ? { ...r, ...patch } : r) }); const copyToAll = (sourceId) => { const src = avail[sourceId]; const next = { ...avail }; [1, 2, 3, 4, 5].forEach(id => { if (id !== sourceId) next[id] = { on: true, ranges: src.ranges.map(r => ({ ...r })) }; }); setAvail(next); window.showToast({ tipo: 'sucesso', titulo: 'Configuração copiada', descricao: 'Aplicada de Seg a Sex.' }); }; return (
Horário de atendimento
Defina quando você está disponível em cada dia da semana. Os horários fora destas faixas ficam automaticamente bloqueados.
Slots de {slotDuration} min
{MY_AG_WD.map(wd => { const cfg = avail[wd.id]; return (
setDay(wd.id, { on: v })} compact />
{wd.full}
{cfg.on ? cfg.ranges.map(r => `${r.from}–${r.to}`).join(' · ') : 'Indisponível'}
{cfg.on ? (
{cfg.ranges.map((r, i) => (
updateRange(wd.id, i, { from: v })} step={15} /> até updateRange(wd.id, i, { to: v })} step={15} /> {cfg.ranges.length > 1 && ( )}
))}
) : (
Dia inteiro bloqueado
)} {wd.id >= 1 && wd.id <= 5 && cfg.on && ( )}
); })}
Os clientes só verão slots dentro destas faixas. Para bloquear um horário específico dentro da disponibilidade, vá em Esta semana.
); } // ============================================================================ // Tab 2 — Week grid for manual blocking // ============================================================================ function MyAgWeekPanel({ slots, stateFor, toggleSlot, overrides, clearOverrides }) { // visible week ordered Seg→Dom const weekOrder = [1, 2, 3, 4, 5, 6, 0]; const overrideCount = Object.keys(overrides).length; return (
Esta semana
Clique em qualquer slot para ocupar ou liberar. Slots verdes ficam visíveis no link público.
Livre Ocupado Fora do horário
{overrideCount > 0 && ( )}
{weekOrder.map(id => { const wd = MY_AG_WD.find(w => w.id === id); return (
{wd.abbr}
); })} {slots.map(slot => (
{slot}
{weekOrder.map(id => { const st = stateFor(id, slot); const key = `${id}-${slot}`; const isOverride = !!overrides[key]; return ( ); })} ))}
); } // ============================================================================ // Tab 3 — Public page preview (Calendly-style) // ============================================================================ const MY_AG_MONTHS = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']; const MY_AG_WD_LONG = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb']; const MY_AG_WD_MINI = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb']; function MyAgPublicPreview({ link, agentName, agentTitle, slots, stateFor }) { const [phase, setPhase] = React.useState('pick'); // pick | form | done const [picked, setPicked] = React.useState(null); const [form, setForm] = React.useState({ nome: '', sobrenome: '', contato: '', email: '', local: 'Videochamada', assunto: '' }); const [showCal, setShowCal] = React.useState(false); const [tz, setTz] = React.useState('Americas/Fortaleza'); // start = monday of visible week const [weekStart, setWeekStart] = React.useState(() => { const today = new Date(2026, 4, 25); // segunda const d = new Date(today); const wd = d.getDay(); const diff = wd === 0 ? -6 : 1 - wd; d.setDate(d.getDate() + diff); return d; }); const visibleWeek = React.useMemo(() => { return Array.from({ length: 7 }, (_, i) => { const d = new Date(weekStart); d.setDate(d.getDate() + i); return d; }); }, [weekStart]); const monthLabel = `${MY_AG_MONTHS[weekStart.getMonth()]} ${weekStart.getFullYear()}`; const shiftWeek = (dir) => { const d = new Date(weekStart); d.setDate(d.getDate() + dir * 7); setWeekStart(d); }; const pickSlot = (date, slot) => { setPicked({ wd: date.getDay(), slot, date }); setPhase('form'); }; const submit = (e) => { e?.preventDefault(); if (!form.nome || !form.sobrenome || !form.contato || !form.email || !form.assunto) return; setPhase('done'); }; const goToDate = (d) => { const nd = new Date(d); const wd = nd.getDay(); const diff = wd === 0 ? -6 : 1 - wd; nd.setDate(nd.getDate() + diff); setWeekStart(nd); setShowCal(false); }; // For display: only show 6 time slots per day (10,11,14,15,16,17 like reference) const displaySlots = React.useMemo(() => { const wanted = ['10:00','11:00','14:00','15:00','16:00','17:00']; return wanted; }, []); return (
Pré-visualização da página pública
É exatamente o que seu cliente vê ao abrir o link.
Demonstração
{/* Browser-frame */}
{link}
{phase === 'pick' && ( <> {/* Header */}
{(agentName || 'A').slice(0,1)}
{agentName} | {agentTitle}
Escolha um horário adequado para você.
{/* Toolbar */}
{monthLabel}
{showCal && ( setShowCal(false)} /> )}
{/* Grid */}
{visibleWeek.map((d, i) => { const wd = d.getDay(); const isWeekend = wd === 0 || wd === 6; const dayLabel = MY_AG_WD_LONG[wd]; return (
{dayLabel}
{String(d.getDate()).padStart(2, '0')}
{displaySlots.map(slot => { const st = stateFor(wd, slot); const ok = st === 'available'; return ( ); })}
); })}
)} {phase === 'form' && (
{(agentName || 'A').slice(0,1)}
{agentName} | {agentTitle}
{picked && ( <> {picked.date.toLocaleDateString('pt-BR', { weekday: 'long', day: '2-digit', month: 'long' })} · {picked.slot} )}
Confirme seus dados
setForm({ ...form, nome: e.target.value })} />
setForm({ ...form, sobrenome: e.target.value })} />
setForm({ ...form, contato: v })} />
setForm({ ...form, email: v })} placeholder="maria@email.com" />