@aranova/tracking-react 0.9.0 → 0.9.1

package/dist/index.js

@@ -34,8 +34,10 @@ __export(src_exports, {
   formatMoney: () => formatMoney,
   fromMinor: () => fromMinor,
   getConsentState: () => getConsentState,
+  resetConsent: () => resetConsent,
   setConsentState: () => setConsentState,
   toMinor: () => toMinor,
+  useConsent: () => useConsent,
   useConsentState: () => useConsentState,
   useGclid: () => useGclid,
   useTrackingParams: () => useTrackingParams
@@ -43,6 +45,9 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/ConsentBanner.tsx
+var import_react2 = require("react");
+
+// src/hooks.ts
 var import_react = require("react");
 
 // ../tracking-core/src/consent.ts
@@ -72,6 +77,12 @@ function setConsentState(state) {
   if (typeof window.gtag === "function")
     window.gtag("consent", "update", buildConsentPayload(state));
 }
+function resetConsent() {
+  if (typeof window === "undefined")
+    return;
+  window.localStorage.removeItem(CONSENT_STATE_KEY);
+  window.localStorage.removeItem(CONSENT_TIMESTAMP_KEY);
+}
 function restoreStoredConsent() {
   const consentState = getConsentState();
   if (consentState === "granted" || consentState === "denied")
@@ -1412,59 +1423,251 @@ function formatMoney(cents, currency, locale) {
   );
 }
 
+// src/hooks.ts
+function useGclid() {
+  const [gclid, setGclid] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    setGclid(getCookieValueFromDocument("gclid"));
+  }, []);
+  return gclid;
+}
+function useTrackingParams() {
+  const [trackingParams, setTrackingParams] = (0, import_react.useState)(createEmptyTrackingParams());
+  (0, import_react.useEffect)(() => {
+    setTrackingParams(getTrackingParamsFromCookieReader(getCookieValueFromDocument));
+  }, []);
+  return trackingParams;
+}
+function useConsentState() {
+  return useConsent().state;
+}
+function useConsent() {
+  const [state, setState] = (0, import_react.useState)("pending");
+  (0, import_react.useEffect)(() => {
+    setState(getConsentState());
+    const handleStorage = (event) => {
+      if (event.key === CONSENT_STATE_KEY) setState(getConsentState());
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, []);
+  const accept = (0, import_react.useCallback)(() => {
+    setConsentState("granted");
+    setState("granted");
+  }, []);
+  const decline = (0, import_react.useCallback)(() => {
+    setConsentState("denied");
+    setState("denied");
+  }, []);
+  const reset = (0, import_react.useCallback)(() => {
+    resetConsent();
+    setState("pending");
+  }, []);
+  return {
+    state,
+    isPending: state === "pending",
+    isGranted: state === "granted",
+    isDenied: state === "denied",
+    accept,
+    decline,
+    reset
+  };
+}
+
 // src/ConsentBanner.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function ConsentBanner() {
-  const [consentState, setBannerConsentState] = (0, import_react.useState)("pending");
-  const [isReady, setIsReady] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    setBannerConsentState(getConsentState());
-    setIsReady(true);
+var LIGHT_THEME = {
+  background: "#ffffff",
+  border: "#e5e7eb",
+  text: "#111827",
+  mutedText: "#4b5563",
+  acceptBg: "#111827",
+  acceptText: "#ffffff",
+  declineBg: "transparent",
+  declineText: "#111827",
+  declineBorder: "#d1d5db",
+  shadow: "0 -4px 16px -2px rgba(15, 23, 42, 0.08), 0 -2px 6px -1px rgba(15, 23, 42, 0.04)",
+  linkColor: "#1f2937"
+};
+var DARK_THEME = {
+  background: "#0f172a",
+  border: "#1e293b",
+  text: "#f1f5f9",
+  mutedText: "#cbd5e1",
+  acceptBg: "#f1f5f9",
+  acceptText: "#0f172a",
+  declineBg: "transparent",
+  declineText: "#f1f5f9",
+  declineBorder: "#334155",
+  shadow: "0 -4px 16px -2px rgba(0, 0, 0, 0.5), 0 -2px 6px -1px rgba(0, 0, 0, 0.3)",
+  linkColor: "#e2e8f0"
+};
+function useResolvedTheme(theme) {
+  const [prefersDark, setPrefersDark] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (theme !== "auto" || typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    setPrefersDark(mql.matches);
+    const onChange = (e) => setPrefersDark(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [theme]);
+  if (theme === "dark") return DARK_THEME;
+  if (theme === "auto" && prefersDark) return DARK_THEME;
+  return LIGHT_THEME;
+}
+var DEFAULT_MESSAGE = "We use cookies to understand ad performance and improve how our marketing works across visits. You can accept or decline this tracking.";
+function ConsentBanner({
+  message,
+  title,
+  acceptLabel = "Accept",
+  declineLabel = "Decline",
+  policyHref,
+  policyLabel = "Learn more",
+  onAccept,
+  onDecline,
+  position = "bottom",
+  theme = "light",
+  className,
+  style
+} = {}) {
+  const { isPending, accept, decline } = useConsent();
+  const tokens = useResolvedTheme(theme);
+  const [hasMounted, setHasMounted] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    setHasMounted(true);
   }, []);
-  if (!isReady || consentState !== "pending")
-    return null;
+  if (!hasMounted || !isPending) return null;
+  const wrapperStyle = {
+    position: "fixed",
+    left: 0,
+    right: 0,
+    [position]: 0,
+    zIndex: 2147483640,
+    background: tokens.background,
+    color: tokens.text,
+    borderTop: position === "bottom" ? `1px solid ${tokens.border}` : "none",
+    borderBottom: position === "top" ? `1px solid ${tokens.border}` : "none",
+    boxShadow: tokens.shadow,
+    padding: "16px 20px",
+    boxSizing: "border-box",
+    animation: `${ANIMATION_NAME}-${position} 200ms ease-out`,
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    ...style
+  };
+  const innerStyle = {
+    maxWidth: 1100,
+    margin: "0 auto",
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 16,
+    alignItems: "center",
+    justifyContent: "space-between"
+  };
+  const messageStyle = {
+    flex: "1 1 320px",
+    margin: 0,
+    fontSize: 14,
+    lineHeight: 1.5,
+    color: tokens.mutedText
+  };
+  const titleStyle = {
+    margin: "0 0 4px 0",
+    fontSize: 14,
+    fontWeight: 600,
+    color: tokens.text
+  };
+  const actionsStyle = {
+    display: "flex",
+    gap: 8,
+    flexShrink: 0
+  };
+  const buttonBase = {
+    appearance: "none",
+    fontFamily: "inherit",
+    fontSize: 14,
+    fontWeight: 500,
+    padding: "8px 16px",
+    borderRadius: 6,
+    cursor: "pointer",
+    border: "1px solid transparent",
+    transition: "opacity 120ms ease"
+  };
+  const declineStyle = {
+    ...buttonBase,
+    background: tokens.declineBg,
+    color: tokens.declineText,
+    borderColor: tokens.declineBorder
+  };
+  const acceptStyle = {
+    ...buttonBase,
+    background: tokens.acceptBg,
+    color: tokens.acceptText
+  };
+  const linkStyle = {
+    color: tokens.linkColor,
+    textDecoration: "underline",
+    textUnderlineOffset: 2
+  };
   const handleAccept = () => {
-    setConsentState("granted");
-    setBannerConsentState("granted");
+    accept();
+    onAccept?.();
   };
   const handleDecline = () => {
-    setConsentState("denied");
-    setBannerConsentState("denied");
+    decline();
+    onDecline?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white p-4 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto flex max-w-5xl flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-gray-700", children: "We use cookies to understand ad performance and improve how our marketing works across visits. You can accept or decline this tracking." }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: handleDecline,
-          className: "rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-100",
-          children: "Decline"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: handleAccept,
-          className: "rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800",
-          children: "Accept"
-        }
-      )
-    ] })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: ANIMATION_KEYFRAMES }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        role: "dialog",
+        "aria-live": "polite",
+        "aria-label": "Cookie consent",
+        className,
+        style: wrapperStyle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: innerStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: "1 1 320px" }, children: [
+            title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: titleStyle, children: title }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: messageStyle, children: [
+              message ?? DEFAULT_MESSAGE,
+              policyHref ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: policyHref, style: linkStyle, children: policyLabel })
+              ] }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: actionsStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: handleDecline, style: declineStyle, children: declineLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: handleAccept, style: acceptStyle, children: acceptLabel })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+var ANIMATION_NAME = "aranova-consent-banner";
+var ANIMATION_KEYFRAMES = `
+@keyframes ${ANIMATION_NAME}-bottom {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+@keyframes ${ANIMATION_NAME}-top {
+  from { transform: translateY(-100%); opacity: 0; }
+  to   { transform: translateY(0);     opacity: 1; }
 }
+`;
 
 // src/GoogleAdsTracking.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 function GoogleAdsTracking(props) {
   const { gtagId, gtagIds } = props;
