@lime-bundles/react 0.1.1 → 1.0.0

package/dist/index.cjs

@@ -18,151 +18,153 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
+  BundleParseError: () => import_core8.BundleParseError,
   FixedBundle: () => FixedBundle,
   MixMatchBundle: () => MixMatchBundle,
+  StorefrontApiError: () => import_core8.StorefrontApiError,
   VolumeBundle: () => VolumeBundle,
+  fetchBundleData: () => fetchBundleData,
+  fetchShopCustomCss: () => fetchShopCustomCss,
   useAnalytics: () => useAnalytics,
-  useBundleData: () => useBundleData,
-  useCart: () => useCart
+  useBundleData: () => useBundleData
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/components/FixedBundle.tsx
-var import_react4 = require("react");
-var import_core4 = require("@lime-bundles/core");
+var import_react3 = require("react");
+var import_core5 = require("@lime-bundles/core");
 
 // src/hooks/useBundleData.ts
 var import_react = require("react");
+var import_core3 = require("@lime-bundles/core");
+
+// src/fetchBundleData.ts
 var import_core = require("@lime-bundles/core");
+async function fetchBundleData(options) {
+  const client = (0, import_core.createStorefrontClient)({
+    shopDomain: options.shopDomain,
+    accessToken: options.storefrontAccessToken,
+    buyerIp: options.buyerIp,
+    apiVersion: options.apiVersion
+  });
+  const data = await client.query(
+    import_core.BUNDLE_METAOBJECT_QUERY,
+    { id: options.bundleGid },
+    { signal: options.signal }
+  );
+  if (!data.metaobject) {
+    throw new import_core.BundleParseError(
+      `Bundle not found: ${options.bundleGid}`,
+      "not_found"
+    );
+  }
+  return (0, import_core.parseMetaobjectBundleStrict)(
+    data.metaobject.id,
+    data.metaobject.fields
+  );
+}
+
+// src/fetchShopCustomCss.ts
+var import_core2 = require("@lime-bundles/core");
+var cache = /* @__PURE__ */ new Map();
+async function fetchShopCustomCss(options) {
+  const cached = cache.get(options.shopDomain);
+  if (cached) return cached;
+  const promise = (async () => {
+    const client = (0, import_core2.createStorefrontClient)({
+      shopDomain: options.shopDomain,
+      accessToken: options.storefrontAccessToken,
+      buyerIp: options.buyerIp
+    });
+    const data = await client.query(
+      import_core2.SHOP_CUSTOM_CSS_QUERY,
+      void 0,
+      { signal: options.signal }
+    );
+    return data.shop?.metafield?.value ?? null;
+  })();
+  cache.set(options.shopDomain, promise);
+  promise.catch(() => {
+    if (cache.get(options.shopDomain) === promise) {
+      cache.delete(options.shopDomain);
+    }
+  });
+  return promise;
+}
+
+// src/hooks/useBundleData.ts
+var INITIAL_STATE = {
+  status: "loading",
+  bundle: null,
+  error: null
+};
 function useBundleData(options) {
-  const [bundle, setBundle] = (0, import_react.useState)(null);
-  const [loading, setLoading] = (0, import_react.useState)(true);
-  const [error, setError] = (0, import_react.useState)(null);
-  const abortRef = (0, import_react.useRef)(null);
+  const [state, setState] = (0, import_react.useState)(INITIAL_STATE);
   (0, import_react.useEffect)(() => {
-    abortRef.current?.abort();
     const controller = new AbortController();
-    abortRef.current = controller;
-    setLoading(true);
-    setError(null);
-    const client = (0, import_core.createStorefrontClient)({
+    setState(INITIAL_STATE);
+    fetchBundleData({
       shopDomain: options.shopDomain,
-      accessToken: options.storefrontAccessToken
-    });
-    client.query(import_core.BUNDLE_METAOBJECT_QUERY, {
-      id: options.bundleGid
-    }).then((data) => {
+      storefrontAccessToken: options.storefrontAccessToken,
+      bundleGid: options.bundleGid,
+      signal: controller.signal
+    }).then((bundle) => {
       if (controller.signal.aborted) return;
-      if (!data.metaobject) {
-        setError("Bundle not found");
-        setBundle(null);
-      } else {
-        const parsed = (0, import_core.parseMetaobjectBundle)(
-          data.metaobject.id,
-          data.metaobject.fields
-        );
-        if (parsed) {
-          setBundle(parsed);
-        } else {
-          setError("Bundle is not active or has expired");
-          setBundle(null);
-        }
-      }
-      setLoading(false);
+      setState({ status: "success", bundle, error: null });
     }).catch((err) => {
       if (controller.signal.aborted) return;
-      setError(err instanceof Error ? err.message : "Failed to load bundle");
-      setLoading(false);
+      setState({
+        status: "error",
+        bundle: null,
+        error: err instanceof Error ? err : new Error(String(err))
+      });
+    });
+    fetchShopCustomCss({
+      shopDomain: options.shopDomain,
+      storefrontAccessToken: options.storefrontAccessToken,
+      signal: controller.signal
+    }).then((css) => {
+      if (controller.signal.aborted) return;
+      (0, import_core3.injectCustomCss)(options.shopDomain, css);
+    }).catch(() => {
     });
     return () => {
       controller.abort();
     };
-  }, [options.shopDomain, options.storefrontAccessToken, options.bundleGid]);
-  return { bundle, loading, error };
-}
-
-// src/hooks/useCart.ts
-var import_react2 = require("react");
-var import_core2 = require("@lime-bundles/core");
-function useCart(options) {
-  const [loading, setLoading] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const [lastResult, setLastResult] = (0, import_react2.useState)(null);
-  const cart = (0, import_react2.useMemo)(() => {
-    const apiType = options.cartApi ?? (0, import_core2.detectCartApi)();
-    if (apiType === "ajax") {
-      return (0, import_core2.createAjaxCartApi)(options.bundleGid, options.bundleType);
-    }
-    const client = (0, import_core2.createStorefrontClient)({
-      shopDomain: options.shopDomain,
-      accessToken: options.storefrontAccessToken
-    });
-    return (0, import_core2.createStorefrontCartApi)(
-      client,
-      options.bundleGid,
-      options.bundleType,
-      options.cartId
-    );
   }, [
     options.shopDomain,
     options.storefrontAccessToken,
-    options.bundleGid,
-    options.bundleType,
-    options.cartId,
-    options.cartApi
+    options.bundleGid
   ]);
-  const addToCart = (0, import_react2.useCallback)(
-    async (items) => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await cart.addLines(items);
-        setLastResult(result);
-        if (!result.success) {
-          setError(result.error ?? "Failed to add to cart");
-        }
-        return result;
-      } catch (err) {
-        const message = err instanceof Error ? err.message : "Failed to add to cart";
-        setError(message);
-        const result = { success: false, error: message };
-        setLastResult(result);
-        return result;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [cart]
-  );
-  return { addToCart, loading, error, lastResult };
+  return state;
 }
 
 // src/hooks/useAnalytics.ts
-var import_react3 = require("react");
-var import_core3 = require("@lime-bundles/core");
+var import_react2 = require("react");
+var import_core4 = require("@lime-bundles/core");
 function useAnalytics(options) {
-  const impressionFiredRef = (0, import_react3.useRef)(false);
-  const [element, setElement] = (0, import_react3.useState)(null);
-  const elementRef = (0, import_react3.useCallback)((el) => {
+  const impressionFiredRef = (0, import_react2.useRef)(false);
+  const [element, setElement] = (0, import_react2.useState)(null);
+  const elementRef = (0, import_react2.useCallback)((el) => {
     setElement(el);
   }, []);
-  const config = (0, import_react3.useMemo)(
+  const config = (0, import_react2.useMemo)(
     () => ({ shopDomain: options.shopDomain, appUrl: options.appUrl }),
     [options.shopDomain, options.appUrl]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     impressionFiredRef.current = false;
   }, [options.bundleGid, options.abVariant]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (options.enabled === false) return;
     if (impressionFiredRef.current) return;
     if (!element) return;
-    const cleanup = (0, import_core3.observeImpression)(element, () => {
+    const cleanup = (0, import_core4.observeImpression)(element, () => {
       if (impressionFiredRef.current) return;
       impressionFiredRef.current = true;
-      (0, import_core3.reportImpression)(config, {
+      (0, import_core4.reportImpression)(config, {
         bundleGid: options.bundleGid,
         bundleType: options.bundleType,
         abTestId: options.abTestId,
@@ -179,10 +181,10 @@ function useAnalytics(options) {
     options.abTestId,
     options.abVariant
   ]);
-  const trackAddToCart = (0, import_react3.useCallback)(
+  const trackAddToCart = (0, import_react2.useCallback)(
     (event) => {
       if (options.enabled === false) return;
-      (0, import_core3.reportAddToCart)(config, {
+      (0, import_core4.reportAddToCart)(config, {
         bundleGid: options.bundleGid,
         bundleType: options.bundleType,
         productId: event.productId,
@@ -211,27 +213,17 @@ function FixedBundle(props) {
     shopDomain,
     storefrontAccessToken,
     bundleGid,
-    cartId,
-    cartApi,
     appUrl,
     analyticsEnabled,
     onAddToCart,
     onError,
     className
   } = props;
-  const { bundle, loading, error: loadError } = useBundleData({
+  const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
     bundleGid
   });
-  const { addToCart, loading: cartLoading, error: cartError } = useCart({
-    shopDomain,
-    storefrontAccessToken,
-    bundleGid,
-    bundleType: "fixed",
-    cartId,
-    cartApi
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -239,37 +231,69 @@ function FixedBundle(props) {
     bundleType: "fixed",
     enabled: analyticsEnabled !== false
   });
-  const handleAddToCart = (0, import_react4.useCallback)(async () => {
+  const [addingToCart, setAddingToCart] = (0, import_react3.useState)(false);
+  const [cartError, setCartError] = (0, import_react3.useState)(null);
+  const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
+  (0, import_react3.useEffect)(() => {
+    if (result.status === "error") {
+      onError?.(result.error);
+      return;
+    }
+    if (result.status === "success" && result.bundle.bundleType !== "fixed") {
+      onError?.(
+        new Error(
+          `FixedBundle: expected bundleType="fixed", got "${result.bundle.bundleType}"`
+        )
+      );
+    }
+  }, [result, onError]);
+  const handleAddToCart = (0, import_react3.useCallback)(async () => {
     if (!bundle) return;
-    const items = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
+    const lines = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
       const variant = p.variants.nodes.find((v) => v.availableForSale);
-      return { variantId: variant.id, quantity: 1 };
+      return {
+        merchandiseId: variant.id,
+        quantity: 1,
+        attributes: [
+          { key: "_lime_bundle_gid", value: bundle.id },
+          { key: "_lime_bundle_type", value: bundle.bundleType }
+        ]
+      };
     });
-    if (items.length === 0) return;
-    const result = await addToCart(items);
-    if (result.success) {
+    if (lines.length === 0) return;
+    setAddingToCart(true);
+    setCartError(null);
+    try {
+      await onAddToCart(lines);
       const totalPrice = bundle.products.reduce((sum, p) => {
         const price = parseFloat(p.priceRange.minVariantPrice.amount);
-        return sum + (0, import_core4.calculateDiscount)(price, bundle.discountConfig.discountType, bundle.discountConfig.discountValue);
+        return sum + (0, import_core5.calculateDiscount)(
+          price,
+          bundle.discountConfig.discountType,
+          bundle.discountConfig.discountValue
+        );
       }, 0);
       trackAddToCart({
         productId: bundle.products[0]?.id ?? "",
         quantity: 1,
         totalPrice: Math.round(totalPrice * 100) / 100
       });
-      onAddToCart?.(items);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setCartError(error.message);
+      onError?.(error);
+    } finally {
+      setAddingToCart(false);
     }
-  }, [bundle, addToCart, trackAddToCart, onAddToCart]);
-  if (loading) {
+  }, [bundle, onAddToCart, onError, trackAddToCart]);
+  if (result.status === "loading") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
-  if (loadError || !bundle) {
-    if (onError) onError(loadError ?? "Bundle not found");
-    return null;
-  }
+  if (result.status === "error") return null;
+  if (!bundle) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
@@ -293,7 +317,7 @@ function FixedBundle(props) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lb-bundle__product-info", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "lb-bundle__product-price", children: (0, import_core4.formatMoney)(product.priceRange.minVariantPrice.amount, currency) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "lb-bundle__product-price", children: (0, import_core5.formatMoney)(product.priceRange.minVariantPrice.amount, currency) })
           ] })
         ] }, product.id)) }),
         cartError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
@@ -302,9 +326,9 @@ function FixedBundle(props) {
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: cartLoading,
-            "aria-busy": cartLoading,
-            children: cartLoading ? "Adding..." : bundle.widgetConfig.ctaText ?? "Add Bundle to Cart"
+            disabled: addingToCart,
+            "aria-busy": addingToCart,
+            children: addingToCart ? "Adding..." : bundle.widgetConfig.ctaText ?? "Add Bundle to Cart"
           }
         )
       ]
@@ -313,35 +337,25 @@ function FixedBundle(props) {
 }
 
 // src/components/MixMatchBundle.tsx
-var import_react5 = require("react");
-var import_core5 = require("@lime-bundles/core");
+var import_react4 = require("react");
+var import_core6 = require("@lime-bundles/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function MixMatchBundle(props) {
   const {
     shopDomain,
     storefrontAccessToken,
     bundleGid,
-    cartId,
-    cartApi,
     appUrl,
     analyticsEnabled,
     onAddToCart,
     onError,
     className
   } = props;
-  const { bundle, loading, error: loadError } = useBundleData({
+  const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
     bundleGid
   });
-  const { addToCart, loading: cartLoading, error: cartError } = useCart({
-    shopDomain,
-    storefrontAccessToken,
-    bundleGid,
-    bundleType: "mix_match",
-    cartId,
-    cartApi
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -349,13 +363,31 @@ function MixMatchBundle(props) {
     bundleType: "mix_match",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = (0, import_react5.useState)(/* @__PURE__ */ new Map());
+  const [selections, setSelections] = (0, import_react4.useState)(
+    /* @__PURE__ */ new Map()
+  );
+  const [addingToCart, setAddingToCart] = (0, import_react4.useState)(false);
+  const [cartError, setCartError] = (0, import_react4.useState)(null);
+  const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
+  (0, import_react4.useEffect)(() => {
+    if (result.status === "error") {
+      onError?.(result.error);
+      return;
+    }
+    if (result.status === "success" && result.bundle.bundleType !== "mix_match") {
+      onError?.(
+        new Error(
+          `MixMatchBundle: expected bundleType="mix_match", got "${result.bundle.bundleType}"`
+        )
+      );
+    }
+  }, [result, onError]);
   const totalQuantity = Array.from(selections.values()).reduce(
     (sum, s) => sum + s.quantity,
     0
   );
-  const validation = bundle ? (0, import_core5.validateQuantity)(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
-  const toggleProduct = (0, import_react5.useCallback)(
+  const validation = bundle ? (0, import_core6.validateQuantity)(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
+  const toggleProduct = (0, import_react4.useCallback)(
     (productId, variant) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -370,7 +402,7 @@ function MixMatchBundle(props) {
     },
     []
   );
-  const updateQuantity = (0, import_react5.useCallback)(
+  const updateQuantity = (0, import_react4.useCallback)(
     (productId, variantId, quantity) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -385,42 +417,59 @@ function MixMatchBundle(props) {
     },
     []
   );
-  const handleAddToCart = (0, import_react5.useCallback)(async () => {
+  const handleAddToCart = (0, import_react4.useCallback)(async () => {
     if (!bundle || !validation.valid) return;
-    const items = Array.from(selections.values()).map((s) => ({
-      variantId: s.variantId,
-      quantity: s.quantity
+    const lines = Array.from(selections.values()).map((s) => ({
+      merchandiseId: s.variantId,
+      quantity: s.quantity,
+      attributes: [
+        { key: "_lime_bundle_gid", value: bundle.id },
+        { key: "_lime_bundle_type", value: bundle.bundleType }
+      ]
     }));
-    const result = await addToCart(items);
-    if (result.success) {
-      const totalPrice = items.reduce((sum, item) => {
+    setAddingToCart(true);
+    setCartError(null);
+    try {
+      await onAddToCart(lines);
+      const totalPrice = lines.reduce((sum, line) => {
         const product = bundle.products.find(
-          (p) => p.variants.nodes.some((v) => v.id === item.variantId)
+          (p) => p.variants.nodes.some((v) => v.id === line.merchandiseId)
         );
         const variant = product?.variants.nodes.find(
-          (v) => v.id === item.variantId
+          (v) => v.id === line.merchandiseId
         );
-        return sum + parseFloat(variant?.price.amount ?? "0") * item.quantity;
+        return sum + parseFloat(variant?.price.amount ?? "0") * line.quantity;
       }, 0);
       trackAddToCart({
         productId: bundle.products[0]?.id ?? "",
         quantity: totalQuantity,
         totalPrice: Math.round(totalPrice * 100) / 100
       });
-      onAddToCart?.(items);
       setSelections(/* @__PURE__ */ new Map());
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setCartError(error.message);
+      onError?.(error);
+    } finally {
+      setAddingToCart(false);
     }
-  }, [bundle, selections, validation.valid, addToCart, trackAddToCart, totalQuantity, onAddToCart]);
-  if (loading) {
+  }, [
+    bundle,
+    selections,
+    validation.valid,
+    onAddToCart,
+    onError,
+    trackAddToCart,
+    totalQuantity
+  ]);
+  if (result.status === "loading") {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
-  if (loadError || !bundle) {
-    if (onError) onError(loadError ?? "Bundle not found");
-    return null;
-  }
+  if (result.status === "error") return null;
+  if (!bundle) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
@@ -454,14 +503,18 @@ function MixMatchBundle(props) {
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle__product-info", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-price", children: (0, import_core5.formatMoney)(defaultVariant.price.amount, currency) })
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-price", children: (0, import_core6.formatMoney)(defaultVariant.price.amount, currency) })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__product-actions", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "button",
                     {
                       "aria-label": `Decrease ${product.title}`,
-                      onClick: () => updateQuantity(product.id, defaultVariant.id, selected.quantity - 1),
+                      onClick: () => updateQuantity(
+                        product.id,
+                        defaultVariant.id,
+                        selected.quantity - 1
+                      ),
                       children: "\u2212"
                     }
                   ),
@@ -470,7 +523,11 @@ function MixMatchBundle(props) {
                     "button",
                     {
                       "aria-label": `Increase ${product.title}`,
-                      onClick: () => updateQuantity(product.id, defaultVariant.id, selected.quantity + 1),
+                      onClick: () => updateQuantity(
+                        product.id,
+                        defaultVariant.id,
+                        selected.quantity + 1
+                      ),
                       children: "+"
                     }
                   )
@@ -495,9 +552,9 @@ function MixMatchBundle(props) {
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: cartLoading || !validation.valid,
-            "aria-busy": cartLoading,
-            children: cartLoading ? "Adding..." : bundle.widgetConfig.ctaText ?? `Add ${totalQuantity} Items to Cart`
+            disabled: addingToCart || !validation.valid,
+            "aria-busy": addingToCart,
+            children: addingToCart ? "Adding..." : bundle.widgetConfig.ctaText ?? `Add ${totalQuantity} Items to Cart`
           }
         )
       ]
@@ -506,35 +563,25 @@ function MixMatchBundle(props) {
 }
 
 // src/components/VolumeBundle.tsx
-var import_react6 = require("react");
-var import_core6 = require("@lime-bundles/core");
+var import_react5 = require("react");
+var import_core7 = require("@lime-bundles/core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function VolumeBundle(props) {
   const {
     shopDomain,
     storefrontAccessToken,
     bundleGid,
-    cartId,
-    cartApi,
     appUrl,
     analyticsEnabled,
     onAddToCart,
     onError,
     className
   } = props;
-  const { bundle, loading, error: loadError } = useBundleData({
+  const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
     bundleGid
   });
-  const { addToCart, loading: cartLoading, error: cartError } = useCart({
-    shopDomain,
-    storefrontAccessToken,
-    bundleGid,
-    bundleType: "volume",
-    cartId,
-    cartApi
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -542,40 +589,78 @@ function VolumeBundle(props) {
     bundleType: "volume",
     enabled: analyticsEnabled !== false
   });
-  const [quantity, setQuantity] = (0, import_react6.useState)(1);
+  const [quantity, setQuantity] = (0, import_react5.useState)(1);
+  const [addingToCart, setAddingToCart] = (0, import_react5.useState)(false);
+  const [cartError, setCartError] = (0, import_react5.useState)(null);
+  const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
+  (0, import_react5.useEffect)(() => {
+    if (result.status === "error") {
+      onError?.(result.error);
+      return;
+    }
+    if (result.status === "success" && result.bundle.bundleType !== "volume") {
+      onError?.(
+        new Error(
+          `VolumeBundle: expected bundleType="volume", got "${result.bundle.bundleType}"`
+        )
+      );
+    }
+  }, [result, onError]);
   const product = bundle?.products[0];
   const basePrice = product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
   const currency = product?.priceRange.minVariantPrice.currencyCode ?? "USD";
-  const tierSavings = bundle ? (0, import_core6.calculateTierSavings)(bundle.volumeTiers, basePrice, quantity) : [];
-  const activeTier = bundle ? (0, import_core6.getActiveTier)(bundle.volumeTiers, quantity) : null;
-  const handleAddToCart = (0, import_react6.useCallback)(async () => {
+  const tierSavings = bundle ? (0, import_core7.calculateTierSavings)(bundle.volumeTiers, basePrice, quantity) : [];
+  const activeTier = bundle ? (0, import_core7.getActiveTier)(bundle.volumeTiers, quantity) : null;
+  const handleAddToCart = (0, import_react5.useCallback)(async () => {
     if (!bundle || !product) return;
     const variant = product.variants.nodes.find((v) => v.availableForSale);
     if (!variant) return;
-    const items = [
-      { variantId: variant.id, quantity }
+    const lines = [
+      {
+        merchandiseId: variant.id,
+        quantity,
+        attributes: [
+          { key: "_lime_bundle_gid", value: bundle.id },
+          { key: "_lime_bundle_type", value: bundle.bundleType }
+        ]
+      }
     ];
-    const result = await addToCart(items);
-    if (result.success) {
+    setAddingToCart(true);
+    setCartError(null);
+    try {
+      await onAddToCart(lines);
       const unitPrice = activeTier ? basePrice * (1 - activeTier.discountValue / 100) : basePrice;
       trackAddToCart({
         productId: product.id,
         quantity,
         totalPrice: Math.round(unitPrice * quantity * 100) / 100
       });
-      onAddToCart?.(items);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setCartError(error.message);
+      onError?.(error);
+    } finally {
+      setAddingToCart(false);
     }
-  }, [bundle, product, quantity, activeTier, basePrice, addToCart, trackAddToCart, onAddToCart]);
-  if (loading) {
+  }, [
+    bundle,
+    product,
+    quantity,
+    activeTier,
+    basePrice,
+    onAddToCart,
+    onError,
+    trackAddToCart
+  ]);
+  if (result.status === "loading") {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--tiers" })
     ] });
   }
-  if (loadError || !bundle || !product) {
-    if (onError) onError(loadError ?? "Bundle not found");
-    return null;
-  }
+  if (result.status === "error") return null;
+  if (!bundle) return null;
+  if (!product) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
@@ -598,35 +683,43 @@ function VolumeBundle(props) {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__product-info", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "lb-bundle__product-price", children: [
-              (0, import_core6.formatMoney)(basePrice, currency),
+              (0, import_core7.formatMoney)(basePrice, currency),
               " each"
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__tiers", role: "table", "aria-label": "Volume discounts", children: tierSavings.map((ts) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
-            className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
-            role: "row",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-quantity", role: "cell", children: [
-                ts.tier.minQuantity,
-                "+ items"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-price", role: "cell", children: [
-                (0, import_core6.formatMoney)(ts.unitPrice, currency),
-                " each"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
-                "Save ",
-                ts.savingsPercent.toFixed(0),
-                "%"
-              ] }),
-              ts.tier.label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle__tier-label", role: "cell", children: ts.tier.label })
-            ]
-          },
-          ts.tier.minQuantity
-        )) }),
+            className: "lb-bundle__tiers",
+            role: "table",
+            "aria-label": "Volume discounts",
+            children: tierSavings.map((ts) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
+                role: "row",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-quantity", role: "cell", children: [
+                    ts.tier.minQuantity,
+                    "+ items"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-price", role: "cell", children: [
+                    (0, import_core7.formatMoney)(ts.unitPrice, currency),
+                    " each"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
+                    "Save ",
+                    ts.savingsPercent.toFixed(0),
+                    "%"
+                  ] }),
+                  ts.tier.label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle__tier-label", role: "cell", children: ts.tier.label })
+                ]
+              },
+              ts.tier.minQuantity
+            ))
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__quantity-selector", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
@@ -668,22 +761,28 @@ function VolumeBundle(props) {
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: cartLoading,
-            "aria-busy": cartLoading,
-            children: cartLoading ? "Adding..." : bundle.widgetConfig.ctaText ?? `Add ${quantity} to Cart`
+            disabled: addingToCart,
+            "aria-busy": addingToCart,
+            children: addingToCart ? "Adding..." : bundle.widgetConfig.ctaText ?? `Add ${quantity} to Cart`
           }
         )
       ]
     }
   );
 }
+
+// src/index.ts
+var import_core8 = require("@lime-bundles/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BundleParseError,
   FixedBundle,
   MixMatchBundle,
+  StorefrontApiError,
   VolumeBundle,
+  fetchBundleData,
+  fetchShopCustomCss,
   useAnalytics,
-  useBundleData,
-  useCart
+  useBundleData
 });
 //# sourceMappingURL=index.cjs.map