@shopify/hydrogen 2024.4.0 → 2024.4.2

package/dist/development/index.js

@@ -4,6 +4,7 @@ import { lazy, createContext, forwardRef, useMemo, createElement, Suspense, Frag
 import { useMatches, useLocation, useNavigation, Link, useNavigate, useFetcher, useFetchers } from '@remix-run/react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import cspBuilder from 'content-security-policy-builder';
+import invariant from 'tiny-invariant';
 
 // src/storefront.ts
 
@@ -241,9 +242,10 @@ async function runWithCache(cacheKey, actionFn, {
     // '__HYDROGEN_CACHE_ID__', // TODO purgeQueryCacheOnBuild
     ...typeof cacheKey === "string" ? [cacheKey] : cacheKey
   ]);
-  let debugData;
+  let cachedDebugInfo;
+  let userDebugInfo;
   const addDebugData = (info) => {
-    debugData = {
+    userDebugInfo = {
       displayName: info.displayName,
       url: info.response?.url,
       responseInit: {
@@ -253,26 +255,31 @@ async function runWithCache(cacheKey, actionFn, {
       }
     };
   };
+  const mergeDebugInfo = () => ({
+    ...cachedDebugInfo,
+    ...debugInfo,
+    url: userDebugInfo?.url || debugInfo?.url || cachedDebugInfo?.url || getKeyUrl(key),
+    displayName: debugInfo?.displayName || userDebugInfo?.displayName || cachedDebugInfo?.displayName
+  });
   const logSubRequestEvent2 = ({
     result: result2,
     cacheStatus,
     overrideStartTime
   }) => {
     globalThis.__H2O_LOG_EVENT?.({
+      ...mergeDebugInfo(),
       eventType: "subrequest",
       startTime: overrideStartTime || startTime,
+      endTime: Date.now(),
       cacheStatus,
       responsePayload: result2 && result2[0] || result2,
-      responseInit: result2 && result2[1] || debugData?.responseInit,
+      responseInit: result2 && result2[1] || userDebugInfo?.responseInit,
       cache: {
         status: cacheStatus,
         strategy: generateCacheControlHeader(strategy || {}),
         key
       },
-      waitUntil,
-      ...debugInfo,
-      url: debugData?.url || debugInfo?.url || getKeyUrl(key),
-      displayName: debugInfo?.displayName || debugData?.displayName
+      waitUntil
     });
   } ;
   if (!cacheInstance || !strategy || strategy.mode === NO_STORE) {
@@ -280,9 +287,19 @@ async function runWithCache(cacheKey, actionFn, {
     logSubRequestEvent2?.({ result: result2 });
     return result2;
   }
+  const storeInCache = (value) => setItemInCache(
+    cacheInstance,
+    key,
+    {
+      value,
+      debugInfo: mergeDebugInfo() 
+    },
+    strategy
+  );
   const cachedItem = await getItemFromCache(cacheInstance, key);
-  if (cachedItem) {
-    const [cachedResult, cacheInfo] = cachedItem;
+  if (cachedItem && typeof cachedItem[0] !== "string") {
+    const [{ value: cachedResult, debugInfo: debugInfo2 }, cacheInfo] = cachedItem;
+    cachedDebugInfo = debugInfo2;
     const cacheStatus = isStale2(key, cacheInfo) ? "STALE" : "HIT";
     if (!swrLock.has(key) && cacheStatus === "STALE") {
       swrLock.add(key);
@@ -291,7 +308,7 @@ async function runWithCache(cacheKey, actionFn, {
         try {
           const result2 = await actionFn({ addDebugData });
           if (shouldCacheResult(result2)) {
-            await setItemInCache(cacheInstance, key, result2, strategy);
+            await storeInCache(result2);
             logSubRequestEvent2?.({
               result: result2,
               cacheStatus: "PUT",
@@ -321,16 +338,16 @@ async function runWithCache(cacheKey, actionFn, {
     cacheStatus: "MISS"
   });
   if (shouldCacheResult(result)) {
-    const setItemInCachePromise = Promise.resolve().then(async () => {
+    const cacheStoringPromise = Promise.resolve().then(async () => {
       const putStartTime = Date.now();
-      await setItemInCache(cacheInstance, key, result, strategy);
+      await storeInCache(result);
       logSubRequestEvent2?.({
         result,
         cacheStatus: "PUT",
         overrideStartTime: putStartTime
       });
     });
-    waitUntil?.(setItemInCachePromise);
+    waitUntil?.(cacheStoringPromise);
   }
   return result;
 }
@@ -372,12 +389,20 @@ async function fetchWithServerCache(url, requestInit, {
   ).then(fromSerializableResponse);
 }
 
+// src/version.ts
+var LIB_VERSION = "2024.4.2";
+
 // src/constants.ts
 var STOREFRONT_REQUEST_GROUP_ID_HEADER = "Custom-Storefront-Request-Group-ID";
 var STOREFRONT_ACCESS_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
 var SDK_VARIANT_HEADER = "X-SDK-Variant";
 var SDK_VARIANT_SOURCE_HEADER = "X-SDK-Variant-Source";
 var SDK_VERSION_HEADER = "X-SDK-Version";
+var DEFAULT_CUSTOMER_API_VERSION = "2024-04";
+var USER_AGENT = `Shopify Hydrogen ${LIB_VERSION}`;
+var CUSTOMER_API_CLIENT_ID = "30243aa5-17c1-465a-8493-944bcc4e88aa";
+var CUSTOMER_ACCOUNT_SESSION_KEY = "customerAccount";
+var BUYER_SESSION_KEY = "buyer";
 
 // src/utils/uuid.ts
 function generateUUID() {
@@ -397,9 +422,6 @@ var warnOnce = (string) => {
   }
 };
 
-// src/version.ts
-var LIB_VERSION = "2024.4.0";
-
 // src/utils/graphql.ts
 function minifyQuery(string) {
   return string.replace(/\s*#.*$/gm, "").replace(/\s+/gm, " ").trim();
@@ -672,12 +694,12 @@ function createStorefrontClient(options) {
       shouldCacheResponse: checkGraphQLErrors,
       waitUntil,
       debugInfo: {
-        url,
-        graphql: graphqlData,
         requestId: requestInit.headers[STOREFRONT_REQUEST_GROUP_ID_HEADER],
-        purpose: storefrontHeaders?.purpose,
+        displayName,
+        url,
         stackInfo,
-        displayName
+        graphql: graphqlData,
+        purpose: storefrontHeaders?.purpose
       }
     });
     const errorOptions = {
@@ -1708,6 +1730,9 @@ var SeoLogger = lazy(() => import('./log-seo-tags-IG37ONQ2.js'));
 function Seo({ debug }) {
   const matches = useMatches();
   const location = useLocation();
+  console.warn(
+    "[h2:warn:Seo] The `<Seo/>` component is deprecated. Use `getSeoMeta` instead.\nSee: https://shopify.dev/docs/api/hydrogen/2024-01/utilities/getseometa"
+  );
   const seoConfig = useMemo(() => {
     return matches.flatMap((match) => {
       const { handle, ...routeMatch } = match;
@@ -2182,12 +2207,6 @@ function getPaginationVariables(request, options = { pageBy: 20 }) {
   return variables;
 }
 
-// src/customer/constants.ts
-var DEFAULT_CUSTOMER_API_VERSION = "2024-04";
-var USER_AGENT = `Shopify Hydrogen ${LIB_VERSION}`;
-var CUSTOMER_API_CLIENT_ID = "30243aa5-17c1-465a-8493-944bcc4e88aa";
-var CUSTOMER_ACCOUNT_SESSION_KEY = "customerAccount";
-
 // src/customer/BadRequest.ts
 var BadRequest = class extends Response {
   constructor(message, helpMessage, headers) {
@@ -2230,7 +2249,8 @@ async function refreshToken({
   customerAccountId,
   customerAccountUrl,
   httpsOrigin,
-  debugInfo
+  debugInfo,
+  exchangeForStorefrontCustomerAccessToken
 }) {
   const newBody = new URLSearchParams();
   const customerAccount = session.get(CUSTOMER_ACCOUNT_SESSION_KEY);
@@ -2286,9 +2306,11 @@ async function refreshToken({
     refreshToken: refresh_token,
     idToken: id_token
   });
+  await exchangeForStorefrontCustomerAccessToken();
 }
 function clearSession(session) {
   session.unset(CUSTOMER_ACCOUNT_SESSION_KEY);
+  session.unset(BUYER_SESSION_KEY);
 }
 async function checkExpires({
   locks,
@@ -2297,7 +2319,8 @@ async function checkExpires({
   customerAccountId,
   customerAccountUrl,
   httpsOrigin,
-  debugInfo
+  debugInfo,
+  exchangeForStorefrontCustomerAccessToken
 }) {
   if (parseInt(expiresAt, 10) - 1e3 < (/* @__PURE__ */ new Date()).getTime()) {
     try {
@@ -2307,7 +2330,8 @@ async function checkExpires({
           customerAccountId,
           customerAccountUrl,
           httpsOrigin,
-          debugInfo
+          debugInfo,
+          exchangeForStorefrontCustomerAccessToken
         });
       await locks.refresh;
       delete locks.refresh;
@@ -2451,7 +2475,8 @@ function createCustomerAccountClient({
   waitUntil,
   authUrl,
   customAuthStatusHandler,
-  logErrors = true
+  logErrors = true,
+  unstableB2b = false
 }) {
   if (customerApiVersion !== DEFAULT_CUSTOMER_API_VERSION) {
     console.warn(
@@ -2474,7 +2499,7 @@ function createCustomerAccountClient({
   const customerAccountApiUrl = `${customerAccountUrl}/account/customer/api/${customerApiVersion}/graphql`;
   const locks = {};
   async function fetchCustomerAPI({
-    query,
+    query: query2,
     type,
     variables = {}
   }) {
@@ -2492,7 +2517,7 @@ function createCustomerAccountClient({
         Origin: httpsOrigin,
         Authorization: accessToken
       },
-      body: JSON.stringify({ query, variables })
+      body: JSON.stringify({ query: query2, variables })
     });
     logSubRequestEvent?.({
       url: customerAccountApiUrl,
@@ -2500,7 +2525,7 @@ function createCustomerAccountClient({
       response,
       waitUntil,
       stackInfo,
-      query,
+      query: query2,
       variables,
       ...getDebugHeaders(request)
     });
@@ -2509,7 +2534,7 @@ function createCustomerAccountClient({
       url: customerAccountApiUrl,
       response,
       type,
-      query,
+      query: query2,
       queryVariables: variables,
       errors: void 0,
       client: "customer"
@@ -2540,7 +2565,7 @@ function createCustomerAccountClient({
           clientOperation: `customerAccount.${errorOptions.type}`,
           requestId: response.headers.get("x-request-id"),
           queryVariables: variables,
-          query
+          query: query2
         })
       );
       return { ...APIresponse, ...errors && { errors: gqlErrors } };
@@ -2569,7 +2594,8 @@ function createCustomerAccountClient({
           waitUntil,
           stackInfo,
           ...getDebugHeaders(request)
-        }
+        },
+        exchangeForStorefrontCustomerAccessToken
       });
     } catch {
       return false;
@@ -2586,6 +2612,55 @@ function createCustomerAccountClient({
     if (hasAccessToken)
       return session.get(CUSTOMER_ACCOUNT_SESSION_KEY)?.accessToken;
   }
+  async function mutate(mutation, options) {
+    ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId);
+    mutation = minifyQuery(mutation);
+    assertMutation(mutation, "customer.mutate");
+    return withSyncStack(
+      fetchCustomerAPI({ query: mutation, type: "mutation", ...options }),
+      { logErrors }
+    );
+  }
+  async function query(query2, options) {
+    ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId);
+    query2 = minifyQuery(query2);
+    assertQuery(query2, "customer.query");
+    return withSyncStack(fetchCustomerAPI({ query: query2, type: "query", ...options }), {
+      logErrors
+    });
+  }
+  function setBuyer(buyer) {
+    session.set(BUYER_SESSION_KEY, {
+      ...session.get(BUYER_SESSION_KEY),
+      ...buyer
+    });
+  }
+  async function getBuyer() {
+    const hasAccessToken = await isLoggedIn();
+    if (!hasAccessToken) {
+      return;
+    }
+    return session.get(BUYER_SESSION_KEY);
+  }
+  async function exchangeForStorefrontCustomerAccessToken() {
+    if (!unstableB2b) {
+      return;
+    }
+    const STOREFRONT_CUSTOMER_ACCOUNT_TOKEN_CREATE = `#graphql
+      mutation storefrontCustomerAccessTokenCreate {
+        storefrontCustomerAccessTokenCreate {
+          customerAccessToken
+        }
+      }
+    `;
+    const { data } = await mutate(STOREFRONT_CUSTOMER_ACCOUNT_TOKEN_CREATE);
+    const customerAccessToken = data?.storefrontCustomerAccessTokenCreate?.customerAccessToken;
+    if (customerAccessToken) {
+      setBuyer({
+        customerAccessToken
+      });
+    }
+  }
   return {
     login: async (options) => {
       ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId);
@@ -2653,24 +2728,8 @@ function createCustomerAccountClient({
     handleAuthStatus,
     getAccessToken,
     getApiUrl: () => customerAccountApiUrl,
-    mutate(mutation, options) {
-      ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId);
-      mutation = minifyQuery(mutation);
-      assertMutation(mutation, "customer.mutate");
-      return withSyncStack(
-        fetchCustomerAPI({ query: mutation, type: "mutation", ...options }),
-        { logErrors }
-      );
-    },
-    query(query, options) {
-      ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId);
-      query = minifyQuery(query);
-      assertQuery(query, "customer.query");
-      return withSyncStack(
-        fetchCustomerAPI({ query, type: "query", ...options }),
-        { logErrors }
-      );
-    },
+    mutate,
+    query,
     authorize: async () => {
       ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId);
       const code = requestUrl.searchParams.get("code");
@@ -2765,19 +2824,19 @@ function createCustomerAccountClient({
       )?.redirectPath;
       session.set(CUSTOMER_ACCOUNT_SESSION_KEY, {
         accessToken: customerAccessToken,
-        expiresAt: new Date(
-          (/* @__PURE__ */ new Date()).getTime() + (expires_in - 120) * 1e3
-        ).getTime() + "",
+        expiresAt: new Date((/* @__PURE__ */ new Date()).getTime() + (expires_in - 120) * 1e3).getTime() + "",
         refreshToken: refresh_token,
-        idToken: id_token,
-        redirectPath: void 0
+        idToken: id_token
       });
+      await exchangeForStorefrontCustomerAccessToken();
       return redirect(redirectPath || DEFAULT_REDIRECT_PATH, {
         headers: {
           "Set-Cookie": await session.commit()
         }
       });
-    }
+    },
+    UNSTABLE_setBuyer: setBuyer,
+    UNSTABLE_getBuyer: getBuyer
   };
 }
 function ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId) {
@@ -2878,10 +2937,18 @@ var MINIMAL_CART_FRAGMENT = `#graphql
 // src/cart/queries/cartCreateDefault.ts
 function cartCreateDefault(options) {
   return async (input, optionalParams) => {
+    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), {
       variables: {
-        input,
+        input: {
+          ...restOfInput,
+          buyerIdentity: {
+            ...buyer,
+            ...buyerIdentity
+          }
+        },
         ...restOfOptionalParams
       }
     });
@@ -3208,10 +3275,19 @@ var CART_DISCOUNT_CODE_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT)
 // src/cart/queries/cartBuyerIdentityUpdateDefault.ts
 function cartBuyerIdentityUpdateDefault(options) {
   return async (buyerIdentity, optionalParams) => {
+    if (buyerIdentity.companyLocationId && options.customerAccount) {
+      options.customerAccount.UNSTABLE_setBuyer({
+        companyLocationId: buyerIdentity.companyLocationId
+      });
+    }
+    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), {
       variables: {
         cartId: options.getCartId(),
-        buyerIdentity,
+        buyerIdentity: {
+          ...buyer,
+          ...buyerIdentity
+        },
         ...optionalParams
       }
     });
@@ -3254,7 +3330,7 @@ function cartNoteUpdateDefault(options) {
 var CART_NOTE_UPDATE_MUTATION = (cartFragment = MINIMAL_CART_FRAGMENT) => `#graphql
   mutation cartNoteUpdate(
     $cartId: ID!
-    $note: String
+    $note: String!
     $language: LanguageCode
     $country: CountryCode
   ) @inContext(country: $country, language: $language) {
@@ -3479,7 +3555,8 @@ function createCartHandler(options) {
   const mutateOptions = {
     storefront,
     getCartId,
-    cartFragment: cartMutateFragment
+    cartFragment: cartMutateFragment,
+    customerAccount
   };
   const _cartCreate = cartCreateDefault(mutateOptions);
   const cartCreate = async function(...args) {
@@ -3706,7 +3783,11 @@ function createCSPHeader(nonce, props) {
 function addCspDirective(currentValue, value) {
   const normalizedValue = typeof value === "string" ? [value] : value;
   const normalizedCurrentValue = Array.isArray(currentValue) ? currentValue : [String(currentValue)];
-  const newValue = Array.isArray(normalizedValue) ? [...normalizedCurrentValue, ...normalizedValue] : normalizedValue;
+  const newValue = Array.isArray(normalizedValue) ? (
+    // If the default directive is `none`, don't
+    // merge the override with the default value.
+    normalizedValue.every((a) => a === `'none'`) ? normalizedCurrentValue : [...normalizedCurrentValue, ...normalizedValue]
+  ) : normalizedValue;
   return newValue;
 }
 var Script = forwardRef(
@@ -3814,6 +3895,7 @@ function useCustomerPrivacy(props) {
   const {
     withPrivacyBanner = true,
     onVisitorConsentCollected,
+    onReady,
     ...consentConfig
   } = props;
   const loadedEvent = useRef(false);
@@ -3870,6 +3952,9 @@ function useCustomerPrivacy(props) {
         );
       };
     }
+    if (onReady && !withPrivacyBanner) {
+      onReady();
+    }
   }, [scriptStatus, withPrivacyBanner, consentConfig]);
   return;
 }
@@ -3890,17 +3975,26 @@ function getCustomerPrivacyRequired() {
   return customerPrivacy;
 }
 function ShopifyAnalytics({
-  consent
+  consent,
+  onReady
 }) {
   const { subscribe: subscribe2, register: register2, canTrack } = useAnalytics();
   const { ready: shopifyAnalyticsReady } = register2("Internal_Shopify_Analytics");
   const { ready: customerPrivacyReady } = register2(
     "Internal_Shopify_CustomerPrivacy"
   );
-  const { checkoutDomain, storefrontAccessToken } = consent;
-  checkoutDomain && storefrontAccessToken && useCustomerPrivacy({
+  const analyticsReady = () => {
+    customerPrivacyReady();
+    onReady();
+  };
+  useCustomerPrivacy({
     ...consent,
-    onVisitorConsentCollected: customerPrivacyReady
+    onVisitorConsentCollected: analyticsReady,
+    onReady: () => {
+      if (!consent.withPrivacyBanner) {
+        analyticsReady();
+      }
+    }
   });
   useShopifyCookies({ hasUserConsent: canTrack() });
   useEffect(() => {
@@ -3920,7 +4014,7 @@ function logMissingConfig2(fieldName) {
 }
 function prepareBasePageViewPayload(payload) {
   const customerPrivacy = getCustomerPrivacyRequired();
-  const hasUserConsent = customerPrivacy.userCanBeTracked();
+  const hasUserConsent = customerPrivacy.analyticsProcessingAllowed();
   if (!payload?.shop?.shopId) {
     logMissingConfig2("shopId");
     return;
@@ -4210,8 +4304,10 @@ function CartAnalytics({
         updatedAt: cart.updatedAt
       })
     );
-    prevCart?.lines?.nodes?.forEach((prevLine) => {
-      const matchedLineId = cart?.lines.nodes.filter(
+    const previousCartLines = prevCart?.lines ? flattenConnection(prevCart?.lines) : [];
+    const currentCartLines = cart.lines ? flattenConnection(cart.lines) : [];
+    previousCartLines?.forEach((prevLine) => {
+      const matchedLineId = currentCartLines.filter(
         (line) => prevLine.id === line.id
       );
       if (matchedLineId?.length === 1) {
@@ -4236,8 +4332,8 @@ function CartAnalytics({
         });
       }
     });
-    cart?.lines?.nodes?.forEach((line) => {
-      const matchedLineId = prevCart?.lines.nodes.filter(
+    currentCartLines?.forEach((line) => {
+      const matchedLineId = previousCartLines.filter(
         (previousLine) => line.id === previousLine.id
       );
       if (!matchedLineId || matchedLineId.length === 0) {
@@ -4320,19 +4416,40 @@ function register(key) {
   };
 }
 function shopifyCanTrack() {
-  if (typeof window !== "undefined" && typeof window?.Shopify === "object" && typeof window?.Shopify?.customerPrivacy === "object" && typeof window?.Shopify?.customerPrivacy?.userCanBeTracked === "function") {
-    return window.Shopify.customerPrivacy.userCanBeTracked();
+  try {
+    return window.Shopify.customerPrivacy.analyticsProcessingAllowed();
+  } catch (e) {
   }
   return false;
 }
+function messageOnError(field) {
+  return `[h2:error:Analytics.Provider] - ${field} is required`;
+}
 function AnalyticsProvider({
   canTrack: customCanTrack,
   cart: currentCart,
   children,
   consent,
   customData = {},
-  shop: shopProp = null
+  shop: shopProp = null,
+  disableThrowOnError = false
 }) {
+  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(
@@ -4342,17 +4459,6 @@ function AnalyticsProvider({
   const [canTrack, setCanTrack] = useState(
     customCanTrack ? () => customCanTrack : () => shopifyCanTrack
   );
-  useEffect(() => {
-    if (customCanTrack)
-      return;
-    if (listenerSet.current)
-      return;
-    listenerSet.current = true;
-    document.addEventListener("visitorConsentCollected", () => {
-      setConsentLoaded(true);
-      setCanTrack(() => shopifyCanTrack);
-    });
-  }, [setConsentLoaded, setCanTrack, customCanTrack]);
   const value = useMemo(() => {
     return {
       canTrack,
@@ -4381,9 +4487,19 @@ function AnalyticsProvider({
   ]);
   return /* @__PURE__ */ jsxs(AnalyticsContext.Provider, { value, children: [
     children,
-    shop && /* @__PURE__ */ jsx(AnalyticsPageView, {}),
-    shop && currentCart && /* @__PURE__ */ jsx(CartAnalytics, { cart: currentCart, setCarts }),
-    shop && consent && /* @__PURE__ */ jsx(ShopifyAnalytics, { consent })
+    !!shop && /* @__PURE__ */ jsx(AnalyticsPageView, {}),
+    !!shop && !!currentCart && /* @__PURE__ */ jsx(CartAnalytics, { cart: currentCart, setCarts }),
+    !!shop && /* @__PURE__ */ jsx(
+      ShopifyAnalytics,
+      {
+        consent,
+        onReady: () => {
+          listenerSet.current = true;
+          setConsentLoaded(true);
+          setCanTrack(() => shopifyCanTrack);
+        }
+      }
+    )
   ] });
 }
 function useAnalytics() {