-  const gtagIdsKey = (0, import_react2.useMemo)(
+  const gtagIdsKey = (0, import_react3.useMemo)(
     () => gtagIds ? JSON.stringify(gtagIds) : "",
     [gtagIds]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (gtagIds && Object.keys(gtagIds).length > 0) {
       bootstrapMultipleGtags(gtagIds);
     } else if (gtagId) {
@@ -1474,43 +1677,11 @@ function GoogleAdsTracking(props) {
   return null;
 }
 
-// src/hooks.ts
-var import_react3 = require("react");
-function useGclid() {
-  const [gclid, setGclid] = (0, import_react3.useState)(null);
-  (0, import_react3.useEffect)(() => {
-    setGclid(getCookieValueFromDocument("gclid"));
-  }, []);
-  return gclid;
-}
-function useTrackingParams() {
-  const [trackingParams, setTrackingParams] = (0, import_react3.useState)(createEmptyTrackingParams());
-  (0, import_react3.useEffect)(() => {
-    setTrackingParams(getTrackingParamsFromCookieReader(getCookieValueFromDocument));
-  }, []);
-  return trackingParams;
-}
-function useConsentState() {
-  const [consentState, setConsentStateValue] = (0, import_react3.useState)("pending");
-  (0, import_react3.useEffect)(() => {
-    setConsentStateValue(getConsentState());
-    const handleStorage = (event) => {
-      if (event.key === "consent_state")
-        setConsentStateValue(getConsentState());
-    };
-    window.addEventListener("storage", handleStorage);
-    return () => {
-      window.removeEventListener("storage", handleStorage);
-    };
-  }, []);
-  return consentState;
-}
-
 // src/factory.tsx
 var import_react4 = require("react");
 
 // package.json
-var version = "0.9.0";
+var version = "0.9.1";
 
 // src/factory.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -1634,8 +1805,10 @@ function createTracking(options) {
   formatMoney,
   fromMinor,
   getConsentState,
+  resetConsent,
   setConsentState,
   toMinor,
+  useConsent,
   useConsentState,
   useGclid,
   useTrackingParams