/* global React, gtag */ // Build Theory — landing-page Pop-Up Notifications. // // Reads ACTIVE pop-ups from Supabase (managed in Superadmin → Pop-Up // Notifications) and surfaces them on the public landing page as a small, // non-intrusive carousel anchored to the bottom corner. // // Behaviour // • Each pop-up has a scroll_depth (0-100%). A pop-up becomes available once // the visitor has scrolled at least that far; the carousel appears as soon // as the first one is available, then grows as more unlock. // • When several are available, coral arrow buttons (left/right) and a coral // count badge let the visitor flip between them. // • Each pop-up runs a 5-second timer. When it elapses — or the visitor hits // cancel — the card "shrinks from the top" into a compact outro box whose // message types out letter-by-letter, ending with a "Go to events" button, // then disappears after ~3 seconds. // • Flipping to another pop-up before the timer ends restarts it at 5s. // // Design follows the Build Theory system (paper/ink/coral, Geist, pill CTAs). const { useState: usePopState, useEffect: usePopEffect, useRef: usePopRef } = React; const _POP_SB_URL = "https://mfhilndgkxrmhkhmllyw.supabase.co"; const _POP_SB_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1maGlsbmRna3hybWhraG1sbHl3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODAzMDA2MDAsImV4cCI6MjA5NTg3NjYwMH0._sTZwE3WhkhHn2yMbRz3ad3IGr3uo3mTxcYczAkQOIo"; const _POP_TIMER_MS = 5000; // per-pop-up countdown const _POP_OUTRO_MS = 3000; // how long the outro lingers after typing const _POP_SEEN_KEY = "bt_popups_seen"; const _POP_OUTRO_TEXT = "See all events in the footer to view more."; const _POP_EVENTS_URL = "events.html"; const _POP_CATEGORY_LABEL = { webinar: "Upcoming Webinar", session: "Session", news: "News", }; // Suppression is per-tab (sessionStorage), NOT per-browser. A fresh tab always // shows the pop-ups again; within the same tab we don't re-nag on reload. We // intentionally avoid localStorage so the pop-up isn't silenced across every // tab/window for hours after a single auto-cycle. function _popAlreadySeen() { try { return window.sessionStorage.getItem(_POP_SEEN_KEY) === "1"; } catch (_) { return false; } } function _popMarkSeen() { try { window.sessionStorage.setItem(_POP_SEEN_KEY, "1"); } catch (_) { /* ignore */ } } function _popTrack(event, params) { try { if (typeof gtag === "function") gtag("event", event, params); } catch (_) { /* ignore */ } } function PopupNotification() { const [popups, setPopups] = usePopState([]); // active pop-ups, ordered const [maxDepth, setMaxDepth] = usePopState(0); // highest scroll % reached const [phase, setPhase] = usePopState("hidden"); // hidden | carousel | outro const [index, setIndex] = usePopState(0); const [timeLeft, setTimeLeft] = usePopState(_POP_TIMER_MS); const [ready, setReady] = usePopState(false); // small settle delay before first reveal const seenRef = usePopRef(_popAlreadySeen()); // Available = active pop-ups whose scroll depth has been reached. const available = popups.filter((p) => (p.scroll_depth || 0) <= maxDepth); // --- Fetch active pop-ups once --- usePopEffect(() => { if (seenRef.current) return undefined; let cancelled = false; fetch( `${_POP_SB_URL}/rest/v1/popups?select=*&status=eq.active&order=sort_order.asc,created_at.desc`, { headers: { apikey: _POP_SB_KEY, Authorization: `Bearer ${_POP_SB_KEY}` } } ) .then((r) => (r.ok ? r.json() : [])) .then((rows) => { if (!cancelled) setPopups(Array.isArray(rows) ? rows : []); }) .catch(() => { /* fail silently — pop-ups are non-critical */ }); return () => { cancelled = true; }; }, []); // --- Track scroll depth (also seeds an initial reading for 0% pop-ups) --- usePopEffect(() => { if (seenRef.current) return undefined; const read = () => { const h = document.documentElement.scrollHeight - window.innerHeight; const depth = h > 0 ? Math.round((window.scrollY / h) * 100) : 100; setMaxDepth((cur) => (depth > cur ? depth : cur)); }; read(); window.addEventListener("scroll", read, { passive: true }); window.addEventListener("resize", read); return () => { window.removeEventListener("scroll", read); window.removeEventListener("resize", read); }; }, []); // --- Gentle settle delay so a 0%/on-load pop-up doesn't snap in instantly --- usePopEffect(() => { if (seenRef.current) return undefined; const t = setTimeout(() => setReady(true), 1800); return () => clearTimeout(t); }, []); // --- Reveal the carousel as soon as something is available --- usePopEffect(() => { if (ready && phase === "hidden" && !seenRef.current && available.length > 0) { setPhase("carousel"); _popTrack("popup_shown", { count: available.length }); } }, [ready, available.length, phase]); // --- Per-pop-up countdown; restarts whenever the visible pop-up changes --- usePopEffect(() => { if (phase !== "carousel") return undefined; setTimeLeft(_POP_TIMER_MS); const started = Date.now(); const id = setInterval(() => { const left = _POP_TIMER_MS - (Date.now() - started); if (left <= 0) { clearInterval(id); setTimeLeft(0); setPhase("outro"); } else { setTimeLeft(left); } }, 60); return () => clearInterval(id); }, [phase, index]); // --- Dismiss on Escape --- usePopEffect(() => { if (phase === "hidden") return undefined; const onKey = (e) => { if (e.key !== "Escape") return; if (phase === "carousel") setPhase("outro"); else finish(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); // eslint-disable-next-line react-hooks/exhaustive-deps }, [phase]); const finish = () => { seenRef.current = true; _popMarkSeen(); setPhase("hidden"); }; const go = (dir) => { setIndex((i) => { const n = available.length; return (i + dir + n) % n; }); }; if (phase === "hidden") return null; if (phase === "outro") { return ; } const safeIndex = Math.min(index, available.length - 1); const active = available[safeIndex]; if (!active) return null; const hasImage = active.variant === "image" && active.image_url; const multiple = available.length > 1; const progress = timeLeft / _POP_TIMER_MS; const onCta = () => { _popTrack("popup_cta_click", { popup_id: active.id, category: active.category }); if (active.cta_link) window.open(active.cta_link, "_blank", "noopener,noreferrer"); }; return (
{/* Carousel arrows (only when more than one is available) */} {multiple && ( )}
{/* Top bar: count badge + countdown ring + close */}
{multiple ? ( {safeIndex + 1} / {available.length} ) : }
{hasImage && (
)}
{_POP_CATEGORY_LABEL[active.category] || active.category}

