@shopify/hydrogen-react 2024.1.1 → 2024.4.0

package/dist/types/useCartActions.d.ts

@@ -6,12 +6,12 @@ type CartResponse = PartialDeep<CartType, {
 /**
  * The `useCartActions` hook returns helper graphql functions for Storefront Cart API
  *
- * See [cart API graphql mutations](https://shopify.dev/api/storefront/2024-01/objects/Cart)
+ * See [cart API graphql mutations](https://shopify.dev/api/storefront/2024-04/objects/Cart)
  */
 export declare function useCartActions({ numCartLines, cartFragment, countryCode, languageCode, }: {
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
     numCartLines?: number;
-    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-01/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-04/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
     cartFragment: string;
     /** The ISO country code for i18n. Default to `US` */
     countryCode?: CountryCode;

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

@@ -796,21 +796,24 @@
   }
 `
   );
-  const SFAPI_VERSION = "2024-01";
-  const isMockShop = (domain) => domain.includes("mock.shop");
-  function createStorefrontClient(props) {
-    const {
-      storeDomain,
-      privateStorefrontToken,
-      publicStorefrontToken,
-      storefrontApiVersion = SFAPI_VERSION,
-      contentType
-    } = props;
+  const SFAPI_VERSION = "2024-04";
+  const MOCK_SHOP_DOMAIN = "mock.shop";
+  const isMockShop = (domain) => domain.includes(MOCK_SHOP_DOMAIN);
+  function createStorefrontClient({
+    storeDomain,
+    privateStorefrontToken,
+    publicStorefrontToken,
+    storefrontApiVersion = SFAPI_VERSION,
+    contentType
+  }) {
     if (!storeDomain) {
-      throw new Error(
-        H2_PREFIX_ERROR + `\`storeDomain\` is required when creating a new Storefront client.
-Received "${storeDomain}".`
-      );
+      {
+        storeDomain = MOCK_SHOP_DOMAIN;
+        warnOnce(
+          `storeDomain missing, defaulting to ${MOCK_SHOP_DOMAIN}`,
+          "info"
+        );
+      }
     }
     if (storefrontApiVersion !== SFAPI_VERSION) {
       warnOnce(
@@ -891,10 +894,9 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
   }
   const warnings = /* @__PURE__ */ new Set();
   const H2_PREFIX_ERROR = "[h2:error:createStorefrontClient] ";
-  const H2_PREFIX_WARN = "[h2:warn:createStorefrontClient] ";
-  const warnOnce = (string) => {
+  const warnOnce = (string, type = "warn") => {
     if (!warnings.has(string)) {
-      console.warn(H2_PREFIX_WARN + string);
+      console[type](`[h2:${type}:createStorefrontClient] ` + string);
       warnings.add(string);
     }
   };
@@ -1750,6 +1752,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
       }
     });
     const cartReady = React$1.useRef(false);
+    const [isCartReady, setIsCartReady] = React$1.useState(false);
     const cartCompleted = cartState.matches("cartCompleted");
     const countryChanged = (cartState.value === "idle" || cartState.value === "error" || cartState.value === "cartCompleted") && countryCode !== ((_c = (_b = (_a = cartState == null ? void 0 : cartState.context) == null ? void 0 : _a.cart) == null ? void 0 : _b.buyerIdentity) == null ? void 0 : _c.countryCode) && !cartState.context.errors;
     const fetchingFromStorage = React$1.useRef(false);
@@ -1768,6 +1771,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
           }
         }
         cartReady.current = true;
