@shopify/hydrogen-react 2024.10.0 → 2024.10.2

package/dist/node-prod/useShopifyCookies.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useShopifyCookies.mjs","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":[],"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,EAAA,IACf,WAAW,CAAA;AACf,YAAU,MAAM;AACR,UAAA,UAAU,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,CAAA;AACnB,0BAAA,QAAQ,CAAC,MAAM,UAAU;AACvC,YAAA,SAAS,mBAAmB,KAAK,GAAG;AACtC,0BAAgB,KAAK,IAAI;AAAA,QAC3B;AAAA,MAAA,CACD;AAED,sBAAgB,gBAAgB,QAAU,EAAA,KAAK,GAAG;AAAA,IACpD;AAGI,QAAA,aAAa,KAAK,aAAa;AAAmB,sBAAA;AAGhD,UAAA,uBAAuB,gBACzB,MAAM,KAAK,aAAa,IACtB,gBACA,IAAI,aAAa,KACnB;AAKJ,QAAI,gBAAgB;AAClB;AAAA,QACE;AAAA,QACA,QAAQ,SAAS,KAAK,UAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAEF;AAAA,QACE;AAAA,QACA,QAAQ,SAAS,KAAK,UAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAAA,IACF,OACK;AACK,gBAAA,WAAW,IAAI,GAAG,oBAAoB;AACtC,gBAAA,WAAW,IAAI,GAAG,oBAAoB;AAAA,IAClD;AAAA,KACC,CAAC,SAAS,gBAAgB,QAAQ,cAAc,CAAC;AACtD;AAEA,SAAS,UACP,MACA,OACA,QACA,QACM;AACG,WAAA,SAAS,UAAU,MAAM,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACH;"}
+{"version":3,"file":"useShopifyCookies.mjs","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\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): boolean {\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":[],"mappings":";;;;;AAUA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAwCtB,SAAS,kBAAkB,SAA6C;AACvE,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,0BAA0B;AAAA,EAAA,IACxB,WAAW,CAAA;AAEf,QAAM,mBAAmB,sBAAsB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,YAAU,MAAM;AAGd,QAAI,2BAA2B,CAAC;AAAkB;AAU9C,QAAA,gBAAgB,UAAU,OAAO,SAAS;AAE9C,QAAI,gBAAgB;AAClB,YAAM,sBAAsB,eAAe,MAAM,GAAG,EAAE,QAAQ;AAC9D,YAAM,qBAAqB,cAAc,MAAM,GAAG,EAAE,QAAQ;AAC5D,YAAM,kBAAiC,CAAA;AACnB,0BAAA,QAAQ,CAAC,MAAM,UAAU;AACvC,YAAA,SAAS,mBAAmB,KAAK,GAAG;AACtC,0BAAgB,KAAK,IAAI;AAAA,QAC3B;AAAA,MAAA,CACD;AAED,sBAAgB,gBAAgB,QAAU,EAAA,KAAK,GAAG;AAAA,IACpD;AAGI,QAAA,aAAa,KAAK,aAAa;AAAmB,sBAAA;AAGhD,UAAA,uBAAuB,gBACzB,MAAM,KAAK,aAAa,IACtB,gBACA,IAAI,aAAa,KACnB;AAKJ,QAAI,gBAAgB;AAClB,YAAM,iBAAiB;AACvB,WAEI,eAAe,eACf,eAAe,cACf,IACA,WAAW,WAAW,GACxB;AAEA;AAAA,MACF;AAEA;AAAA,QACE;AAAA,QACA,eAAe,eAAe,UAAU;AAAA,QACxC;AAAA,QACA;AAAA,MAAA;AAEF;AAAA,QACE;AAAA,QACA,eAAe,cAAc,UAAU;AAAA,QACvC;AAAA,QACA;AAAA,MAAA;AAAA,IACF,OACK;AACK,gBAAA,WAAW,IAAI,GAAG,oBAAoB;AACtC,gBAAA,WAAW,IAAI,GAAG,oBAAoB;AAAA,IAClD;AAAA,EAAA,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;AAEA,SAAS,UACP,MACA,OACA,QACA,QACM;AACG,WAAA,SAAS,UAAU,MAAM,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACH;AAEA,eAAe,+BACb,uBACA,sBAAsB,IACP;AAOf,QAAM,EAAC,aAAa,WAAU,IAAI,kBAAkB;AAEpD,QAAM,WAAW,MAAM;AAAA;AAAA,IAErB,GAAG,oBAAoB,QAAQ,QAAQ,EAAE,CAAC;AAAA,IAC1C;AAAA,MACE,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,gBAAgB;AAAA,QAChB,GAAI,yBAAyB;AAAA,UAC3B,qCAAqC;AAAA,QACvC;AAAA,QACA,GAAI,cAAc,cACd;AAAA,UACE,CAAC,0BAA0B,GAAG;AAAA,UAC9B,CAAC,2BAA2B,GAAG;AAAA,QAEjC,IAAA;AAAA,MACN;AAAA,MACA,MAAM,KAAK,UAAU;AAAA,QACnB;AAAA;AAAA;AAAA,UAGE;AAAA;AAAA,MAAA,CACH;AAAA,IACH;AAAA,EAAA;AAGE,MAAA,CAAC,SAAS,IAAI;AAChB,UAAM,IAAI;AAAA,MACR,yCAAyC,SAAS,MAAM,IAAI,SAAS,UAAU;AAAA,IAAA;AAAA,EAEnF;AAIA,QAAM,SAAS;AAGG;AACpB;AAaA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,sBAAsB;AACxB,GAAuC;AACrC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC,mBAAmB;AAC/D,QAAA,2BAA2B,OAAO,KAAK;AAE7C,YAAU,MAAM;AACd,QAAI,CAAC,qBAAqB;AAExB,sBAAgB,IAAI;AACpB;AAAA,IACF;AAGA,QAAI,yBAAyB;AAAS;AACtC,6BAAyB,UAAU;AAGnC,mCAA+B,qBAAqB,EACjD;AAAA,MAAM,CAAC,UACN;AAAA;AAAA;AAAA,QAGI;AAAA,UACE;AAAA,UACA;AAAA,QACF;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,IAAA,EAEzB,MAAM,CAAC,UAAU;AACR,cAAA;AAAA,QACN,gFACG,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;AAAA,MAAA;AAAA,IAC1D,CACD,EACA,QAAQ,MAAM;AAEb,sBAAgB,IAAI;AAAA,IAAA,CACrB;AAAA,EACF,GAAA,CAAC,gBAAgB,qBAAqB,qBAAqB,CAAC;AAExD,SAAA;AACT;"}

