dorsk / banner.tsx

import { useCallback, useEffect, useState } from "react"; // Check that the Enzuzo script has loaded // Polling is the only option for global variables that are not part of React function useEnzuzoLoaded() { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { if (isLoaded) return; const interval = setInterval(() => { if (typeof window !== "undefined" && window.__ENZUZO_STARTED__) { setIsLoaded(true); clearInterval(interval); } }, 1_000); return () => clearInterval(interval); }, [isLoaded]); return isLoaded; } // Hook to capture a single element function useCapturedElement<T extends HTMLElement>(selector: string) { const [element, setElement] = useState<T | null>(null); const [content, setContent] = useState<string>(""); const isEnzuzoLoaded = useEnzuzoLoaded(); useEffect(() => { if (!isEnzuzoLoaded) return; const el = document.querySelector(selector) as T | null; if (!el) return; setElement(el); setContent(el.textContent?.trim() || ""); }, [selector, isEnzuzoLoaded]); const trigger = useCallback(() => { if (!element || !("click" in element)) return; const event = new MouseEvent("click", { bubbles: true, cancelable: true, view: window }); element.dispatchEvent(event); }, [element]); return { element, content, trigger }; } function AcceptButton() { const selector = "#ez-cookie-notification__accept"; const { content, trigger } = useCapturedElement<HTMLButtonElement>(selector); return <button onClick={trigger}>{content}</button>; } function DeclineButton() { const selector = "#ez-cookie-notification__decline"; const { content, trigger } = useCapturedElement<HTMLButtonElement>(selector); return <button onClick={trigger}>{content}</button>; } function SettingsButton() { const selector = "#notificationManagerLink"; const { content, trigger } = useCapturedElement<HTMLButtonElement>(selector); return <button onClick={trigger}>{content}</button>; } function CloseButton() { const selector = "#close-notification"; const { content, trigger } = useCapturedElement<HTMLButtonElement>(selector); return <button onClick={trigger}>{content}</button>; } function PrivacyPolicyLink() { const selector = "#notificationPolicyLink"; const { element, content } = useCapturedElement<HTMLAnchorElement>(selector); return <a href={element?.href}>{content}</a>; } function CookieBannerText() { const selector = ".enzuzo-notification-desc p"; const { content } = useCapturedElement<HTMLElement>(selector); return <p>{content}</p>; } export function CookieBanner() { const [isOpen, setIsOpen] = useState(true); const { element } = useCapturedElement<HTMLDivElement>("#ez-cookie-notification"); useEffect(() => { if (!element) return; if (element.style.display !== "none") setIsOpen(true); element.style.display = "none"; }, [element]); if (!isOpen) return null; const bannerStyles = { position: "fixed" as const, top: "16px", right: "16px", width: "500px", backgroundColor: "white", borderRadius: "8px", boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)", border: "2px solid red", padding: "24px", zIndex: 2147483647 }; return ( <div style={bannerStyles}> <CloseButton /> <CookieBannerText /> <PrivacyPolicyLink /> <SettingsButton /> <AcceptButton /> <DeclineButton /> </div> ); }