@shopify/hydrogen 2024.4.2 → 2024.4.4

package/dist/development/index.js

@@ -1,10 +1,10 @@
-import { createStorefrontClient as createStorefrontClient$1, SHOPIFY_STOREFRONT_ID_HEADER, getShopifyCookies, SHOPIFY_Y, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_S, SHOPIFY_STOREFRONT_S_HEADER, flattenConnection, ShopPayButton as ShopPayButton$1, useLoadScript, useShopifyCookies, sendShopifyAnalytics, AnalyticsEventName, AnalyticsPageType, getClientBrowserParameters } from '@shopify/hydrogen-react';
+import { createStorefrontClient as createStorefrontClient$1, SHOPIFY_STOREFRONT_ID_HEADER, getShopifyCookies, SHOPIFY_Y, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_S, SHOPIFY_STOREFRONT_S_HEADER, flattenConnection, ShopPayButton as ShopPayButton$1, useLoadScript, RichText as RichText$1, useShopifyCookies, sendShopifyAnalytics, AnalyticsEventName, AnalyticsPageType, getClientBrowserParameters } from '@shopify/hydrogen-react';
 export { AnalyticsEventName, AnalyticsPageType, ExternalVideo, IMAGE_FRAGMENT, Image, MediaFile, ModelViewer, Money, ShopifySalesChannel, Video, customerAccountApiCustomScalars, flattenConnection, getClientBrowserParameters, getShopifyCookies, parseGid, parseMetafield, sendShopifyAnalytics, storefrontApiCustomScalars, useLoadScript, useMoney, useShopifyCookies } from '@shopify/hydrogen-react';
 import { lazy, createContext, forwardRef, useMemo, createElement, Suspense, Fragment, useRef, useEffect, useContext, useState } from 'react';
 import { useMatches, useLocation, useNavigation, Link, useNavigate, useFetcher, useFetchers } from '@remix-run/react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { parse, stringify } from 'worktop/cookie';
 import cspBuilder from 'content-security-policy-builder';
-import invariant from 'tiny-invariant';
 
 // src/storefront.ts
 
@@ -390,7 +390,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";
@@ -421,6 +421,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) {
@@ -537,19 +544,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")
   });
@@ -711,16 +718,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}`,
@@ -807,10 +814,10 @@ var getStackOffset = (query) => {
   }
   return stackOffset;
 } ;
-function formatAPIResult(data, errors) {
+function formatAPIResult(data, errors2) {
   return {
     ...data,
-    ...errors && { errors }
+    ...errors2 && { errors: errors2 }
   };
 }
 
@@ -1009,7 +1016,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) {
@@ -2255,6 +2264,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",
@@ -2291,7 +2301,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,
@@ -2304,7 +2314,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();
 }
@@ -2548,18 +2558,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}`,
@@ -2568,7 +2578,7 @@ function createCustomerAccountClient({
           query: query2
         })
       );
-      return { ...APIresponse, ...errors && { errors: gqlErrors } };
+      return { ...APIresponse, ...errors2 && { errors: gqlErrors } };
     } catch (e) {
       throwErrorWithGqlLink({ ...errorOptions, errors: [{ message: body }] });
     }
@@ -2718,7 +2728,6 @@ function createCustomerAccountClient({
       ).toString() : postLogoutRedirectUri;
       clearSession(session);
       return redirect(logoutUrl, {
-        status: 302,
         headers: {
           "Set-Cookie": await session.commit()
         }
@@ -2940,7 +2949,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,
@@ -2952,7 +2961,7 @@ function cartCreateDefault(options) {
         ...restOfOptionalParams
       }
     });
-    return formatAPIResult(cartCreate, errors);
+    return formatAPIResult(cartCreate, errors2);
   };
 }
 var CART_CREATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -2986,7 +2995,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: {
@@ -2998,7 +3007,7 @@ function cartGetDefault({
     ]);
     return formatAPIResult(
       addCustomerLoggedInParam(isCustomerLoggedIn, cart),
-      errors
+      errors2
     );
   };
 }
