@shopify/hydrogen-react 2022.10.2 → 2022.10.3

package/README.md

@@ -59,6 +59,7 @@ const client = createStorefrontClient({
 
 export const getStorefrontApiUrl = client.getStorefrontApiUrl;
 export const getPrivateTokenHeaders = client.getPrivateTokenHeaders;
+export const getShopifyDomain = client.getShopifyDomain;
 ```
 
 You can then use this in your server-side queries. Here's an example of using it for [NextJS's `getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props):
@@ -84,6 +85,31 @@ export async function getServerSideProps() {
 }
 ```
 
+You can also use this to proxy the liquid online store:
+
+```ts
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import {getShopifyDomain} from '../shopify-client.js';
+
+export default function handler(req, res) {
+  fetch(getShopifyDomain() + '/products', {
+    headers: {
+      /** forward some of the headers from the original request **/
+    },
+  })
+    .then((resp) => resp.text())
+    .then((text) => res.status(200).send(text))
+    .catch((error) => {
+      console.error(
+        `Error proxying the online store: ${
+          error instanceof Error ? error.stack : error
+        }`
+      );
+      res.status(500).send('Server error occurred');
+    });
+}
+```
+
 ### (Optional) Set the content type for the Storefront client
 
 By default, the Storefront client sends the `"content-type": "application/json"` header. Use the `json` content type when you have GraphQL variables and when the body is an object with the following shape:
@@ -154,6 +180,29 @@ If you're having trouble getting it to work, then consult our [troubleshooting s
 
 Improve your development experience by adding strong typing to Storefront API responses. The following are some options for doing this.
 
+## GraphQL CodeGen
+
+To use GraphQL CodeGen, follow [their guide](https://the-guild.dev/graphql/codegen/docs/getting-started/installation) to get started. Then, when you have a `codegen.ts` file, you can modify the following lines in the codegen object to improve the CodgeGen experience:
+
+```ts
+import {storefrontApiCustomScalars} from '@shopify/hydrogen-react';
+
+const config: CodegenConfig = {
+  // Use the schema that's bundled with @shopify/hydrogen-react
+  schema: './node_modules/@shopify/hydrogen-react/storefront.schema.json',
+  generates: {
+    './gql/': {
+      preset: 'client',
+      plugins: [],
+      config: {
+        // Use the custom scalar definitions that @shopify/hydrogen-react provides to improve the types
+        scalars: storefrontApiCustomScalars,
+      },
+    },
+  },
+};
+```
+
 ### Use the `StorefrontApiResponseError` and `StorefrontApiResponseOk` helpers
 
 The following is an example:

package/dist/browser-dev/AddToCartButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\nexport interface AddToCartButtonProps {\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n  /** The ID of the variant. */\n  variantId?: string | null;\n  /** The item quantity. */\n  quantity?: number;\n  /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n  accessibleAddingToCartLabel?: string;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n  props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n  const [addingItem, setAddingItem] = useState<boolean>(false);\n  const {\n    variantId: explicitVariantId,\n    quantity = 1,\n    attributes,\n    sellingPlanId,\n    onClick,\n    children,\n    accessibleAddingToCartLabel,\n    ...passthroughProps\n  } = props;\n  const {status, linesAdd} = useCart();\n  const {selectedVariant} = useProduct();\n  const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n  const disabled =\n    explicitVariantId === null ||\n    variantId === '' ||\n    selectedVariant === null ||\n    addingItem ||\n    passthroughProps.disabled;\n\n  useEffect(() => {\n    if (addingItem && status === 'idle') {\n      setAddingItem(false);\n    }\n  }, [status, addingItem]);\n\n  const handleAddItem = useCallback(() => {\n    setAddingItem(true);\n    linesAdd([\n      {\n        quantity,\n        merchandiseId: variantId || '',\n        attributes,\n        sellingPlanId,\n      },\n    ]);\n  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n  return (\n    <>\n      <BaseButton\n        {...passthroughProps}\n        disabled={disabled}\n        onClick={onClick}\n        defaultOnClick={handleAddItem}\n      >\n        {children}\n      </BaseButton>\n      {accessibleAddingToCartLabel ? (\n        <p\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0',\n          }}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {addingItem ? accessibleAddingToCartLabel : null}\n        </p>\n      ) : null}\n    </>\n  );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}

package/dist/{prod → browser-dev}/ShopifyProvider.mjs

@@ -1,5 +1,6 @@
 import { createContext, useMemo, useContext } from "react";
 import { SFAPI_VERSION } from "./storefront-api-constants.mjs";
+import { getPublicTokenHeadersRaw } from "./storefront-client.mjs";
 import { jsx } from "react/jsx-runtime";
 const ShopifyContext = createContext({
   storeDomain: "test.myshopify.com",
@@ -11,7 +12,13 @@ const ShopifyContext = createContext({
   language: {
     isoCode: "EN"
   },
-  locale: "EN-US"
+  locale: "EN-US",
+  getStorefrontApiUrl() {
+    return "";
+  },
+  getPublicTokenHeaders() {
+    return {};
+  }
 });
 function ShopifyProvider({
   children,
@@ -23,10 +30,21 @@ function ShopifyProvider({
   if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {
     console.warn(`This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`);
   }
-  const finalConfig = useMemo(() => ({
-    ...shopifyConfig,
-    storeDomain: shopifyConfig.storeDomain.replace(/^https?:\/\//, "")
-  }), [shopifyConfig]);
+  const finalConfig = useMemo(() => {
+    const storeDomain = shopifyConfig.storeDomain.replace(/^https?:\/\//, "");
+    return {
+      ...shopifyConfig,
+      storeDomain,
+      getPublicTokenHeaders(overrideProps) {
+        var _a;
+        return getPublicTokenHeadersRaw(overrideProps.contentType, shopifyConfig.storefrontApiVersion, (_a = overrideProps.storefrontToken) != null ? _a : shopifyConfig.storefrontToken);
+      },
+      getStorefrontApiUrl(overrideProps) {
+        var _a, _b;
+        return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}/api/${(_b = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _b : shopifyConfig.storefrontApiVersion}/graphql.json`;
+      }
+    };
+  }, [shopifyConfig]);
   return /* @__PURE__ */ jsx(ShopifyContext.Provider, {
     value: finalConfig,
     children

package/dist/browser-dev/ShopifyProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShopifyProvider.mjs","sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode, Shop} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\nimport {getPublicTokenHeadersRaw} from './storefront-client.js';\n\nconst ShopifyContext = createContext<ShopifyContextValue>({\n  storeDomain: 'test.myshopify.com',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  country: {\n    isoCode: 'US',\n  },\n  language: {\n    isoCode: 'EN',\n  },\n  locale: 'EN-US',\n  getStorefrontApiUrl() {\n    return '';\n  },\n  getPublicTokenHeaders() {\n    return {};\n  },\n});\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n */\nexport function ShopifyProvider({\n  children,\n  shopifyConfig,\n}: {\n  children: ReactNode;\n  shopifyConfig: ShopifyContextProps;\n}) {\n  if (!shopifyConfig) {\n    throw new Error(\n      `The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(() => {\n    const storeDomain = shopifyConfig.storeDomain.replace(/^https?:\\/\\//, '');\n    return {\n      ...shopifyConfig,\n      storeDomain,\n      getPublicTokenHeaders(overrideProps) {\n        return getPublicTokenHeadersRaw(\n          overrideProps.contentType,\n          shopifyConfig.storefrontApiVersion,\n          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken\n        );\n      },\n      getStorefrontApiUrl(overrideProps) {\n        return `https://${overrideProps?.storeDomain ?? storeDomain}/api/${\n          overrideProps?.storefrontApiVersion ??\n          shopifyConfig.storefrontApiVersion\n        }/graphql.json`;\n      },\n    };\n  }, [shopifyConfig]);\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n */\nexport function useShop() {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen-UI components and hooks.\n */\nexport type ShopifyContextProps = {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). If a URL with a scheme (for example `https://`) is passed in, then the scheme is removed. */\n  storeDomain: Shop['primaryDomain']['host'];\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  country?: {\n    /**\n     * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.\n     */\n    isoCode: CountryCode;\n  };\n  language?: {\n    /**\n     * `ISO 369` language codes supported by Shopify.\n     */\n    isoCode: LanguageCode;\n  };\n  /**\n   * The locale string based on `country` and `language`.\n   */\n  locale?: string;\n};\n\nexport type ShopifyContextValue = ShopifyContextProps & {\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (props?: {\n    /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n    storeDomain?: string;\n    /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n    storefrontApiVersion?: string;\n  }) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `storefrontToken`\n   *\n   */\n  getPublicTokenHeaders: (props: {\n    /**\n     * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n     */\n    contentType: 'json' | 'graphql';\n    /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n    storefrontToken?: string;\n  }) => Record<string, string>;\n};\n"],"names":["ShopifyContext","createContext","storeDomain","storefrontToken","storefrontApiVersion","SFAPI_VERSION","country","isoCode","language","locale","getStorefrontApiUrl","getPublicTokenHeaders","ShopifyProvider","children","shopifyConfig","Error","console","warn","finalConfig","useMemo","replace","overrideProps","getPublicTokenHeadersRaw","contentType","_jsx","useShop","shopContext","useContext"],"mappings":";;;;AAKA,MAAMA,iBAAiBC,cAAmC;AAAA,EACxDC,aAAa;AAAA,EACbC,iBAAiB;AAAA,EACjBC,sBAAsBC;AAAAA,EACtBC,SAAS;AAAA,IACPC,SAAS;AAAA,EADF;AAAA,EAGTC,UAAU;AAAA,IACRD,SAAS;AAAA,EADD;AAAA,EAGVE,QAAQ;AAAA,EACRC,sBAAsB;AACb,WAAA;AAAA,EACR;AAAA,EACDC,wBAAwB;AACtB,WAAO;EACR;AAhBuD,CAAtB;AAsB7B,SAASC,gBAAgB;AAAA,EAC9BC;AAAAA,EACAC;AAF8B,GAM7B;AACD,MAAI,CAACA,eAAe;AACZ,UAAA,IAAIC,MACP,iEADG;AAAA,EAGP;AAEGD,MAAAA,cAAcV,yBAAyBC,eAAe;AACxDW,YAAQC,KACL,6EAA4EZ,yDAAyDS,cAAcV,0HADtJ;AAAA,EAGD;AAEKc,QAAAA,cAAcC,QAA6B,MAAM;AACrD,UAAMjB,cAAcY,cAAcZ,YAAYkB,QAAQ,gBAAgB,EAAlD;AACb,WAAA;AAAA,MACL,GAAGN;AAAAA,MACHZ;AAAAA,MACAS,sBAAsBU,eAAe;;AAC5BC,eAAAA,yBACLD,cAAcE,aACdT,cAAcV,uBACdiB,mBAAclB,oBAAdkB,YAAiCP,cAAcX,eAHlB;AAAA,MAKhC;AAAA,MACDO,oBAAoBW,eAAe;;AACjC,eAAQ,YAAUA,oDAAenB,gBAAfmB,YAA8BnB,oBAC9CmB,oDAAejB,yBAAfiB,YACAP,cAAcV;AAAAA,MAEjB;AAAA,IAAA;AAAA,EAfI,GAiBN,CAACU,aAAD,CAnBwB;AAsBzB,SAAAU,oBAAC,eAAe,UAAhB;AAAA,IAAyB,OAAON;AAAAA,IAAhC;AAAA,EAAA,CADF;AAKD;AAKM,SAASO,UAAU;AAClBC,QAAAA,cAAcC,WAAW3B,cAAD;AAC9B,MAAI,CAAC0B,aAAa;AACV,UAAA,IAAIX,MAAO,wDAAX;AAAA,EACP;AACMW,SAAAA;AACR;"}

package/dist/{prod → browser-dev}/cart-constants.mjs

@@ -1,5 +1,4 @@
 const CART_ID_STORAGE_KEY = "shopifyCartId";
-const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
 const SHOPIFY_STOREFRONT_ID_HEADER = "Shopify-Storefront-Id";
 const SHOPIFY_STOREFRONT_Y_HEADER = "Shopify-Storefront-Y";
 const SHOPIFY_STOREFRONT_S_HEADER = "Shopify-Storefront-S";
@@ -11,7 +10,6 @@ export {
   SHOPIFY_STOREFRONT_ID_HEADER,
   SHOPIFY_STOREFRONT_S_HEADER,
   SHOPIFY_STOREFRONT_Y_HEADER,
-  SHOPIFY_Y,
-  STOREFRONT_API_PUBLIC_TOKEN_HEADER
+  SHOPIFY_Y
 };
 //# sourceMappingURL=cart-constants.mjs.map

package/dist/browser-dev/cart-constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-constants.mjs","sources":["../../src/cart-constants.ts"],"sourcesContent":["export const CART_ID_STORAGE_KEY = 'shopifyCartId';\nexport const CART_COOKIE_TTL_DAYS = 14;\n\n// Needed for cart analytics within Shopify\nexport const SHOPIFY_STOREFRONT_ID_HEADER = 'Shopify-Storefront-Id';\nexport const SHOPIFY_STOREFRONT_Y_HEADER = 'Shopify-Storefront-Y';\nexport const SHOPIFY_STOREFRONT_S_HEADER = 'Shopify-Storefront-S';\nexport const SHOPIFY_Y = '_shopify_y';\nexport const SHOPIFY_S = '_shopify_s';\n"],"names":[],"mappings":"AAAO,MAAM,sBAAsB;AAI5B,MAAM,+BAA+B;AACrC,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,YAAY;AAClB,MAAM,YAAY;"}

package/dist/{dev → browser-dev}/cart-hooks.mjs

@@ -1,24 +1,20 @@
 import { useCallback } from "react";
 import { useShop } from "./ShopifyProvider.mjs";
-import { SHOPIFY_Y, SHOPIFY_S, STOREFRONT_API_PUBLIC_TOKEN_HEADER, SHOPIFY_STOREFRONT_ID_HEADER, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER } from "./cart-constants.mjs";
+import { SHOPIFY_STOREFRONT_ID_HEADER, SHOPIFY_Y, SHOPIFY_S, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER } from "./cart-constants.mjs";
 import { parse } from "worktop/cookie";
 function useCartFetch() {
   const {
-    storeDomain,
-    storefrontApiVersion,
-    storefrontToken,
-    storefrontId
+    storefrontId,
+    getPublicTokenHeaders,
+    getStorefrontApiUrl
   } = useShop();
   return useCallback(({
     query,
     variables
   }) => {
-    const headers = {
-      "Content-Type": "application/json",
-      "X-SDK-Variant": "hydrogen",
-      "X-SDK-Version": storefrontApiVersion,
-      [STOREFRONT_API_PUBLIC_TOKEN_HEADER]: storefrontToken
-    };
+    const headers = getPublicTokenHeaders({
+      contentType: "json"
+    });
     if (storefrontId) {
       headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
     }
@@ -27,7 +23,7 @@ function useCartFetch() {
       headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
       headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
     }
-    return fetch(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
+    return fetch(getStorefrontApiUrl(), {
       method: "POST",
       headers,
       body: JSON.stringify({
@@ -40,7 +36,7 @@ function useCartFetch() {
         errors: error.toString()
       };
     });
-  }, [storeDomain, storefrontApiVersion, storefrontToken, storefrontId]);
+  }, [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]);
 }
 export {
   useCartFetch

package/dist/browser-dev/cart-hooks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-hooks.mjs","sources":["../../src/cart-hooks.tsx"],"sourcesContent":["import {useState, useCallback} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport {CartInput, Cart as CartType} from './storefront-api-types.js';\nimport {CartCreate, defaultCartFragment} from './cart-queries.js';\nimport {Cart} from './cart-types.js';\nimport {\n  SHOPIFY_STOREFRONT_ID_HEADER,\n  SHOPIFY_STOREFRONT_Y_HEADER,\n  SHOPIFY_STOREFRONT_S_HEADER,\n  SHOPIFY_Y,\n  SHOPIFY_S,\n} from './cart-constants.js';\nimport {parse} from 'worktop/cookie';\nimport type {StorefrontApiResponseOkPartial} from './storefront-api-response.types.js';\n\nexport function useCartFetch() {\n  const {storefrontId, getPublicTokenHeaders, getStorefrontApiUrl} = useShop();\n\n  return useCallback(\n    <ReturnDataGeneric,>({\n      query,\n      variables,\n    }: {\n      query: string;\n      variables: Record<string, unknown>;\n    }): Promise<StorefrontApiResponseOkPartial<ReturnDataGeneric>> => {\n      const headers = getPublicTokenHeaders({contentType: 'json'});\n\n      if (storefrontId) {\n        headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;\n      }\n\n      // Find Shopify cookies\n      const cookieData = parse(document.cookie);\n      if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {\n        headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];\n        headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];\n      }\n\n      return fetch(getStorefrontApiUrl(), {\n        method: 'POST',\n        headers,\n        body: JSON.stringify({\n          query: query.toString(),\n          variables,\n        }),\n      })\n        .then((res) => res.json())\n        .catch((error) => {\n          return {\n            data: undefined,\n            errors: error.toString(),\n          };\n        });\n    },\n    [getPublicTokenHeaders, storefrontId, getStorefrontApiUrl]\n  );\n}\n\nexport function useInstantCheckout() {\n  const [cart, updateCart] = useState<Cart | undefined>();\n  const [checkoutUrl, updateCheckoutUrl] = useState<Cart['checkoutUrl']>();\n  const [error, updateError] = useState<string | undefined>();\n\n  const fetch = useCartFetch();\n\n  const createInstantCheckout = useCallback(\n    async (cartInput: CartInput) => {\n      const {data, errors} = await fetch<{\n        cartCreate: {cart: CartType};\n      }>({\n        query: CartCreate(defaultCartFragment),\n        variables: {\n          input: cartInput,\n        },\n      });\n\n      if (errors) {\n        updateError(errors.toString());\n        updateCart(undefined);\n        updateCheckoutUrl(undefined);\n      }\n\n      if (data?.cartCreate?.cart) {\n        const dataCart = data.cartCreate.cart;\n        updateCart({\n          ...dataCart,\n          lines: flattenConnection(dataCart.lines),\n          note: dataCart.note ?? undefined,\n        });\n        updateCheckoutUrl(dataCart.checkoutUrl);\n      }\n    },\n    [fetch]\n  );\n\n  return {cart, checkoutUrl, error, createInstantCheckout};\n}\n"],"names":["useCartFetch","storefrontId","getPublicTokenHeaders","getStorefrontApiUrl","useShop","useCallback","query","variables","headers","contentType","SHOPIFY_STOREFRONT_ID_HEADER","cookieData","parse","document","cookie","SHOPIFY_Y","SHOPIFY_S","SHOPIFY_STOREFRONT_Y_HEADER","SHOPIFY_STOREFRONT_S_HEADER","fetch","method","body","JSON","stringify","toString","then","res","json","catch","error","data","undefined","errors"],"mappings":";;;;AAgBO,SAASA,eAAe;AACvB,QAAA;AAAA,IAACC;AAAAA,IAAcC;AAAAA,IAAuBC;AAAAA,MAAuBC,QAAnE;AAEA,SAAOC,YACL,CAAqB;AAAA,IACnBC;AAAAA,IACAC;AAAAA,EAAAA,MAIgE;AAChE,UAAMC,UAAUN,sBAAsB;AAAA,MAACO,aAAa;AAAA,IAAA,CAAf;AAErC,QAAIR,cAAc;AAChBO,cAAQE,gCAAgCT;AAAAA,IACzC;AAGKU,UAAAA,aAAaC,MAAMC,SAASC,MAAV;AACpBH,QAAAA,WAAWI,cAAcJ,WAAWK,YAAY;AAClDR,cAAQS,+BAA+BN,WAAWI;AAClDP,cAAQU,+BAA+BP,WAAWK;AAAAA,IACnD;AAEMG,WAAAA,MAAMhB,uBAAuB;AAAA,MAClCiB,QAAQ;AAAA,MACRZ;AAAAA,MACAa,MAAMC,KAAKC,UAAU;AAAA,QACnBjB,OAAOA,MAAMkB,SADM;AAAA,QAEnBjB;AAAAA,MAAAA,CAFI;AAAA,IAAA,CAHI,EAQTkB,KAAMC,CAAAA,QAAQA,IAAIC,MARd,EASJC,MAAOC,CAAU,UAAA;AACT,aAAA;AAAA,QACLC,MAAMC;AAAAA,QACNC,QAAQH,MAAML,SAAN;AAAA,MAAA;AAAA,IAFH,CAVJ;AAAA,EAgBT,GAAA,CAACtB,uBAAuBD,cAAcE,mBAAtC,CArCgB;AAuCnB;"}

package/dist/browser-dev/codegen.helpers.mjs

@@ -0,0 +1,12 @@
+const storefrontApiCustomScalars = {
+  DateTime: "string",
+  Decimal: "string",
+  HTML: "string",
+  URL: "string",
+  Color: "string",
+  UnsignedInt64: "string"
+};
+export {
+  storefrontApiCustomScalars
+};
+//# sourceMappingURL=codegen.helpers.mjs.map

package/dist/browser-dev/codegen.helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"codegen.helpers.mjs","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */\nexport const storefrontApiCustomScalars = {\n  // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n  DateTime: 'string',\n  Decimal: 'string',\n  HTML: 'string',\n  URL: 'string',\n  Color: 'string',\n  UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;"}

package/dist/{prod → browser-dev}/index.mjs

@@ -2,6 +2,7 @@ import { AddToCartButton } from "./AddToCartButton.mjs";
 import { BuyNowButton } from "./BuyNowButton.mjs";
 import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
 import { CartProvider, useCart } from "./CartProvider.mjs";
+import { storefrontApiCustomScalars } from "./codegen.helpers.mjs";
 import { ExternalVideo } from "./ExternalVideo.mjs";
 import { flattenConnection } from "./flatten-connection.mjs";
 import { Image } from "./Image.mjs";
@@ -38,6 +39,7 @@ export {
   metafieldParser,
   parseMetafield,
   parseMetafieldValue,
+  storefrontApiCustomScalars,
   useCart,
   useMoney,
   useProduct,

package/dist/browser-dev/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/{dev → browser-dev}/storefront-client.mjs

@@ -22,6 +22,10 @@ function createStorefrontClient({
     );
   }
   return {
+    getShopifyDomain(overrideProps) {
+      var _a;
+      return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}.myshopify.com`;
+    },
     getStorefrontApiUrl(overrideProps) {
       var _a, _b;
       return `https://${(_a = overrideProps == null ? void 0 : overrideProps.storeDomain) != null ? _a : storeDomain}.myshopify.com/api/${(_b = overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) != null ? _b : storefrontApiVersion}/graphql.json`;
@@ -49,24 +53,32 @@ function createStorefrontClient({
       };
     },
     getPublicTokenHeaders(overrideProps) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (!publicStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.publicStorefrontToken)) {
         throw new Error(
           `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`
         );
       }
-      const finalContentType = (_a = overrideProps == null ? void 0 : overrideProps.contentType) != null ? _a : contentType;
-      return {
-        "content-type": finalContentType === "graphql" ? "application/graphql" : "application/json",
-        "X-SDK-Variant": "hydrogen-ui",
-        "X-SDK-Variant-Source": "react",
-        "X-SDK-Version": storefrontApiVersion,
-        "X-Shopify-Storefront-Access-Token": (_c = (_b = overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) != null ? _b : publicStorefrontToken) != null ? _c : ""
-      };
+      const finalContentType = (_b = (_a = overrideProps == null ? void 0 : overrideProps.contentType) != null ? _a : contentType) != null ? _b : "json";
+      return getPublicTokenHeadersRaw(
+        finalContentType,
+        storefrontApiVersion,
+        (_d = (_c = overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) != null ? _c : publicStorefrontToken) != null ? _d : ""
+      );
     }
   };
 }
+function getPublicTokenHeadersRaw(contentType, storefrontApiVersion, accessToken) {
+  return {
+    "content-type": contentType === "graphql" ? "application/graphql" : "application/json",
+    "X-SDK-Variant": "hydrogen-ui",
+    "X-SDK-Variant-Source": "react",
+    "X-SDK-Version": storefrontApiVersion,
+    "X-Shopify-Storefront-Access-Token": accessToken
+  };
+}
 export {
-  createStorefrontClient
+  createStorefrontClient,
+  getPublicTokenHeadersRaw
 };
 //# sourceMappingURL=storefront-client.mjs.map

package/dist/browser-dev/storefront-client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-client.mjs","sources":["../../src/storefront-client.ts"],"sourcesContent":["import {SFAPI_VERSION} from './storefront-api-constants.js';\n\n/**\n * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.\n *\n * When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop.\n */\nexport function createStorefrontClient({\n  storeDomain,\n  privateStorefrontToken,\n  publicStorefrontToken,\n  storefrontApiVersion,\n  contentType,\n}: StorefrontClientProps): StorefrontClientReturn {\n  if (storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen-UI is targeting. You may run into unexpected errors if these versions don't match. Received verion: \"${storefrontApiVersion}\"; expected version \"${SFAPI_VERSION}\"`\n    );\n  }\n\n  // only warn if not in a browser environment\n  if (__HYDROGEN_DEV__ && !privateStorefrontToken && !globalThis.document) {\n    console.warn(\n      `StorefrontClient: Using a private storefront token is recommended for server environments.  Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details. `\n    );\n  }\n\n  // only warn if in a browser environment and you're using the privateStorefrontToken\n  if (__HYDROGEN_DEV__ && privateStorefrontToken && globalThis) {\n    console.warn(\n      `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`\n    );\n  }\n\n  return {\n    getShopifyDomain(overrideProps) {\n      return `https://${\n        overrideProps?.storeDomain ?? storeDomain\n      }.myshopify.com`;\n    },\n    getStorefrontApiUrl(overrideProps) {\n      return `https://${\n        overrideProps?.storeDomain ?? storeDomain\n      }.myshopify.com/api/${\n        overrideProps?.storefrontApiVersion ?? storefrontApiVersion\n      }/graphql.json`;\n    },\n    getPrivateTokenHeaders(overrideProps) {\n      if (!privateStorefrontToken && !overrideProps?.privateStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`\n        );\n      }\n\n      if (__HYDROGEN_DEV__ && !overrideProps?.buyerIp) {\n        console.warn(\n          `StorefrontClient: it is recommended to pass in the 'buyerIp' property which improves analytics and data in the admin.`\n        );\n      }\n\n      const finalContentType = overrideProps?.contentType ?? contentType;\n\n      return {\n        // default to json\n        'content-type':\n          finalContentType === 'graphql'\n            ? 'application/graphql'\n            : 'application/json',\n        'X-SDK-Variant': 'hydrogen-ui',\n        'X-SDK-Variant-Source': 'react',\n        'X-SDK-Version': storefrontApiVersion,\n        'Shopify-Storefront-Private-Token':\n          overrideProps?.privateStorefrontToken ?? privateStorefrontToken ?? '',\n        ...(overrideProps?.buyerIp\n          ? {'Shopify-Storefront-Buyer-IP': overrideProps.buyerIp}\n          : {}),\n      };\n    },\n    getPublicTokenHeaders(overrideProps) {\n      if (!publicStorefrontToken && !overrideProps?.publicStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`\n        );\n      }\n\n      const finalContentType =\n        overrideProps?.contentType ?? contentType ?? 'json';\n\n      return getPublicTokenHeadersRaw(\n        finalContentType,\n        storefrontApiVersion,\n        overrideProps?.publicStorefrontToken ?? publicStorefrontToken ?? ''\n      );\n    },\n  };\n}\n\nexport function getPublicTokenHeadersRaw(\n  contentType: 'graphql' | 'json',\n  storefrontApiVersion: string,\n  accessToken: string\n) {\n  return {\n    // default to json\n    'content-type':\n      contentType === 'graphql' ? 'application/graphql' : 'application/json',\n    'X-SDK-Variant': 'hydrogen-ui',\n    'X-SDK-Variant-Source': 'react',\n    'X-SDK-Version': storefrontApiVersion,\n    'X-Shopify-Storefront-Access-Token': accessToken,\n  };\n}\n\ntype StorefrontClientProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details. */\n  privateStorefrontToken?: string;\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  publicStorefrontToken?: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  /**\n   * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n   *\n   * Can also be customized on a call-by-call basis by passing in `'contentType'` to both `getPrivateTokenHeaders({...})` and `getPublicTokenHeaders({...})`, for example: `getPublicTokenHeaders({contentType: 'graphql'})`\n   */\n  contentType?: 'json' | 'graphql';\n};\n\ntype OverrideTokenHeaderProps = Partial<\n  Pick<StorefrontClientProps, 'contentType'>\n>;\n\ntype StorefrontClientReturn = {\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (\n    props?: Partial<Pick<StorefrontClientProps, 'storeDomain'>>\n  ) => string;\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (\n    props?: Partial<\n      Pick<StorefrontClientProps, 'storeDomain' | 'storefrontApiVersion'>\n    >\n  ) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the private Server-to-Server token which reduces the chance of throttling but must not be exposed to clients. Server-side calls should prefer using this over `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPrivateTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `privateStorefrontToken`\n   * - `buyerIp`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPrivateTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'privateStorefrontToken'> & {\n        /**\n         * The client's IP address. Passing this to the Storefront API when using a server-to-server token will help improve your store's analytics data.\n         */\n        buyerIp?: string;\n      }\n  ) => Record<string, string>;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the public token which increases the chance of throttling but also can be exposed to clients. Server-side calls should prefer using `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `publicStorefrontToken`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPublicTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'publicStorefrontToken'>\n  ) => Record<string, string>;\n};\n"],"names":[],"mappings":";AAOO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkD;AAChD,MAAI,yBAAyB,eAAe;AAClC,YAAA;AAAA,MACN,4NAA4N,4CAA4C;AAAA,IAAA;AAAA,EAE5Q;AAGA,MAAwB,CAAC,0BAA0B,CAAC,WAAW,UAAU;AAC/D,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGI,MAAoB,0BAA0B,YAAY;AACpD,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAEO,SAAA;AAAA,IACL,iBAAiB,eAAe;;AACvB,aAAA,YACL,oDAAe,gBAAf,YAA8B;AAAA,IAElC;AAAA,IACA,oBAAoB,eAAe;;AACjC,aAAO,YACL,oDAAe,gBAAf,YAA8B,kCAE9B,oDAAe,yBAAf,YAAuC;AAAA,IAE3C;AAAA,IACA,uBAAuB,eAAe;;AACpC,UAAI,CAAC,0BAA0B,EAAC,+CAAe,yBAAwB;AACrE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEI,UAAoB,EAAC,+CAAe,UAAS;AACvC,gBAAA;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBAAmB,oDAAe,gBAAf,YAA8B;AAEhD,aAAA;AAAA,QAEL,gBACE,qBAAqB,YACjB,wBACA;AAAA,QACN,iBAAiB;AAAA,QACjB,wBAAwB;AAAA,QACxB,iBAAiB;AAAA,QACjB,qCACE,0DAAe,2BAAf,YAAyC,2BAAzC,YAAmE;AAAA,QACrE,IAAI,+CAAe,WACf,EAAC,+BAA+B,cAAc,QAAA,IAC9C,CAAC;AAAA,MAAA;AAAA,IAET;AAAA,IACA,sBAAsB,eAAe;;AACnC,UAAI,CAAC,yBAAyB,EAAC,+CAAe,wBAAuB;AACnE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBACJ,0DAAe,gBAAf,YAA8B,gBAA9B,YAA6C;AAExC,aAAA;AAAA,QACL;AAAA,QACA;AAAA,SACA,0DAAe,0BAAf,YAAwC,0BAAxC,YAAiE;AAAA,MAAA;AAAA,IAErE;AAAA,EAAA;AAEJ;AAEgB,SAAA,yBACd,aACA,sBACA,aACA;AACO,SAAA;AAAA,IAEL,gBACE,gBAAgB,YAAY,wBAAwB;AAAA,IACtD,iBAAiB;AAAA,IACjB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,qCAAqC;AAAA,EAAA;AAEzC;"}

package/dist/browser-prod/AddToCartButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\nexport interface AddToCartButtonProps {\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n  /** The ID of the variant. */\n  variantId?: string | null;\n  /** The item quantity. */\n  quantity?: number;\n  /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n  accessibleAddingToCartLabel?: string;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n  props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n  const [addingItem, setAddingItem] = useState<boolean>(false);\n  const {\n    variantId: explicitVariantId,\n    quantity = 1,\n    attributes,\n    sellingPlanId,\n    onClick,\n    children,\n    accessibleAddingToCartLabel,\n    ...passthroughProps\n  } = props;\n  const {status, linesAdd} = useCart();\n  const {selectedVariant} = useProduct();\n  const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n  const disabled =\n    explicitVariantId === null ||\n    variantId === '' ||\n    selectedVariant === null ||\n    addingItem ||\n    passthroughProps.disabled;\n\n  useEffect(() => {\n    if (addingItem && status === 'idle') {\n      setAddingItem(false);\n    }\n  }, [status, addingItem]);\n\n  const handleAddItem = useCallback(() => {\n    setAddingItem(true);\n    linesAdd([\n      {\n        quantity,\n        merchandiseId: variantId || '',\n        attributes,\n        sellingPlanId,\n      },\n    ]);\n  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n  return (\n    <>\n      <BaseButton\n        {...passthroughProps}\n        disabled={disabled}\n        onClick={onClick}\n        defaultOnClick={handleAddItem}\n      >\n        {children}\n      </BaseButton>\n      {accessibleAddingToCartLabel ? (\n        <p\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            borderWidth: '0',\n          }}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {addingItem ? accessibleAddingToCartLabel : null}\n        </p>\n      ) : null}\n    </>\n  );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}