@shopify/hydrogen 2024.4.6 → 2024.4.7

package/dist/development/index.cjs

@@ -484,7 +484,7 @@ async function fetchWithServerCache(url, requestInit, {
 }
 
 // src/version.ts
-var LIB_VERSION = "2024.4.6";
+var LIB_VERSION = "2024.4.7";
 
 // src/constants.ts
 var STOREFRONT_REQUEST_GROUP_ID_HEADER = "Custom-Storefront-Request-Group-ID";
@@ -4122,20 +4122,37 @@ function useCustomerPrivacy(props) {
     if (scriptStatus !== "done" || loadedEvent.current)
       return;
     loadedEvent.current = true;
-    if (!consentConfig.checkoutDomain)
+    const { checkoutDomain, storefrontAccessToken } = consentConfig;
+    if (!checkoutDomain)
       logMissingConfig("checkoutDomain");
-    if (!consentConfig.storefrontAccessToken)
+    if (!storefrontAccessToken)
       logMissingConfig("storefrontAccessToken");
-    if (consentConfig.storefrontAccessToken.startsWith("shpat_") || consentConfig.storefrontAccessToken.length !== 32) {
+    if (storefrontAccessToken.startsWith("shpat_") || storefrontAccessToken.length !== 32) {
       console.error(
         `[h2:error:useCustomerPrivacy] It looks like you passed a private access token, make sure to use the public token`
       );
     }
-    if (withPrivacyBanner && window?.privacyBanner) {
-      window?.privacyBanner?.loadBanner({
-        checkoutRootDomain: consentConfig.checkoutDomain,
-        storefrontAccessToken: consentConfig.storefrontAccessToken
+    const config = {
+      checkoutRootDomain: checkoutDomain,
+      storefrontAccessToken
+    };
+    if (checkoutDomain) {
+      let storefrontRootDomain = window.document.location.host;
+      const checkoutDomainParts = checkoutDomain.split(".").reverse();
+      const currentDomainParts = storefrontRootDomain.split(".").reverse();
+      const sameDomainParts = [];
+      checkoutDomainParts.forEach((part, index) => {
+        if (part === currentDomainParts[index]) {
+          sameDomainParts.push(part);
+        }
       });
+      storefrontRootDomain = sameDomainParts.reverse().join(".");
+      if (storefrontRootDomain) {
+        config.storefrontRootDomain = storefrontRootDomain;
+      }
+    }
+    if (withPrivacyBanner && window?.privacyBanner) {
+      window.privacyBanner?.loadBanner(config);
     }
     if (!window.Shopify?.customerPrivacy)
       return;
@@ -4145,8 +4162,7 @@ function useCustomerPrivacy(props) {
         {
           ...consent,
           headlessStorefront: true,
-          checkoutRootDomain: consentConfig.checkoutDomain,
-          storefrontAccessToken: consentConfig.storefrontAccessToken
+          ...config
         },
         callback
       );
@@ -4282,10 +4298,7 @@ function pageViewHandler(payload) {
 function productViewHandler(payload) {
   let eventPayload = prepareBasePageViewPayload(payload);
   if (eventPayload && validateProducts({
-    eventName: PRODUCT_VIEWED,
-    productField: "products",
-    variantField: "product.<displayed_variant>",
-    fromSource: "product_viewed products array",
+    type: "product",
     products: payload.products
   })) {
     const formattedProducts = formatProduct(payload.products);
@@ -4365,10 +4378,7 @@ function sendCartAnalytics({
     sku: matchedLine.merchandise.sku
   };
   if (validateProducts({
-    eventName: ADD_TO_CART,
-    productField: "merchandise.product",
-    variantField: "merchandise",
-    fromSource: "cart query",
+    type: "cart",
     products: [product]
   })) {
     hydrogenReact.sendShopifyAnalytics({
@@ -4380,51 +4390,50 @@ function sendCartAnalytics({
     });
   }
 }
-var PRODUCT_VIEWED = "Product viewed";
-var ADD_TO_CART = "Add to cart";
-function missingErrorMessage(eventName, missingFieldName, fromSource) {
-  console.error(
-    `[h2:error:ShopifyAnalytics] ${eventName}: ${missingFieldName} is required from the ${fromSource}.`
-  );
+function missingErrorMessage(type, fieldName, isVariantField, viewKeyName) {
+  if (type === "cart") {
+    const name = `${isVariantField ? "merchandise" : "merchandise.product"}.${fieldName}`;
+    console.error(
+      `[h2:error:ShopifyAnalytics] Can't set up cart analytics events because the \`cart.lines[].${name}\` value is missing from your GraphQL cart query. In your project, search for where \`fragment CartLine on CartLine\` is defined and make sure \`${name}\` is part of your cart query. Check the Hydrogen Skeleton template for reference: https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/app/lib/fragments.ts#L25-L56.`
+    );
+  } else {
+    const name = `${viewKeyName || fieldName}`;
+    console.error(
+      `[h2:error:ShopifyAnalytics] Can't set up product view analytics events because the \`${name}\` is missing from your \`<Analytics.ProductView>\`. Make sure \`${name}\` is part of your products data prop. Check the Hydrogen Skeleton template for reference: https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/app/routes/products.%24handle.tsx#L159-L165.`
+    );
+  }
 }
 function validateProducts({
-  eventName,
-  productField,
-  variantField,
-  products,
-  fromSource
+  type,
+  products
 }) {
   if (!products || products.length === 0) {
-    missingErrorMessage(eventName, `${productField}`, fromSource);
+    missingErrorMessage(type, "", false, "data.products");
     return false;
   }
   products.forEach((product) => {
     if (!product.id) {
-      missingErrorMessage(eventName, `${productField}.id`, fromSource);
+      missingErrorMessage(type, "id", false);
       return false;
     }
     if (!product.title) {
-      missingErrorMessage(eventName, `${productField}.title`, fromSource);
+      missingErrorMessage(type, "title", false);
       return false;
     }
     if (!product.price) {
-      missingErrorMessage(
-        eventName,
-        `${variantField}.price.amount`,
-        fromSource
-      );
+      missingErrorMessage(type, "price.amount", true, "price");
       return false;
     }
     if (!product.vendor) {
-      missingErrorMessage(eventName, `${productField}.vendor`, fromSource);
+      missingErrorMessage(type, "vendor", false);
       return false;
     }
     if (!product.variantId) {
-      missingErrorMessage(eventName, `${variantField}.id`, fromSource);
+      missingErrorMessage(type, "id", true, "variantId");
       return false;
     }
     if (!product.variantTitle) {
-      missingErrorMessage(eventName, `${variantField}.title`, fromSource);
+      missingErrorMessage(type, "title", true, "variantTitle");
       return false;
     }
   });
@@ -4451,7 +4460,7 @@ function formatProduct(products) {
 }
 function logMissingField(fieldName) {
   console.error(
-    `[h2:error:CartAnalytics] Can't set up cart analytics events because the \`cart.${fieldName}\` value is missing from your GraphQL cart query. In standard Hydrogen projects, the cart query is contained in \`app/lib/fragments.js\`. Make sure it includes \`cart.${fieldName}\`. Check the Hydrogen Skeleton template for reference: https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/app/lib/fragments.ts#L59.`
+    `[h2:error:CartAnalytics] Can't set up cart analytics events because the \`cart.${fieldName}\` value is missing from your GraphQL cart query. In your project, search for where \`fragment CartApiQuery on Cart\` is defined and make sure \`${fieldName}\` is part of your cart query. Check the Hydrogen Skeleton template for reference: https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/app/lib/fragments.ts#L59.`
   );
 }
 function CartAnalytics({