package/dist/types/CartProvider.d.ts

@@ -53,7 +53,7 @@ type CartProviderProps = {
     customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;
-    /** The ISO luanguage code for i18n. */
+    /** The ISO language code for i18n. */
     languageCode?: LanguageCode;
 };
 /**
@@ -67,8 +67,9 @@ type CartProviderProps = {
  * The `CartProvider` component must be a descendant of the `ShopifyProvider` component.
  */
 export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, languageCode, }: CartProviderProps): JSX.Element;
-/** Check for storage availability funciton obtained from
- * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
+/**
+ * Check for storage availability function obtained from
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
  */
 export declare function storageAvailable(type: 'localStorage' | 'sessionStorage'): boolean;
 export {};

package/dist/types/ShopifyProvider.d.ts

@@ -26,6 +26,11 @@ export interface ShopifyProviderBase {
      * `ISO 369` language codes supported by Shopify.
      */
     languageIsoCode: LanguageCode;
+    /**
+     * Uses the current window.location.origin for Storefront API requests.
+     * This requires setting up a proxy for Storefront API requests in your domain.
+     */
+    sameDomainForStorefrontApi?: boolean;
 }
 /**
  * Shopify-specific values that are used in various Hydrogen React components and hooks.

package/dist/types/cookies-utils.d.ts

@@ -1,4 +1,8 @@
 import { ShopifyCookies } from './analytics-types.js';
 export declare function buildUUID(): string;
 export declare function hexTime(): string;
+/**
+ * Gets the values of _shopify_y and _shopify_s cookies from the provided cookie string.
+ * @deprecated Use getTrackingValues instead.
+ */
 export declare function getShopifyCookies(cookies: string): ShopifyCookies;

package/dist/types/getProductOptions.d.ts

