/* GCCReady — ArticleEnhancements
* Mounts on long-form pages (articles, hub fragments). Adds:
* 1. Scroll-progress bar fixed at top
* 2. 50%-scroll non-blocking strip with topic-relevant CTA (auto-dismissable)
* 3. Exit-intent overlay with email capture (mouse leaves top of viewport)
* 4. Floating "Take Skill Badge" pill after 30 s on page
*
* Each pattern interrupt remembers dismissal in sessionStorage so it doesn't
* re-fire on the same article visit.
*/
function ArticleEnhancements({ topic, articleSlug, audience = 'student' }) {
const [scrollPct, setScrollPct] = React.useState(0);
const [stripOpen, setStripOpen] = React.useState(false);
const [exitOpen, setExitOpen] = React.useState(false);
const [pillVisible, setPillVisible] = React.useState(false);
const [emailStatus, setEmailStatus] = React.useState({ kind:'idle', msg:'' });
const emailInput = React.useRef(null);
// Scroll progress + 50% strip trigger
React.useEffect(() => {
const dismissedStrip = sessionStorage.getItem(`gr_strip_${articleSlug}`) === '1';
const onScroll = () => {
const h = document.documentElement;
const total = (h.scrollHeight || 0) - (h.clientHeight || 0);
const pct = total > 0 ? Math.min(100, Math.round(((h.scrollTop || window.scrollY) / total) * 100)) : 0;
setScrollPct(pct);
if (!dismissedStrip && pct >= 50 && !stripOpen) setStripOpen(true);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, [articleSlug, stripOpen]);
// Exit-intent: trigger on mouseleave with clientY < 5
React.useEffect(() => {
const dismissedExit = sessionStorage.getItem('gr_exit_overlay_dismissed') === '1';
if (dismissedExit) return;
const onLeave = (e) => {
if (e.clientY < 6 && !exitOpen) setExitOpen(true);
};
document.addEventListener('mouseleave', onLeave);
return () => document.removeEventListener('mouseleave', onLeave);
}, [exitOpen]);
// Floating pill after 30 s
React.useEffect(() => {
const dismissedPill = sessionStorage.getItem('gr_pill_dismissed') === '1';
if (dismissedPill) return;
const t = setTimeout(() => setPillVisible(true), 30000);
return () => clearTimeout(t);
}, []);
const dismissStrip = () => {
sessionStorage.setItem(`gr_strip_${articleSlug}`, '1');
setStripOpen(false);
};
const dismissExit = () => {
sessionStorage.setItem('gr_exit_overlay_dismissed', '1');
setExitOpen(false);
};
const dismissPill = () => {
sessionStorage.setItem('gr_pill_dismissed', '1');
setPillVisible(false);
};
const submitExitEmail = async (e) => {
e.preventDefault();
const email = emailInput.current && emailInput.current.value;
if (!email) return;
setEmailStatus({ kind:'sending', msg:'Saving your bookmark…' });
const data = {
form_type:'exit_intent_bookmark',
email,
audience,
topic: topic || '',
article_slug: articleSlug || '',
ts_client: new Date().toISOString(),
};
try { localStorage.setItem('gr_email_capture_last', JSON.stringify(data)); } catch (_) {}
const SHEETS_ENDPOINT = (window.GR_CONFIG && window.GR_CONFIG.SHEETS_ENDPOINT) || '';
if (SHEETS_ENDPOINT) {
try {
const params = new URLSearchParams();
Object.entries(data).forEach(([k, v]) => params.set(k, v));
const res = await fetch(SHEETS_ENDPOINT, { method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}, body: params.toString() });
if (!res.ok) throw new Error();
} catch (_) {}
}
setEmailStatus({ kind:'success', msg:'Bookmarked. Check your inbox in a few minutes.' });
setTimeout(() => dismissExit(), 1500);
};
// Topic → CTA mapping for the 50% strip
const stripCTA = {
'US CPA': { label:'Run the CPA ROI calculator', href:'/tools-static/cpa-roi-calculator.html' },
'US CMA': { label:'See the CMA pathway', href:'#/certifications/us-cma' },
'EA': { label:'See the EA pathway', href:'#/certifications/ea' },
'CFA': { label:'See the CFA pathway', href:'#/certifications/cfa' },
'ACCA': { label:'Join the ACCA waitlist', href:'#/certifications/acca' },
'AI & Tech': { label:'Open the AI Data Analytics pod', href:'#/role/data-analytics' },
'India Compliance': { label:'Try the GST Computation tool', href:'/tools-static/gst-computation-tool.html' },
'GCC Job Readiness': { label:'Run the Interview Readiness Assessment', href:'/tools-static/interview-prep-assessment.html' },
}[topic] || { label:'Take the Skill Badge', href:'#/skill-badge' };
return (
<>
{/* 1. Scroll progress bar */}
{/* 2. 50%-scroll non-blocking strip */}
{stripOpen && (
Liked this so far? {stripCTA.label} in 2 minutes.
Open
)}
{/* 3. Exit-intent overlay */}
{exitOpen && (
{ if (e.target === e.currentTarget) dismissExit(); }}>
Before you go
Bookmark this — get the personalised plan in your inbox.
We'll send you a 1-page plan: the cert that fits your degree, the role pod we'd recommend, and the GCCs hiring for your profile. No spam, unsubscribe in 1 click.