@@ -3137,14 +3146,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
@@ -3168,17 +3177,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
@@ -3205,14 +3233,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
@@ -3242,14 +3271,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
@@ -3281,7 +3310,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: {
@@ -3291,7 +3320,7 @@ function cartBuyerIdentityUpdateDefault(options) {
         ...optionalParams
       }
     });
-    return formatAPIResult(cartBuyerIdentityUpdate, errors);
+    return formatAPIResult(cartBuyerIdentityUpdate, errors2);
   };
 }
 var CART_BUYER_IDENTITY_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
@@ -3317,14 +3346,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
@@ -3350,14 +3379,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
@@ -3383,13 +3412,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
@@ -3420,7 +3449,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(
@@ -3430,7 +3459,7 @@ function cartMetafieldsSetDefault(options) {
         },
         ...cartMetafieldsSet
       },
-      errors
+      errors2
     );
   };
 }
@@ -3455,7 +3484,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,
@@ -3470,7 +3499,7 @@ function cartMetafieldDeleteDefault(options) {
         },
         ...cartMetafieldDelete
       },
-      errors
+      errors2
     );
   };
 }
@@ -3487,51 +3516,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 = 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() || "", {
+      stringify("cart", cartId.split("/").pop() || "", {
         path: "/",
         ...cookieOptions
       })
@@ -3574,7 +3570,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),
@@ -3618,6 +3622,89 @@ function createCartHandler(options) {
     return methods;
   }
 }
