@shopify/hydrogen-react 2023.10.0 → 2024.1.0

package/dist/umd/hydrogen-react.dev.js

@@ -405,7 +405,7 @@
     }
     return ref.current.v;
   }
-  var __read = globalThis && globalThis.__read || function(o2, n2) {
+  var __read = function(o2, n2) {
     var m = typeof Symbol === "function" && o2[Symbol.iterator];
     if (!m)
       return o2;
@@ -796,7 +796,8 @@
   }
 `
   );
-  const SFAPI_VERSION = "2023-10";
+  const SFAPI_VERSION = "2024-01";
+  const isMockShop = (domain) => domain.includes("mock.shop");
   function createStorefrontClient(props) {
     const {
       storeDomain,
@@ -817,7 +818,7 @@ Received "${storeDomain}".`
 You may run into unexpected errors if these versions don't match. Received verion: "${storefrontApiVersion}"; expected version "${SFAPI_VERSION}"`
       );
     }
-    if (!privateStorefrontToken && !globalThis.document) {
+    if (!privateStorefrontToken && !globalThis.document && !isMockShop(storeDomain)) {
       warnOnce(
         `Using a private storefront token is recommended for server environments.
 Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details.`
@@ -828,7 +829,6 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         "You are attempting to use a private token in an environment where it can be easily accessed by anyone.\nThis is a security risk; please use the public token and the `publicStorefrontToken` prop"
       );
     }
-    const isMockShop = (domain) => domain.includes("mock.shop");
     const getShopifyDomain = (overrideProps) => {
       const domain = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
       return domain.includes("://") ? domain : `https://${domain}`;
@@ -2948,42 +2948,56 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     Color: "string",
     UnsignedInt64: "string"
   };
-  function ExternalVideo(props) {
-    const {
-      data,
-      options,
-      id = data.id,
-      frameBorder = "0",
-      allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
-      allowFullScreen = true,
-      loading = "lazy",
-      ...passthroughProps
-    } = props;
-    if (!data.embedUrl) {
-      throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
-    }
-    let finalUrl = data.embedUrl;
-    if (options) {
-      const urlObject = new URL(data.embedUrl);
-      for (const key of Object.keys(options)) {
-        urlObject.searchParams.set(key, options[key]);
+  const customerAccountApiCustomScalars = {
+    DateTime: "string",
+    Decimal: "string",
+    HTML: "string",
+    ISO8601DateTime: "string",
+    URL: "string",
+    UnsignedInt64: "string"
+  };
+  const ExternalVideo = React$1.forwardRef(
+    (props, ref) => {
+      const {
+        data,
+        options,
+        id = data.id,
+        frameBorder = "0",
+        allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen = true,
+        loading = "lazy",
+        ...passthroughProps
+      } = props;
+      if (!data.embedUrl) {
+        throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
+      }
+      let finalUrl = data.embedUrl;
+      if (options) {
+        const urlObject = new URL(data.embedUrl);
+        for (const [key, value] of Object.entries(options)) {
+          if (typeof value === "undefined") {
+            continue;
+          }
+          urlObject.searchParams.set(key, value.toString());
+        }
+        finalUrl = urlObject.toString();
       }
-      finalUrl = urlObject.toString();
+      return /* @__PURE__ */ React.createElement(
+        "iframe",
+        {
+          ...passthroughProps,
+          id: id ?? data.embedUrl,
+          title: data.alt ?? data.id ?? "external video",
+          frameBorder,
+          allow,
+          allowFullScreen,
+          src: finalUrl,
+          loading,
+          ref
+        }
+      );
     }
-    return /* @__PURE__ */ React.createElement(
-      "iframe",
-      {
-        ...passthroughProps,
-        id: id ?? data.embedUrl,
-        title: data.alt ?? data.id ?? "external video",
-        frameBorder,
-        allow,
-        allowFullScreen,
-        src: finalUrl,
-        loading
-      }
-    );
-  }
+  );
   const IMAGE_FRAGMENT = `#graphql
   fragment Image on Image {
     altText
@@ -3375,7 +3389,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     }, [url, stringifiedOptions, options]);
     return status;
   }
-  function Video(props) {
+  const Video = React$1.forwardRef((props, ref) => {
     var _a;
     const {
       data,
@@ -3402,7 +3416,8 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
           id,
           playsInline,
           controls,
-          poster: posterUrl
+          poster: posterUrl,
+          ref
         },
         data.sources.map((source) => {
           if (!((source == null ? void 0 : source.url) && (source == null ? void 0 : source.mimeType))) {
@@ -3420,7 +3435,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         })
       )
     );
-  }
+  });
   function ModelViewer(props) {
     var _a, _b, _c;
     const [modelViewer, setModelViewer] = React$1.useState(
@@ -3436,108 +3451,43 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         module: true
       }
     );
+    const hydrogenEventListener = {
+      error: passthroughProps.onError,
+      load: passthroughProps.onLoad,
+      preload: passthroughProps.onPreload,
+      "model-visibility": passthroughProps.onModelVisibility,
+      progress: passthroughProps.onProgress,
+      "ar-status": passthroughProps.onArStatus,
+      "ar-tracking": passthroughProps.onArTracking,
+      "quick-look-button-tapped": passthroughProps.onQuickLookButtonTapped,
+      "camera-change": passthroughProps.onCameraChange,
+      "environment-change": passthroughProps.onEnvironmentChange,
+      play: passthroughProps.onPlay,
+      pause: passthroughProps.onPause,
+      "scene-graph-ready": passthroughProps.onSceneGraphReady
+    };
     React$1.useEffect(() => {
       if (!modelViewer) {
         return;
       }
-      if (passthroughProps.onError)
-        modelViewer.addEventListener("error", passthroughProps.onError);
-      if (passthroughProps.onLoad)
-        modelViewer.addEventListener("load", passthroughProps.onLoad);
-      if (passthroughProps.onPreload)
-        modelViewer.addEventListener("preload", passthroughProps.onPreload);
-      if (passthroughProps.onModelVisibility)
-        modelViewer.addEventListener(
-          "model-visibility",
-          passthroughProps.onModelVisibility
-        );
-      if (passthroughProps.onProgress)
-        modelViewer.addEventListener("progress", passthroughProps.onProgress);
-      if (passthroughProps.onArStatus)
-        modelViewer.addEventListener("ar-status", passthroughProps.onArStatus);
-      if (passthroughProps.onArTracking)
-        modelViewer.addEventListener(
-          "ar-tracking",
-          passthroughProps.onArTracking
-        );
-      if (passthroughProps.onQuickLookButtonTapped)
-        modelViewer.addEventListener(
-          "quick-look-button-tapped",
-          passthroughProps.onQuickLookButtonTapped
-        );
-      if (passthroughProps.onCameraChange)
-        modelViewer.addEventListener(
-          "camera-change",
-          passthroughProps.onCameraChange
-        );
-      if (passthroughProps.onEnvironmentChange)
-        modelViewer.addEventListener(
-          "environment-change",
-          passthroughProps.onEnvironmentChange
-        );
-      if (passthroughProps.onPlay)
-        modelViewer.addEventListener("play", passthroughProps.onPlay);
-      if (passthroughProps.onPause)
-        modelViewer.addEventListener("ar-status", passthroughProps.onPause);
-      if (passthroughProps.onSceneGraphReady)
-        modelViewer.addEventListener(
-          "scene-graph-ready",
-          passthroughProps.onSceneGraphReady
-        );
+      Object.entries(hydrogenEventListener).forEach(
+        ([eventName, callbackFunc]) => {
+          if (callbackFunc) {
+            modelViewer.addEventListener(eventName, callbackFunc);
+          }
+        }
+      );
       return () => {
         if (modelViewer == null) {
           return;
         }
-        if (passthroughProps.onError)
-          modelViewer.removeEventListener("error", passthroughProps.onError);
-        if (passthroughProps.onLoad)
-          modelViewer.removeEventListener("load", passthroughProps.onLoad);
-        if (passthroughProps.onPreload)
-          modelViewer.removeEventListener("preload", passthroughProps.onPreload);
-        if (passthroughProps.onModelVisibility)
-          modelViewer.removeEventListener(
-            "model-visibility",
-            passthroughProps.onModelVisibility
-          );
-        if (passthroughProps.onProgress)
-          modelViewer.removeEventListener(
-            "progress",
-            passthroughProps.onProgress
-          );
-        if (passthroughProps.onArStatus)
-          modelViewer.removeEventListener(
-            "ar-status",
-            passthroughProps.onArStatus
-          );
-        if (passthroughProps.onArTracking)
-          modelViewer.removeEventListener(
-            "ar-tracking",
-            passthroughProps.onArTracking
-          );
-        if (passthroughProps.onQuickLookButtonTapped)
-          modelViewer.removeEventListener(
-            "quick-look-button-tapped",
-            passthroughProps.onQuickLookButtonTapped
-          );
-        if (passthroughProps.onCameraChange)
-          modelViewer.removeEventListener(
-            "camera-change",
-            passthroughProps.onCameraChange
-          );
-        if (passthroughProps.onEnvironmentChange)
-          modelViewer.removeEventListener(
-            "environment-change",
-            passthroughProps.onEnvironmentChange
-          );
-        if (passthroughProps.onPlay)
-          modelViewer.removeEventListener("play", passthroughProps.onPlay);
-        if (passthroughProps.onPause)
-          modelViewer.removeEventListener("ar-status", passthroughProps.onPause);
-        if (passthroughProps.onSceneGraphReady)
-          modelViewer.removeEventListener(
-            "scene-graph-ready",
-            passthroughProps.onSceneGraphReady
-          );
+        Object.entries(hydrogenEventListener).forEach(
+          ([eventName, callbackFunc]) => {
+            if (callbackFunc) {
+              modelViewer.removeEventListener(eventName, callbackFunc);
+            }
+          }
+        );
       };
     }, [
       modelViewer,
@@ -3832,7 +3782,11 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     return /* @__PURE__ */ React.createElement(Money, { ...passthroughProps, data: price });
   }
   const SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
+  function isChannel(channel) {
+    return channel === "headless" || channel === "hydrogen";
+  }
   function ShopPayButton({
+    channel,
     variantIds,
     className,
     variantIdsAndQuantities,
@@ -3843,6 +3797,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     const storeDomain = _storeDomain || (shop == null ? void 0 : shop.storeDomain);
     const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);
     let ids = [];
+    let channelAttribution;
     if (!storeDomain || storeDomain === defaultShopifyContext.storeDomain) {
       throw new Error(MissingStoreDomainErrorMessage);
     }
@@ -3852,6 +3807,13 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     if (!variantIds && !variantIdsAndQuantities) {
       throw new Error(MissingPropsErrorMessage);
     }
+    if (channel) {
+      if (isChannel(channel)) {
+        channelAttribution = channel;
+      } else {
+        throw new Error(InvalidChannelErrorMessage);
+      }
+    }
     if (variantIds) {
       ids = variantIds.reduce((prev, curr) => {
         const bareId = parseGid(curr).id;
@@ -3877,12 +3839,20 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     const style = width ? {
       "--shop-pay-button-width": width
     } : void 0;
-    return /* @__PURE__ */ React.createElement("div", { className, style }, shopPayLoadedStatus === "done" && /* @__PURE__ */ React.createElement("shop-pay-button", { "store-url": storeDomain, variants: ids.join(",") }));
+    return /* @__PURE__ */ React.createElement("div", { className, style }, shopPayLoadedStatus === "done" && /* @__PURE__ */ React.createElement(
+      "shop-pay-button",
+      {
+        ...channelAttribution ? { channel: channelAttribution } : {},
+        "store-url": storeDomain,
+        variants: ids.join(",")
+      }
+    ));
   }
   const MissingStoreDomainErrorMessage = 'You must pass a "storeDomain" prop to the "ShopPayButton" component, or wrap it in a "ShopifyProvider" component.';
   const InvalidPropsErrorMessage = `You must pass in "variantIds" in the form of ["gid://shopify/ProductVariant/1"]`;
   const MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
   const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;
+  const InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either "headless" or "hydrogen"`;
   const longTermLength = 60 * 60 * 24 * 360 * 1;
   const shortTermLength = 60 * 30;
   function useShopifyCookies(options) {
@@ -3944,6 +3914,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
   exports2.ShopifySalesChannel = ShopifySalesChannel;
   exports2.Video = Video;
   exports2.createStorefrontClient = createStorefrontClient;
+  exports2.customerAccountApiCustomScalars = customerAccountApiCustomScalars;
   exports2.flattenConnection = flattenConnection;
   exports2.getClientBrowserParameters = getClientBrowserParameters;
   exports2.getShopifyCookies = getShopifyCookies;