@lime-bundles/react 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,136 +1,137 @@
 // src/components/FixedBundle.tsx
-import { useCallback as useCallback3 } from "react";
-import { formatMoney, calculateDiscount } from "@lime-bundles/core";
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+import {
+  formatMoney,
+  calculateDiscount
+} from "@lime-bundles/core";
 
 // src/hooks/useBundleData.ts
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
+import { injectCustomCss } from "@lime-bundles/core";
+
+// src/fetchBundleData.ts
 import {
   createStorefrontClient,
   BUNDLE_METAOBJECT_QUERY,
-  parseMetaobjectBundle
+  parseMetaobjectBundleStrict,
+  BundleParseError
 } from "@lime-bundles/core";
+async function fetchBundleData(options) {
+  const client = createStorefrontClient({
+    shopDomain: options.shopDomain,
+    accessToken: options.storefrontAccessToken,
+    buyerIp: options.buyerIp,
+    apiVersion: options.apiVersion
+  });
+  const data = await client.query(
+    BUNDLE_METAOBJECT_QUERY,
+    { id: options.bundleGid },
+    { signal: options.signal }
+  );
+  if (!data.metaobject) {
+    throw new BundleParseError(
+      `Bundle not found: ${options.bundleGid}`,
+      "not_found"
+    );
+  }
+  return parseMetaobjectBundleStrict(
+    data.metaobject.id,
+    data.metaobject.fields
+  );
+}
+
+// src/fetchShopCustomCss.ts
+import {
+  createStorefrontClient as createStorefrontClient2,
+  SHOP_CUSTOM_CSS_QUERY
+} from "@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 = createStorefrontClient2({
+      shopDomain: options.shopDomain,
+      accessToken: options.storefrontAccessToken,
+      buyerIp: options.buyerIp
+    });
+    const data = await client.query(
+      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] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const abortRef = useRef(null);
+  const [state, setState] = useState(INITIAL_STATE);
   useEffect(() => {
-    abortRef.current?.abort();
     const controller = new AbortController();
-    abortRef.current = controller;
-    setLoading(true);
-    setError(null);
-    const client = createStorefrontClient({
+    setState(INITIAL_STATE);
+    fetchBundleData({
       shopDomain: options.shopDomain,
-      accessToken: options.storefrontAccessToken
-    });
-    client.query(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 = 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;
+      injectCustomCss(options.shopDomain, css);
+    }).catch(() => {
     });
     return () => {
       controller.abort();
     };
-  }, [options.shopDomain, options.storefrontAccessToken, options.bundleGid]);
-  return { bundle, loading, error };
-}
-
-// src/hooks/useCart.ts
-import { useState as useState2, useCallback, useMemo } from "react";
-import {
-  detectCartApi,
-  createAjaxCartApi,
-  createStorefrontCartApi,
-  createStorefrontClient as createStorefrontClient2
-} from "@lime-bundles/core";
-function useCart(options) {
-  const [loading, setLoading] = useState2(false);
-  const [error, setError] = useState2(null);
-  const [lastResult, setLastResult] = useState2(null);
-  const cart = useMemo(() => {
-    const apiType = options.cartApi ?? detectCartApi();
-    if (apiType === "ajax") {
-      return createAjaxCartApi(options.bundleGid, options.bundleType);
-    }
-    const client = createStorefrontClient2({
-      shopDomain: options.shopDomain,
-      accessToken: options.storefrontAccessToken
-    });
-    return createStorefrontCartApi(
-      client,
-      options.bundleGid,
-      options.bundleType,
-      options.cartId
-    );
   }, [
     options.shopDomain,
     options.storefrontAccessToken,
-    options.bundleGid,
-    options.bundleType,
-    options.cartId,
-    options.cartApi
+    options.bundleGid
   ]);
-  const addToCart = 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
-import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useCallback as useCallback2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useMemo, useRef, useCallback, useState as useState2 } from "react";
 import {
   reportImpression,
   reportAddToCart,
   observeImpression
 } from "@lime-bundles/core";
 function useAnalytics(options) {
-  const impressionFiredRef = useRef2(false);
-  const [element, setElement] = useState3(null);
-  const elementRef = useCallback2((el) => {
+  const impressionFiredRef = useRef(false);
+  const [element, setElement] = useState2(null);
+  const elementRef = useCallback((el) => {
     setElement(el);
   }, []);
-  const config = useMemo2(
+  const config = useMemo(
     () => ({ shopDomain: options.shopDomain, appUrl: options.appUrl }),
     [options.shopDomain, options.appUrl]
   );
@@ -161,7 +162,7 @@ function useAnalytics(options) {
     options.abTestId,
     options.abVariant
   ]);
-  const trackAddToCart = useCallback2(
+  const trackAddToCart = useCallback(
     (event) => {
       if (options.enabled === false) return;
       reportAddToCart(config, {
@@ -193,27 +194,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}`,
@@ -221,37 +212,69 @@ function FixedBundle(props) {
     bundleType: "fixed",
     enabled: analyticsEnabled !== false
   });
-  const handleAddToCart = useCallback3(async () => {
+  const [addingToCart, setAddingToCart] = useState3(false);
+  const [cartError, setCartError] = useState3(null);
+  const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
+  useEffect3(() => {
+    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 = useCallback2(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 + calculateDiscount(price, bundle.discountConfig.discountType, bundle.discountConfig.discountValue);
+        return sum + 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__ */ jsxs("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
       /* @__PURE__ */ jsx("div", { className: "lb-skeleton lb-skeleton--title" }),
       /* @__PURE__ */ 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__ */ jsxs(
     "div",
@@ -284,9 +307,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"
           }
         )
       ]
@@ -295,7 +318,7 @@ function FixedBundle(props) {
 }
 
 // src/components/MixMatchBundle.tsx
-import { useState as useState4, useCallback as useCallback4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState4 } from "react";
 import {
   formatMoney as formatMoney2,
   validateQuantity
@@ -306,27 +329,17 @@ function MixMatchBundle(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: "mix_match",
-    cartId,
-    cartApi
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -334,13 +347,31 @@ function MixMatchBundle(props) {
     bundleType: "mix_match",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = useState4(/* @__PURE__ */ new Map());
+  const [selections, setSelections] = useState4(
+    /* @__PURE__ */ new Map()
+  );
+  const [addingToCart, setAddingToCart] = useState4(false);
+  const [cartError, setCartError] = useState4(null);
+  const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
+  useEffect4(() => {
+    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 ? validateQuantity(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
-  const toggleProduct = useCallback4(
+  const toggleProduct = useCallback3(
     (productId, variant) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -355,7 +386,7 @@ function MixMatchBundle(props) {
     },
     []
   );
-  const updateQuantity = useCallback4(
+  const updateQuantity = useCallback3(
     (productId, variantId, quantity) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -370,42 +401,59 @@ function MixMatchBundle(props) {
     },
     []
   );
-  const handleAddToCart = useCallback4(async () => {
+  const handleAddToCart = useCallback3(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__ */ jsxs2("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
       /* @__PURE__ */ jsx2("div", { className: "lb-skeleton lb-skeleton--title" }),
       /* @__PURE__ */ jsx2("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__ */ jsxs2(
     "div",
@@ -446,7 +494,11 @@ function MixMatchBundle(props) {
                     "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"
                     }
                   ),
@@ -455,7 +507,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: "+"
                     }
                   )
@@ -480,9 +536,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`
           }
         )
       ]
@@ -491,7 +547,7 @@ function MixMatchBundle(props) {
 }
 
 // src/components/VolumeBundle.tsx
-import { useState as useState5, useCallback as useCallback5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState5 } from "react";
 import {
   formatMoney as formatMoney3,
   calculateTierSavings,
@@ -503,27 +559,17 @@ function VolumeBundle(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: "volume",
-    cartId,
-    cartApi
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -532,39 +578,77 @@ function VolumeBundle(props) {
     enabled: analyticsEnabled !== false
   });
   const [quantity, setQuantity] = useState5(1);
+  const [addingToCart, setAddingToCart] = useState5(false);
+  const [cartError, setCartError] = useState5(null);
+  const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
+  useEffect5(() => {
+    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 ? calculateTierSavings(bundle.volumeTiers, basePrice, quantity) : [];
   const activeTier = bundle ? getActiveTier(bundle.volumeTiers, quantity) : null;
-  const handleAddToCart = useCallback5(async () => {
+  const handleAddToCart = useCallback4(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__ */ jsxs3("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
       /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--title" }),
       /* @__PURE__ */ jsx3("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__ */ jsxs3(
     "div",
     {
@@ -592,30 +676,38 @@ function VolumeBundle(props) {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx3("div", { className: "lb-bundle__tiers", role: "table", "aria-label": "Volume discounts", children: tierSavings.map((ts) => /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsx3(
           "div",
           {
-            className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
-            role: "row",
-            children: [
-              /* @__PURE__ */ jsxs3("span", { className: "lb-bundle__tier-quantity", role: "cell", children: [
-                ts.tier.minQuantity,
-                "+ items"
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "lb-bundle__tier-price", role: "cell", children: [
-                formatMoney3(ts.unitPrice, currency),
-                " each"
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
-                "Save ",
-                ts.savingsPercent.toFixed(0),
-                "%"
-              ] }),
-              ts.tier.label && /* @__PURE__ */ jsx3("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__ */ jsxs3(
+              "div",
+              {
+                className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
+                role: "row",
+                children: [
+                  /* @__PURE__ */ jsxs3("span", { className: "lb-bundle__tier-quantity", role: "cell", children: [
+                    ts.tier.minQuantity,
+                    "+ items"
+                  ] }),
+                  /* @__PURE__ */ jsxs3("span", { className: "lb-bundle__tier-price", role: "cell", children: [
+                    formatMoney3(ts.unitPrice, currency),
+                    " each"
+                  ] }),
+                  /* @__PURE__ */ jsxs3("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
+                    "Save ",
+                    ts.savingsPercent.toFixed(0),
+                    "%"
+                  ] }),
+                  ts.tier.label && /* @__PURE__ */ jsx3("span", { className: "lb-bundle__tier-label", role: "cell", children: ts.tier.label })
+                ]
+              },
+              ts.tier.minQuantity
+            ))
+          }
+        ),
         /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__quantity-selector", children: [
           /* @__PURE__ */ jsx3("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
           /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__quantity-control", children: [
@@ -657,21 +749,27 @@ 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
+import { BundleParseError as BundleParseError2, StorefrontApiError } from "@lime-bundles/core";
 export {
+  BundleParseError2 as BundleParseError,
   FixedBundle,
   MixMatchBundle,
+  StorefrontApiError,
   VolumeBundle,
+  fetchBundleData,
+  fetchShopCustomCss,
   useAnalytics,
-  useBundleData,
-  useCart
+  useBundleData
 };
 //# sourceMappingURL=index.js.map