+function useOptimisticCart(cart) {
+  const fetchers = 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 = [],
@@ -3667,7 +3754,8 @@ function VariantSelector({
             isAvailable: variant ? variant.availableForSale : true,
             to: path + searchString,
             search: searchString,
-            isActive: calculatedActiveValue
+            isActive: calculatedActiveValue,
+            variant
           });
         }
         return children({
@@ -3833,21 +3921,33 @@ function ShopPayButton(props) {
 function AnalyticsView(props) {
   const { type, data = {}, customData } = props;
   const location = 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
+  };
   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) {
@@ -3888,7 +3988,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) {
@@ -3907,10 +4007,6 @@ function useCustomerPrivacy(props) {
       }
     }
   );
-  if (!consentConfig.checkoutDomain)
-    logMissingConfig("checkoutDomain");
-  if (!consentConfig.storefrontAccessToken)
-    logMissingConfig("storefrontAccessToken");
   useEffect(() => {
     const consentCollectedHandler = (event) => {
       if (onVisitorConsentCollected) {
@@ -3932,29 +4028,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;
 }
@@ -3976,27 +4080,38 @@ function getCustomerPrivacyRequired() {
 }
 function ShopifyAnalytics({
   consent,
-  onReady
+  onReady,
+  domain
 }) {
   const { subscribe: subscribe2, register: register2, canTrack } = useAnalytics();
+  const [shopifyReady, setShopifyReady] = useState(false);
+  const [privacyReady, setPrivacyReady] = 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);
     }
   });
-  useShopifyCookies({ hasUserConsent: canTrack() });
+  useShopifyCookies({
+    hasUserConsent: canTrack(),
+    domain
+  });
   useEffect(() => {
     subscribe2(AnalyticsEvent.PAGE_VIEWED, pageViewHandler);
     subscribe2(AnalyticsEvent.PRODUCT_VIEWED, productViewHandler);
@@ -4004,6 +4119,8 @@ function ShopifyAnalytics({
     subscribe2(AnalyticsEvent.SEARCH_VIEWED, searchViewHandler);
     subscribe2(AnalyticsEvent.PRODUCT_ADD_TO_CART, productAddedToCartHandler);
     shopifyAnalyticsReady();
+    setShopifyReady(true);
+    analyticsReady();
   }, [subscribe2, shopifyAnalyticsReady]);
   return null;
 }
@@ -4422,8 +4539,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,
@@ -4432,24 +4549,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(false, errorMsg);
-    }
-  }
-  if (!consent.storefrontAccessToken) {
-    const errorMsg = messageOnError("consent.storefrontAccessToken");
-    if (disableThrowOnError) {
-      console.error(errorMsg);
-    } else {
-      invariant(false, errorMsg);
-    }
-  }
   const listenerSet = useRef(false);
   const { shop } = useShopAnalytics(shopProp);
   const [consentLoaded, setConsentLoaded] = useState(
@@ -4459,6 +4561,28 @@ function AnalyticsProvider({
   const [canTrack, setCanTrack] = 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 = useMemo(() => {
     return {
       canTrack,
@@ -4489,7 +4613,7 @@ function AnalyticsProvider({
     children,
     !!shop && /* @__PURE__ */ jsx(AnalyticsPageView, {}),
     !!shop && !!currentCart && /* @__PURE__ */ jsx(CartAnalytics, { cart: currentCart, setCarts }),
-    !!shop && /* @__PURE__ */ jsx(
+    !!shop && consent.checkoutDomain && /* @__PURE__ */ jsx(
       ShopifyAnalytics,
       {
         consent,
@@ -4497,7 +4621,8 @@ function AnalyticsProvider({
           listenerSet.current = true;
           setConsentLoaded(true);
           setCanTrack(() => shopifyCanTrack);
-        }
+        },
+        domain: cookieDomain
       }
     )
   ] });
@@ -4563,6 +4688,27 @@ var Analytics = {
   Provider: AnalyticsProvider,
   SearchView: AnalyticsSearchView
 };
+var RichText = function(props) {
+  return /* @__PURE__ */ jsx(
+    RichText$1,
+    {
+      ...props,
+      components: {
+        link: ({ node }) => /* @__PURE__ */ jsx(
+          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
@@ -4575,6 +4721,6 @@ var Analytics = {
 //! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartMetafieldsSet
 //! @see https://shopify.dev/docs/api/storefront/2024-04/mutations/cartMetafieldDelete
 
-export { AnalyticsEvent, CacheCustom, CacheLong, CacheNone, CacheShort, CartForm, InMemoryCache, OptimisticInput, Pagination, Script, Seo, ShopPayButton, Analytics as UNSTABLE_Analytics, VariantSelector, cartAttributesUpdateDefault, cartBuyerIdentityUpdateDefault, cartCreateDefault, cartDiscountCodesUpdateDefault, cartGetDefault, cartGetIdDefault, cartLinesAddDefault, cartLinesRemoveDefault, cartLinesUpdateDefault, cartMetafieldDeleteDefault, cartMetafieldsSetDefault, cartNoteUpdateDefault, cartSelectedDeliveryOptionsUpdateDefault, cartSetIdDefault, changelogHandler, createCartHandler, createContentSecurityPolicy, createCustomerAccountClient, createStorefrontClient, createWithCache, formatAPIResult, generateCacheControlHeader, getCustomerPrivacy, getPaginationVariables, getSelectedProductOptions, getSeoMeta, getShopAnalytics, graphiqlLoader, storefrontRedirect, useAnalytics as unstable_useAnalytics, useCustomerPrivacy, useNonce, useOptimisticData };
+export { Analytics, AnalyticsEvent, CacheCustom, CacheLong, CacheNone, CacheShort, CartForm, InMemoryCache, OptimisticInput, Pagination, RichText, Script, Seo, ShopPayButton, VariantSelector, cartAttributesUpdateDefault, cartBuyerIdentityUpdateDefault, cartCreateDefault, cartDiscountCodesUpdateDefault, cartGetDefault, cartGetIdDefault, cartLinesAddDefault, cartLinesRemoveDefault, cartLinesUpdateDefault, cartMetafieldDeleteDefault, cartMetafieldsSetDefault, cartNoteUpdateDefault, cartSelectedDeliveryOptionsUpdateDefault, cartSetIdDefault, changelogHandler, createCartHandler, createContentSecurityPolicy, createCustomerAccountClient, createStorefrontClient, createWithCache, formatAPIResult, generateCacheControlHeader, getCustomerPrivacy, getPaginationVariables, getSelectedProductOptions, getSeoMeta, getShopAnalytics, graphiqlLoader, storefrontRedirect, useAnalytics, useCustomerPrivacy, useNonce, useOptimisticCart, useOptimisticData };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map