diageo-age-gate-react 1.0.0

package/dist/components/AgeGate.d.ts

@@ -0,0 +1,18 @@
+export interface AgeGateProps {
+    /** 客户 ID（域名或标识） */
+    customerId: string;
+    /** 用户哈希 */
+    userHash: string;
+    /** 容器 ID，默认 ageGateWrapper */
+    containerId?: string;
+    /** 是否禁用 AgeGate（优先级高于 URL 参数） */
+    noAgeGate?: boolean;
+    /** 是否禁用 Footer（优先级高于 URL 参数） */
+    noFooter?: boolean;
+    /** 国家代码（可选，默认从路径或 cookie 解析） */
+    countryCode?: string;
+    /** 语言代码（可选，默认从路径解析） */
+    language?: string;
+}
+export declare function AgeGate({ customerId, userHash, containerId, noAgeGate, noFooter, countryCode: propCountryCode, language: propLanguage, }: AgeGateProps): import("react/jsx-runtime").JSX.Element;
+export default AgeGate;

package/dist/index.cjs

@@ -0,0 +1,107 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AgeGate: () => AgeGate
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/AgeGate.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function getCookieItem(key) {
+  const match = document.cookie.match(new RegExp("(^| )" + key + "=([^;]+)"));
+  if (!match) return null;
+  try {
+    return JSON.parse(decodeURIComponent(match[2]));
+  } catch {
+    return decodeURIComponent(match[2]);
+  }
+}
+function getUrlQuery(key) {
+  const params = new URLSearchParams(window.location.search);
+  return params.get(key);
+}
+function AgeGate({
+  customerId,
+  userHash,
+  containerId = "ageGateWrapper",
+  noAgeGate = false,
+  noFooter = false,
+  countryCode: propCountryCode,
+  language: propLanguage
+}) {
+  (0, import_react.useEffect)(() => {
+    const noFooterFromQuery = getUrlQuery("pageStatus") === "noFooter";
+    const noAgeGateFromQuery = getUrlQuery("agp") === "true";
+    let src = `https://prod.diageoagegate.com/api/loader?customerId=${encodeURIComponent(
+      customerId
+    )}&userHash=${encodeURIComponent(userHash)}&footerSelectorId=${containerId}`;
+    const finalNoAgeGate = noAgeGate || noAgeGateFromQuery;
+    const finalNoFooter = noFooter || noFooterFromQuery;
+    if (finalNoAgeGate) {
+      src += "&agegate=false";
+    }
+    if (finalNoFooter) {
+      src += "&footer=false";
+    }
+    const locale = window.location.pathname.split("/")[1] || "";
+    const [pathLang, pathCountry] = locale.split("-");
+    let finalCountryCode = propCountryCode;
+    if (!finalCountryCode) {
+      const ageGateConfig = getCookieItem("diageo-gateway");
+      finalCountryCode = ageGateConfig?.country || pathCountry;
+    }
+    const finalLanguage = propLanguage || pathLang;
+    if (finalCountryCode && finalCountryCode.toLowerCase() !== "row") {
+      src += `&countryCode=${finalCountryCode.toUpperCase()}`;
+    } else if (finalLanguage) {
+      src += `&lang=${finalLanguage}`;
+    }
+    const script = document.createElement("script");
+    script.src = src;
+    script.type = "module";
+    script.async = true;
+    const existingScript = document.querySelector(
+      `script[src*="prod.diageoagegate.com"]`
+    );
+    if (existingScript) {
+      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:
+0 && (module.exports = {
+  AgeGate
+});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { AgeGate, AgeGateProps } from './components/AgeGate';

package/dist/index.js

@@ -0,0 +1,80 @@
+// 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 + "=([^;]+)"));
+  if (!match) return null;
+  try {
+    return JSON.parse(decodeURIComponent(match[2]));
+  } catch {
+    return decodeURIComponent(match[2]);
+  }
+}
+function getUrlQuery(key) {
+  const params = new URLSearchParams(window.location.search);
+  return params.get(key);
+}
+function AgeGate({
+  customerId,
+  userHash,
+  containerId = "ageGateWrapper",
+  noAgeGate = false,
+  noFooter = false,
+  countryCode: propCountryCode,
+  language: propLanguage
+}) {
+  useEffect(() => {
+    const noFooterFromQuery = getUrlQuery("pageStatus") === "noFooter";
+    const noAgeGateFromQuery = getUrlQuery("agp") === "true";
+    let src = `https://prod.diageoagegate.com/api/loader?customerId=${encodeURIComponent(
+      customerId
+    )}&userHash=${encodeURIComponent(userHash)}&footerSelectorId=${containerId}`;
+    const finalNoAgeGate = noAgeGate || noAgeGateFromQuery;
+    const finalNoFooter = noFooter || noFooterFromQuery;
+    if (finalNoAgeGate) {
+      src += "&agegate=false";
+    }
+    if (finalNoFooter) {
+      src += "&footer=false";
+    }
+    const locale = window.location.pathname.split("/")[1] || "";
+    const [pathLang, pathCountry] = locale.split("-");
+    let finalCountryCode = propCountryCode;
+    if (!finalCountryCode) {
+      const ageGateConfig = getCookieItem("diageo-gateway");
+      finalCountryCode = ageGateConfig?.country || pathCountry;
+    }
+    const finalLanguage = propLanguage || pathLang;
+    if (finalCountryCode && finalCountryCode.toLowerCase() !== "row") {
+      src += `&countryCode=${finalCountryCode.toUpperCase()}`;
+    } else if (finalLanguage) {
+      src += `&lang=${finalLanguage}`;
+    }
+    const script = document.createElement("script");
+    script.src = src;
+    script.type = "module";
+    script.async = true;
+    const existingScript = document.querySelector(
+      `script[src*="prod.diageoagegate.com"]`
+    );
+    if (existingScript) {
+      existingScript.remove();
+    }
+    document.head.appendChild(script);
+    return () => {
+      script.remove();
+    };
+  }, [
+    customerId,
+    userHash,
+    containerId,
+    noAgeGate,
+    noFooter,
+    propCountryCode,
+    propLanguage
+  ]);
+  return /* @__PURE__ */ jsx("div", { id: containerId });
+}
+export {
+  AgeGate
+};

package/dist/index.mjs

@@ -0,0 +1,79 @@
+// src/components/AgeGate.tsx
+import { useEffect } from "react";
+function getCookieItem(key) {
+  const match = document.cookie.match(new RegExp("(^| )" + key + "=([^;]+)"));
+  if (!match) return null;
+  try {
+    return JSON.parse(decodeURIComponent(match[2]));
+  } catch {
+    return decodeURIComponent(match[2]);
+  }
+}
+function getUrlQuery(key) {
+  const params = new URLSearchParams(window.location.search);
+  return params.get(key);
+}
+function AgeGate({
+  customerId,
+  userHash,
+  containerId = "ageGateWrapper",
+  noAgeGate = false,
+  noFooter = false,
+  countryCode: propCountryCode,
+  language: propLanguage
+}) {
+  useEffect(() => {
+    const noFooterFromQuery = getUrlQuery("pageStatus") === "noFooter";
+    const noAgeGateFromQuery = getUrlQuery("agp") === "true";
+    let src = `https://prod.diageoagegate.com/api/loader?customerId=${encodeURIComponent(
+      customerId
+    )}&userHash=${encodeURIComponent(userHash)}&footerSelectorId=${containerId}`;
+    const finalNoAgeGate = noAgeGate || noAgeGateFromQuery;
+    const finalNoFooter = noFooter || noFooterFromQuery;
+    if (finalNoAgeGate) {
+      src += "&agegate=false";
+    }
+    if (finalNoFooter) {
+      src += "&footer=false";
+    }
+    const locale = window.location.pathname.split("/")[1] || "";
+    const [pathLang, pathCountry] = locale.split("-");
+    let finalCountryCode = propCountryCode;
+    if (!finalCountryCode) {
+      const ageGateConfig = getCookieItem("diageo-gateway");
+      finalCountryCode = (ageGateConfig == null ? void 0 : ageGateConfig.country) || pathCountry;
+    }
+    const finalLanguage = propLanguage || pathLang;
+    if (finalCountryCode && finalCountryCode.toLowerCase() !== "row") {
+      src += `&countryCode=${finalCountryCode.toUpperCase()}`;
+    } else if (finalLanguage) {
+      src += `&lang=${finalLanguage}`;
+    }
+    const script = document.createElement("script");
+    script.src = src;
+    script.type = "module";
+    script.async = true;
+    const existingScript = document.querySelector(
+      `script[src*="prod.diageoagegate.com"]`
+    );
+    if (existingScript) {
+      existingScript.remove();
+    }
+    document.head.appendChild(script);
+    return () => {
+      script.remove();
+    };
+  }, [
+    customerId,
+    userHash,
+    containerId,
+    noAgeGate,
+    noFooter,
+    propCountryCode,
+    propLanguage
+  ]);
+  return /* @__PURE__ */ React.createElement("div", { id: containerId });
+}
+export {
+  AgeGate
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "diageo-age-gate-react",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}