@shopify/hydrogen-react 0.0.0-next-ea3959b → 0.0.0-next-dada720

package/dist/umd/hydrogen-react.dev.js

@@ -1,5 +1,5 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.hydrogenreact = {}, global.React));
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.storefrontkitreact = {}, global.React));
 })(this, function(exports2, React) {
   "use strict";
   function _interopNamespaceDefault(e2) {
@@ -140,7 +140,7 @@
     } };
     return y;
   }
-  var l = function(t2, n2) {
+  var l$1 = function(t2, n2) {
     return t2.actions.forEach(function(e2) {
       var r2 = e2.exec;
       return r2 && r2(t2.context, n2);
@@ -148,7 +148,7 @@
   };
   function v(t2) {
     var r2 = t2.initialState, i2 = n.NotStarted, o2 = /* @__PURE__ */ new Set(), c2 = { _machine: t2, send: function(e2) {
-      i2 === n.Running && (r2 = t2.transition(r2, e2), l(r2, u$1(e2)), o2.forEach(function(t3) {
+      i2 === n.Running && (r2 = t2.transition(r2, e2), l$1(r2, u$1(e2)), o2.forEach(function(t3) {
         return t3(r2);
       }));
     }, subscribe: function(t3) {
@@ -161,7 +161,7 @@
         r2 = { value: u2.value, actions: [], context: u2.context, matches: a(u2.value) };
       } else
         r2 = t2.initialState;
-      return i2 = n.Running, l(r2, e), c2;
+      return i2 = n.Running, l$1(r2, e), c2;
     }, stop: function() {
       return i2 = n.Stopped, o2.clear(), c2;
     }, get state() {
@@ -949,13 +949,6 @@
 `
   );
   const SFAPI_VERSION = "2023-01";
-  const warnings = /* @__PURE__ */ new Set();
-  const warnOnce = (string) => {
-    if (!warnings.has(string)) {
-      console.warn(string);
-      warnings.add(string);
-    }
-  };
   function createStorefrontClient({
     storeDomain,
     privateStorefrontToken,
@@ -965,7 +958,7 @@
   }) {
     if (storefrontApiVersion !== SFAPI_VERSION) {
       warnOnce(
-        `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen-UI is targeting. You may run into unexpected errors if these versions don't match. Received verion: "${storefrontApiVersion}"; expected version "${SFAPI_VERSION}"`
+        `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen React is targeting. You may run into unexpected errors if these versions don't match. Received verion: "${storefrontApiVersion}"; expected version "${SFAPI_VERSION}"`
       );
     }
     if (!privateStorefrontToken && !globalThis.document) {
@@ -980,10 +973,11 @@
     }
     return {
       getShopifyDomain(overrideProps) {
-        return `https://${(overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain}.myshopify.com`;
+        return (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
       },
       getStorefrontApiUrl(overrideProps) {
-        return `https://${(overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain}.myshopify.com/api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? storefrontApiVersion}/graphql.json`;
+        const finalDomainUrl = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
+        return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? storefrontApiVersion}/graphql.json`;
       },
       getPrivateTokenHeaders(overrideProps) {
         if (!privateStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.privateStorefrontToken)) {
@@ -1000,7 +994,7 @@
         return {
           // default to json
           "content-type": finalContentType === "graphql" ? "application/graphql" : "application/json",
-          "X-SDK-Variant": "hydrogen-ui",
+          "X-SDK-Variant": "hydrogen-react",
           "X-SDK-Variant-Source": "react",
           "X-SDK-Version": storefrontApiVersion,
           "Shopify-Storefront-Private-Token": (overrideProps == null ? void 0 : overrideProps.privateStorefrontToken) ?? privateStorefrontToken ?? "",
@@ -1026,23 +1020,25 @@
     return {
       // default to json
       "content-type": contentType === "graphql" ? "application/graphql" : "application/json",
-      "X-SDK-Variant": "hydrogen-ui",
+      "X-SDK-Variant": "hydrogen-react",
       "X-SDK-Variant-Source": "react",
       "X-SDK-Version": storefrontApiVersion,
       "X-Shopify-Storefront-Access-Token": accessToken
     };
   }
+  const warnings = /* @__PURE__ */ new Set();
+  const warnOnce = (string) => {
+    if (!warnings.has(string)) {
+      console.warn(string);
+      warnings.add(string);
+    }
+  };
   const ShopifyContext = React.createContext({
     storeDomain: "test",
     storefrontToken: "abc123",
     storefrontApiVersion: SFAPI_VERSION,
-    country: {
-      isoCode: "US"
-    },
-    language: {
-      isoCode: "EN"
-    },
-    locale: "EN-US",
+    countryIsoCode: "US",
+    languageIsoCode: "EN",
     getStorefrontApiUrl() {
       return "";
     },
@@ -1055,16 +1051,16 @@
   });
   function ShopifyProvider({
     children,
-    shopifyConfig
+    ...shopifyConfig
   }) {
-    if (!shopifyConfig) {
+    if (!shopifyConfig.countryIsoCode || !shopifyConfig.languageIsoCode || !shopifyConfig.storeDomain || !shopifyConfig.storefrontToken || !shopifyConfig.storefrontApiVersion) {
       throw new Error(
-        `The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`
+        `Please provide the necessary props to '<ShopifyProvider/>'`
       );
     }
     if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {
       console.warn(
-        `<ShopifyProvider/>: This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`
+        `<ShopifyProvider/>: This version of Hydrogen React is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen React and the Storefront API.`
       );
     }
     const finalConfig = React.useMemo(() => {
@@ -1082,17 +1078,10 @@
         },
         getShopifyDomain,
         getStorefrontApiUrl(overrideProps) {
-          var _a;
-          if ((_a = overrideProps == null ? void 0 : overrideProps.storeDomain) == null ? void 0 : _a.includes(".myshopify.com")) {
-            {
-              console.warn(
-                `<ShopifyProvider/>: passing a 'storeDomain' prop that includes '.myshopify.com' will be unsupported in the future. Passing only the subdomain (for example, if the URL is 'test.myshopify.com', passing in 'test') will be the supported way going forward.`
-              );
-            }
-          }
-          return `${getShopifyDomain({
+          const finalDomainUrl = getShopifyDomain({
             storeDomain: (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain
-          })}/api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? shopifyConfig.storefrontApiVersion}/graphql.json`;
+          });
+          return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? shopifyConfig.storefrontApiVersion}/graphql.json`;
         }
       };
     }, [shopifyConfig]);
@@ -1134,6 +1123,52 @@
         (s2 = t2.trim().toLowerCase()) && (s2 === "httponly" || s2 === "secure") && (r2[s2] = true);
     return r2;
   }
+  function l(a2, r2, e2 = {}) {
+    let t2 = a2 + "=" + encodeURIComponent(r2);
+    return e2.expires && (t2 += "; Expires=" + new Date(e2.expires).toUTCString()), e2.maxage != null && e2.maxage >= 0 && (t2 += "; Max-Age=" + (e2.maxage | 0)), e2.domain && (t2 += "; Domain=" + e2.domain), e2.path && (t2 += "; Path=" + e2.path), e2.samesite && (t2 += "; SameSite=" + e2.samesite), (e2.secure || e2.samesite === "None") && (t2 += "; Secure"), e2.httponly && (t2 += "; HttpOnly"), t2;
+  }
+  const tokenHash = "xxxx-4xxx-xxxx-xxxxxxxxxxxx";
+  function buildUUID() {
+    let hash = "";
+    try {
+      const crypto = window.crypto;
+      const randomValuesArray = new Uint16Array(31);
+      crypto.getRandomValues(randomValuesArray);
+      let i2 = 0;
+      hash = tokenHash.replace(/[x]/g, (c2) => {
+        const r2 = randomValuesArray[i2] % 16;
+        const v2 = c2 === "x" ? r2 : r2 & 3 | 8;
+        i2++;
+        return v2.toString(16);
+      }).toUpperCase();
+    } catch (err) {
+      hash = tokenHash.replace(/[x]/g, (c2) => {
+        const r2 = Math.random() * 16 | 0;
+        const v2 = c2 === "x" ? r2 : r2 & 3 | 8;
+        return v2.toString(16);
+      }).toUpperCase();
+    }
+    return `${hexTime()}-${hash}`;
+  }
+  function hexTime() {
+    let dateNumber = 0;
+    let perfNumber = 0;
+    dateNumber = new Date().getTime() >>> 0;
+    try {
+      perfNumber = performance.now() >>> 0;
+    } catch (err) {
+      perfNumber = 0;
+    }
+    const output = Math.abs(dateNumber + perfNumber).toString(16).toLowerCase();
+    return output.padStart(8 - output.length, "0");
+  }
+  function getShopifyCookies(cookies) {
+    const cookieData = u(cookies);
+    return {
+      [SHOPIFY_Y]: cookieData[SHOPIFY_Y] || "",
+      [SHOPIFY_S]: cookieData[SHOPIFY_S] || ""
+    };
+  }
   function useCartFetch() {
     const { storefrontId, getPublicTokenHeaders, getStorefrontApiUrl } = useShop();
     return React.useCallback(
@@ -1145,11 +1180,9 @@
         if (storefrontId) {
           headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
         }
-        const cookieData = u(document.cookie);
-        if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {
-          headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
-          headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
-        }
+        const cookieData = getShopifyCookies(document.cookie);
+        headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
+        headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
         return fetch(getStorefrontApiUrl(), {
           method: "POST",
           headers,
@@ -2315,6 +2348,420 @@
       addingItem ? accessibleAddingToCartLabel : null
     ) : null);
   }
+  const AnalyticsEventName = {
+    PAGE_VIEW: "PAGE_VIEW",
+    ADD_TO_CART: "ADD_TO_CART"
+  };
+  const AnalyticsPageType = {
+    article: "article",
+    blog: "blog",
+    captcha: "captcha",
+    cart: "cart",
+    collection: "collection",
+    customersAccount: "customers/account",
+    customersActivateAccount: "customers/activate_account",
+    customersAddresses: "customers/addresses",
+    customersLogin: "customers/login",
+    customersOrder: "customers/order",
+    customersRegister: "customers/register",
+    customersResetPassword: "customers/reset_password",
+    giftCard: "gift_card",
+    home: "index",
+    listCollections: "list-collections",
+    forbidden: "403",
+    notFound: "404",
+    page: "page",
+    password: "password",
+    product: "product",
+    policy: "policy",
+    search: "search"
+  };
+  const ShopifySalesChannel = {
+    hydrogen: "hydrogen",
+    headless: "headless"
+  };
+  const ShopifyAppId = {
+    hydrogen: "6167201",
+    headless: "12875497473"
+  };
+  function schemaWrapper(schemaId, payload) {
+    return {
+      schema_id: schemaId,
+      payload,
+      metadata: {
+        event_created_at_ms: Date.now()
+      }
+    };
+  }
+  function parseGid(gid) {
+    const defaultReturn = { id: "", resource: null };
+    if (typeof gid !== "string") {
+      return defaultReturn;
+    }
+    const matches = gid.match(/^gid:\/\/shopify\/(\w+)\/([a-z0-9]+)/);
+    if (!matches || matches.length === 1) {
+      return defaultReturn;
+    }
+    const id = matches[2] ?? null;
+    const resource = matches[1] ?? null;
+    return { id, resource };
+  }
+  function addDataIf(keyValuePairs, formattedData) {
+    if (typeof keyValuePairs !== "object") {
+      return {};
+    }
+    Object.entries(keyValuePairs).forEach(([key, value]) => {
+      if (value) {
+        formattedData[key] = value;
+      }
+    });
+    return formattedData;
+  }
+  function errorIfServer(fnName) {
+    if (typeof document === "undefined") {
+      console.error(
+        `${fnName} should only be used within the useEffect callback or event handlers`
+      );
+      return true;
+    }
+    return false;
+  }
+  const SCHEMA_ID$1 = "trekkie_storefront_page_view/1.4";
+  const OXYGEN_DOMAIN = "myshopify.dev";
+  function pageView$1(payload) {
+    const pageViewPayload = payload;
+    const { id, resource } = parseGid(pageViewPayload.resourceId);
+    const resourceType = resource ? resource.toLowerCase() : void 0;
+    return [
+      schemaWrapper(
+        SCHEMA_ID$1,
+        addDataIf(
+          {
+            pageType: pageViewPayload.pageType,
+            customerId: pageViewPayload.customerId,
+            resourceType,
+            resourceId: parseInt(id)
+          },
+          formatPayload$1(pageViewPayload)
+        )
+      )
+    ];
+  }
+  function formatPayload$1(payload) {
+    return {
+      appClientId: payload.shopifySalesChannel ? ShopifyAppId[payload.shopifySalesChannel] : ShopifyAppId.headless,
+      isMerchantRequest: isMerchantRequest(payload.url),
+      hydrogenSubchannelId: payload.storefrontId || "0",
+      isPersistentCookie: payload.hasUserConsent,
+      uniqToken: payload.uniqueToken,
+      visitToken: payload.visitToken,
+      microSessionId: buildUUID(),
+      microSessionCount: 1,
+      url: payload.url,
+      path: payload.path,
+      search: payload.search,
+      referrer: payload.referrer,
+      title: payload.title,
+      shopId: parseInt(parseGid(payload.shopId).id),
+      currency: payload.currency,
+      contentLanguage: payload.acceptedLanguage || "en"
+    };
+  }
+  function isMerchantRequest(url) {
+    if (typeof url !== "string") {
+      return false;
+    }
+    const hostname = new URL(url).hostname;
+    if (hostname.indexOf(OXYGEN_DOMAIN) !== -1 || hostname === "localhost") {
+      return true;
+    }
+    return false;
+  }
+  const SCHEMA_ID = "custom_storefront_customer_tracking/1.0";
+  const PAGE_RENDERED_EVENT_NAME = "page_rendered";
+  const COLLECTION_PAGE_RENDERED_EVENT_NAME = "collection_page_rendered";
+  const PRODUCT_PAGE_RENDERED_EVENT_NAME = "product_page_rendered";
+  const PRODUCT_ADDED_TO_CART_EVENT_NAME = "product_added_to_cart";
+  const SEARCH_SUBMITTED_EVENT_NAME = "search_submitted";
+  function pageView(payload) {
+    const pageViewPayload = payload;
+    const additionalPayload = {
+      canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,
+      customer_id: pageViewPayload.customerId
+    };
+    const pageType = pageViewPayload.pageType;
+    const pageViewEvents = [];
+    pageViewEvents.push(
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: PAGE_RENDERED_EVENT_NAME,
+            ...additionalPayload
+          },
+          formatPayload(pageViewPayload)
+        )
+      )
+    );
+    switch (pageType) {
+      case AnalyticsPageType.collection:
+        pageViewEvents.push(
+          schemaWrapper(
+            SCHEMA_ID,
+            addDataIf(
+              {
+                event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,
+                ...additionalPayload,
+                collection_name: pageViewPayload.collectionHandle
+              },
+              formatPayload(pageViewPayload)
+            )
+          )
+        );
+        break;
+      case AnalyticsPageType.product:
+        pageViewEvents.push(
+          schemaWrapper(
+            SCHEMA_ID,
+            addDataIf(
+              {
+                event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
+                ...additionalPayload,
+                products: formatProductPayload(pageViewPayload.products),
+                total_value: pageViewPayload.totalValue
+              },
+              formatPayload(pageViewPayload)
+            )
+          )
+        );
+        break;
+      case AnalyticsPageType.search:
+        pageViewEvents.push(
+          schemaWrapper(
+            SCHEMA_ID,
+            addDataIf(
+              {
+                event_name: SEARCH_SUBMITTED_EVENT_NAME,
+                ...additionalPayload,
+                search_string: pageViewPayload.searchString
+              },
+              formatPayload(pageViewPayload)
+            )
+          )
+        );
+        break;
+    }
+    return pageViewEvents;
+  }
+  function addToCart(payload) {
+    const addToCartPayload = payload;
+    const cartToken = parseGid(addToCartPayload.cartId);
+    const cart_token = (cartToken == null ? void 0 : cartToken.id) ? `${cartToken.id}` : null;
+    return [
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: PRODUCT_ADDED_TO_CART_EVENT_NAME,
+            customerId: addToCartPayload.customerId,
+            cart_token,
+            total_value: addToCartPayload.totalValue,
+            products: formatProductPayload(addToCartPayload.products)
+          },
+          formatPayload(addToCartPayload)
+        )
+      )
+    ];
+  }
+  function formatPayload(payload) {
+    return {
+      source: payload.shopifySalesChannel || ShopifySalesChannel.headless,
+      hydrogenSubchannelId: payload.storefrontId || "0",
+      is_persistent_cookie: payload.hasUserConsent,
+      ccpa_enforced: false,
+      gdpr_enforced: false,
+      unique_token: payload.uniqueToken,
+      event_time: Date.now(),
+      event_id: buildUUID(),
+      event_source_url: payload.url,
+      referrer: payload.referrer,
+      user_agent: payload.userAgent,
+      navigation_type: payload.navigationType,
+      navigation_api: payload.navigationApi,
+      shop_id: parseInt(parseGid(payload.shopId).id),
+      currency: payload.currency
+    };
+  }
+  function formatProductPayload(products) {
+    return products ? products.map((p) => {
+      const product = addDataIf(
+        {
+          variant_gid: p.variantGid,
+          category: p.category,
+          sku: p.sku,
+          product_id: parseInt(parseGid(p.productGid).id),
+          variant_id: parseInt(parseGid(p.variantGid).id)
+        },
+        {
+          product_gid: p.productGid,
+          name: p.name,
+          variant: p.variantName || "",
+          brand: p.brand,
+          price: p.price,
+          quantity: Number(p.quantity || 0)
+        }
+      );
+      return JSON.stringify(product);
+    }) : [];
+  }
+  function sendShopifyAnalytics(event, shopDomain) {
+    const { eventName, payload } = event;
+    if (!payload.hasUserConsent)
+      return Promise.resolve();
+    let events = [];
+    if (eventName === AnalyticsEventName.PAGE_VIEW) {
+      const pageViewPayload = payload;
+      events = events.concat(
+        pageView$1(pageViewPayload),
+        pageView(pageViewPayload)
+      );
+    } else if (eventName === AnalyticsEventName.ADD_TO_CART) {
+      events = events.concat(
+        addToCart(payload)
+      );
+    }
+    if (events.length) {
+      return sendToShopify(events, shopDomain);
+    } else {
+      return Promise.resolve();
+    }
+  }
+  const ERROR_MESSAGE = "sendShopifyAnalytics request is unsuccessful";
+  function sendToShopify(events, shopDomain) {
+    const eventsToBeSent = {
+      events,
+      metadata: {
+        event_sent_at_ms: Date.now()
+      }
+    };
+    try {
+      return fetch(
+        shopDomain ? `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch` : "https://monorail-edge.shopifysvc.com/unstable/produce_batch",
+        {
+          method: "post",
+          headers: {
+            "content-type": "text/plain"
+          },
+          body: JSON.stringify(eventsToBeSent)
+        }
+      ).then((response) => {
+        if (!response.ok) {
+          throw new Error("Response failed");
+        }
+        return response.text();
+      }).then((data) => {
+        if (data) {
+          const jsonResponse = JSON.parse(data);
+          jsonResponse.result.forEach((eventResponse) => {
+            if (eventResponse.status !== 200) {
+              console.error(ERROR_MESSAGE, "\n\n", eventResponse.message);
+            }
+          });
+        }
+      }).catch((err) => {
+        console.error(ERROR_MESSAGE, err);
+        if (true) {
+          throw new Error(ERROR_MESSAGE);
+        }
+      });
+    } catch (error) {
+      return Promise.resolve();
+    }
+  }
+  function getClientBrowserParameters() {
+    if (errorIfServer("getClientBrowserParameters")) {
+      return {
+        uniqueToken: "",
+        visitToken: "",
+        url: "",
+        path: "",
+        search: "",
+        referrer: "",
+        title: "",
+        userAgent: "",
+        navigationType: "",
+        navigationApi: ""
+      };
+    }
+    const [navigationType, navigationApi] = getNavigationType();
+    const cookies = getShopifyCookies(document.cookie);
+    return {
+      uniqueToken: cookies[SHOPIFY_Y],
+      visitToken: cookies[SHOPIFY_S],
+      url: location.href,
+      path: location.pathname,
+      search: location.search,
+      referrer: document.referrer,
+      title: document.title,
+      userAgent: navigator.userAgent,
+      navigationType,
+      navigationApi
+    };
+  }
+  function getNavigationTypeExperimental() {
+    try {
+      const navigationEntries = (performance == null ? void 0 : performance.getEntriesByType) && (performance == null ? void 0 : performance.getEntriesByType("navigation"));
+      if (navigationEntries && navigationEntries[0]) {
+        const rawType = window.performance.getEntriesByType(
+          "navigation"
+        )[0]["type"];
+        const navType = rawType && rawType.toString();
+        return navType;
+      }
+    } catch (err) {
+    }
+    return void 0;
+  }
+  function getNavigationTypeLegacy() {
+    var _a, _b;
+    try {
+      if (PerformanceNavigation && ((_a = performance == null ? void 0 : performance.navigation) == null ? void 0 : _a.type) !== null && ((_b = performance == null ? void 0 : performance.navigation) == null ? void 0 : _b.type) !== void 0) {
+        const rawType = performance.navigation.type;
+        switch (rawType) {
+          case PerformanceNavigation.TYPE_NAVIGATE:
+            return "navigate";
+            break;
+          case PerformanceNavigation.TYPE_RELOAD:
+            return "reload";
+            break;
+          case PerformanceNavigation.TYPE_BACK_FORWARD:
+            return "back_forward";
+            break;
+          default:
+            return `unknown: ${rawType}`;
+        }
+      }
+    } catch (err) {
+    }
+    return void 0;
+  }
+  function getNavigationType() {
+    try {
+      let navApi = "PerformanceNavigationTiming";
+      let navType = getNavigationTypeExperimental();
+      if (!navType) {
+        navType = getNavigationTypeLegacy();
+        navApi = "performance.navigation";
+      }
+      if (navType) {
+        return [navType, navApi];
+      } else {
+        return ["unknown", "unknown"];
+      }
+    } catch (err) {
+    }
+    return ["error", "error"];
+  }
   function BuyNowButton(props) {
     const { cartCreate, checkoutUrl } = useCart();
     const [loading, setLoading] = React.useState(false);
@@ -2373,6 +2820,170 @@
       children
     );
   }
