@shopify/hydrogen 2024.4.1 → 2024.4.2

package/dist/development/index.cjs

@@ -5,10 +5,12 @@ var react = require('react');
 var react$1 = require('@remix-run/react');
 var jsxRuntime = require('react/jsx-runtime');
 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;
@@ -482,12 +484,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() {
@@ -507,9 +517,6 @@ var warnOnce = (string) => {
   }
 };
 
-// src/version.ts
-var LIB_VERSION = "2024.4.1";
-
 // src/utils/graphql.ts
 function minifyQuery(string) {
   return string.replace(/\s*#.*$/gm, "").replace(/\s+/gm, " ").trim();
@@ -2295,12 +2302,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) {
@@ -2343,7 +2344,8 @@ async function refreshToken({
   customerAccountId,
   customerAccountUrl,
   httpsOrigin,
-  debugInfo
+  debugInfo,
+  exchangeForStorefrontCustomerAccessToken
 }) {
   const newBody = new URLSearchParams();
   const customerAccount = session.get(CUSTOMER_ACCOUNT_SESSION_KEY);
@@ -2399,9 +2401,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,
@@ -2410,7 +2414,8 @@ async function checkExpires({
   customerAccountId,
   customerAccountUrl,
   httpsOrigin,
-  debugInfo
+  debugInfo,
+  exchangeForStorefrontCustomerAccessToken
 }) {
   if (parseInt(expiresAt, 10) - 1e3 < (/* @__PURE__ */ new Date()).getTime()) {
     try {
@@ -2420,7 +2425,8 @@ async function checkExpires({
           customerAccountId,
           customerAccountUrl,
           httpsOrigin,
-          debugInfo
+          debugInfo,
+          exchangeForStorefrontCustomerAccessToken
         });
       await locks.refresh;
       delete locks.refresh;
@@ -2564,7 +2570,8 @@ function createCustomerAccountClient({
   waitUntil,
   authUrl,
   customAuthStatusHandler,
-  logErrors = true
+  logErrors = true,
+  unstableB2b = false
 }) {
   if (customerApiVersion !== DEFAULT_CUSTOMER_API_VERSION) {
     console.warn(
@@ -2587,7 +2594,7 @@ function createCustomerAccountClient({
   const customerAccountApiUrl = `${customerAccountUrl}/account/customer/api/${customerApiVersion}/graphql`;
   const locks = {};
   async function fetchCustomerAPI({
-    query,
+    query: query2,
     type,
     variables = {}
   }) {
@@ -2605,7 +2612,7 @@ function createCustomerAccountClient({
         Origin: httpsOrigin,
         Authorization: accessToken
       },
-      body: JSON.stringify({ query, variables })
+      body: JSON.stringify({ query: query2, variables })
     });
     logSubRequestEvent?.({
       url: customerAccountApiUrl,
@@ -2613,7 +2620,7 @@ function createCustomerAccountClient({
       response,
       waitUntil,
       stackInfo,
-      query,
+      query: query2,
       variables,
       ...getDebugHeaders(request)
     });
@@ -2622,7 +2629,7 @@ function createCustomerAccountClient({
       url: customerAccountApiUrl,
       response,
       type,
-      query,
+      query: query2,
       queryVariables: variables,
       errors: void 0,
       client: "customer"
@@ -2653,7 +2660,7 @@ function createCustomerAccountClient({
           clientOperation: `customerAccount.${errorOptions.type}`,
           requestId: response.headers.get("x-request-id"),
           queryVariables: variables,
-          query
+          query: query2
         })
       );
       return { ...APIresponse, ...errors && { errors: gqlErrors } };
@@ -2682,7 +2689,8 @@ function createCustomerAccountClient({
           waitUntil,
           stackInfo,
           ...getDebugHeaders(request)
-        }
+        },
+        exchangeForStorefrontCustomerAccessToken
       });
     } catch {
       return false;
@@ -2699,6 +2707,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);
@@ -2766,24 +2823,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");
@@ -2878,19 +2919,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) {
@@ -2991,10 +3032,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
       }
     });
@@ -3321,10 +3370,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
       }
     });
@@ -3592,7 +3650,8 @@ function createCartHandler(options) {
   const mutateOptions = {
     storefront,
     getCartId,
-    cartFragment: cartMutateFragment
+    cartFragment: cartMutateFragment,
+    customerAccount
   };
   const _cartCreate = cartCreateDefault(mutateOptions);
   const cartCreate = async function(...args) {
@@ -3819,7 +3878,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 = react.forwardRef(
@@ -3927,6 +3990,7 @@ function useCustomerPrivacy(props) {
   const {
     withPrivacyBanner = true,
     onVisitorConsentCollected,
+    onReady,
     ...consentConfig
   } = props;
   const loadedEvent = react.useRef(false);
@@ -3983,6 +4047,9 @@ function useCustomerPrivacy(props) {
         );
       };
     }
+    if (onReady && !withPrivacyBanner) {
+      onReady();
+    }
   }, [scriptStatus, withPrivacyBanner, consentConfig]);
   return;
 }
@@ -4003,17 +4070,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();
+      }
+    }
   });
   hydrogenReact.useShopifyCookies({ hasUserConsent: canTrack() });
   react.useEffect(() => {
@@ -4033,7 +4109,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;
@@ -4323,8 +4399,10 @@ function CartAnalytics({
         updatedAt: cart.updatedAt
       })
     );
-    prevCart?.lines?.nodes?.forEach((prevLine) => {
-      const matchedLineId = cart?.lines.nodes.filter(
+    const previousCartLines = prevCart?.lines ? hydrogenReact.flattenConnection(prevCart?.lines) : [];
+    const currentCartLines = cart.lines ? hydrogenReact.flattenConnection(cart.lines) : [];
+    previousCartLines?.forEach((prevLine) => {
+      const matchedLineId = currentCartLines.filter(
         (line) => prevLine.id === line.id
       );
       if (matchedLineId?.length === 1) {
@@ -4349,8 +4427,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) {
@@ -4433,19 +4511,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__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(
@@ -4455,17 +4554,6 @@ function AnalyticsProvider({
   const [canTrack, setCanTrack] = react.useState(
     customCanTrack ? () => customCanTrack : () => shopifyCanTrack
   );
-  react.useEffect(() => {
-    if (customCanTrack)
-      return;
-    if (listenerSet.current)
-      return;
-    listenerSet.current = true;
-    document.addEventListener("visitorConsentCollected", () => {
-      setConsentLoaded(true);
-      setCanTrack(() => shopifyCanTrack);
-    });
-  }, [setConsentLoaded, setCanTrack, customCanTrack]);
   const value = react.useMemo(() => {
     return {
       canTrack,
@@ -4494,9 +4582,19 @@ function AnalyticsProvider({
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsContext.Provider, { value, children: [
     children,
-    shop && /* @__PURE__ */ jsxRuntime.jsx(AnalyticsPageView, {}),
-    shop && currentCart && /* @__PURE__ */ jsxRuntime.jsx(CartAnalytics, { cart: currentCart, setCarts }),
-    shop && consent && /* @__PURE__ */ jsxRuntime.jsx(ShopifyAnalytics, { consent })
+    !!shop && /* @__PURE__ */ jsxRuntime.jsx(AnalyticsPageView, {}),
+    !!shop && !!currentCart && /* @__PURE__ */ jsxRuntime.jsx(CartAnalytics, { cart: currentCart, setCarts }),
+    !!shop && /* @__PURE__ */ jsxRuntime.jsx(
+      ShopifyAnalytics,
+      {
+        consent,
+        onReady: () => {
+          listenerSet.current = true;
+          setConsentLoaded(true);
+          setCanTrack(() => shopifyCanTrack);
+        }
+      }
+    )
   ] });
 }
 function useAnalytics() {