@@ -0,0 +1,49 @@
+import type { Product, ProductOption, ProductOptionValue, ProductVariant, SelectedOption } from './storefront-api-types';
+export type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};
+type ProductOptionValueState = {
+    variant: ProductVariant;
+    handle: string;
+    variantUriQuery: string;
+    selected: boolean;
+    exists: boolean;
+    available: boolean;
+    isDifferentProduct: boolean;
+};
+type MappedProductOptionValue = ProductOptionValue & ProductOptionValueState;
+/**
+ * Converts the product option into an Object\<key, value\> for building query params
+ * For example, a selected product option of
+ *  [
+ *    \{
+ *      name: 'Color',
+ *      value: 'Red',
+ *    \},
+ *    \{
+ *      name: 'Size',
+ *      value: 'Medium',
+ *    \}
+ *  ]
+ * Would return
+ *  \{
+ *    Color: 'Red',
+ *    Size: 'Medium',
+ *  \}
+ */
+export declare function mapSelectedProductOptionToObject(options: Pick<SelectedOption, 'name' | 'value'>[]): Record<string, string>;
+export type MappedProductOptions = Omit<ProductOption, 'optionValues'> & {
+    optionValues: MappedProductOptionValue[];
+};
+export declare function checkProductParam(product: RecursivePartial<Product>, checkAll?: boolean): Product;
+/**
+ * Finds all the variants provided by adjacentVariants, options.optionValues.firstAvailableVariant,
+ * and selectedOrFirstAvailableVariant and return them in a single array
+ */
+export declare function getAdjacentAndFirstAvailableVariants(product: RecursivePartial<Product>): ProductVariant[];
+/**
+ * Returns a product options array with its relevant information
+ * about the variant
+ */
+export declare function getProductOptions(product: RecursivePartial<Product>): MappedProductOptions[];
+export {};

package/dist/types/index.d.cts

@@ -16,6 +16,7 @@ export { customerAccountApiCustomScalars, storefrontApiCustomScalars, } from './
 export { getShopifyCookies } from './cookies-utils.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';
+export { getAdjacentAndFirstAvailableVariants, getProductOptions, type MappedProductOptions, mapSelectedProductOptionToObject, } from './getProductOptions.js';
 export { Image, IMAGE_FRAGMENT } from './Image.js';
 export { useLoadScript } from './load-script.js';
 export { MediaFile } from './MediaFile.js';
@@ -31,6 +32,8 @@ export { ShopPayButton } from './ShopPayButton.js';
 export type { StorefrontApiResponse, StorefrontApiResponseError, StorefrontApiResponseOk, StorefrontApiResponseOkPartial, StorefrontApiResponsePartial, } from './storefront-api-response.types.js';
 export type { StorefrontClientProps } from './storefront-client.js';
 export { createStorefrontClient } from './storefront-client.js';
+export { getTrackingValues, SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER, type TrackingValues, } from './tracking-utils.js';
 export { useMoney } from './useMoney.js';
+export { useSelectedOptionInUrlParam } from './useSelectedOptionInUrlParam.js';
 export { useShopifyCookies } from './useShopifyCookies.js';
 export { Video } from './Video.js';

package/dist/types/index.d.ts

@@ -16,6 +16,7 @@ export { customerAccountApiCustomScalars, storefrontApiCustomScalars, } from './
 export { getShopifyCookies } from './cookies-utils.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';
+export { getAdjacentAndFirstAvailableVariants, getProductOptions, type MappedProductOptions, mapSelectedProductOptionToObject, } from './getProductOptions.js';
 export { Image, IMAGE_FRAGMENT } from './Image.js';
 export { useLoadScript } from './load-script.js';
 export { MediaFile } from './MediaFile.js';
@@ -31,6 +32,8 @@ export { ShopPayButton } from './ShopPayButton.js';
 export type { StorefrontApiResponse, StorefrontApiResponseError, StorefrontApiResponseOk, StorefrontApiResponseOkPartial, StorefrontApiResponsePartial, } from './storefront-api-response.types.js';
 export type { StorefrontClientProps } from './storefront-client.js';
 export { createStorefrontClient } from './storefront-client.js';
+export { getTrackingValues, SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER, type TrackingValues, } from './tracking-utils.js';
 export { useMoney } from './useMoney.js';
+export { useSelectedOptionInUrlParam } from './useSelectedOptionInUrlParam.js';
 export { useShopifyCookies } from './useShopifyCookies.js';
 export { Video } from './Video.js';

package/dist/types/storefront-api-response.types.d.ts