+  function useMoney(money) {
+    const { countryIsoCode, languageIsoCode } = useShop();
+    const locale = `${languageIsoCode}-${countryIsoCode}`;
+    if (!locale) {
+      throw new Error(
+        `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`
+      );
+    }
+    const amount = parseFloat(money.amount);
+    const options = React.useMemo(
+      () => ({
+        style: "currency",
+        currency: money.currencyCode
+      }),
+      [money.currencyCode]
+    );
+    const defaultFormatter = useLazyFormatter(locale, options);
+    const nameFormatter = useLazyFormatter(locale, {
+      ...options,
+      currencyDisplay: "name"
+    });
+    const narrowSymbolFormatter = useLazyFormatter(locale, {
+      ...options,
+      currencyDisplay: "narrowSymbol"
+    });
+    const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
+      ...options,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+    const withoutCurrencyFormatter = useLazyFormatter(locale);
+    const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+    const isPartCurrency = (part) => part.type === "currency";
+    const lazyFormatters = React.useMemo(
+      () => ({
+        original: () => money,
+        currencyCode: () => money.currencyCode,
+        localizedString: () => defaultFormatter().format(amount),
+        parts: () => defaultFormatter().formatToParts(amount),
+        withoutTrailingZeros: () => amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
+        withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
+        currencyName: () => {
+          var _a;
+          return ((_a = nameFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? money.currencyCode;
+        },
+        // e.g. "US dollars"
+        currencySymbol: () => {
+          var _a;
+          return ((_a = defaultFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? money.currencyCode;
+        },
+        // e.g. "USD"
+        currencyNarrowSymbol: () => {
+          var _a;
+          return ((_a = narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? "";
+        },
+        // e.g. "$"
+        amount: () => defaultFormatter().formatToParts(amount).filter(
+          (part) => ["decimal", "fraction", "group", "integer", "literal"].includes(
+            part.type
+          )
+        ).map((part) => part.value).join("")
+      }),
+      [
+        money,
+        amount,
+        nameFormatter,
+        defaultFormatter,
+        narrowSymbolFormatter,
+        withoutCurrencyFormatter,
+        withoutTrailingZerosFormatter,
+        withoutTrailingZerosOrCurrencyFormatter
+      ]
+    );
+    return React.useMemo(
+      () => new Proxy(lazyFormatters, {
+        get: (target, key) => {
+          var _a;
+          return (_a = Reflect.get(target, key)) == null ? void 0 : _a.call(null);
+        }
+      }),
+      [lazyFormatters]
+    );
+  }
+  function useLazyFormatter(locale, options) {
+    return React.useMemo(() => {
+      let memoized;
+      return () => memoized ?? (memoized = new Intl.NumberFormat(locale, options));
+    }, [locale, options]);
+  }
+  function Money({
+    data,
+    as,
+    withoutCurrency,
+    withoutTrailingZeros,
+    measurement,
+    measurementSeparator = "/",
+    ...passthroughProps
+  }) {
+    if (!isMoney(data)) {
+      throw new Error(
+        `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`
+      );
+    }
+    const moneyObject = useMoney(data);
+    const Wrapper = as ?? "div";
+    let output = moneyObject.localizedString;
+    if (withoutCurrency || withoutTrailingZeros) {
+      if (withoutCurrency && !withoutTrailingZeros) {
+        output = moneyObject.amount;
+      } else if (!withoutCurrency && withoutTrailingZeros) {
+        output = moneyObject.withoutTrailingZeros;
+      } else {
+        output = moneyObject.withoutTrailingZerosAndCurrency;
+      }
+    }
+    return /* @__PURE__ */ React.createElement(Wrapper, { ...passthroughProps }, output, measurement && measurement.referenceUnit && /* @__PURE__ */ React.createElement(React.Fragment, null, measurementSeparator, measurement.referenceUnit));
+  }
+  function isMoney(maybeMoney) {
+    return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
+  }
+  function CartCost(props) {
+    const { cost } = useCart();
+    const { amountType = "total", children, ...passthroughProps } = props;
+    let amount;
+    if (amountType == "total") {
+      amount = cost == null ? void 0 : cost.totalAmount;
+    } else if (amountType == "subtotal") {
+      amount = cost == null ? void 0 : cost.subtotalAmount;
+    } else if (amountType == "tax") {
+      amount = cost == null ? void 0 : cost.totalTaxAmount;
+    } else if (amountType == "duty") {
+      amount = cost == null ? void 0 : cost.totalDutyAmount;
+    }
+    if (amount == null) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(Money, { ...passthroughProps, data: amount }, children);
+  }
+  function CartLinePrice(props) {
+    var _a, _b;
+    const { data: cartLine, priceType = "regular", ...passthroughProps } = props;
+    if (cartLine == null) {
+      throw new Error(`<CartLinePrice/> requires a cart line as the 'data' prop`);
+    }
+    const moneyV2 = priceType === "regular" ? (_a = cartLine.cost) == null ? void 0 : _a.totalAmount : (_b = cartLine.cost) == null ? void 0 : _b.compareAtAmountPerQuantity;
+    if (moneyV2 == null) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(Money, { ...passthroughProps, data: moneyV2 });
+  }
+  const CartLineContext = React.createContext(null);
+  function useCartLine() {
+    const context = React.useContext(CartLineContext);
+    if (context == null) {
+      throw new Error("Expected a cart line context but none was found");
+    }
+    return context;
+  }
+  function CartLineProvider({ children, line }) {
+    return /* @__PURE__ */ React.createElement(CartLineContext.Provider, { value: line }, children);
+  }
   const storefrontApiCustomScalars = {
     // Keep in sync with the definitions in the app/nextjs/codegen.ts!
     DateTime: "string",
@@ -3053,128 +3664,6 @@
     }
     return JSON.parse(json);
   }
-  function useMoney(money) {
-    const { locale } = useShop();
-    if (!locale) {
-      throw new Error(
-        `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`
-      );
-    }
-    const amount = parseFloat(money.amount);
-    const options = React.useMemo(
-      () => ({
-        style: "currency",
-        currency: money.currencyCode
-      }),
-      [money.currencyCode]
-    );
-    const defaultFormatter = useLazyFormatter(locale, options);
-    const nameFormatter = useLazyFormatter(locale, {
-      ...options,
-      currencyDisplay: "name"
-    });
-    const narrowSymbolFormatter = useLazyFormatter(locale, {
-      ...options,
-      currencyDisplay: "narrowSymbol"
-    });
-    const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
-      ...options,
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    });
-    const withoutCurrencyFormatter = useLazyFormatter(locale);
-    const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    });
-    const isPartCurrency = (part) => part.type === "currency";
-    const lazyFormatters = React.useMemo(
-      () => ({
-        original: () => money,
-        currencyCode: () => money.currencyCode,
-        localizedString: () => defaultFormatter().format(amount),
-        parts: () => defaultFormatter().formatToParts(amount),
-        withoutTrailingZeros: () => amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
-        withoutTrailingZerosAndCurrency: () => amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
-        currencyName: () => {
-          var _a;
-          return ((_a = nameFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? money.currencyCode;
-        },
-        // e.g. "US dollars"
-        currencySymbol: () => {
-          var _a;
-          return ((_a = defaultFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? money.currencyCode;
-        },
-        // e.g. "USD"
-        currencyNarrowSymbol: () => {
-          var _a;
-          return ((_a = narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)) == null ? void 0 : _a.value) ?? "";
-        },
-        // e.g. "$"
-        amount: () => defaultFormatter().formatToParts(amount).filter(
-          (part) => ["decimal", "fraction", "group", "integer", "literal"].includes(
-            part.type
-          )
-        ).map((part) => part.value).join("")
-      }),
-      [
-        money,
-        amount,
-        nameFormatter,
-        defaultFormatter,
-        narrowSymbolFormatter,
-        withoutCurrencyFormatter,
-        withoutTrailingZerosFormatter,
-        withoutTrailingZerosOrCurrencyFormatter
-      ]
-    );
-    return React.useMemo(
-      () => new Proxy(lazyFormatters, {
-        get: (target, key) => {
-          var _a;
-          return (_a = Reflect.get(target, key)) == null ? void 0 : _a.call(null);
-        }
-      }),
-      [lazyFormatters]
-    );
-  }
-  function useLazyFormatter(locale, options) {
-    return React.useMemo(() => {
-      let memoized;
-      return () => memoized ?? (memoized = new Intl.NumberFormat(locale, options));
-    }, [locale, options]);
-  }
-  function Money({
-    data,
-    as,
-    withoutCurrency,
-    withoutTrailingZeros,
-    measurement,
-    measurementSeparator = "/",
-    ...passthroughProps
-  }) {
-    if (!isMoney(data)) {
-      throw new Error(
-        `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`
-      );
-    }
-    const moneyObject = useMoney(data);
-    const Wrapper = as ?? "div";
-    let output = moneyObject.localizedString;
-    if (withoutCurrency || withoutTrailingZeros) {
-      if (withoutCurrency && !withoutTrailingZeros) {
-        output = moneyObject.amount;
-      } else if (!withoutCurrency && withoutTrailingZeros) {
-        output = moneyObject.withoutTrailingZeros;
-      } else {
-        output = moneyObject.withoutTrailingZerosAndCurrency;
-      }
-    }
-    return /* @__PURE__ */ React.createElement(Wrapper, { ...passthroughProps }, output, measurement && measurement.referenceUnit && /* @__PURE__ */ React.createElement(React.Fragment, null, measurementSeparator, measurement.referenceUnit));
-  }
-  function isMoney(maybeMoney) {
-    return typeof maybeMoney.amount === "string" && !!maybeMoney.amount && typeof maybeMoney.currencyCode === "string" && !!maybeMoney.currencyCode;
-  }
   function ProductPrice(props) {
     var _a, _b, _c, _d, _e, _f;
     const {
@@ -3233,13 +3722,13 @@
   }) {
     const { storeDomain } = useShop();
     const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);
-    let ids;
+    let ids = [];
     if (variantIds && variantIdsAndQuantities) {
       throw new Error(DoublePropsErrorMessage);
     }
     if (variantIds) {
       ids = variantIds.reduce((prev, curr) => {
-        const bareId = getIdFromGid(curr);
+        const bareId = parseGid(curr).id;
         if (bareId) {
           prev.push(bareId);
         }
@@ -3247,7 +3736,7 @@
       }, []);
     } else if (variantIdsAndQuantities) {
       ids = variantIdsAndQuantities.reduce((prev, curr) => {
-        const bareId = getIdFromGid(curr == null ? void 0 : curr.id);
+        const bareId = parseGid(curr == null ? void 0 : curr.id).id;
         if (bareId) {
           prev.push(`${bareId}:${(curr == null ? void 0 : curr.quantity) ?? 1}`);
         }
@@ -3256,21 +3745,58 @@
     } else {
       throw new Error(MissingPropsErrorMessage);
     }
+    if (ids.length === 0) {
+      throw new Error(InvalidPropsErrorMessage);
+    }
     const style = width ? {
       "--shop-pay-button-width": width
     } : void 0;
     return /* @__PURE__ */ React.createElement("div", { className, style }, shopPayLoadedStatus === "done" && /* @__PURE__ */ React.createElement("shop-pay-button", { "store-url": storeDomain, variants: ids.join(",") }));
   }
-  function getIdFromGid(id) {
-    if (!id)
-      return;
-    return id.split("/").pop();
-  }
+  const InvalidPropsErrorMessage = `You must pass in "variantIds" in the form of ["gid://shopify/ProductVariant/1"]`;
   const MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
   const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;
+  const longTermLength = 60 * 60 * 24 * 360 * 1;
+  const shortTermLength = 60 * 30;
+  function useShopifyCookies(options) {
+    const { hasUserConsent = false, domain = "" } = options || {};
+    React.useEffect(() => {
+      const cookies = getShopifyCookies(document.cookie);
+      if (hasUserConsent) {
+        setCookie(
+          SHOPIFY_Y,
+          cookies[SHOPIFY_Y] || buildUUID(),
+          longTermLength,
+          domain
+        );
+        setCookie(
+          SHOPIFY_S,
+          cookies[SHOPIFY_S] || buildUUID(),
+          shortTermLength,
+          domain
+        );
+      } else {
+        setCookie(SHOPIFY_Y, "", 0, domain);
+        setCookie(SHOPIFY_S, "", 0, domain);
+      }
+    });
+  }
+  function setCookie(name, value, maxage, domain) {
+    document.cookie = l(name, value, {
+      maxage,
+      domain,
+      samesite: "Lax",
+      path: "/"
+    });
+  }
   exports2.AddToCartButton = AddToCartButton;
+  exports2.AnalyticsEventName = AnalyticsEventName;
+  exports2.AnalyticsPageType = AnalyticsPageType;
   exports2.BuyNowButton = BuyNowButton;
   exports2.CartCheckoutButton = CartCheckoutButton;
+  exports2.CartCost = CartCost;
+  exports2.CartLinePrice = CartLinePrice;
+  exports2.CartLineProvider = CartLineProvider;
   exports2.CartProvider = CartProvider;
   exports2.ExternalVideo = ExternalVideo;
   exports2.Image = Image;
@@ -3281,15 +3807,21 @@
   exports2.ProductProvider = ProductProvider;
   exports2.ShopPayButton = ShopPayButton;
   exports2.ShopifyProvider = ShopifyProvider;
+  exports2.ShopifySalesChannel = ShopifySalesChannel;
   exports2.Video = Video;
   exports2.createStorefrontClient = createStorefrontClient;
   exports2.flattenConnection = flattenConnection;
+  exports2.getClientBrowserParameters = getClientBrowserParameters;
+  exports2.getShopifyCookies = getShopifyCookies;
   exports2.parseMetafield = parseMetafield;
+  exports2.sendShopifyAnalytics = sendShopifyAnalytics;
   exports2.storefrontApiCustomScalars = storefrontApiCustomScalars;
   exports2.useCart = useCart;
+  exports2.useCartLine = useCartLine;
   exports2.useMoney = useMoney;
   exports2.useProduct = useProduct;
   exports2.useShop = useShop;
+  exports2.useShopifyCookies = useShopifyCookies;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=hydrogen-react.dev.js.map