+        setIsCartReady(true);
       }
     }, [cart, cartReady, cartSend]);
     React$1.useEffect(() => {
@@ -1846,6 +1850,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         error: (_b2 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _b2.errors,
         totalQuantity: ((_d2 = (_c2 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _c2.cart) == null ? void 0 : _d2.totalQuantity) ?? 0,
         cartCreate,
+        cartReady: isCartReady,
         linesAdd(lines) {
           var _a3, _b3;
           if ((_b3 = (_a3 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _a3.cart) == null ? void 0 : _b3.id) {
@@ -1909,6 +1914,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
       };
     }, [
       cartCreate,
+      isCartReady,
       (_f = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _f.cart,
       (_g = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _g.errors,
       cartDisplayState.value,
@@ -2252,7 +2258,11 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
   }
   const AnalyticsEventName = {
     PAGE_VIEW: "PAGE_VIEW",
-    ADD_TO_CART: "ADD_TO_CART"
+    ADD_TO_CART: "ADD_TO_CART",
+    PAGE_VIEW_2: "PAGE_VIEW_2",
+    COLLECTION_VIEW: "COLLECTION_VIEW",
+    PRODUCT_VIEW: "PRODUCT_VIEW",
+    SEARCH_VIEW: "SEARCH_VIEW"
   };
   const AnalyticsPageType = {
     article: "article",
@@ -2355,7 +2365,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         addDataIf(
           {
             pageType: pageViewPayload.pageType,
-            customerId: pageViewPayload.customerId,
+            customerId: parseInt(parseGid(pageViewPayload.customerId).id || "0"),
             resourceType,
             resourceId: parseInt(id)
           },
@@ -2400,12 +2410,15 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
   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 prepareAdditionalPayload(payload) {
+    return {
+      canonical_url: payload.canonicalUrl || payload.url,
+      customer_id: parseInt(parseGid(payload.customerId).id || "0")
+    };
+  }
   function pageView(payload) {
     const pageViewPayload = payload;
-    const additionalPayload = {
-      canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,
-      customer_id: pageViewPayload.customerId
-    };
+    const additionalPayload = prepareAdditionalPayload(pageViewPayload);
     const pageType = pageViewPayload.pageType;
     const pageViewEvents = [];
     pageViewEvents.push(
@@ -2470,6 +2483,74 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     }
     return pageViewEvents;
   }
+  function pageView2(payload) {
+    const pageViewPayload = payload;
+    const additionalPayload = prepareAdditionalPayload(pageViewPayload);
+    return [
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: PAGE_RENDERED_EVENT_NAME,
+            ...additionalPayload
+          },
+          formatPayload(pageViewPayload)
+        )
+      )
+    ];
+  }
+  function collectionView(payload) {
+    const pageViewPayload = payload;
+    const additionalPayload = prepareAdditionalPayload(pageViewPayload);
+    return [
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,
+            ...additionalPayload,
+            collection_name: pageViewPayload.collectionHandle
+          },
+          formatPayload(pageViewPayload)
+        )
+      )
+    ];
+  }
+  function productView(payload) {
+    const pageViewPayload = payload;
+    const additionalPayload = prepareAdditionalPayload(pageViewPayload);
+    return [
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
+            ...additionalPayload,
+            products: formatProductPayload(pageViewPayload.products),
+            total_value: pageViewPayload.totalValue
+          },
+          formatPayload(pageViewPayload)
+        )
+      )
+    ];
+  }
+  function searchView(payload) {
+    const pageViewPayload = payload;
+    const additionalPayload = prepareAdditionalPayload(pageViewPayload);
+    return [
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: SEARCH_SUBMITTED_EVENT_NAME,
+            ...additionalPayload,
+            search_string: pageViewPayload.searchString
+          },
+          formatPayload(pageViewPayload)
+        )
+      )
+    ];
+  }
   function addToCart(payload) {
     const addToCartPayload = payload;
     const cartToken = parseGid(addToCartPayload.cartId);
@@ -2483,7 +2564,10 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
             customerId: addToCartPayload.customerId,
             cart_token,
             total_value: addToCartPayload.totalValue,
-            products: formatProductPayload(addToCartPayload.products)
+            products: formatProductPayload(addToCartPayload.products),
+            customer_id: parseInt(
+              parseGid(addToCartPayload.customerId).id || "0"
+            )
           },
           formatPayload(addToCartPayload)
         )
@@ -2536,8 +2620,8 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     if (!payload.hasUserConsent)
       return Promise.resolve();
     let events = [];
+    const pageViewPayload = payload;
     if (eventName === AnalyticsEventName.PAGE_VIEW) {
-      const pageViewPayload = payload;
       events = events.concat(
         pageView$1(pageViewPayload),
         pageView(pageViewPayload)
@@ -2546,6 +2630,17 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
       events = events.concat(
         addToCart(payload)
       );
+    } else if (eventName === AnalyticsEventName.PAGE_VIEW_2) {
+      events = events.concat(
+        pageView$1(pageViewPayload),
+        pageView2(pageViewPayload)
+      );
+    } else if (eventName === AnalyticsEventName.COLLECTION_VIEW) {
+      events = events.concat(collectionView(pageViewPayload));
+    } else if (eventName === AnalyticsEventName.PRODUCT_VIEW) {
+      events = events.concat(productView(pageViewPayload));
+    } else if (eventName === AnalyticsEventName.SEARCH_VIEW) {
+      events = events.concat(searchView(pageViewPayload));
     }
     if (events.length) {
       return sendToShopify(events, shopDomain);
@@ -3444,22 +3539,22 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         module: true
       }
     );
-    const hydrogenEventListener = {
-      error: passthroughProps.onError,
-      load: passthroughProps.onLoad,
-      preload: passthroughProps.onPreload,
-      "model-visibility": passthroughProps.onModelVisibility,
-      progress: passthroughProps.onProgress,
-      "ar-status": passthroughProps.onArStatus,
-      "ar-tracking": passthroughProps.onArTracking,
-      "quick-look-button-tapped": passthroughProps.onQuickLookButtonTapped,
-      "camera-change": passthroughProps.onCameraChange,
-      "environment-change": passthroughProps.onEnvironmentChange,
-      play: passthroughProps.onPlay,
-      pause: passthroughProps.onPause,
-      "scene-graph-ready": passthroughProps.onSceneGraphReady
-    };
     React$1.useEffect(() => {
+      const hydrogenEventListener = {
+        error: passthroughProps.onError,
+        load: passthroughProps.onLoad,
+        preload: passthroughProps.onPreload,
+        "model-visibility": passthroughProps.onModelVisibility,
+        progress: passthroughProps.onProgress,
+        "ar-status": passthroughProps.onArStatus,
+        "ar-tracking": passthroughProps.onArTracking,
+        "quick-look-button-tapped": passthroughProps.onQuickLookButtonTapped,
+        "camera-change": passthroughProps.onCameraChange,
+        "environment-change": passthroughProps.onEnvironmentChange,
+        play: passthroughProps.onPlay,
+        pause: passthroughProps.onPause,
+        "scene-graph-ready": passthroughProps.onSceneGraphReady
+      };
       if (!modelViewer) {
         return;
       }
@@ -3869,7 +3964,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         setCookie(SHOPIFY_Y, "", 0, domain);
         setCookie(SHOPIFY_S, "", 0, domain);
       }
-    });
+    }, [options, hasUserConsent, domain]);
   }
   function setCookie(name, value, maxage, domain) {
     document.cookie = l(name, value, {