/* FrontCall Hub — recorrência: bottom sheets (encaixar, remarcar, ocorrência, plano). Tudo ancorado dentro do frame do iPhone via portal no bezel. */ const SCH = () => window.FCSched; /* ================= base: bottom sheet ================= */ function SchedSheet({ open, onClose, title, subtitle, children }) { const elRef = React.useRef(null); if (!elRef.current) elRef.current = document.createElement("div"); const [shown, setShown] = React.useState(false); React.useEffect(() => { if (!open) return; const host = document.querySelector("[data-ios-bezel]") || document.body; host.appendChild(elRef.current); const t = requestAnimationFrame(() => setShown(true)); return () => { cancelAnimationFrame(t); setShown(false); if (elRef.current.parentNode) elRef.current.parentNode.removeChild(elRef.current); }; }, [open]); if (!open) return null; return ReactDOM.createPortal(
{title}
{subtitle &&
{subtitle}
}
{children}
, elRef.current ); } /* ================= pedacinhos compartilhados ================= */ function SchedLabel({ children }) { return
{children}
; } function ChipBtn({ on, onClick, children, style = {} }) { return ( ); } function DayChips({ value, onChange, days = 14 }) { const S = SCH(); const list = []; for (let i = 1; i <= days; i++) { const d = S.addDays(S.TODAY, i); if (d.getDay() === 0) continue; list.push(d); } return (
{list.map((d) => { const v = S.iso(d); const on = v === value; return ( ); })}
); } const SCHED_TIMES = ["8:00 AM", "9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM"]; function TimeChips({ value, onChange }) { return (
{SCHED_TIMES.map((t) => ( onChange(t)} style={{ fontFamily: "var(--font-mono)", fontSize: "var(--fs-caption)", padding: "9px 12px" }}>{t} ))}
); } function CleanerChips({ value, onChange }) { const cleaners = (window.FCData.team || []).filter((m) => m.role === "cleaner"); return (
{cleaners.map((m) => ( onChange(m.name)} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "7px 14px 7px 7px" }}> {m.name} ))}
); } function SmsToggle({ value, onChange }) { return (
onChange(!value)} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 14px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", background: "var(--surface-sunken)", cursor: "pointer", marginTop: 18 }}>
Avisar cliente por SMS
A Riley manda a mensagem em inglês
); } function SheetSuccess({ title, sub }) { return (
{title}
{sub &&
{sub}
}
); } /* ================= ENCAIXAR (cliente flexível) ================= */ function FitSheet({ q, onClose, onDone }) { const S = SCH(); const sugg = React.useMemo(() => S.suggestions(q.plan), [q.plan.id]); const [pick, setPick] = React.useState(null); // índice da sugestão const [manual, setManual] = React.useState(false); const [day, setDay] = React.useState(null); const [time, setTime] = React.useState(q.plan.window === "Tarde" ? "1:00 PM" : "9:00 AM"); const [cleaner, setCleaner] = React.useState(q.plan.cleaner); const [sms, setSms] = React.useState(true); const [ok, setOk] = React.useState(false); const chosen = manual ? (day && { dateIso: day, time }) : (pick != null && sugg[pick]); const confirm = () => { if (!chosen) return; S.confirmFit(q.plan, chosen.dateIso, chosen.time, cleaner, sms); setOk(true); setTimeout(() => { onDone(); onClose(); }, 1100); }; return ( {ok ? ( ) : (
{q.overdue ? `A ${S.freqLabel(q.plan).toLowerCase()} ${q.label} — encaixe o quanto antes.` : `Próxima limpeza ${q.label} (${S.fmt(q.due)}).`}
{!manual && (
Sugestões — dias mais vazios
{sugg.map((s, i) => { const on = pick === i; return ( ); })}
)} {manual && (
Dia Horário
)} Quem vai
)} ); } /* ================= REMARCAR (só esta / série) ================= */ function RescheduleSheet({ occ, onClose, onDone }) { const S = SCH(); const hasSeries = !!occ.planId && !!occ.plan; const [scope, setScope] = React.useState("only"); const [day, setDay] = React.useState(null); const [time, setTime] = React.useState(occ.time); const [sms, setSms] = React.useState(true); const [ok, setOk] = React.useState(false); const confirm = () => { if (!day) return; S.reschedule(occ, scope, day, time, sms); setOk(true); setTimeout(() => { onDone(); onClose(); }, 1100); }; return ( {ok ? ( ) : (
{hasSeries && (
O que muda?
{[ { v: "only", t: "Só esta visita", s: "A série continua no ritmo normal" }, { v: "series", t: "Esta e as próximas", s: `Muda o dia/hora da série ${S.freqLabel(occ.plan).toLowerCase()}` }, ].map((o) => { const on = scope === o.v; return ( ); })}
)} Novo dia Novo horário
)} ); } /* ================= OCORRÊNCIA (detalhe + ações) ================= */ function OccurrenceSheet({ occ, go, onClose, onReschedule, onChanged }) { const S = SCH(); const [confirmSkip, setConfirmSkip] = React.useState(false); const [swapCleaner, setSwapCleaner] = React.useState(false); const [cleaner, setCleaner] = React.useState(occ.cleaner); const row = (icon, label, sub, onClick, tone) => ( ); return (
{occ.plan && {S.freqLabel(occ.plan)}} {occ.moved && Fora do ritmo} {occ.virtual && !occ.moved && Projetada}
${occ.price}} />
{row("calendar-clock", "Remarcar", occ.plan ? "Só esta visita ou a série inteira" : "Escolher novo dia e horário", onReschedule)} {!confirmSkip ? row("skip-forward", "Pular esta visita", "Volta no próximo ciclo, no ritmo normal", () => setConfirmSkip(true), "warm") : (
Pular {occ.date}?
)} {!swapCleaner ? row("users", "Trocar cleaner", "Só nesta visita — a série não muda", () => setSwapCleaner(true)) : (
{ setCleaner(n); SCH().setCleaner(occ, n); onChanged(); setSwapCleaner(false); }} />
)} {row("user-round", "Ver cliente", null, () => { onClose(); go("client", occ.clientId); })} ); } /* ================= PLANO (criar / editar / pausar / cancelar) ================= */ function PlanSheet({ clientId, onClose, onDone }) { const S = SCH(); const existing = S.planOf(clientId); const c = window.FCData.clients.find((x) => x.id === clientId); const [f, setF] = React.useState(() => existing ? { mode: existing.mode, freq: existing.freq, day: existing.day != null ? existing.day : 1, time: existing.time || "9:00 AM", monthly: existing.monthly || "semana", window: existing.window || "Manhã", cleaner: existing.cleaner } : { mode: "fixo", freq: "quinzenal", day: 1, time: "9:00 AM", monthly: "semana", window: "Manhã", cleaner: "Ana Lima" }); const set = (k, v) => setF((p) => ({ ...p, [k]: v })); const [pausing, setPausing] = React.useState(false); const [confirmCancel, setConfirmCancel] = React.useState(false); const [ok, setOk] = React.useState(null); const finish = (msg, sub) => { setOk({ msg, sub }); setTimeout(() => { onDone(); onClose(); }, 1100); }; const save = () => { S.savePlan(clientId, { mode: f.mode, freq: f.freq, monthly: f.freq === "mensal" ? f.monthly : undefined, day: f.mode === "fixo" ? f.day : undefined, time: f.mode === "fixo" ? f.time : undefined, window: f.window, cleaner: f.cleaner, service: existing ? existing.service : (c.prefs && c.prefs.service !== "—" ? c.prefs.service : c.service) || "Regular", price: existing ? existing.price : c.avgTicket !== "—" ? c.avgTicket : "150", anchor: undefined, }); finish(existing ? "Plano atualizado!" : "Plano criado!", f.mode === "fixo" ? `${({semanal:"Semanal",quinzenal:"Quinzenal",mensal:"Mensal"})[f.freq]} · ${S.WD[f.day]} · ${f.time}` : "Sem dia fixo — você encaixa quando a janela chegar."); }; return ( {ok ? : (
{existing && S.isPaused(existing) && (
Pausado até {S.fmt(S.fromISO(existing.pausedUntil))}
)} Frequência
{[["semanal", "Semanal"], ["quinzenal", "Quinzenal"], ["mensal", "Mensal"]].map(([v, l]) => ( set("freq", v)}>{l} ))}
{f.freq === "mensal" && f.mode === "fixo" && (
Mensal significa…
{[["semana", "Mesma semana do mês", "ex: toda 2ª quinta"], ["dia", "Mesmo dia do mês", "ex: todo dia 15"]].map(([v, t, s]) => { const on = f.monthly === v; return ( ); })}
)} Tipo de agendamento
{[["fixo", "Dia e hora fixos", "Entra na agenda sozinho"], ["flex", "Flexível", "Você encaixa quando a janela chega"]].map(([v, t, s]) => { const on = f.mode === v; return ( ); })}
{f.mode === "fixo" ? (
Dia da semana
{[1, 2, 3, 4, 5, 6].map((d) => ( set("day", d)} style={{ padding: "9px 0", flex: 1, textAlign: "center" }}>{S.WD[d]} ))}
Horário set("time", t)} />
) : (
Janela preferida
{["Manhã", "Tarde"].map((w) => set("window", w)}>{w})}
Quando a janela chegar, {c ? c.name.split(" ")[0] : "o cliente"} aparece em Agenda → A encaixar pra você escolher o dia.
)} Cleaner padrão set("cleaner", n)} />
{existing && (
{!pausing ? ( ) : (
Pausar por {[1, 2, 4].map((w) => ( { S.pause(existing, w); finish("Série pausada", `Sem visitas até ${S.fmt(S.addDays(S.TODAY, w * 7))}.`); }} style={{ padding: "7px 12px" }}>{w} sem. ))}
)} {!confirmCancel ? ( ) : (
As próximas visitas saem da agenda. Certeza?
)}
)}
)} ); } Object.assign(window, { SchedSheet, SchedLabel, ChipBtn, DayChips, TimeChips, CleanerChips, SmsToggle, SheetSuccess, FitSheet, RescheduleSheet, OccurrenceSheet, PlanSheet });