@shopify/hydrogen-react 2025.1.3 → 2025.1.4

package/dist/node-dev/index.js

@@ -30,6 +30,7 @@ const RichText = require("./RichText.js");
 const ShopifyProvider = require("./ShopifyProvider.js");
 const ShopPayButton = require("./ShopPayButton.js");
 const storefrontClient = require("./storefront-client.js");
+const trackingUtils = require("./tracking-utils.js");
 const useMoney = require("./useMoney.js");
 const useSelectedOptionInUrlParam = require("./useSelectedOptionInUrlParam.js");
 const useShopifyCookies = require("./useShopifyCookies.js");
@@ -80,6 +81,9 @@ exports.ShopifyProvider = ShopifyProvider.ShopifyProvider;
 exports.useShop = ShopifyProvider.useShop;
 exports.ShopPayButton = ShopPayButton.ShopPayButton;
 exports.createStorefrontClient = storefrontClient.createStorefrontClient;
+exports.SHOPIFY_UNIQUE_TOKEN_HEADER = trackingUtils.SHOPIFY_UNIQUE_TOKEN_HEADER;
+exports.SHOPIFY_VISIT_TOKEN_HEADER = trackingUtils.SHOPIFY_VISIT_TOKEN_HEADER;
+exports.getTrackingValues = trackingUtils.getTrackingValues;
 exports.useMoney = useMoney.useMoney;
 exports.useSelectedOptionInUrlParam = useSelectedOptionInUrlParam.useSelectedOptionInUrlParam;
 exports.useShopifyCookies = useShopifyCookies.useShopifyCookies;

package/dist/node-dev/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/node-dev/index.mjs

@@ -28,6 +28,7 @@ import { RichText } from "./RichText.mjs";
 import { ShopifyProvider, useShop } from "./ShopifyProvider.mjs";
 import { ShopPayButton } from "./ShopPayButton.mjs";
 import { createStorefrontClient } from "./storefront-client.mjs";
+import { SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER, getTrackingValues } from "./tracking-utils.mjs";
 import { useMoney } from "./useMoney.mjs";
 import { useSelectedOptionInUrlParam } from "./useSelectedOptionInUrlParam.mjs";
 import { useShopifyCookies } from "./useShopifyCookies.mjs";