{active.title}

{active.description && (

{active.description}

)} {active.cta_text && active.cta_link && ( )}
); } // Small depleting countdown ring with the remaining seconds in the centre. function CountdownRing({ progress, seconds, onImage }) { const r = 11; const c = 2 * Math.PI * r; const track = onImage ? "rgba(255,255,255,0.35)" : "var(--bt-concrete-200)"; const numColor = onImage ? "#fff" : "var(--bt-ink)"; return ( ); } // The compact outro: shrinks in from the top, types its message out // letter-by-letter, reveals a "Go to events" button, then fades away. function PopupOutro({ onClose }) { const [typed, setTyped] = usePopState(""); const [showBtn, setShowBtn] = usePopState(false); usePopEffect(() => { let i = 0; const typer = setInterval(() => { i += 1; setTyped(_POP_OUTRO_TEXT.slice(0, i)); if (i >= _POP_OUTRO_TEXT.length) { clearInterval(typer); setShowBtn(true); } }, 38); return () => clearInterval(typer); }, []); // Auto-dismiss after the message has had time to land. usePopEffect(() => { if (!showBtn) return undefined; const t = setTimeout(onClose, _POP_OUTRO_MS); return () => clearTimeout(t); // eslint-disable-next-line react-hooks/exhaustive-deps }, [showBtn]); return (

{typed} ▍

_popTrack("popup_go_to_events", {})} className="bt-popup-events-btn" style={{ alignSelf: "flex-start", background: "var(--bt-signal)", color: "var(--bt-ink)", borderRadius: 999, padding: "10px 18px", fontSize: 13.5, fontWeight: 600, fontFamily: "var(--font-body)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 7, opacity: showBtn ? 1 : 0, transform: showBtn ? "translateY(0)" : "translateY(6px)", transition: "opacity .3s var(--ease-out), transform .3s var(--ease-out), background-color .18s var(--ease-out)", pointerEvents: showBtn ? "auto" : "none", }} > Go to events
); } function PopupStyles() { return ( ); } window.PopupNotification = PopupNotification;