Exit Intent Popup

1"use client"
2 
3import { X } from "lucide-react"
4import Link from "next/link"
5import { useCallback, useEffect, useRef, useState } from "react"
6 
7/**
8 * Edit CONTENT to change exit-intent copy and storage keys.
9 */
10const CONTENT = {
11  stamp: "Before you go",
12  title: "Free 7-day MVP scoping",
13  body: "Not sure what to build first? Book a no-pressure scoping call - we'll map scope, timeline, and budget in one session.",
14  primaryLabel: "Start free scoping",
15  primaryHref: "/scope",
16  secondaryLabel: "Maybe later",
17  storageKey: "atroui_exit_intent_v1",
18  sessionKey: "atroui_exit_intent_session",
19}
20 
21function shouldShowPopup(): boolean {
22  if (typeof window === "undefined") return false
23  if (localStorage.getItem(CONTENT.storageKey)) return false
24  if (sessionStorage.getItem(CONTENT.sessionKey)) return false
25  return true
26}
27 
28function markShown() {
29  sessionStorage.setItem(CONTENT.sessionKey, "1")
30}
31 
32function markDismissed() {
33  localStorage.setItem(CONTENT.storageKey, "dismissed")
34  sessionStorage.setItem(CONTENT.sessionKey, "1")
35}
36 
37export type ExitIntentPopupProps = {
38  /** Docs / demos: open immediately and render inline. */
39  preview?: boolean
40}
41 
42export function ExitIntentPopup({ preview = false }: ExitIntentPopupProps) {
43  const [open, setOpen] = useState(preview)
44  const dialogRef = useRef<HTMLDivElement>(null)
45  const triggered = useRef(false)
46 
47  const close = useCallback(() => {
48    setOpen(false)
49    if (!preview) markDismissed()
50  }, [preview])
51 
52  useEffect(() => {
53    if (preview) return
54    if (!shouldShowPopup()) return
55 
56    const onMouseLeave = (e: MouseEvent) => {
57      if (triggered.current) return
58      if (e.clientY > 12) return
59      if (!shouldShowPopup()) return
60      triggered.current = true
61      markShown()
62      setOpen(true)
63    }
64 
65    document.documentElement.addEventListener("mouseleave", onMouseLeave)
66    return () =>
67      document.documentElement.removeEventListener("mouseleave", onMouseLeave)
68  }, [preview])
69 
70  useEffect(() => {
71    if (!open || preview) return
72 
73    const onKeyDown = (e: KeyboardEvent) => {
74      if (e.key === "Escape") close()
75    }
76 
77    document.addEventListener("keydown", onKeyDown)
78    dialogRef.current?.focus()
79 
80    const focusable = dialogRef.current?.querySelectorAll<HTMLElement>(
81      'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
82    )
83    const first = focusable?.[0]
84    const last = focusable?.[focusable.length - 1]
85 
86    const trapFocus = (e: KeyboardEvent) => {
87// … truncated