// cro.jsx — conversion-rate-optimization modules:
// - Discount state (sessionStorage + event bus)
// - Exit-intent modal (mouseleave-top, $25 off)
// - Sticky mobile CTA bar
// - Save-quiz-progress dialog
// - Session POST to Cloudflare Worker (saveQuizSession)
const { useState: _u, useEffect: _e, useRef: _r } = React;
// ════════════════════════════════════════════════════════════════════════════
// Session storage — POSTs quiz answers + recommendation to the Worker,
// returns a session ID that gets appended to the sticky.io checkout URL.
// ════════════════════════════════════════════════════════════════════════════
const SESSION_KEY = 'hrx_session_id';
function getApiBase() {
// Allow override via
if (typeof window !== 'undefined' && window.HRX_API_BASE) return window.HRX_API_BASE;
// Default: same origin (Worker mounted at /api/* on the same domain)
return '';
}
function getStoredSessionId() {
try { return sessionStorage.getItem(SESSION_KEY); } catch { return null; }
}
function setStoredSessionId(id) {
try { sessionStorage.setItem(SESSION_KEY, id); } catch {}
}
function clearStoredSessionId() {
try { sessionStorage.removeItem(SESSION_KEY); } catch {}
}
// Capture utm_* and gclid/fbclid from the URL so we can persist them.
function readMarketingParams() {
try {
const sp = new URLSearchParams(location.search);
const m = {};
for (const [k, v] of sp.entries()) {
if (/^(utm_|gclid|fbclid|ttclid|msclkid)/i.test(k)) m[k] = v;
}
return m;
} catch { return {}; }
}
async function saveQuizSession({ answers, recommendation, discount }) {
const base = getApiBase();
// Already saved? Re-use the cached ID so we don't double-write.
const existing = getStoredSessionId();
if (existing) return existing;
const payload = {
answers,
recommendation,
discount,
metadata: {
...readMarketingParams(),
landingUrl: location.href,
timestamp: Date.now(),
},
};
try {
const res = await fetch(`${base}/api/sessions`, {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(payload),
keepalive: true,
});
if (!res.ok) throw new Error(`status ${res.status}`);
const data = await res.json();
if (data.sessionId) {
setStoredSessionId(data.sessionId);
return data.sessionId;
}
} catch (err) {
// Graceful degradation: if Worker is unreachable, checkout still proceeds
// (just without the session ID). We log to console for visibility.
console.warn('[hrx] saveQuizSession failed:', err);
}
return null;
}
function useStoredSessionId() {
const [id, setId] = _u(getStoredSessionId);
_e(() => {
const h = () => setId(getStoredSessionId());
window.addEventListener('storage', h);
return () => window.removeEventListener('storage', h);
}, []);
return id;
}
// ════════════════════════════════════════════════════════════════════════════
// Discount state — single source of truth, available everywhere
// ════════════════════════════════════════════════════════════════════════════
const DISCOUNT_KEY = 'hrx_discount';
const DISCOUNT_EVT = 'hrx-discount-change';
const DISCOUNTS = {
FIRST25: { code: 'FIRST25', amount: 25, label: '$25 off your first month', source: 'exit-intent' },
};
function getDiscount() {
try {
const raw = sessionStorage.getItem(DISCOUNT_KEY);
if (!raw) return null;
const obj = JSON.parse(raw);
return DISCOUNTS[obj.code] || obj;
} catch { return null; }
}
function applyDiscount(code) {
const d = DISCOUNTS[code];
if (!d) return;
sessionStorage.setItem(DISCOUNT_KEY, JSON.stringify(d));
window.dispatchEvent(new CustomEvent(DISCOUNT_EVT));
}
function clearDiscount() {
sessionStorage.removeItem(DISCOUNT_KEY);
window.dispatchEvent(new CustomEvent(DISCOUNT_EVT));
}
function useDiscount() {
const [d, setD] = _u(getDiscount);
_e(() => {
const h = () => setD(getDiscount());
window.addEventListener(DISCOUNT_EVT, h);
return () => window.removeEventListener(DISCOUNT_EVT, h);
}, []);
return d;
}
// ════════════════════════════════════════════════════════════════════════════
// ExitIntentModal — fires on mouseleave at top of viewport (desktop) or
// after 30s of inactivity / 50% scroll without action (mobile).
// Shows once per session.
// ════════════════════════════════════════════════════════════════════════════
const EXIT_SHOWN_KEY = 'hrx_exit_shown';
function ExitIntentModal({ onAccept }) {
const [open, setOpen] = _u(false);
const [accepted, setAccepted] = _u(false);
const armedRef = _r(true);
_e(() => {
if (sessionStorage.getItem(EXIT_SHOWN_KEY)) return;
// Desktop: mouseleave top
const onMouseLeave = (e) => {
if (!armedRef.current) return;
if (e.clientY <= 0) { fire(); }
};
// Mobile fallback: timer + scroll heuristic
const t = setTimeout(() => { if (armedRef.current && window.innerWidth < 720) fire(); }, 45_000);
function fire() {
armedRef.current = false;
sessionStorage.setItem(EXIT_SHOWN_KEY, '1');
setOpen(true);
}
document.addEventListener('mouseleave', onMouseLeave);
return () => {
document.removeEventListener('mouseleave', onMouseLeave);
clearTimeout(t);
};
}, []);
const close = () => setOpen(false);
const accept = () => {
applyDiscount('FIRST25');
setAccepted(true);
setTimeout(() => { setOpen(false); onAccept?.(); }, 1200);
};
if (!open) return null;
return (
{ if (e.target === e.currentTarget) close(); }}>
{!accepted ? (
<>
● Wait — one thing
Take $25 off your first month.
Complete your free assessment in the next 24 hours and we'll knock
$25 off your first month's prescription.
No code to remember — it'll apply automatically at checkout.
Your code
FIRST25
−$25
) : (
Discount locked in.
Taking you to your assessment…
)}
);
}
// ════════════════════════════════════════════════════════════════════════════
// ActiveDiscountBanner — slim bar that shows when a discount is active
// ════════════════════════════════════════════════════════════════════════════
function ActiveDiscountBanner() {
const d = useDiscount();
if (!d) return null;
return (