@@ -56,6 +57,8 @@ export {
   SHOPIFY_STOREFRONT_ID_HEADER,
   SHOPIFY_STOREFRONT_S_HEADER,
   SHOPIFY_STOREFRONT_Y_HEADER,
+  SHOPIFY_UNIQUE_TOKEN_HEADER,
+  SHOPIFY_VISIT_TOKEN_HEADER,
   SHOPIFY_Y,
   ShopPayButton,
   ShopifyProvider,
@@ -69,6 +72,7 @@ export {
   getClientBrowserParameters,
   getProductOptions,
   getShopifyCookies,
+  getTrackingValues,
   isOptionValueCombinationInEncodedVariant,
   mapSelectedProductOptionToObject,
   parseGid,

package/dist/node-dev/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/node-dev/packages/hydrogen-react/package.json.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "2025.1.3";
+const version = "2025.1.4";
 exports.version = version;
 //# sourceMappingURL=package.json.js.map

package/dist/node-dev/packages/hydrogen-react/package.json.mjs

@@ -1,4 +1,4 @@
-const version = "2025.1.3";
+const version = "2025.1.4";
 export {
   version
 };

package/dist/node-dev/tracking-utils.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
+const SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
+const cachedTrackingValues = { current: null };
+function getTrackingValues(cookieString) {
+  var _a, _b, _c;
+  let trackingValues;
+  if (typeof window !== "undefined" && typeof window.performance !== "undefined") {
+    try {
+      const resourceRE = /^https?:\/\/([^/]+)(\/api\/(?:unstable|2\d{3}-\d{2})\/graphql\.json(?=$|\?))?/;
+      const entries = performance.getEntriesByType(
+        "resource"
+      );
+      let matchedValues;
+      for (let i = entries.length - 1; i >= 0; i--) {
+        const entry = entries[i];
+        if (entry.initiatorType !== "fetch") continue;
+        const currentHost = window.location.host;
+        const match = entry.name.match(resourceRE);
+        if (!match) continue;
+        const [, matchedHost, sfapiPath] = match;
+        const isMatch = (
+          // Same origin (exact host match)
+          matchedHost === currentHost || // Subdomain with SFAPI path
+          sfapiPath && (matchedHost == null ? void 0 : matchedHost.endsWith(`.${currentHost}`))
+        );
+        if (isMatch) {
+          const values = extractFromPerformanceEntry(entry);
+          if (values) {
+            matchedValues = values;
+            break;
+          }
+        }
+      }
+      if (matchedValues) {
+        trackingValues = matchedValues;
+      }
+      if (trackingValues) {
+        cachedTrackingValues.current = trackingValues;
+      } else if (cachedTrackingValues.current) {
+        trackingValues = cachedTrackingValues.current;
+      }
+      if (!trackingValues) {
+        const navigationEntries = performance.getEntriesByType(
+          "navigation"
+        )[0];
+        trackingValues = extractFromPerformanceEntry(navigationEntries, false);
+      }
+    } catch {
+    }
+  }
+  if (!trackingValues) {
+    const cookie = typeof cookieString === "string" ? cookieString : typeof document !== "undefined" ? document.cookie : "";
+    trackingValues = {
+      uniqueToken: ((_a = cookie.match(/\b_shopify_y=([^;]+)/)) == null ? void 0 : _a[1]) || "",
+      visitToken: ((_b = cookie.match(/\b_shopify_s=([^;]+)/)) == null ? void 0 : _b[1]) || "",
+      consent: ((_c = cookie.match(/\b_tracking_consent=([^;]+)/)) == null ? void 0 : _c[1]) || ""
+    };
+  }
+  return trackingValues;
+}
+function extractFromPerformanceEntry(entry, isConsentRequired = true) {
+  let uniqueToken = "";
+  let visitToken = "";
+  let consent = "";
+  const serverTiming = entry.serverTiming;
+  if (serverTiming && serverTiming.length >= 3) {
+    for (let i = serverTiming.length - 1; i >= 0; i--) {
+      const { name, description } = serverTiming[i];
+      if (!name || !description) continue;
+      if (name === "_y") {
+        uniqueToken = description;
+      } else if (name === "_s") {
+        visitToken = description;
+      } else if (name === "_cmp") {
+        consent = description;
+      }
+      if (uniqueToken && visitToken && consent) break;
+    }
+  }
+  return uniqueToken && visitToken && (isConsentRequired ? consent : true) ? { uniqueToken, visitToken, consent } : void 0;
+}
+exports.SHOPIFY_UNIQUE_TOKEN_HEADER = SHOPIFY_UNIQUE_TOKEN_HEADER;
+exports.SHOPIFY_VISIT_TOKEN_HEADER = SHOPIFY_VISIT_TOKEN_HEADER;
+exports.cachedTrackingValues = cachedTrackingValues;
+exports.getTrackingValues = getTrackingValues;
+//# sourceMappingURL=tracking-utils.js.map

package/dist/node-dev/tracking-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking-utils.js","sources":["../../src/tracking-utils.ts"],"sourcesContent":["/** Storefront API header for VisitToken */\nexport const SHOPIFY_VISIT_TOKEN_HEADER = 'X-Shopify-VisitToken';\n/** Storefront API header for UniqueToken */\nexport const SHOPIFY_UNIQUE_TOKEN_HEADER = 'X-Shopify-UniqueToken';\n\nexport type TrackingValues = {\n  /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */\n  uniqueToken: string;\n  /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */\n  visitToken: string;\n  /** Represents the consent given by the user or the default region consent configured in Admin */\n  consent: string;\n};\n\n// Cache values to avoid losing them when performance\n// entries are cleared from the buffer over time.\nexport const cachedTrackingValues: {\n  current: null | TrackingValues;\n} = {current: null};\n\n/**\n * Retrieves user session tracking values for analytics\n * and marketing from the browser environment.\n * @param cookieString - Optional cookie string to parse for deprecated cookie fallback.\n *   Used internally by getShopifyCookies for backward compatibility.\n */\nexport function getTrackingValues(cookieString?: string): TrackingValues {\n  // Overall behavior: Tracking values are returned in Server-Timing headers from\n  // Storefront API responses, and we want to find and return these tracking values.\n  //\n  // Search recent fetches for SFAPI requests matching either: same origin (proxy case)\n  // or a subdomain of the current host (eg: checkout subdomain, if there is no proxy).\n  // We consider SF API-like endpoints (/api/.../graphql.json) on subdomains, as well as\n  // any same-origin request. The reason for the latter is that Hydrogen server collects\n  // tracking values and returns them in any non-cached response, not just direct SF API\n  // responses. For example, a cart mutation in a server action could return tracking values.\n  //\n  // If we didn't find tracking values in fetch requests, we fall back to checking cached values,\n  // then the initial page navigation entry, and finally the deprecated `_shopify_s` and `_shopify_y`.\n\n  let trackingValues: TrackingValues | undefined;\n\n  if (\n    typeof window !== 'undefined' &&\n    typeof window.performance !== 'undefined'\n  ) {\n    try {\n      // RE to extract host and optionally match SFAPI pathname.\n      // Group 1: host (e.g. \"checkout.mystore.com\")\n      // Group 2: SFAPI path if present (e.g. \"/api/2024-01/graphql.json\")\n      const resourceRE =\n        /^https?:\\/\\/([^/]+)(\\/api\\/(?:unstable|2\\d{3}-\\d{2})\\/graphql\\.json(?=$|\\?))?/;\n\n      // Search backwards through resource entries to find the most recent match.\n      // Match criteria (first one with _y and _s values wins):\n      // - Same origin (exact host match) with tracking values, OR\n      // - Subdomain + SFAPI pathname with tracking values\n      const entries = performance.getEntriesByType(\n        'resource',\n      ) as PerformanceResourceTiming[];\n\n      let matchedValues: ReturnType<typeof extractFromPerformanceEntry>;\n\n      for (let i = entries.length - 1; i >= 0; i--) {\n        const entry = entries[i];\n\n        if (entry.initiatorType !== 'fetch') continue;\n\n        const currentHost = window.location.host;\n        const match = entry.name.match(resourceRE);\n        if (!match) continue;\n\n        const [, matchedHost, sfapiPath] = match;\n\n        const isMatch =\n          // Same origin (exact host match)\n          matchedHost === currentHost ||\n          // Subdomain with SFAPI path\n          (sfapiPath && matchedHost?.endsWith(`.${currentHost}`));\n\n        if (isMatch) {\n          const values = extractFromPerformanceEntry(entry);\n          if (values) {\n            matchedValues = values;\n            break;\n          }\n        }\n      }\n\n      if (matchedValues) {\n        trackingValues = matchedValues;\n      }\n\n      // Resource entries have a limited buffer and are removed over time.\n      // Cache the latest values for future calls if we find them.\n      // A cached resource entry is always newer than a navigation entry.\n      if (trackingValues) {\n        cachedTrackingValues.current = trackingValues;\n      } else if (cachedTrackingValues.current) {\n        // Fallback to cached values from previous calls:\n        trackingValues = cachedTrackingValues.current;\n      }\n\n      if (!trackingValues) {\n        // Fallback to navigation entry from full page rendering load:\n        const navigationEntries = performance.getEntriesByType(\n          'navigation',\n        )[0] as PerformanceNavigationTiming;\n\n        // Navigation entries might omit consent when the Hydrogen server generates it.\n        // In this case, we skip consent requirement and only extract _y and _s values.\n        trackingValues = extractFromPerformanceEntry(navigationEntries, false);\n      }\n    } catch {}\n  }\n\n  // Fallback to deprecated cookies to support transitioning:\n  if (!trackingValues) {\n    const cookie =\n      typeof cookieString === 'string'\n        ? cookieString\n        : typeof document !== 'undefined'\n          ? document.cookie\n          : '';\n\n    trackingValues = {\n      uniqueToken: cookie.match(/\\b_shopify_y=([^;]+)/)?.[1] || '',\n      visitToken: cookie.match(/\\b_shopify_s=([^;]+)/)?.[1] || '',\n      consent: cookie.match(/\\b_tracking_consent=([^;]+)/)?.[1] || '',\n    };\n  }\n\n  return trackingValues;\n}\n\nfunction extractFromPerformanceEntry(\n  entry: PerformanceNavigationTiming | PerformanceResourceTiming,\n  isConsentRequired = true,\n): TrackingValues | undefined {\n  let uniqueToken = '';\n  let visitToken = '';\n  let consent = '';\n\n  const serverTiming = entry.serverTiming;\n  // Quick check: we need at least 3 entries (_y, _s, _cmp)\n  if (serverTiming && serverTiming.length >= 3) {\n    // Iterate backwards since our headers are typically at the end\n    for (let i = serverTiming.length - 1; i >= 0; i--) {\n      const {name, description} = serverTiming[i];\n      if (!name || !description) continue;\n\n      if (name === '_y') {\n        uniqueToken = description;\n      } else if (name === '_s') {\n        visitToken = description;\n      } else if (name === '_cmp') {\n        // _cmp (consent management platform) holds the consent value\n        // used by consent-tracking-api and privacy-banner scripts.\n        consent = description;\n      }\n\n      if (uniqueToken && visitToken && consent) break;\n    }\n  }\n\n  return uniqueToken && visitToken && (isConsentRequired ? consent : true)\n    ? {uniqueToken, visitToken, consent}\n    : undefined;\n}\n"],"names":[],"mappings":";;AACO,MAAM,6BAA6B;AAEnC,MAAM,8BAA8B;AAa9B,MAAA,uBAET,EAAC,SAAS,KAAI;AAQX,SAAS,kBAAkB,cAAuC;;AAcnE,MAAA;AAEJ,MACE,OAAO,WAAW,eAClB,OAAO,OAAO,gBAAgB,aAC9B;AACI,QAAA;AAIF,YAAM,aACJ;AAMF,YAAM,UAAU,YAAY;AAAA,QAC1B;AAAA,MACF;AAEI,UAAA;AAEJ,eAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AACtC,cAAA,QAAQ,QAAQ,CAAC;AAEnB,YAAA,MAAM,kBAAkB,QAAS;AAE/B,cAAA,cAAc,OAAO,SAAS;AACpC,cAAM,QAAQ,MAAM,KAAK,MAAM,UAAU;AACzC,YAAI,CAAC,MAAO;AAEZ,cAAM,CAAG,EAAA,aAAa,SAAS,IAAI;AAE7B,cAAA;AAAA;AAAA,UAEJ,gBAAgB;AAAA,UAEf,cAAa,2CAAa,SAAS,IAAI,WAAW;AAAA;AAErD,YAAI,SAAS;AACL,gBAAA,SAAS,4BAA4B,KAAK;AAChD,cAAI,QAAQ;AACM,4BAAA;AAChB;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAGF,UAAI,eAAe;AACA,yBAAA;AAAA,MAAA;AAMnB,UAAI,gBAAgB;AAClB,6BAAqB,UAAU;AAAA,MAAA,WACtB,qBAAqB,SAAS;AAEvC,yBAAiB,qBAAqB;AAAA,MAAA;AAGxC,UAAI,CAAC,gBAAgB;AAEnB,cAAM,oBAAoB,YAAY;AAAA,UACpC;AAAA,UACA,CAAC;AAIc,yBAAA,4BAA4B,mBAAmB,KAAK;AAAA,MAAA;AAAA,IACvE,QACM;AAAA,IAAA;AAAA,EAAC;AAIX,MAAI,CAAC,gBAAgB;AACb,UAAA,SACJ,OAAO,iBAAiB,WACpB,eACA,OAAO,aAAa,cAClB,SAAS,SACT;AAES,qBAAA;AAAA,MACf,eAAa,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MAC1D,cAAY,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MACzD,WAAS,YAAO,MAAM,6BAA6B,MAA1C,mBAA8C,OAAM;AAAA,IAC/D;AAAA,EAAA;AAGK,SAAA;AACT;AAEA,SAAS,4BACP,OACA,oBAAoB,MACQ;AAC5B,MAAI,cAAc;AAClB,MAAI,aAAa;AACjB,MAAI,UAAU;AAEd,QAAM,eAAe,MAAM;AAEvB,MAAA,gBAAgB,aAAa,UAAU,GAAG;AAE5C,aAAS,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;AACjD,YAAM,EAAC,MAAM,gBAAe,aAAa,CAAC;AACtC,UAAA,CAAC,QAAQ,CAAC,YAAa;AAE3B,UAAI,SAAS,MAAM;AACH,sBAAA;AAAA,MAAA,WACL,SAAS,MAAM;AACX,qBAAA;AAAA,MAAA,WACJ,SAAS,QAAQ;AAGhB,kBAAA;AAAA,MAAA;AAGR,UAAA,eAAe,cAAc,QAAS;AAAA,IAAA;AAAA,EAC5C;AAGK,SAAA,eAAe,eAAe,oBAAoB,UAAU,QAC/D,EAAC,aAAa,YAAY,QAAA,IAC1B;AACN;;;;;"}

package/dist/node-dev/tracking-utils.mjs

@@ -0,0 +1,88 @@
+const SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
+const SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
+const cachedTrackingValues = { current: null };
+function getTrackingValues(cookieString) {
+  var _a, _b, _c;
+  let trackingValues;
+  if (typeof window !== "undefined" && typeof window.performance !== "undefined") {
+    try {
+      const resourceRE = /^https?:\/\/([^/]+)(\/api\/(?:unstable|2\d{3}-\d{2})\/graphql\.json(?=$|\?))?/;
+      const entries = performance.getEntriesByType(
+        "resource"
+      );
+      let matchedValues;
+      for (let i = entries.length - 1; i >= 0; i--) {
+        const entry = entries[i];
+        if (entry.initiatorType !== "fetch") continue;
+        const currentHost = window.location.host;
+        const match = entry.name.match(resourceRE);
+        if (!match) continue;
+        const [, matchedHost, sfapiPath] = match;
+        const isMatch = (
+          // Same origin (exact host match)
+          matchedHost === currentHost || // Subdomain with SFAPI path
+          sfapiPath && (matchedHost == null ? void 0 : matchedHost.endsWith(`.${currentHost}`))
+        );
+        if (isMatch) {
+          const values = extractFromPerformanceEntry(entry);
+          if (values) {
+            matchedValues = values;
+            break;
+          }
+        }
+      }
+      if (matchedValues) {
+        trackingValues = matchedValues;
+      }
+      if (trackingValues) {
+        cachedTrackingValues.current = trackingValues;
+      } else if (cachedTrackingValues.current) {
+        trackingValues = cachedTrackingValues.current;
+      }
+      if (!trackingValues) {
+        const navigationEntries = performance.getEntriesByType(
+          "navigation"
+        )[0];
+        trackingValues = extractFromPerformanceEntry(navigationEntries, false);
+      }
+    } catch {
+    }
+  }
+  if (!trackingValues) {
+    const cookie = typeof cookieString === "string" ? cookieString : typeof document !== "undefined" ? document.cookie : "";
+    trackingValues = {
+      uniqueToken: ((_a = cookie.match(/\b_shopify_y=([^;]+)/)) == null ? void 0 : _a[1]) || "",
+      visitToken: ((_b = cookie.match(/\b_shopify_s=([^;]+)/)) == null ? void 0 : _b[1]) || "",
+      consent: ((_c = cookie.match(/\b_tracking_consent=([^;]+)/)) == null ? void 0 : _c[1]) || ""
+    };
+  }
+  return trackingValues;
+}
+function extractFromPerformanceEntry(entry, isConsentRequired = true) {
+  let uniqueToken = "";
+  let visitToken = "";
+  let consent = "";
+  const serverTiming = entry.serverTiming;
+  if (serverTiming && serverTiming.length >= 3) {
+    for (let i = serverTiming.length - 1; i >= 0; i--) {
+      const { name, description } = serverTiming[i];
+      if (!name || !description) continue;
+      if (name === "_y") {
+        uniqueToken = description;
+      } else if (name === "_s") {
+        visitToken = description;
+      } else if (name === "_cmp") {
+        consent = description;
+      }
+      if (uniqueToken && visitToken && consent) break;
+    }
+  }
+  return uniqueToken && visitToken && (isConsentRequired ? consent : true) ? { uniqueToken, visitToken, consent } : void 0;
+}
+export {
+  SHOPIFY_UNIQUE_TOKEN_HEADER,
+  SHOPIFY_VISIT_TOKEN_HEADER,
+  cachedTrackingValues,
+  getTrackingValues
+};
+//# sourceMappingURL=tracking-utils.mjs.map

package/dist/node-dev/tracking-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking-utils.mjs","sources":["../../src/tracking-utils.ts"],"sourcesContent":["/** Storefront API header for VisitToken */\nexport const SHOPIFY_VISIT_TOKEN_HEADER = 'X-Shopify-VisitToken';\n/** Storefront API header for UniqueToken */\nexport const SHOPIFY_UNIQUE_TOKEN_HEADER = 'X-Shopify-UniqueToken';\n\nexport type TrackingValues = {\n  /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */\n  uniqueToken: string;\n  /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */\n  visitToken: string;\n  /** Represents the consent given by the user or the default region consent configured in Admin */\n  consent: string;\n};\n\n// Cache values to avoid losing them when performance\n// entries are cleared from the buffer over time.\nexport const cachedTrackingValues: {\n  current: null | TrackingValues;\n} = {current: null};\n\n/**\n * Retrieves user session tracking values for analytics\n * and marketing from the browser environment.\n * @param cookieString - Optional cookie string to parse for deprecated cookie fallback.\n *   Used internally by getShopifyCookies for backward compatibility.\n */\nexport function getTrackingValues(cookieString?: string): TrackingValues {\n  // Overall behavior: Tracking values are returned in Server-Timing headers from\n  // Storefront API responses, and we want to find and return these tracking values.\n  //\n  // Search recent fetches for SFAPI requests matching either: same origin (proxy case)\n  // or a subdomain of the current host (eg: checkout subdomain, if there is no proxy).\n  // We consider SF API-like endpoints (/api/.../graphql.json) on subdomains, as well as\n  // any same-origin request. The reason for the latter is that Hydrogen server collects\n  // tracking values and returns them in any non-cached response, not just direct SF API\n  // responses. For example, a cart mutation in a server action could return tracking values.\n  //\n  // If we didn't find tracking values in fetch requests, we fall back to checking cached values,\n  // then the initial page navigation entry, and finally the deprecated `_shopify_s` and `_shopify_y`.\n\n  let trackingValues: TrackingValues | undefined;\n\n  if (\n    typeof window !== 'undefined' &&\n    typeof window.performance !== 'undefined'\n  ) {\n    try {\n      // RE to extract host and optionally match SFAPI pathname.\n      // Group 1: host (e.g. \"checkout.mystore.com\")\n      // Group 2: SFAPI path if present (e.g. \"/api/2024-01/graphql.json\")\n      const resourceRE =\n        /^https?:\\/\\/([^/]+)(\\/api\\/(?:unstable|2\\d{3}-\\d{2})\\/graphql\\.json(?=$|\\?))?/;\n\n      // Search backwards through resource entries to find the most recent match.\n      // Match criteria (first one with _y and _s values wins):\n      // - Same origin (exact host match) with tracking values, OR\n      // - Subdomain + SFAPI pathname with tracking values\n      const entries = performance.getEntriesByType(\n        'resource',\n      ) as PerformanceResourceTiming[];\n\n      let matchedValues: ReturnType<typeof extractFromPerformanceEntry>;\n\n      for (let i = entries.length - 1; i >= 0; i--) {\n        const entry = entries[i];\n\n        if (entry.initiatorType !== 'fetch') continue;\n\n        const currentHost = window.location.host;\n        const match = entry.name.match(resourceRE);\n        if (!match) continue;\n\n        const [, matchedHost, sfapiPath] = match;\n\n        const isMatch =\n          // Same origin (exact host match)\n          matchedHost === currentHost ||\n          // Subdomain with SFAPI path\n          (sfapiPath && matchedHost?.endsWith(`.${currentHost}`));\n\n        if (isMatch) {\n          const values = extractFromPerformanceEntry(entry);\n          if (values) {\n            matchedValues = values;\n            break;\n          }\n        }\n      }\n\n      if (matchedValues) {\n        trackingValues = matchedValues;\n      }\n\n      // Resource entries have a limited buffer and are removed over time.\n      // Cache the latest values for future calls if we find them.\n      // A cached resource entry is always newer than a navigation entry.\n      if (trackingValues) {\n        cachedTrackingValues.current = trackingValues;\n      } else if (cachedTrackingValues.current) {\n        // Fallback to cached values from previous calls:\n        trackingValues = cachedTrackingValues.current;\n      }\n\n      if (!trackingValues) {\n        // Fallback to navigation entry from full page rendering load:\n        const navigationEntries = performance.getEntriesByType(\n          'navigation',\n        )[0] as PerformanceNavigationTiming;\n\n        // Navigation entries might omit consent when the Hydrogen server generates it.\n        // In this case, we skip consent requirement and only extract _y and _s values.\n        trackingValues = extractFromPerformanceEntry(navigationEntries, false);\n      }\n    } catch {}\n  }\n\n  // Fallback to deprecated cookies to support transitioning:\n  if (!trackingValues) {\n    const cookie =\n      typeof cookieString === 'string'\n        ? cookieString\n        : typeof document !== 'undefined'\n          ? document.cookie\n          : '';\n\n    trackingValues = {\n      uniqueToken: cookie.match(/\\b_shopify_y=([^;]+)/)?.[1] || '',\n      visitToken: cookie.match(/\\b_shopify_s=([^;]+)/)?.[1] || '',\n      consent: cookie.match(/\\b_tracking_consent=([^;]+)/)?.[1] || '',\n    };\n  }\n\n  return trackingValues;\n}\n\nfunction extractFromPerformanceEntry(\n  entry: PerformanceNavigationTiming | PerformanceResourceTiming,\n  isConsentRequired = true,\n): TrackingValues | undefined {\n  let uniqueToken = '';\n  let visitToken = '';\n  let consent = '';\n\n  const serverTiming = entry.serverTiming;\n  // Quick check: we need at least 3 entries (_y, _s, _cmp)\n  if (serverTiming && serverTiming.length >= 3) {\n    // Iterate backwards since our headers are typically at the end\n    for (let i = serverTiming.length - 1; i >= 0; i--) {\n      const {name, description} = serverTiming[i];\n      if (!name || !description) continue;\n\n      if (name === '_y') {\n        uniqueToken = description;\n      } else if (name === '_s') {\n        visitToken = description;\n      } else if (name === '_cmp') {\n        // _cmp (consent management platform) holds the consent value\n        // used by consent-tracking-api and privacy-banner scripts.\n        consent = description;\n      }\n\n      if (uniqueToken && visitToken && consent) break;\n    }\n  }\n\n  return uniqueToken && visitToken && (isConsentRequired ? consent : true)\n    ? {uniqueToken, visitToken, consent}\n    : undefined;\n}\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAEnC,MAAM,8BAA8B;AAa9B,MAAA,uBAET,EAAC,SAAS,KAAI;AAQX,SAAS,kBAAkB,cAAuC;AAzBlE;AAuCD,MAAA;AAEJ,MACE,OAAO,WAAW,eAClB,OAAO,OAAO,gBAAgB,aAC9B;AACI,QAAA;AAIF,YAAM,aACJ;AAMF,YAAM,UAAU,YAAY;AAAA,QAC1B;AAAA,MACF;AAEI,UAAA;AAEJ,eAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AACtC,cAAA,QAAQ,QAAQ,CAAC;AAEnB,YAAA,MAAM,kBAAkB,QAAS;AAE/B,cAAA,cAAc,OAAO,SAAS;AACpC,cAAM,QAAQ,MAAM,KAAK,MAAM,UAAU;AACzC,YAAI,CAAC,MAAO;AAEZ,cAAM,CAAG,EAAA,aAAa,SAAS,IAAI;AAE7B,cAAA;AAAA;AAAA,UAEJ,gBAAgB;AAAA,UAEf,cAAa,2CAAa,SAAS,IAAI,WAAW;AAAA;AAErD,YAAI,SAAS;AACL,gBAAA,SAAS,4BAA4B,KAAK;AAChD,cAAI,QAAQ;AACM,4BAAA;AAChB;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAGF,UAAI,eAAe;AACA,yBAAA;AAAA,MAAA;AAMnB,UAAI,gBAAgB;AAClB,6BAAqB,UAAU;AAAA,MAAA,WACtB,qBAAqB,SAAS;AAEvC,yBAAiB,qBAAqB;AAAA,MAAA;AAGxC,UAAI,CAAC,gBAAgB;AAEnB,cAAM,oBAAoB,YAAY;AAAA,UACpC;AAAA,UACA,CAAC;AAIc,yBAAA,4BAA4B,mBAAmB,KAAK;AAAA,MAAA;AAAA,IACvE,QACM;AAAA,IAAA;AAAA,EAAC;AAIX,MAAI,CAAC,gBAAgB;AACb,UAAA,SACJ,OAAO,iBAAiB,WACpB,eACA,OAAO,aAAa,cAClB,SAAS,SACT;AAES,qBAAA;AAAA,MACf,eAAa,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MAC1D,cAAY,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MACzD,WAAS,YAAO,MAAM,6BAA6B,MAA1C,mBAA8C,OAAM;AAAA,IAC/D;AAAA,EAAA;AAGK,SAAA;AACT;AAEA,SAAS,4BACP,OACA,oBAAoB,MACQ;AAC5B,MAAI,cAAc;AAClB,MAAI,aAAa;AACjB,MAAI,UAAU;AAEd,QAAM,eAAe,MAAM;AAEvB,MAAA,gBAAgB,aAAa,UAAU,GAAG;AAE5C,aAAS,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;AACjD,YAAM,EAAC,MAAM,gBAAe,aAAa,CAAC;AACtC,UAAA,CAAC,QAAQ,CAAC,YAAa;AAE3B,UAAI,SAAS,MAAM;AACH,sBAAA;AAAA,MAAA,WACL,SAAS,MAAM;AACX,qBAAA;AAAA,MAAA,WACJ,SAAS,QAAQ;AAGhB,kBAAA;AAAA,MAAA;AAGR,UAAA,eAAe,cAAc,QAAS;AAAA,IAAA;AAAA,EAC5C;AAGK,SAAA,eAAe,eAAe,oBAAoB,UAAU,QAC/D,EAAC,aAAa,YAAY,QAAA,IAC1B;AACN;"}

package/dist/node-dev/useShopifyCookies.js

@@ -4,17 +4,26 @@ const React = require("react");
 const cookie = require("worktop/cookie");
 const cartConstants = require("./cart-constants.js");
 const cookiesUtils = require("./cookies-utils.js");
+const trackingUtils = require("./tracking-utils.js");
 const longTermLength = 60 * 60 * 24 * 360 * 1;
 const shortTermLength = 60 * 30;
 function useShopifyCookies(options) {
   const {
-    hasUserConsent = false,
+    hasUserConsent,
     domain = "",
-    checkoutDomain = ""
+    checkoutDomain = "",
+    storefrontAccessToken,
+    fetchTrackingValues,
+    ignoreDeprecatedCookies = false
   } = options || {};
+  const coreCookiesReady = useCoreShopifyCookies({
+    storefrontAccessToken,
+    fetchTrackingValues,
+    checkoutDomain
+  });
   React.useEffect(() => {
-    const cookies = cookiesUtils.getShopifyCookies(document.cookie);
-    let currentDomain = domain || window.document.location.host;
+    if (ignoreDeprecatedCookies || !coreCookiesReady) return;
+    let currentDomain = domain || window.location.host;
     if (checkoutDomain) {
       const checkoutDomainParts = checkoutDomain.split(".").reverse();
       const currentDomainParts = currentDomain.split(".").reverse();
@@ -29,15 +38,19 @@ function useShopifyCookies(options) {
     if (/^localhost/.test(currentDomain)) currentDomain = "";
     const domainWithLeadingDot = currentDomain ? /^\./.test(currentDomain) ? currentDomain : `.${currentDomain}` : "";
     if (hasUserConsent) {
+      const trackingValues = trackingUtils.getTrackingValues();
+      if ((trackingValues.uniqueToken || trackingValues.visitToken || "").startsWith("00000000-")) {
+        return;
+      }
       setCookie(
         cartConstants.SHOPIFY_Y,
-        cookies[cartConstants.SHOPIFY_Y] || cookiesUtils.buildUUID(),
+        trackingValues.uniqueToken || cookiesUtils.buildUUID(),
         longTermLength,
         domainWithLeadingDot
       );
       setCookie(
         cartConstants.SHOPIFY_S,
-        cookies[cartConstants.SHOPIFY_S] || cookiesUtils.buildUUID(),
+        trackingValues.visitToken || cookiesUtils.buildUUID(),
         shortTermLength,
         domainWithLeadingDot
       );
@@ -45,7 +58,14 @@ function useShopifyCookies(options) {
       setCookie(cartConstants.SHOPIFY_Y, "", 0, domainWithLeadingDot);
       setCookie(cartConstants.SHOPIFY_S, "", 0, domainWithLeadingDot);
     }
-  }, [options, hasUserConsent, domain, checkoutDomain]);
+  }, [
+    coreCookiesReady,
+    hasUserConsent,
+    domain,
+    checkoutDomain,
+    ignoreDeprecatedCookies
+  ]);
+  return coreCookiesReady;
 }
 function setCookie(name, value, maxage, domain) {
   document.cookie = cookie.stringify(name, value, {
@@ -55,5 +75,72 @@ function setCookie(name, value, maxage, domain) {
     path: "/"
   });
 }
+async function fetchTrackingValuesFromBrowser(storefrontAccessToken, storefrontApiDomain = "") {
+  const { uniqueToken, visitToken } = trackingUtils.getTrackingValues();
+  const response = await fetch(
+    // TODO: update this endpoint when it becomes stable
+    `${storefrontApiDomain.replace(/\/+$/, "")}/api/unstable/graphql.json`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...storefrontAccessToken && {
+          "X-Shopify-Storefront-Access-Token": storefrontAccessToken
+        },
+        ...visitToken || uniqueToken ? {
+          [trackingUtils.SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,
+          [trackingUtils.SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken
+        } : void 0
+      },
+      body: JSON.stringify({
+        query: (
+          // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.
+          // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.
+          "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }"
+        )
+      })
+    }
+  );
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch consent from browser: ${response.status} ${response.statusText}`
+    );
+  }
+  await response.json();
+  trackingUtils.getTrackingValues();
+}
+function useCoreShopifyCookies({
+  checkoutDomain,
+  storefrontAccessToken,
+  fetchTrackingValues = false
+}) {
+  const [cookiesReady, setCookiesReady] = React.useState(!fetchTrackingValues);
+  const hasFetchedTrackingValues = React.useRef(false);
+  React.useEffect(() => {
+    if (!fetchTrackingValues) {
+      setCookiesReady(true);
+      return;
+    }
+    if (hasFetchedTrackingValues.current) return;
+    hasFetchedTrackingValues.current = true;
+    fetchTrackingValuesFromBrowser(storefrontAccessToken).catch(
+      (error) => checkoutDomain ? (
+        // Retry with checkout domain if available to at least
+        // get the server-timing values for tracking.
+        fetchTrackingValuesFromBrowser(
+          storefrontAccessToken,
+          checkoutDomain
+        )
+      ) : Promise.reject(error)
+    ).catch((error) => {
+      console.warn(
+        "[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error))
+      );
+    }).finally(() => {
+      setCookiesReady(true);
+    });
+  }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);
+  return cookiesReady;
+}
 exports.useShopifyCookies = useShopifyCookies;
 //# sourceMappingURL=useShopifyCookies.js.map

package/dist/node-dev/useShopifyCookies.js.map

@@ -1 +1 @@
-{"version":3,"file":"useShopifyCookies.js","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID, getShopifyCookies} from './cookies-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = {\n  /**\n   * If set to `false`, Shopify cookies will be removed.\n   * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n   * Defaults to false.\n   **/\n  hasUserConsent?: boolean;\n  /**\n   * The domain scope of the cookie. Defaults to empty string.\n   **/\n  domain?: string;\n  /**\n   * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n   */\n  checkoutDomain?: string;\n};\n\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): void {\n  const {\n    hasUserConsent = false,\n    domain = '',\n    checkoutDomain = '',\n  } = options || {};\n  useEffect(() => {\n    const cookies = getShopifyCookies(document.cookie);\n\n    /**\n     * Setting cookie with domain\n     *\n     * If no domain is provided, the cookie will be set for the current host.\n     * For Shopify, we need to ensure this domain is set with a leading dot.\n     */\n\n    // Use override domain or current host\n    let currentDomain = domain || window.document.location.host;\n\n    if (checkoutDomain) {\n      const checkoutDomainParts = checkoutDomain.split('.').reverse();\n      const currentDomainParts = currentDomain.split('.').reverse();\n      const sameDomainParts: Array<string> = [];\n      checkoutDomainParts.forEach((part, index) => {\n        if (part === currentDomainParts[index]) {\n          sameDomainParts.push(part);\n        }\n      });\n\n      currentDomain = sameDomainParts.reverse().join('.');\n    }\n\n    // Reset domain if localhost\n    if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n    // Shopify checkout only consumes cookies set with leading dot domain\n    const domainWithLeadingDot = currentDomain\n      ? /^\\./.test(currentDomain)\n        ? currentDomain\n        : `.${currentDomain}`\n      : '';\n\n    /**\n     * Set user and session cookies and refresh the expiry time\n     */\n    if (hasUserConsent) {\n      setCookie(\n        SHOPIFY_Y,\n        cookies[SHOPIFY_Y] || buildUUID(),\n        longTermLength,\n        domainWithLeadingDot,\n      );\n      setCookie(\n        SHOPIFY_S,\n        cookies[SHOPIFY_S] || buildUUID(),\n        shortTermLength,\n        domainWithLeadingDot,\n      );\n    } else {\n      setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n      setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n    }\n  }, [options, hasUserConsent, domain, checkoutDomain]);\n}\n\nfunction setCookie(\n  name: string,\n  value: string,\n  maxage: number,\n  domain: string,\n): void {\n  document.cookie = stringify(name, value, {\n    maxage,\n    domain,\n    samesite: 'Lax',\n    path: '/',\n  });\n}\n"],"names":["useEffect","getShopifyCookies","SHOPIFY_Y","buildUUID","SHOPIFY_S","stringify"],"mappings":";;;;;;AAKA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAmBtB,SAAS,kBAAkB,SAA0C;AACpE,QAAA;AAAA,IACJ,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,iBAAiB;AAAA,EACnB,IAAI,WAAW,CAAC;AAChBA,QAAAA,UAAU,MAAM;AACR,UAAA,UAAUC,aAAAA,kBAAkB,SAAS,MAAM;AAUjD,QAAI,gBAAgB,UAAU,OAAO,SAAS,SAAS;AAEvD,QAAI,gBAAgB;AAClB,YAAM,sBAAsB,eAAe,MAAM,GAAG,EAAE,QAAQ;AAC9D,YAAM,qBAAqB,cAAc,MAAM,GAAG,EAAE,QAAQ;AAC5D,YAAM,kBAAiC,CAAC;AACpB,0BAAA,QAAQ,CAAC,MAAM,UAAU;AACvC,YAAA,SAAS,mBAAmB,KAAK,GAAG;AACtC,0BAAgB,KAAK,IAAI;AAAA,QAAA;AAAA,MAC3B,CACD;AAED,sBAAgB,gBAAgB,UAAU,KAAK,GAAG;AAAA,IAAA;AAIpD,QAAI,aAAa,KAAK,aAAa,EAAmB,iBAAA;AAGhD,UAAA,uBAAuB,gBACzB,MAAM,KAAK,aAAa,IACtB,gBACA,IAAI,aAAa,KACnB;AAKJ,QAAI,gBAAgB;AAClB;AAAA,QACEC,cAAA;AAAA,QACA,QAAQA,cAAAA,SAAS,KAAKC,uBAAU;AAAA,QAChC;AAAA,QACA;AAAA,MACF;AACA;AAAA,QACEC,cAAA;AAAA,QACA,QAAQA,cAAAA,SAAS,KAAKD,uBAAU;AAAA,QAChC;AAAA,QACA;AAAA,MACF;AAAA,IAAA,OACK;AACK,gBAAAD,cAAA,WAAW,IAAI,GAAG,oBAAoB;AACtC,gBAAAE,cAAA,WAAW,IAAI,GAAG,oBAAoB;AAAA,IAAA;AAAA,KAEjD,CAAC,SAAS,gBAAgB,QAAQ,cAAc,CAAC;AACtD;AAEA,SAAS,UACP,MACA,OACA,QACA,QACM;AACG,WAAA,SAASC,iBAAU,MAAM,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACH;;"}
+{"version":3,"file":"useShopifyCookies.js","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n// @ts-ignore - worktop/cookie types not properly exported\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID} from './cookies-utils.js';\nimport {\n  getTrackingValues,\n  SHOPIFY_UNIQUE_TOKEN_HEADER,\n  SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {\n  /**\n   * If set to `false`, Shopify cookies will be removed.\n   * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n   * Defaults to false.\n   **/\n  hasUserConsent?: boolean;\n  /**\n   * The domain scope of the cookie. Defaults to empty string.\n   **/\n  domain?: string;\n  /**\n   * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n   */\n  checkoutDomain?: string;\n  /**\n   * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.\n   */\n  ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent\n * for backward compatibility support.\n *\n * If `fetchTrackingValues` is true, it makes a request to Storefront API\n * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.\n * Generally speaking, this should only be needed if you're not using Hydrogen's\n * built-in analytics components and hooks that already handle this automatically.\n * For example, set it to `true` if you are using `hydrogen-react` only with\n * a different framework and still need to make a same-domain request to\n * Storefront API to set cookies.\n *\n * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.\n * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.\n *\n * @returns `true` when cookies are set and ready.\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n  const {\n    hasUserConsent,\n    domain = '',\n    checkoutDomain = '',\n    storefrontAccessToken,\n    fetchTrackingValues,\n    ignoreDeprecatedCookies = false,\n  } = options || {};\n\n  const coreCookiesReady = useCoreShopifyCookies({\n    storefrontAccessToken,\n    fetchTrackingValues,\n    checkoutDomain,\n  });\n\n  useEffect(() => {\n    // Skip setting JS cookies until http-only cookies and server-timing\n    // are ready so that we have values synced in JS and http-only cookies.\n    if (ignoreDeprecatedCookies || !coreCookiesReady) return;\n\n    /**\n     * Setting cookie with domain\n     *\n     * If no domain is provided, the cookie will be set for the current host.\n     * For Shopify, we need to ensure this domain is set with a leading dot.\n     */\n\n    // Use override domain or current host\n    let currentDomain = domain || window.location.host;\n\n    if (checkoutDomain) {\n      const checkoutDomainParts = checkoutDomain.split('.').reverse();\n      const currentDomainParts = currentDomain.split('.').reverse();\n      const sameDomainParts: Array<string> = [];\n      checkoutDomainParts.forEach((part, index) => {\n        if (part === currentDomainParts[index]) {\n          sameDomainParts.push(part);\n        }\n      });\n\n      currentDomain = sameDomainParts.reverse().join('.');\n    }\n\n    // Reset domain if localhost\n    if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n    // Shopify checkout only consumes cookies set with leading dot domain\n    const domainWithLeadingDot = currentDomain\n      ? /^\\./.test(currentDomain)\n        ? currentDomain\n        : `.${currentDomain}`\n      : '';\n\n    /**\n     * Set user and session cookies and refresh the expiry time\n     */\n    if (hasUserConsent) {\n      const trackingValues = getTrackingValues();\n      if (\n        (\n          trackingValues.uniqueToken ||\n          trackingValues.visitToken ||\n          ''\n        ).startsWith('00000000-')\n      ) {\n        // Skip writing cookies when tracking values signal we don't have consent yet\n        return;\n      }\n\n      setCookie(\n        SHOPIFY_Y,\n        trackingValues.uniqueToken || buildUUID(),\n        longTermLength,\n        domainWithLeadingDot,\n      );\n      setCookie(\n        SHOPIFY_S,\n        trackingValues.visitToken || buildUUID(),\n        shortTermLength,\n        domainWithLeadingDot,\n      );\n    } else {\n      setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n      setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n    }\n  }, [\n    coreCookiesReady,\n    hasUserConsent,\n    domain,\n    checkoutDomain,\n    ignoreDeprecatedCookies,\n  ]);\n\n  return coreCookiesReady;\n}\n\nfunction setCookie(\n  name: string,\n  value: string,\n  maxage: number,\n  domain: string,\n): void {\n  document.cookie = stringify(name, value, {\n    maxage,\n    domain,\n    samesite: 'Lax',\n    path: '/',\n  });\n}\n\nasync function fetchTrackingValuesFromBrowser(\n  storefrontAccessToken?: string,\n  storefrontApiDomain = '',\n): Promise<void> {\n  // These values might come from server-timing or old cookies.\n  // If consent cannot be initially assumed, these tokens\n  // will be dropped in SFAPI and it will return a mock token\n  // starting with '00000000-'.\n  // However, if consent can be assumed initially, these tokens\n  // will be used to create proper cookies and continue our flow.\n  const {uniqueToken, visitToken} = getTrackingValues();\n\n  const response = await fetch(\n    // TODO: update this endpoint when it becomes stable\n    `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        ...(storefrontAccessToken && {\n          'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n        }),\n        ...(visitToken || uniqueToken\n          ? {\n              [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n              [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n            }\n          : undefined),\n      },\n      body: JSON.stringify({\n        query:\n          // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.\n          // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.\n          'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }',\n      }),\n    },\n  );\n\n  if (!response.ok) {\n    throw new Error(\n      `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n    );\n  }\n\n  // Consume the body to complete the request and\n  // ensure server-timing is available in performance API\n  await response.json();\n\n  // Ensure we cache the latest tracking values from resources timing\n  getTrackingValues();\n}\n\ntype CoreShopifyCookiesOptions = {\n  storefrontAccessToken?: string;\n  fetchTrackingValues?: boolean;\n  checkoutDomain?: string;\n};\n\n/**\n * Gets http-only cookies from Storefront API via same-origin fetch request.\n * Falls back to checkout domain if provided to at least obtain the tracking\n * values via server-timing headers.\n */\nfunction useCoreShopifyCookies({\n  checkoutDomain,\n  storefrontAccessToken,\n  fetchTrackingValues = false,\n}: CoreShopifyCookiesOptions) {\n  const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n  const hasFetchedTrackingValues = useRef(false);\n\n  useEffect(() => {\n    if (!fetchTrackingValues) {\n      // Backend did the work, or proxy is disabled.\n      setCookiesReady(true);\n      return;\n    }\n\n    // React runs effects twice in dev mode, avoid double fetching\n    if (hasFetchedTrackingValues.current) return;\n    hasFetchedTrackingValues.current = true;\n\n    // Fetch consent from browser via proxy\n    fetchTrackingValuesFromBrowser(storefrontAccessToken)\n      .catch((error) =>\n        checkoutDomain\n          ? // Retry with checkout domain if available to at least\n            // get the server-timing values for tracking.\n            fetchTrackingValuesFromBrowser(\n              storefrontAccessToken,\n              checkoutDomain,\n            )\n          : Promise.reject(error),\n      )\n      .catch((error) => {\n        console.warn(\n          '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n            (error instanceof Error ? error.message : String(error)),\n        );\n      })\n      .finally(() => {\n        // Proceed even on errors, degraded tracking is better than no app\n        setCookiesReady(true);\n      });\n  }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n  return cookiesReady;\n}\n"],"names":["useEffect","getTrackingValues","SHOPIFY_Y","buildUUID","SHOPIFY_S","stringify","SHOPIFY_VISIT_TOKEN_HEADER","SHOPIFY_UNIQUE_TOKEN_HEADER","useState","useRef"],"mappings":"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"}

package/dist/node-dev/useShopifyCookies.mjs

@@ -1,18 +1,27 @@
-import { useEffect } from "react";
+import { useEffect, useState, useRef } from "react";
 import { stringify } from "worktop/cookie";
 import { SHOPIFY_Y, SHOPIFY_S } from "./cart-constants.mjs";
-import { getShopifyCookies, buildUUID } from "./cookies-utils.mjs";
+import { buildUUID } from "./cookies-utils.mjs";
+import { getTrackingValues, SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER } from "./tracking-utils.mjs";
 const longTermLength = 60 * 60 * 24 * 360 * 1;
 const shortTermLength = 60 * 30;
 function useShopifyCookies(options) {
   const {
-    hasUserConsent = false,
+    hasUserConsent,
     domain = "",
-    checkoutDomain = ""
+    checkoutDomain = "",
+    storefrontAccessToken,
+    fetchTrackingValues,
+    ignoreDeprecatedCookies = false
   } = options || {};
+  const coreCookiesReady = useCoreShopifyCookies({
+    storefrontAccessToken,
+    fetchTrackingValues,
+    checkoutDomain
+  });
   useEffect(() => {
-    const cookies = getShopifyCookies(document.cookie);
-    let currentDomain = domain || window.document.location.host;
+    if (ignoreDeprecatedCookies || !coreCookiesReady) return;
+    let currentDomain = domain || window.location.host;
     if (checkoutDomain) {
       const checkoutDomainParts = checkoutDomain.split(".").reverse();
       const currentDomainParts = currentDomain.split(".").reverse();
@@ -27,15 +36,19 @@ function useShopifyCookies(options) {
     if (/^localhost/.test(currentDomain)) currentDomain = "";
     const domainWithLeadingDot = currentDomain ? /^\./.test(currentDomain) ? currentDomain : `.${currentDomain}` : "";
     if (hasUserConsent) {
+      const trackingValues = getTrackingValues();
+      if ((trackingValues.uniqueToken || trackingValues.visitToken || "").startsWith("00000000-")) {
+        return;
+      }
       setCookie(
         SHOPIFY_Y,
-        cookies[SHOPIFY_Y] || buildUUID(),
+        trackingValues.uniqueToken || buildUUID(),
         longTermLength,
         domainWithLeadingDot
       );
       setCookie(
         SHOPIFY_S,
-        cookies[SHOPIFY_S] || buildUUID(),
+        trackingValues.visitToken || buildUUID(),
         shortTermLength,
         domainWithLeadingDot
       );
@@ -43,7 +56,14 @@ function useShopifyCookies(options) {
       setCookie(SHOPIFY_Y, "", 0, domainWithLeadingDot);
       setCookie(SHOPIFY_S, "", 0, domainWithLeadingDot);
     }
-  }, [options, hasUserConsent, domain, checkoutDomain]);
+  }, [
+    coreCookiesReady,
+    hasUserConsent,
+    domain,
+    checkoutDomain,
+    ignoreDeprecatedCookies
+  ]);
+  return coreCookiesReady;
 }
 function setCookie(name, value, maxage, domain) {
   document.cookie = stringify(name, value, {
@@ -53,6 +73,73 @@ function setCookie(name, value, maxage, domain) {
     path: "/"
   });
 }
+async function fetchTrackingValuesFromBrowser(storefrontAccessToken, storefrontApiDomain = "") {
+  const { uniqueToken, visitToken } = getTrackingValues();
+  const response = await fetch(
+    // TODO: update this endpoint when it becomes stable
+    `${storefrontApiDomain.replace(/\/+$/, "")}/api/unstable/graphql.json`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...storefrontAccessToken && {
+          "X-Shopify-Storefront-Access-Token": storefrontAccessToken
+        },
+        ...visitToken || uniqueToken ? {
+          [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,
+          [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken
+        } : void 0
+      },
+      body: JSON.stringify({
+        query: (
+          // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.
+          // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.
+          "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }"
+        )
+      })
+    }
+  );
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch consent from browser: ${response.status} ${response.statusText}`
+    );
+  }
+  await response.json();
+  getTrackingValues();
+}
+function useCoreShopifyCookies({
+  checkoutDomain,
+  storefrontAccessToken,
+  fetchTrackingValues = false
+}) {
+  const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);
+  const hasFetchedTrackingValues = useRef(false);
+  useEffect(() => {
+    if (!fetchTrackingValues) {
+      setCookiesReady(true);
+      return;
+    }
+    if (hasFetchedTrackingValues.current) return;
+    hasFetchedTrackingValues.current = true;
+    fetchTrackingValuesFromBrowser(storefrontAccessToken).catch(
+      (error) => checkoutDomain ? (
+        // Retry with checkout domain if available to at least
+        // get the server-timing values for tracking.
+        fetchTrackingValuesFromBrowser(
+          storefrontAccessToken,
+          checkoutDomain
+        )
+      ) : Promise.reject(error)
+    ).catch((error) => {
+      console.warn(
+        "[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error))
+      );
+    }).finally(() => {
+      setCookiesReady(true);
+    });
+  }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);
+  return cookiesReady;
+}
 export {
   useShopifyCookies
 };