@shopify/hydrogen 2024.4.2 → 2024.4.4

package/dist/development/index.cjs

@@ -4,13 +4,12 @@ var hydrogenReact = require('@shopify/hydrogen-react');
 var react = require('react');
 var react$1 = require('@remix-run/react');
 var jsxRuntime = require('react/jsx-runtime');
+var cookie = require('worktop/cookie');
 var cspBuilder = require('content-security-policy-builder');
-var invariant = require('tiny-invariant');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var cspBuilder__default = /*#__PURE__*/_interopDefault(cspBuilder);
-var invariant__default = /*#__PURE__*/_interopDefault(invariant);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -485,7 +484,7 @@ async function fetchWithServerCache(url, requestInit, {
 }
 
 // src/version.ts
-var LIB_VERSION = "2024.4.2";
+var LIB_VERSION = "2024.4.4";
 
 // src/constants.ts
 var STOREFRONT_REQUEST_GROUP_ID_HEADER = "Custom-Storefront-Request-Group-ID";
@@ -516,6 +515,13 @@ var warnOnce = (string) => {
     warnings.add(string);
   }
 };
+var errors = /* @__PURE__ */ new Set();
+var errorOnce = (string) => {
+  if (!errors.has(string)) {
+    console.error(new Error(string));
+    errors.add(string);
+  }
+};
 
 // src/utils/graphql.ts
 function minifyQuery(string) {
@@ -632,19 +638,19 @@ var GraphQLError = class extends Error {
 function throwErrorWithGqlLink({
   url,
   response,
-  errors,
+  errors: errors2,
   type,
   query,
   queryVariables,
   ErrorConstructor = Error,
   client = "storefront"
 }) {
-  const errorMessage = (typeof errors === "string" ? errors : errors?.map?.((error) => error.message).join("\n")) || `URL: ${url}
+  const errorMessage = (typeof errors2 === "string" ? errors2 : errors2?.map?.((error) => error.message).join("\n")) || `URL: ${url}
 API response error: ${response.status}`;
   const gqlError = new GraphQLError(errorMessage, {
     query,
     queryVariables,
-    cause: { errors },
+    cause: { errors: errors2 },
     clientOperation: `${client}.${type}`,
     requestId: response.headers.get("x-request-id")
   });
@@ -806,16 +812,16 @@ function createStorefrontClient(options) {
       errors: void 0
     };
     if (!response.ok) {
-      let errors2;
+      let errors3;
       try {
-        errors2 = parseJSON(body);
+        errors3 = parseJSON(body);
       } catch (_e) {
-        errors2 = [{ message: body }];
+        errors3 = [{ message: body }];
       }
-      throwErrorWithGqlLink({ ...errorOptions, errors: errors2 });
+      throwErrorWithGqlLink({ ...errorOptions, errors: errors3 });
     }
-    const { data, errors } = body;
-    const gqlErrors = errors?.map(
+    const { data, errors: errors2 } = body;
+    const gqlErrors = errors2?.map(
       ({ message, ...rest }) => new GraphQLError(message, {
         ...rest,
         clientOperation: `storefront.${errorOptions.type}`,
@@ -902,10 +908,10 @@ var getStackOffset = (query) => {
   }
   return stackOffset;
 } ;
-function formatAPIResult(data, errors) {
+function formatAPIResult(data, errors2) {
   return {
     ...data,
-    ...errors && { errors }
+    ...errors2 && { errors: errors2 }
   };
 }
 
@@ -1104,7 +1110,9 @@ async function storefrontRedirect(options) {
   }
   try {
     const { urlRedirects } = await storefront.query(REDIRECT_QUERY, {
-      variables: { query: "path:" + redirectFrom }
+      // The admin doesn't allow redirects to have a
+      // trailing slash, so strip them all off
+      variables: { query: "path:" + redirectFrom.replace(/\/+$/, "") }
     });
     const location = urlRedirects?.edges?.[0]?.node?.target;
     if (location) {
@@ -2350,6 +2358,7 @@ async function refreshToken({
   const newBody = new URLSearchParams();
   const customerAccount = session.get(CUSTOMER_ACCOUNT_SESSION_KEY);
   const refreshToken2 = customerAccount?.refreshToken;
+  const idToken = customerAccount?.idToken;
   if (!refreshToken2)
     throw new BadRequest(
       "Unauthorized",
@@ -2386,7 +2395,7 @@ async function refreshToken({
       }
     });
   }
-  const { access_token, expires_in, id_token, refresh_token } = await response.json();
+  const { access_token, expires_in, refresh_token } = await response.json();
   const accessToken = await exchangeAccessToken(
     access_token,
     customerAccountId,
@@ -2399,7 +2408,7 @@ async function refreshToken({
     // Store the date in future the token expires, separated by two minutes
     expiresAt: new Date((/* @__PURE__ */ new Date()).getTime() + (expires_in - 120) * 1e3).getTime() + "",
     refreshToken: refresh_token,
-    idToken: id_token
+    idToken
   });
   await exchangeForStorefrontCustomerAccessToken();
 }
@@ -2643,18 +2652,18 @@ function createCustomerAccountClient({
         }
         throw authFailResponse;
       }
-      let errors;
+      let errors2;
       try {
-        errors = parseJSON(body);
+        errors2 = parseJSON(body);
       } catch (_e) {
-        errors = [{ message: body }];
+        errors2 = [{ message: body }];
       }
-      throwErrorWithGqlLink({ ...errorOptions, errors });
+      throwErrorWithGqlLink({ ...errorOptions, errors: errors2 });
     }
     try {
       const APIresponse = parseJSON(body);
-      const { errors } = APIresponse;
-      const gqlErrors = errors?.map(
+      const { errors: errors2 } = APIresponse;
+      const gqlErrors = errors2?.map(
         ({ message, ...rest }) => new GraphQLError(message, {
           ...rest,
           clientOperation: `customerAccount.${errorOptions.type}`,
@@ -2663,7 +2672,7 @@ function createCustomerAccountClient({
           query: query2
         })
       );
-      return { ...APIresponse, ...errors && { errors: gqlErrors } };
+      return { ...APIresponse, ...errors2 && { errors: gqlErrors } };
     } catch (e) {
       throwErrorWithGqlLink({ ...errorOptions, errors: [{ message: body }] });
     }
@@ -2813,7 +2822,6 @@ function createCustomerAccountClient({
       ).toString() : postLogoutRedirectUri;
       clearSession(session);
       return redirect(logoutUrl, {
-        status: 302,
         headers: {
           "Set-Cookie": await session.commit()
         }
@@ -3035,7 +3043,7 @@ function cartCreateDefault(options) {
     const buyer = options.customerAccount ? await options.customerAccount.UNSTABLE_getBuyer() : void 0;
     const { cartId, ...restOfOptionalParams } = optionalParams || {};
     const { buyerIdentity, ...restOfInput } = input;
-    const { cartCreate, errors } = await options.storefront.mutate(CART_CREATE_MUTATION(options.cartFragment), {
+    const { cartCreate, errors: errors2 } = await options.storefront.mutate(CART_CREATE_MUTATION(options.cartFragment), {
       variables: {
         input: {
           ...restOfInput,
@@ -3047,7 +3055,7 @@ function cartCreateDefault(options) {
         ...restOfOptionalParams
       }
     });
-    return formatAPIResult(cartCreate, errors);
+    return formatAPIResult(cartCreate, errors2);
   };
 }
 var CART_CREATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3081,7 +3089,7 @@ function cartGetDefault({
     const cartId = getCartId();
     if (!cartId)
       return null;
-    const [isCustomerLoggedIn, { cart, errors }] = await Promise.all([
+    const [isCustomerLoggedIn, { cart, errors: errors2 }] = await Promise.all([
       customerAccount ? customerAccount.isLoggedIn() : false,
       storefront.query(CART_QUERY(cartFragment), {
         variables: {
@@ -3093,7 +3101,7 @@ function cartGetDefault({
     ]);
     return formatAPIResult(
       addCustomerLoggedInParam(isCustomerLoggedIn, cart),
-      errors
+      errors2
     );
   };
 }
@@ -3232,14 +3240,14 @@ var DEFAULT_CART_FRAGMENT = `#graphql
 // src/cart/queries/cartLinesAddDefault.ts
 function cartLinesAddDefault(options) {
   return async (lines, optionalParams) => {
-    const { cartLinesAdd, errors } = await options.storefront.mutate(CART_LINES_ADD_MUTATION(options.cartFragment), {
+    const { cartLinesAdd, errors: errors2 } = await options.storefront.mutate(CART_LINES_ADD_MUTATION(options.cartFragment), {
       variables: {
         cartId: options.getCartId(),
         lines,
         ...optionalParams
       }
     });
-    return formatAPIResult(cartLinesAdd, errors);
+    return formatAPIResult(cartLinesAdd, errors2);
   };
 }
 var CART_LINES_ADD_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3263,17 +3271,36 @@ var CART_LINES_ADD_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphq
   ${USER_ERROR_FRAGMENT}
 `;
 
+// src/cart/optimistic/optimistic-cart.helper.ts
+var PENDING_PREFIX = "__h_pending_";
+function getOptimisticLineId(variantId) {
+  return PENDING_PREFIX + variantId;
+}
+function isOptimisticLineId(lineId) {
+  return lineId.startsWith(PENDING_PREFIX);
+}
+function throwIfLinesAreOptimistic(type, lines) {
+  if (lines.some(
+    (line) => isOptimisticLineId(typeof line === "string" ? line : line.id)
+  )) {
+    throw new Error(
+      `Tried to perform an action on an optimistic line. Make sure to disable your "${type}" CartForm action when the line is optimistic.`
+    );
+  }
+}
+
 // src/cart/queries/cartLinesUpdateDefault.ts
 function cartLinesUpdateDefault(options) {
   return async (lines, optionalParams) => {
-    const { cartLinesUpdate, errors } = await options.storefront.mutate(CART_LINES_UPDATE_MUTATION(options.cartFragment), {
+    throwIfLinesAreOptimistic("updateLines", lines);
+    const { cartLinesUpdate, errors: errors2 } = await options.storefront.mutate(CART_LINES_UPDATE_MUTATION(options.cartFragment), {
       variables: {
         cartId: options.getCartId(),
         lines,
         ...optionalParams
       }
     });
-    return formatAPIResult(cartLinesUpdate, errors);
+    return formatAPIResult(cartLinesUpdate, errors2);
   };
 }
 var CART_LINES_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3300,14 +3327,15 @@ var CART_LINES_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#gra
 // src/cart/queries/cartLinesRemoveDefault.ts
 function cartLinesRemoveDefault(options) {
   return async (lineIds, optionalParams) => {
-    const { cartLinesRemove, errors } = await options.storefront.mutate(CART_LINES_REMOVE_MUTATION(options.cartFragment), {
+    throwIfLinesAreOptimistic("removeLines", lineIds);
+    const { cartLinesRemove, errors: errors2 } = await options.storefront.mutate(CART_LINES_REMOVE_MUTATION(options.cartFragment), {
       variables: {
         cartId: options.getCartId(),
         lineIds,
         ...optionalParams
       }
     });
-    return formatAPIResult(cartLinesRemove, errors);
+    return formatAPIResult(cartLinesRemove, errors2);
   };
 }
 var CART_LINES_REMOVE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3337,14 +3365,14 @@ function cartDiscountCodesUpdateDefault(options) {
     const uniqueCodes = discountCodes.filter((value, index, array) => {
       return array.indexOf(value) === index;
     });
-    const { cartDiscountCodesUpdate, errors } = await options.storefront.mutate(CART_DISCOUNT_CODE_UPDATE_MUTATION(options.cartFragment), {
+    const { cartDiscountCodesUpdate, errors: errors2 } = await options.storefront.mutate(CART_DISCOUNT_CODE_UPDATE_MUTATION(options.cartFragment), {
       variables: {
         cartId: options.getCartId(),
         discountCodes: uniqueCodes,
         ...optionalParams
       }
     });
-    return formatAPIResult(cartDiscountCodesUpdate, errors);
+    return formatAPIResult(cartDiscountCodesUpdate, errors2);
   };
 }
 var CART_DISCOUNT_CODE_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3376,7 +3404,7 @@ function cartBuyerIdentityUpdateDefault(options) {
       });
     }
     const buyer = options.customerAccount ? await options.customerAccount.UNSTABLE_getBuyer() : void 0;
-    const { cartBuyerIdentityUpdate, errors } = await options.storefront.mutate(CART_BUYER_IDENTITY_UPDATE_MUTATION(options.cartFragment), {
+    const { cartBuyerIdentityUpdate, errors: errors2 } = await options.storefront.mutate(CART_BUYER_IDENTITY_UPDATE_MUTATION(options.cartFragment), {
       variables: {
         cartId: options.getCartId(),
         buyerIdentity: {
@@ -3386,7 +3414,7 @@ function cartBuyerIdentityUpdateDefault(options) {
         ...optionalParams
       }
     });
-    return formatAPIResult(cartBuyerIdentityUpdate, errors);
+    return formatAPIResult(cartBuyerIdentityUpdate, errors2);
   };
 }
 var CART_BUYER_IDENTITY_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3412,14 +3440,14 @@ var CART_BUYER_IDENTITY_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT)
 // src/cart/queries/cartNoteUpdateDefault.ts
 function cartNoteUpdateDefault(options) {
   return async (note, optionalParams) => {
-    const { cartNoteUpdate, errors } = await options.storefront.mutate(CART_NOTE_UPDATE_MUTATION(options.cartFragment), {
+    const { cartNoteUpdate, errors: errors2 } = await options.storefront.mutate(CART_NOTE_UPDATE_MUTATION(options.cartFragment), {
       variables: {
         cartId: options.getCartId(),
         note,
         ...optionalParams
       }
     });
-    return formatAPIResult(cartNoteUpdate, errors);
+    return formatAPIResult(cartNoteUpdate, errors2);
   };
 }
 var CART_NOTE_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3445,14 +3473,14 @@ var CART_NOTE_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#grap
 // src/cart/queries/cartSelectedDeliveryOptionsUpdateDefault.ts
 function cartSelectedDeliveryOptionsUpdateDefault(options) {
   return async (selectedDeliveryOptions, optionalParams) => {
-    const { cartSelectedDeliveryOptionsUpdate, errors } = await options.storefront.mutate(CART_SELECTED_DELIVERY_OPTIONS_UPDATE_MUTATION(options.cartFragment), {
+    const { cartSelectedDeliveryOptionsUpdate, errors: errors2 } = await options.storefront.mutate(CART_SELECTED_DELIVERY_OPTIONS_UPDATE_MUTATION(options.cartFragment), {
       variables: {
         cartId: options.getCartId(),
         selectedDeliveryOptions,
         ...optionalParams
       }
     });
-    return formatAPIResult(cartSelectedDeliveryOptionsUpdate, errors);
+    return formatAPIResult(cartSelectedDeliveryOptionsUpdate, errors2);
   };
 }
 var CART_SELECTED_DELIVERY_OPTIONS_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3478,13 +3506,13 @@ var CART_SELECTED_DELIVERY_OPTIONS_UPDATE_MUTATION = (cartFragment = MINIMAL_CAR
 // src/cart/queries/cartAttributesUpdateDefault.ts
 function cartAttributesUpdateDefault(options) {
   return async (attributes, optionalParams) => {
-    const { cartAttributesUpdate, errors } = await options.storefront.mutate(CART_ATTRIBUTES_UPDATE_MUTATION(options.cartFragment), {
+    const { cartAttributesUpdate, errors: errors2 } = await options.storefront.mutate(CART_ATTRIBUTES_UPDATE_MUTATION(options.cartFragment), {
       variables: {
         cartId: optionalParams?.cartId || options.getCartId(),
         attributes
       }
     });
-    return formatAPIResult(cartAttributesUpdate, errors);
+    return formatAPIResult(cartAttributesUpdate, errors2);
   };
 }
 var CART_ATTRIBUTES_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3515,7 +3543,7 @@ function cartMetafieldsSetDefault(options) {
         ownerId
       })
     );
-    const { cartMetafieldsSet, errors } = await options.storefront.mutate(CART_METAFIELD_SET_MUTATION(), {
+    const { cartMetafieldsSet, errors: errors2 } = await options.storefront.mutate(CART_METAFIELD_SET_MUTATION(), {
       variables: { metafields: metafieldsWithOwnerId }
     });
     return formatAPIResult(
@@ -3525,7 +3553,7 @@ function cartMetafieldsSetDefault(options) {
         },
         ...cartMetafieldsSet
       },
-      errors
+      errors2
     );
   };
 }
@@ -3550,7 +3578,7 @@ var CART_METAFIELD_SET_MUTATION = () => `#graphql
 function cartMetafieldDeleteDefault(options) {
   return async (key, optionalParams) => {
     const ownerId = optionalParams?.cartId || options.getCartId();
-    const { cartMetafieldDelete, errors } = await options.storefront.mutate(CART_METAFIELD_DELETE_MUTATION(), {
+    const { cartMetafieldDelete, errors: errors2 } = await options.storefront.mutate(CART_METAFIELD_DELETE_MUTATION(), {
       variables: {
         input: {
           ownerId,
@@ -3565,7 +3593,7 @@ function cartMetafieldDeleteDefault(options) {
         },
         ...cartMetafieldDelete
       },
-      errors
+      errors2
     );
   };
 }
@@ -3582,51 +3610,18 @@ var CART_METAFIELD_DELETE_MUTATION = () => `#graphql
     }
   }
 `;
-
-// ../../node_modules/worktop/cookie/index.mjs
-var g = /* @__PURE__ */ new Set([
-  "domain",
-  "path",
-  "max-age",
-  "expires",
-  "samesite",
-  "secure",
-  "httponly"
-]);
-function u(a) {
-  let r = {}, e, t, n = 0, m = a.split(/;\s*/g), s, i;
-  for (; n < m.length; n++)
-    if (t = m[n], e = t.indexOf("="), ~e) {
-      if (s = t.substring(0, e++).trim(), i = t.substring(e).trim(), i[0] === '"' && (i = i.substring(1, i.length - 1)), ~i.indexOf("%"))
-        try {
-          i = decodeURIComponent(i);
-        } catch (f) {
-        }
-      g.has(t = s.toLowerCase()) ? t === "expires" ? r.expires = new Date(i) : t === "max-age" ? r.maxage = +i : r[t] = i : r[s] = i;
-    } else
-      (s = t.trim().toLowerCase()) && (s === "httponly" || s === "secure") && (r[s] = true);
-  return r;
-}
-function l(a, r, e = {}) {
-  let t = a + "=" + encodeURIComponent(r);
-  return e.expires && (t += "; Expires=" + new Date(e.expires).toUTCString()), e.maxage != null && e.maxage >= 0 && (t += "; Max-Age=" + (e.maxage | 0)), e.domain && (t += "; Domain=" + e.domain), e.path && (t += "; Path=" + e.path), e.samesite && (t += "; SameSite=" + e.samesite), (e.secure || e.samesite === "None") && (t += "; Secure"), e.httponly && (t += "; HttpOnly"), t;
-}
-
-// src/cart/cartGetIdDefault.ts
 var cartGetIdDefault = (requestHeaders) => {
-  const cookies = u(requestHeaders.get("Cookie") || "");
+  const cookies = cookie.parse(requestHeaders.get("Cookie") || "");
   return () => {
     return cookies.cart ? `gid://shopify/Cart/${cookies.cart}` : void 0;
   };
 };
-
-// src/cart/cartSetIdDefault.ts
 var cartSetIdDefault = (cookieOptions) => {
   return (cartId) => {
     const headers = new Headers();
     headers.append(
       "Set-Cookie",
-      l("cart", cartId.split("/").pop() || "", {
+      cookie.stringify("cart", cartId.split("/").pop() || "", {
         path: "/",
         ...cookieOptions
       })
@@ -3669,7 +3664,15 @@ function createCartHandler(options) {
     getCartId,
     setCartId,
     create: cartCreate,
-    addLines: async (lines, optionalParams) => {
+    addLines: async (linesWithOptimisticData, optionalParams) => {
+      const lines = linesWithOptimisticData.map((line) => {
+        return {
+          attributes: line.attributes,
+          quantity: line.quantity,
+          merchandiseId: line.merchandiseId,
+          sellingPlanId: line.sellingPlanId
+        };
+      });
       return cartId || optionalParams?.cartId ? await cartLinesAddDefault(mutateOptions)(lines, optionalParams) : await cartCreate({ lines }, optionalParams);
     },
     updateLines: cartLinesUpdateDefault(mutateOptions),
@@ -3713,6 +3716,89 @@ function createCartHandler(options) {
     return methods;
   }
 }
+function useOptimisticCart(cart) {
+  const fetchers = react$1.useFetchers();
+  if (!fetchers || !fetchers.length)
+    return cart;
+  const optimisticCart = cart?.lines ? structuredClone(cart) : { lines: { nodes: [] } };
+  const cartLines = optimisticCart.lines.nodes;
+  let isOptimistic = false;
+  for (const { formData } of fetchers) {
+    if (!formData)
+      continue;
+    const cartFormData = CartForm.getFormInput(formData);
+    if (cartFormData.action === CartForm.ACTIONS.LinesAdd) {
+      for (const input of cartFormData.inputs.lines) {
+        if (!input.selectedVariant) {
+          console.error(
+            "[h2:error:useOptimisticCart] No selected variant was passed in the cart action. Make sure to pass the selected variant if you want to use an optimistic cart"
+          );
+          continue;
+        }
+        const existingLine = cartLines.find(
+          (line) => line.merchandise.id === input.selectedVariant?.id
+        );
+        isOptimistic = true;
+        if (existingLine) {
+          existingLine.quantity = (existingLine.quantity || 1) + (input.quantity || 1);
+          existingLine.isOptimistic = true;
+        } else {
+          cartLines.unshift({
+            id: getOptimisticLineId(input.selectedVariant.id),
+            merchandise: input.selectedVariant,
+            isOptimistic: true,
+            quantity: input.quantity || 1
+          });
+        }
+      }
+    } else if (cartFormData.action === CartForm.ACTIONS.LinesRemove) {
+      for (const lineId of cartFormData.inputs.lineIds) {
+        const index = cartLines.findIndex((line) => line.id === lineId);
+        if (index !== -1) {
+          if (isOptimisticLineId(cartLines[index].id)) {
+            console.error(
+              "[h2:error:useOptimisticCart] Tried to remove an optimistic line that has not been added to the cart yet"
+            );
+            continue;
+          }
+          cartLines.splice(index, 1);
+          isOptimistic = true;
+        } else {
+          console.warn(
+            `[h2:warn:useOptimisticCart] Tried to remove line '${lineId}' but it doesn't exist in the cart`
+          );
+        }
+      }
+    } else if (cartFormData.action === CartForm.ACTIONS.LinesUpdate) {
+      for (const line of cartFormData.inputs.lines) {
+        const index = cartLines.findIndex(
+          (optimisticLine) => line.id === optimisticLine.id
+        );
+        if (index > -1) {
+          if (isOptimisticLineId(cartLines[index].id)) {
+            console.error(
+              "[h2:error:useOptimisticCart] Tried to update an optimistic line that has not been added to the cart yet"
+            );
+            continue;
+          }
+          cartLines[index].quantity = line.quantity;
+          if (cartLines[index].quantity === 0) {
+            cartLines.splice(index, 1);
+          }
+          isOptimistic = true;
+        } else {
+          console.warn(
+            `[h2:warn:useOptimisticCart] Tried to update line '${line.id}' but it doesn't exist in the cart`
+          );
+        }
+      }
+    }
+  }
+  if (isOptimistic) {
+    optimisticCart.isOptimistic = isOptimistic;
+  }
+  return optimisticCart;
+}
 function VariantSelector({
   handle,
   options = [],
@@ -3762,7 +3848,8 @@ function VariantSelector({
             isAvailable: variant ? variant.availableForSale : true,
             to: path + searchString,
             search: searchString,
-            isActive: calculatedActiveValue
+            isActive: calculatedActiveValue,
+            variant
           });
         }
         return children({
@@ -3928,21 +4015,33 @@ function ShopPayButton(props) {
 function AnalyticsView(props) {
   const { type, data = {}, customData } = props;
   const location = react$1.useLocation();
-  const { publish: publish2, cart, prevCart, shop } = useAnalytics();
+  const {
+    publish: publish2,
+    cart,
+    prevCart,
+    shop,
+    customData: analyticProviderCustomData
+  } = useAnalytics();
   const url = location.pathname + location.search;
+  let viewPayload2 = {
+    ...data,
+    customData: {
+      ...analyticProviderCustomData,
+      ...customData
+    },
+    cart,
+    prevCart,
+    shop
+  };
   react.useEffect(() => {
-    if (!shop)
+    if (!shop?.shopId)
       return;
-    const viewPayload2 = {
-      ...data,
-      customData,
-      url: window.location.href,
-      cart,
-      prevCart,
-      shop
+    viewPayload2 = {
+      ...viewPayload2,
+      url: window.location.href
     };
     publish2(type, viewPayload2);
-  }, [publish2, url, cart, prevCart, shop]);
+  }, [publish2, url, shop?.shopId]);
   return null;
 }
 function AnalyticsPageView(props) {
@@ -3983,7 +4082,7 @@ var CONSENT_API = "https://cdn.shopify.com/shopifycloud/consent-tracking-api/v0.
 var CONSENT_API_WITH_BANNER = "https://cdn.shopify.com/shopifycloud/privacy-banner/storefront-banner.js";
 function logMissingConfig(fieldName) {
   console.error(
-    `[h2:error:useCustomerPrivacy] Unable to setup Customer Privacy API: Missing consent.${fieldName} consent configuration.`
+    `[h2:error:useCustomerPrivacy] Unable to setup Customer Privacy API: Missing consent.${fieldName} configuration.`
   );
 }
 function useCustomerPrivacy(props) {
@@ -4002,10 +4101,6 @@ function useCustomerPrivacy(props) {
       }
     }
   );
-  if (!consentConfig.checkoutDomain)
-    logMissingConfig("checkoutDomain");
-  if (!consentConfig.storefrontAccessToken)
-    logMissingConfig("storefrontAccessToken");
   react.useEffect(() => {
     const consentCollectedHandler = (event) => {
       if (onVisitorConsentCollected) {
@@ -4027,29 +4122,37 @@ function useCustomerPrivacy(props) {
     if (scriptStatus !== "done" || loadedEvent.current)
       return;
     loadedEvent.current = true;
+    if (!consentConfig.checkoutDomain)
+      logMissingConfig("checkoutDomain");
+    if (!consentConfig.storefrontAccessToken)
+      logMissingConfig("storefrontAccessToken");
+    if (consentConfig.storefrontAccessToken.startsWith("shpat_") || consentConfig.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
       });
     }
-    if (window.Shopify?.customerPrivacy) {
-      const originalSetTrackingConsent = window.Shopify.customerPrivacy.setTrackingConsent;
-      window.Shopify.customerPrivacy.setTrackingConsent = (consent, callback) => {
-        originalSetTrackingConsent(
-          {
-            ...consent,
-            headlessStorefront: true,
-            checkoutRootDomain: consentConfig.checkoutDomain,
-            storefrontAccessToken: consentConfig.storefrontAccessToken
-          },
-          callback
-        );
-      };
-    }
-    if (onReady && !withPrivacyBanner) {
-      onReady();
+    if (!window.Shopify?.customerPrivacy)
+      return;
+    const originalSetTrackingConsent = window.Shopify.customerPrivacy.setTrackingConsent;
+    function overrideSetTrackingConsent(consent, callback) {
+      originalSetTrackingConsent(
+        {
+          ...consent,
+          headlessStorefront: true,
+          checkoutRootDomain: consentConfig.checkoutDomain,
+          storefrontAccessToken: consentConfig.storefrontAccessToken
+        },
+        callback
+      );
     }
+    window.Shopify.customerPrivacy.setTrackingConsent = overrideSetTrackingConsent;
+    onReady && onReady();
   }, [scriptStatus, withPrivacyBanner, consentConfig]);
   return;
 }
@@ -4071,27 +4174,38 @@ function getCustomerPrivacyRequired() {
 }
 function ShopifyAnalytics({
   consent,
-  onReady
+  onReady,
+  domain
 }) {
   const { subscribe: subscribe2, register: register2, canTrack } = useAnalytics();
+  const [shopifyReady, setShopifyReady] = react.useState(false);
+  const [privacyReady, setPrivacyReady] = react.useState(false);
   const { ready: shopifyAnalyticsReady } = register2("Internal_Shopify_Analytics");
   const { ready: customerPrivacyReady } = register2(
     "Internal_Shopify_CustomerPrivacy"
   );
   const analyticsReady = () => {
+    shopifyReady && privacyReady && onReady();
+  };
+  const setCustomerPrivacyReady = () => {
+    setPrivacyReady(true);
     customerPrivacyReady();
-    onReady();
+    analyticsReady();
   };
+  const { checkoutDomain, storefrontAccessToken, withPrivacyBanner } = consent;
   useCustomerPrivacy({
-    ...consent,
-    onVisitorConsentCollected: analyticsReady,
+    checkoutDomain: !checkoutDomain ? "mock.shop" : checkoutDomain,
+    storefrontAccessToken: !storefrontAccessToken ? "abcdefghijklmnopqrstuvwxyz123456" : storefrontAccessToken,
+    withPrivacyBanner,
+    onVisitorConsentCollected: setCustomerPrivacyReady,
     onReady: () => {
-      if (!consent.withPrivacyBanner) {
-        analyticsReady();
-      }
+      setTimeout(setCustomerPrivacyReady, 3e3);
     }
   });
-  hydrogenReact.useShopifyCookies({ hasUserConsent: canTrack() });
+  hydrogenReact.useShopifyCookies({
+    hasUserConsent: canTrack(),
+    domain
+  });
   react.useEffect(() => {
     subscribe2(AnalyticsEvent.PAGE_VIEWED, pageViewHandler);
     subscribe2(AnalyticsEvent.PRODUCT_VIEWED, productViewHandler);
@@ -4099,6 +4213,8 @@ function ShopifyAnalytics({
     subscribe2(AnalyticsEvent.SEARCH_VIEWED, searchViewHandler);
     subscribe2(AnalyticsEvent.PRODUCT_ADD_TO_CART, productAddedToCartHandler);
     shopifyAnalyticsReady();
+    setShopifyReady(true);
+    analyticsReady();
   }, [subscribe2, shopifyAnalyticsReady]);
   return null;
 }
@@ -4517,8 +4633,8 @@ function shopifyCanTrack() {
   }
   return false;
 }
-function messageOnError(field) {
-  return `[h2:error:Analytics.Provider] - ${field} is required`;
+function messageOnError(field, envVar) {
+  return `[h2:error:Analytics.Provider] - ${field} is required. Make sure ${envVar} is defined in your environment variables. See https://h2o.fyi/analytics/consent to learn how to setup environment variables in the Shopify admin.`;
 }
 function AnalyticsProvider({
   canTrack: customCanTrack,
@@ -4527,24 +4643,9 @@ function AnalyticsProvider({
   consent,
   customData = {},
   shop: shopProp = null,
-  disableThrowOnError = false
+  disableThrowOnError = false,
+  cookieDomain
 }) {
-  if (!consent.checkoutDomain) {
-    const errorMsg = messageOnError("consent.checkoutDomain");
-    if (disableThrowOnError) {
-      console.error(errorMsg);
-    } else {
-      invariant__default.default(false, errorMsg);
-    }
-  }
-  if (!consent.storefrontAccessToken) {
-    const errorMsg = messageOnError("consent.storefrontAccessToken");
-    if (disableThrowOnError) {
-      console.error(errorMsg);
-    } else {
-      invariant__default.default(false, errorMsg);
-    }
-  }
   const listenerSet = react.useRef(false);
   const { shop } = useShopAnalytics(shopProp);
   const [consentLoaded, setConsentLoaded] = react.useState(
@@ -4554,6 +4655,28 @@ function AnalyticsProvider({
   const [canTrack, setCanTrack] = react.useState(
     customCanTrack ? () => customCanTrack : () => shopifyCanTrack
   );
+  if (!!shop) {
+    if (/\/68817551382$/.test(shop.shopId)) {
+      warnOnce(
+        "[h2:error:Analytics.Provider] - Mock shop is used. Analytics will not work properly."
+      );
+    } else {
+      if (!consent.checkoutDomain) {
+        const errorMsg = messageOnError(
+          "consent.checkoutDomain",
+          "PUBLIC_CHECKOUT_DOMAIN"
+        );
+        errorOnce(errorMsg);
+      }
+      if (!consent.storefrontAccessToken) {
+        const errorMsg = messageOnError(
+          "consent.storefrontAccessToken",
+          "PUBLIC_STOREFRONT_API_TOKEN"
+        );
+        errorOnce(errorMsg);
+      }
+    }
+  }
   const value = react.useMemo(() => {
     return {
       canTrack,
@@ -4584,7 +4707,7 @@ function AnalyticsProvider({
     children,
     !!shop && /* @__PURE__ */ jsxRuntime.jsx(AnalyticsPageView, {}),
     !!shop && !!currentCart && /* @__PURE__ */ jsxRuntime.jsx(CartAnalytics, { cart: currentCart, setCarts }),
-    !!shop && /* @__PURE__ */ jsxRuntime.jsx(
+    !!shop && consent.checkoutDomain && /* @__PURE__ */ jsxRuntime.jsx(
       ShopifyAnalytics,
       {
         consent,
@@ -4592,7 +4715,8 @@ function AnalyticsProvider({
           listenerSet.current = true;
           setConsentLoaded(true);
           setCanTrack(() => shopifyCanTrack);
-        }
+        },
+        domain: cookieDomain
       }
     )
   ] });
@@ -4658,6 +4782,27 @@ var Analytics = {
   Provider: AnalyticsProvider,
   SearchView: AnalyticsSearchView
 };
+var RichText = function(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    hydrogenReact.RichText,
+    {
+      ...props,
+      components: {
+        link: ({ node }) => /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.Link,
+          {
+            to: node.url,
+            title: node.title,
+            target: node.target,
+            prefetch: "intent",
+            children: node.children
+          }
+        ),
+        ...props.components
+      }
+    }
+  );
+};
 //! @see: https://shopify.dev/docs/api/storefront/latest/mutations/cartCreate
 //! @see https://shopify.dev/docs/api/storefront/latest/queries/cart
 //! @see: https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesAdd
@@ -4754,6 +4899,7 @@ Object.defineProperty(exports, 'useShopifyCookies', {
   enumerable: true,
   get: function () { return hydrogenReact.useShopifyCookies; }
 });
+exports.Analytics = Analytics;
 exports.AnalyticsEvent = AnalyticsEvent;
 exports.CacheCustom = CacheCustom;
 exports.CacheLong = CacheLong;
@@ -4763,10 +4909,10 @@ exports.CartForm = CartForm;
 exports.InMemoryCache = InMemoryCache;
 exports.OptimisticInput = OptimisticInput;
 exports.Pagination = Pagination;
+exports.RichText = RichText;
 exports.Script = Script;
 exports.Seo = Seo;
 exports.ShopPayButton = ShopPayButton;
-exports.UNSTABLE_Analytics = Analytics;
 exports.VariantSelector = VariantSelector;
 exports.cartAttributesUpdateDefault = cartAttributesUpdateDefault;
 exports.cartBuyerIdentityUpdateDefault = cartBuyerIdentityUpdateDefault;
@@ -4797,9 +4943,10 @@ exports.getSeoMeta = getSeoMeta;
 exports.getShopAnalytics = getShopAnalytics;
 exports.graphiqlLoader = graphiqlLoader;
 exports.storefrontRedirect = storefrontRedirect;
-exports.unstable_useAnalytics = useAnalytics;
+exports.useAnalytics = useAnalytics;
 exports.useCustomerPrivacy = useCustomerPrivacy;
 exports.useNonce = useNonce;
+exports.useOptimisticCart = useOptimisticCart;
 exports.useOptimisticData = useOptimisticData;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map