diageo-age-gate-react 1.0.0 → 1.0.2

package/dist/components/AgeGate.d.ts

@@ -1,8 +1,8 @@
 export interface AgeGateProps {
-    /** 客户 ID（域名或标识） */
-    customerId: string;
     /** 用户哈希 */
     userHash: string;
+    /** 客户 ID（域名或标识） */
+    customerId?: string;
     /** 容器 ID，默认 ageGateWrapper */
     containerId?: string;
     /** 是否禁用 AgeGate（优先级高于 URL 参数） */

package/dist/components/urlChange.d.ts

@@ -0,0 +1 @@
+export declare function useUrlChange(onChange: (url: string) => void): void;

package/dist/index.cjs

@@ -24,8 +24,39 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/AgeGate.tsx
+// src/components/urlChange.tsx
 var import_react = require("react");
+function useUrlChange(onChange) {
+  const urlRef = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(() => {
+    urlRef.current = window.location.href;
+    const check = () => {
+      const current = window.location.href;
+      if (urlRef.current !== current) {
+        urlRef.current = current;
+        onChange(current);
+      }
+    };
+    window.addEventListener("popstate", check);
+    const push = history.pushState;
+    const replace = history.replaceState;
+    history.pushState = (...args) => {
+      push(...args);
+      setTimeout(check, 0);
+    };
+    history.replaceState = (...args) => {
+      replace(...args);
+      setTimeout(check, 0);
+    };
+    return () => {
+      window.removeEventListener("popstate", check);
+      history.pushState = push;
+      history.replaceState = replace;
+    };
+  }, [onChange]);
+}
+
+// src/components/AgeGate.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function getCookieItem(key) {
   const match = document.cookie.match(new RegExp("(^| )" + key + "=([^;]+)"));
@@ -49,11 +80,27 @@ function AgeGate({
   countryCode: propCountryCode,
   language: propLanguage
 }) {
-  (0, import_react.useEffect)(() => {
+  useUrlChange((url) => {
+    console.log("\u5F53\u524DURL:", url);
+    const existingScript = document.querySelector(
+      `script[src*="prod.diageoagegate.com"]`
+    );
+    if (existingScript) {
+      existingScript.remove();
+    }
+    document.querySelector("#diageo-footer-wrap")?.remove();
+    if (window?.init) {
+      window.init();
+    } else {
+      initInjectFooterJs();
+    }
+  });
+  function initInjectFooterJs() {
     const noFooterFromQuery = getUrlQuery("pageStatus") === "noFooter";
     const noAgeGateFromQuery = getUrlQuery("agp") === "true";
+    const _customerId = customerId || location.hostname;
     let src = `https://prod.diageoagegate.com/api/loader?customerId=${encodeURIComponent(
-      customerId
+      _customerId
     )}&userHash=${encodeURIComponent(userHash)}&footerSelectorId=${containerId}`;
     const finalNoAgeGate = noAgeGate || noAgeGateFromQuery;
     const finalNoFooter = noFooter || noFooterFromQuery;
@@ -87,18 +134,7 @@ function AgeGate({
       existingScript.remove();
     }
     document.head.appendChild(script);
-    return () => {
-      script.remove();
-    };
-  }, [
-    customerId,
-    userHash,
-    containerId,
-    noAgeGate,
-    noFooter,
-    propCountryCode,
-    propLanguage
-  ]);
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: containerId });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.js

@@ -1,5 +1,36 @@
+// src/components/urlChange.tsx
+import { useEffect, useRef } from "react";
+function useUrlChange(onChange) {
+  const urlRef = useRef("");
+  useEffect(() => {
+    urlRef.current = window.location.href;
+    const check = () => {
+      const current = window.location.href;
+      if (urlRef.current !== current) {
+        urlRef.current = current;
+        onChange(current);
+      }
+    };
+    window.addEventListener("popstate", check);
+    const push = history.pushState;
+    const replace = history.replaceState;
+    history.pushState = (...args) => {
+      push(...args);
+      setTimeout(check, 0);
+    };
+    history.replaceState = (...args) => {
+      replace(...args);
+      setTimeout(check, 0);
+    };
+    return () => {
+      window.removeEventListener("popstate", check);
+      history.pushState = push;
+      history.replaceState = replace;
+    };
+  }, [onChange]);
+}
+
 // src/components/AgeGate.tsx
-import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 function getCookieItem(key) {
   const match = document.cookie.match(new RegExp("(^| )" + key + "=([^;]+)"));
@@ -23,11 +54,27 @@ function AgeGate({
   countryCode: propCountryCode,
   language: propLanguage
 }) {
-  useEffect(() => {
+  useUrlChange((url) => {
+    console.log("\u5F53\u524DURL:", url);
+    const existingScript = document.querySelector(
+      `script[src*="prod.diageoagegate.com"]`
+    );
+    if (existingScript) {
+      existingScript.remove();
+    }
+    document.querySelector("#diageo-footer-wrap")?.remove();
+    if (window?.init) {
+      window.init();
+    } else {
+      initInjectFooterJs();
+    }
+  });
+  function initInjectFooterJs() {
     const noFooterFromQuery = getUrlQuery("pageStatus") === "noFooter";
     const noAgeGateFromQuery = getUrlQuery("agp") === "true";
+    const _customerId = customerId || location.hostname;
     let src = `https://prod.diageoagegate.com/api/loader?customerId=${encodeURIComponent(
-      customerId
+      _customerId
     )}&userHash=${encodeURIComponent(userHash)}&footerSelectorId=${containerId}`;
     const finalNoAgeGate = noAgeGate || noAgeGateFromQuery;
     const finalNoFooter = noFooter || noFooterFromQuery;
@@ -61,18 +108,7 @@ function AgeGate({
       existingScript.remove();
     }
     document.head.appendChild(script);
-    return () => {
-      script.remove();
-    };
-  }, [
-    customerId,
-    userHash,
-    containerId,
-    noAgeGate,
-    noFooter,
-    propCountryCode,
-    propLanguage
-  ]);
+  }
   return /* @__PURE__ */ jsx("div", { id: containerId });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diageo-age-gate-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",