@shopify/hydrogen-react 2023.10.0 → 2023.10.1

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

@@ -797,6 +797,7 @@
 `
   );
   const SFAPI_VERSION = "2023-10";
+  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}`;
@@ -3832,7 +3832,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 +3847,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 +3857,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 +3889,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) {