@@ -7,14 +7,14 @@ import type { PartialDeep } from 'type-fest';
 type StorefrontApiExtensions = {
     /**
      * Shows error codes common to Shopify. Additional error codes may also be shown.
-     * https://shopify.dev/api/storefront#status_and_error_codes
+     * @see https://shopify.dev/api/storefront#status_and_error_codes
      */
     code?: 'THROTTLED' | 'ACCESS_DENIED' | 'SHOP_INACTIVE' | 'INTERNAL_SERVER_ERROR' | (string & {});
 };
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object if successful. If you prefer a "deeply-partial" version of that generic object, consider using `StorefrontApiResponseOkPartial` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
  */
@@ -22,7 +22,7 @@ export type StorefrontApiResponseOk<DataGeneric> = FormattedExecutionResult<Data
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object, with `Partial` deeply-applied to all nested objects and properties, if successful. If you prefer not using this "deeply-partial" generic data object, consider using `StorefrontApiResponseOk` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
  */
@@ -48,7 +48,7 @@ export type StorefrontApiResponseError = string | {
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object if successful. If you prefer a "deeply-partial" version of that generic object, consider using `StorefrontApiResponseOkPartial` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * 4xx and 5xx errors occur infrequently. They are often related to network communications, your account, or an issue with Shopify’s services.  Commonly the response is a `JSON.parse`-able string, but in rare occasions may also return HTML which is not `JSON.parse()`-able.
  *
@@ -58,7 +58,7 @@ export type StorefrontApiResponse<DataGeneric> = StorefrontApiResponseOk<DataGen
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object, with `Partial` deeply-applied to all nested objects and properties, if successful. If you prefer not using this "deeply-partial" generic data object, consider using `StorefrontApiResponseOk` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * 4xx and 5xx errors occur infrequently. They are often related to network communications, your account, or an issue with Shopify’s services. Commonly the response is a `JSON.parse`-able string, but in rare occasions may also return HTML which is not `JSON.parse()`-able.
  *

package/dist/types/tracking-utils.d.ts

@@ -0,0 +1,22 @@
+/** Storefront API header for VisitToken */
+export declare const SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
+/** Storefront API header for UniqueToken */
+export declare const SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
+export type TrackingValues = {
+    /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */
+    uniqueToken: string;
+    /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */
+    visitToken: string;
+    /** Represents the consent given by the user or the default region consent configured in Admin */
+    consent: string;
+};
+export declare const cachedTrackingValues: {
+    current: null | TrackingValues;
+};
+/**
+ * Retrieves user session tracking values for analytics
+ * and marketing from the browser environment.
+ * @param cookieString - Optional cookie string to parse for deprecated cookie fallback.
+ *   Used internally by getShopifyCookies for backward compatibility.
+ */
+export declare function getTrackingValues(cookieString?: string): TrackingValues;

package/dist/types/useSelectedOptionInUrlParam.d.ts

@@ -0,0 +1,2 @@
+import { SelectedOption } from './storefront-api-types.js';
+export declare function useSelectedOptionInUrlParam(selectedOptions: Pick<SelectedOption, 'name' | 'value'>[]): null;

package/dist/types/useShopifyCookies.d.ts

@@ -1,4 +1,4 @@
-type UseShopifyCookiesOptions = {
+type UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {
     /**
      * If set to `false`, Shopify cookies will be removed.
      * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.
@@ -13,6 +13,32 @@ type UseShopifyCookiesOptions = {
      * 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.
      */
     checkoutDomain?: string;
+    /**
+     * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.
+     */
+    ignoreDeprecatedCookies?: boolean;
+};
+/**
+ * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
+ * for backward compatibility support.
+ *
+ * If `fetchTrackingValues` is true, it makes a request to Storefront API
+ * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
+ * Generally speaking, this should only be needed if you're not using Hydrogen's
+ * built-in analytics components and hooks that already handle this automatically.
+ * For example, set it to `true` if you are using `hydrogen-react` only with
+ * a different framework and still need to make a same-domain request to
+ * Storefront API to set cookies.
+ *
+ * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
+ * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
+ *
+ * @returns `true` when cookies are set and ready.
+ */
+export declare function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean;
+type CoreShopifyCookiesOptions = {
+    storefrontAccessToken?: string;
+    fetchTrackingValues?: boolean;
+    checkoutDomain?: string;
 };
-export declare function useShopifyCookies(options?: UseShopifyCookiesOptions): void;
 export {};