/* global React, Glyph */
/* Chantelle — modeling modal, message form, and persistent inbox.
Messages are stored in localStorage so they "sit in the site"
until Chantelle opens her inbox (the header envelope) and reads them. */
const { useState: useStateM, useEffect: useEffectM, useCallback: useCallbackM } = React;
/* ---------- icons ---------- */
const Icon = {
x: ,
go: ,
back: ,
cal: ,
chat: ,
check: ,
};
/* ---------- inbox store ---------- */
const INBOX_KEY = "chantelle_inbox_v1";
function readInbox(){ try{ return JSON.parse(localStorage.getItem(INBOX_KEY) || "[]"); }catch(e){ return []; } }
function writeInbox(list){ localStorage.setItem(INBOX_KEY, JSON.stringify(list)); window.dispatchEvent(new Event("cw-inbox")); }
function addMessage(msg){
const list = readInbox();
list.unshift({ id: Date.now() + "-" + Math.random().toString(36).slice(2,7), date: Date.now(), read: false, ...msg });
writeInbox(list);
}
function markRead(id){ writeInbox(readInbox().map((m) => m.id === id ? { ...m, read: true } : m)); }
function useInbox(){
const [list, setList] = useStateM(readInbox);
useEffectM(() => {
const h = () => setList(readInbox());
window.addEventListener("cw-inbox", h); window.addEventListener("storage", h);
return () => { window.removeEventListener("cw-inbox", h); window.removeEventListener("storage", h); };
}, []);
return list;
}
function fmtTime(ts){
const d = new Date(ts), now = new Date();
const sameDay = d.toDateString() === now.toDateString();
if (sameDay) return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
return d.toLocaleDateString([], { month: "short", day: "numeric" });
}
/* ---------- modal shell ---------- */
function Modal({ children, onClose, wide }){
const [closing, setClosing] = useStateM(false);
const close = useCallbackM(() => { setClosing(true); setTimeout(onClose, 210); }, [onClose]);
useEffectM(() => {
const h = (e) => { if (e.key === "Escape") close(); };
window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [close]);
return (
{ if (e.target === e.currentTarget) close(); }}>
{typeof children === "function" ? children(close) : children}
Modeling
Let's work together
Reserve a date for a shoot, or send a note and Chantelle will get back to you personally.
);
if (view === "book") return (
Modeling · Booking
Choose a date
{av.slots.map((s) => (
))}
);
if (view === "message") return (
);
if (view === "booksent") return (
{Icon.check}
Request sent
Your request for {dateLabel}, {time} is in Chantelle's inbox. She confirms within 24 hours.
);
/* sent (message) */
return (
{Icon.check}
Message sent
It will sit in Chantelle's inbox until she reads it. She replies to every note personally.
);
}
/* ---------- inbox (Chantelle's view) ---------- */
function InboxModal({ onClose }){
return {() => };
}
function InboxInner(){
const list = useInbox();
const [openId, setOpenId] = useStateM(null);
const open = list.find((m) => m.id === openId);
const unread = list.filter((m) => !m.read).length;
if (open) return (
{open.kind}
{open.name}
{open.email} · {new Date(open.date).toLocaleString([], { dateStyle: "medium", timeStyle: "short" })}
{open.body}
Reply {Icon.go}
);
return (
Private
Inbox
{list.length ? (unread ? unread + " unread · " : "") + list.length + " message" + (list.length === 1 ? "" : "s") : "Messages from your site land here."}
{list.length === 0 ? (
No messages yet.
) : (
{list.map((m) => (
))}
)}
);
}
/* ---------- header mail button with unread badge (used in the back office) ---------- */
function MailButton({ theme = "light" }){
const list = useInbox();
const unread = list.filter((m) => !m.read).length;
const [open, setOpen] = useStateM(false);
return (
<>
{open && setOpen(false)} />}
);
}
/* ---------- visitor message composer (one-way → lands in inbox) ---------- */
function MessageModal({ onClose }){
return {(close) => };
}
function MessageInner({ close }){
const [view, setView] = useStateM("form");
const [form, setForm] = useStateM({ name: "", email: "", body: "" });
const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
const valid = form.name.trim() && form.email.trim() && form.body.trim();
if (view === "sent") return (
{Icon.check}
Message sent
Thank you — Chantelle has your note and replies to every message personally.
);
return (
);
}
/* header button for visitors — opens the composer (no inbox, one-way) */
function MessageButton({ theme = "light" }){
const [open, setOpen] = useStateM(false);
return (
<>
{open && setOpen(false)} />}
);
}
Object.assign(window, { Icon, Modal, ModelingModal, InboxModal, MailButton, MessageModal, MessageButton, useInbox, addMessage });