@lime-bundles/react 2.2.0 → 2.3.1

package/dist/index.cjs

@@ -20,53 +20,56 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  BUNDLES_FOR_PRODUCT_QUERY: () => import_core10.BUNDLES_FOR_PRODUCT_QUERY,
-  BUNDLE_METAOBJECT_QUERY: () => import_core10.BUNDLE_METAOBJECT_QUERY,
-  BundleParseError: () => import_core9.BundleParseError,
+  BUNDLES_FOR_PRODUCT_QUERY: () => import_core11.BUNDLES_FOR_PRODUCT_QUERY,
+  BUNDLE_METAOBJECT_QUERY: () => import_core11.BUNDLE_METAOBJECT_QUERY,
+  BundleParseError: () => import_core10.BundleParseError,
   FixedBundle: () => FixedBundle,
   MixMatchBundle: () => MixMatchBundle,
-  SHOP_CUSTOM_CSS_QUERY: () => import_core10.SHOP_CUSTOM_CSS_QUERY,
-  StorefrontApiError: () => import_core9.StorefrontApiError,
+  SHOP_CUSTOM_CSS_QUERY: () => import_core11.SHOP_CUSTOM_CSS_QUERY,
+  StorefrontApiError: () => import_core10.StorefrontApiError,
   VolumeBundle: () => VolumeBundle,
-  WIDGET_CONFIG_DEFAULTS: () => import_core10.WIDGET_CONFIG_DEFAULTS,
-  applyABVariantB: () => import_core10.applyABVariantB,
-  applyWidgetConfigVars: () => import_core10.applyWidgetConfigVars,
-  calculateDiscount: () => import_core10.calculateDiscount,
-  calculateTierSavings: () => import_core10.calculateTierSavings,
-  computeBundleSaleCents: () => import_core10.computeBundleSaleCents,
-  computeFixedPricing: () => import_core10.computeFixedPricing,
-  createStorefrontClient: () => import_core10.createStorefrontClient,
+  WIDGET_CONFIG_DEFAULTS: () => import_core11.WIDGET_CONFIG_DEFAULTS,
+  applyABVariantB: () => import_core11.applyABVariantB,
+  applyWidgetConfigVars: () => import_core11.applyWidgetConfigVars,
+  calculateDiscount: () => import_core11.calculateDiscount,
+  calculateTierSavings: () => import_core11.calculateTierSavings,
+  computeBundleSaleCents: () => import_core11.computeBundleSaleCents,
+  computeFixedPricing: () => import_core11.computeFixedPricing,
+  createStorefrontClient: () => import_core11.createStorefrontClient,
   fetchBundleData: () => fetchBundleData,
-  fetchBundlesForProduct: () => import_core10.fetchBundlesForProduct,
+  fetchBundlesForProduct: () => import_core11.fetchBundlesForProduct,
   fetchShopCustomCss: () => fetchShopCustomCss,
-  formatCents: () => import_core10.formatCents,
-  formatCountdown: () => import_core10.formatCountdown,
-  formatMoney: () => import_core10.formatMoney,
-  getABTestAssignment: () => import_core10.getABTestAssignment,
-  getActiveTier: () => import_core10.getActiveTier,
-  hasConsent: () => import_core10.hasConsent,
-  injectCustomCss: () => import_core10.injectCustomCss,
-  mergeWidgetConfig: () => import_core10.mergeWidgetConfig,
-  observeImpression: () => import_core10.observeImpression,
-  parseCents: () => import_core10.parseCents,
-  parseMetaobjectBundle: () => import_core10.parseMetaobjectBundle,
-  parseMetaobjectBundleStrict: () => import_core10.parseMetaobjectBundleStrict,
-  percentageDiscountUnit: () => import_core10.percentageDiscountUnit,
-  reportAddToCart: () => import_core10.reportAddToCart,
-  reportImpression: () => import_core10.reportImpression,
-  sanitizeCustomCss: () => import_core10.sanitizeCustomCss,
-  setConsent: () => import_core10.setConsent,
-  transformImageUrl: () => import_core10.transformImageUrl,
+  formatCents: () => import_core11.formatCents,
+  formatCountdown: () => import_core11.formatCountdown,
+  formatMoney: () => import_core11.formatMoney,
+  formatUnitPrice: () => import_core11.formatUnitPrice,
+  getABTestAssignment: () => import_core11.getABTestAssignment,
+  getActiveTier: () => import_core11.getActiveTier,
+  hasConsent: () => import_core11.hasConsent,
+  injectCustomCss: () => import_core11.injectCustomCss,
+  mergeWidgetConfig: () => import_core11.mergeWidgetConfig,
+  observeImpression: () => import_core11.observeImpression,
+  parseCents: () => import_core11.parseCents,
+  parseMetaobjectBundle: () => import_core11.parseMetaobjectBundle,
+  parseMetaobjectBundleStrict: () => import_core11.parseMetaobjectBundleStrict,
+  percentageDiscountUnit: () => import_core11.percentageDiscountUnit,
+  reportAddToCart: () => import_core11.reportAddToCart,
+  reportImpression: () => import_core11.reportImpression,
+  sanitizeCustomCss: () => import_core11.sanitizeCustomCss,
+  setConsent: () => import_core11.setConsent,
+  thumbnailRatioVars: () => import_core11.thumbnailRatioVars,
+  transformImageUrl: () => import_core11.transformImageUrl,
   useAnalytics: () => useAnalytics,
   useBundleData: () => useBundleData,
   useBundlesForProduct: () => useBundlesForProduct,
-  validateQuantity: () => import_core10.validateQuantity
+  useWidgetConfigVars: () => useWidgetConfigVars,
+  validateQuantity: () => import_core11.validateQuantity
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/FixedBundle.tsx
-var import_react3 = require("react");
-var import_core5 = require("@lime-bundles/core");
+var import_react4 = require("react");
+var import_core6 = require("@lime-bundles/core");
 
 // src/hooks/useBundleData.ts
 var import_react = require("react");
@@ -238,6 +241,25 @@ function useAnalytics(options) {
   return { elementRef, trackAddToCart };
 }
 
+// src/hooks/useWidgetConfigVars.ts
+var import_react3 = require("react");
+var import_core5 = require("@lime-bundles/core");
+function useWidgetConfigVars(config) {
+  const elementRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (elementRef.current && config) {
+      (0, import_core5.applyWidgetConfigVars)(elementRef.current, config);
+    }
+  }, [config]);
+  return (0, import_react3.useCallback)(
+    (el) => {
+      elementRef.current = el;
+      if (el && config) (0, import_core5.applyWidgetConfigVars)(el, config);
+    },
+    [config]
+  );
+}
+
 // src/components/FixedBundle.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function FixedBundle(props) {
@@ -263,10 +285,11 @@ function FixedBundle(props) {
     bundleType: "fixed",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = (0, import_react3.useState)(false);
-  const [cartError, setCartError] = (0, import_react3.useState)(null);
+  const [addingToCart, setAddingToCart] = (0, import_react4.useState)(false);
+  const [cartError, setCartError] = (0, import_react4.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
-  (0, import_react3.useEffect)(() => {
+  const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
+  (0, import_react4.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -279,14 +302,14 @@ function FixedBundle(props) {
       );
     }
   }, [result, onError]);
-  const handleAddToCart = (0, import_react3.useCallback)(async () => {
+  const handleAddToCart = (0, import_react4.useCallback)(async () => {
     if (!bundle) return;
     const bundleLines = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
       const variant = p.variants.nodes.find((v) => v.availableForSale);
       return {
         productId: p.id,
         variant,
-        quantity: (0, import_core5.resolveBundleQty)(bundle, p.id, variant.id)
+        quantity: (0, import_core6.resolveBundleQty)(bundle, p.id, variant.id)
       };
     }).filter((line) => line.quantity > 0);
     if (bundleLines.length === 0) return;
@@ -304,7 +327,7 @@ function FixedBundle(props) {
       await onAddToCart(lines);
       const totalPrice = bundleLines.reduce((sum, line) => {
         const price = parseFloat(line.variant.price.amount);
-        const discounted = (0, import_core5.calculateDiscount)(
+        const discounted = (0, import_core6.calculateDiscount)(
           price,
           bundle.discountConfig.discountType,
           bundle.discountConfig.discountValue
@@ -339,7 +362,10 @@ function FixedBundle(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      ref: elementRef,
+      ref: (el) => {
+        elementRef(el);
+        setConfigVarsRef(el);
+      },
       className: `lb-bundle lb-bundle--fixed ${className ?? ""}`,
       role: "region",
       "aria-label": bundle.title,
@@ -348,11 +374,11 @@ function FixedBundle(props) {
         bundle.discountLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lb-bundle__products", children: bundle.products.map((product) => {
           const variant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
-          const priceText = variant ? (0, import_core5.formatMoney)(variant.price.amount, currency) : (0, import_core5.formatMoney)(
+          const priceText = variant ? (0, import_core6.formatMoney)(variant.price.amount, currency) : (0, import_core6.formatMoney)(
             product.priceRange.minVariantPrice.amount,
             currency
           );
-          const unitPriceText = variant ? (0, import_core5.formatUnitPrice)(
+          const unitPriceText = variant ? (0, import_core6.formatUnitPrice)(
             variant.unitPrice,
             variant.unitPriceMeasurement,
             currency
@@ -391,8 +417,8 @@ function FixedBundle(props) {
 }
 
 // src/components/MixMatchBundle.tsx
-var import_react4 = require("react");
-var import_core6 = require("@lime-bundles/core");
+var import_react5 = require("react");
+var import_core7 = require("@lime-bundles/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function MixMatchBundle(props) {
   const {
@@ -417,13 +443,14 @@ function MixMatchBundle(props) {
     bundleType: "mix_match",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = (0, import_react4.useState)(
+  const [selections, setSelections] = (0, import_react5.useState)(
     /* @__PURE__ */ new Map()
   );
-  const [addingToCart, setAddingToCart] = (0, import_react4.useState)(false);
-  const [cartError, setCartError] = (0, import_react4.useState)(null);
+  const [addingToCart, setAddingToCart] = (0, import_react5.useState)(false);
+  const [cartError, setCartError] = (0, import_react5.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
-  (0, import_react4.useEffect)(() => {
+  const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
+  (0, import_react5.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -440,8 +467,8 @@ function MixMatchBundle(props) {
     (sum, s) => sum + s.quantity,
     0
   );
-  const validation = bundle ? (0, import_core6.validateQuantity)(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
-  const toggleProduct = (0, import_react4.useCallback)(
+  const validation = bundle ? (0, import_core7.validateQuantity)(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
+  const toggleProduct = (0, import_react5.useCallback)(
     (productId, variant) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -449,7 +476,7 @@ function MixMatchBundle(props) {
         if (next.has(key)) {
           next.delete(key);
         } else {
-          const configuredQty = bundle ? (0, import_core6.resolveBundleQty)(bundle, productId, variant.id) : 1;
+          const configuredQty = bundle ? (0, import_core7.resolveBundleQty)(bundle, productId, variant.id) : 1;
           next.set(key, {
             productId,
             variantId: variant.id,
@@ -461,7 +488,7 @@ function MixMatchBundle(props) {
     },
     [bundle]
   );
-  const updateQuantity = (0, import_react4.useCallback)(
+  const updateQuantity = (0, import_react5.useCallback)(
     (productId, variantId, quantity) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -476,7 +503,7 @@ function MixMatchBundle(props) {
     },
     []
   );
-  const handleAddToCart = (0, import_react4.useCallback)(async () => {
+  const handleAddToCart = (0, import_react5.useCallback)(async () => {
     if (!bundle || !validation.valid) return;
     const lines = Array.from(selections.values()).map((s) => ({
       merchandiseId: s.variantId,
@@ -532,7 +559,10 @@ function MixMatchBundle(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
-      ref: elementRef,
+      ref: (el) => {
+        elementRef(el);
+        setConfigVarsRef(el);
+      },
       className: `lb-bundle lb-bundle--mix-match ${className ?? ""}`,
       role: "region",
       "aria-label": bundle.title,
@@ -561,9 +591,9 @@ 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_core6.formatMoney)(defaultVariant.price.amount, currency) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-price", children: (0, import_core7.formatMoney)(defaultVariant.price.amount, currency) }),
                   (() => {
-                    const unitPriceText = (0, import_core6.formatUnitPrice)(
+                    const unitPriceText = (0, import_core7.formatUnitPrice)(
                       defaultVariant.unitPrice,
                       defaultVariant.unitPriceMeasurement,
                       currency
@@ -629,8 +659,8 @@ function MixMatchBundle(props) {
 }
 
 // src/components/VolumeBundle.tsx
-var import_react5 = require("react");
-var import_core7 = require("@lime-bundles/core");
+var import_react6 = require("react");
+var import_core8 = require("@lime-bundles/core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function VolumeBundle(props) {
   const {
@@ -655,11 +685,12 @@ function VolumeBundle(props) {
     bundleType: "volume",
     enabled: analyticsEnabled !== false
   });
-  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 [quantity, setQuantity] = (0, import_react6.useState)(1);
+  const [addingToCart, setAddingToCart] = (0, import_react6.useState)(false);
+  const [cartError, setCartError] = (0, import_react6.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
-  (0, import_react5.useEffect)(() => {
+  const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
+  (0, import_react6.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -675,14 +706,14 @@ function VolumeBundle(props) {
   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_core7.calculateTierSavings)(
+  const tierSavings = bundle ? (0, import_core8.calculateTierSavings)(
     bundle.volumeTiers,
     basePrice,
     quantity,
     bundle.discountConfig.discountType
   ) : [];
-  const activeTier = bundle ? (0, import_core7.getActiveTier)(bundle.volumeTiers, quantity) : null;
-  const handleAddToCart = (0, import_react5.useCallback)(async () => {
+  const activeTier = bundle ? (0, import_core8.getActiveTier)(bundle.volumeTiers, quantity) : null;
+  const handleAddToCart = (0, import_react6.useCallback)(async () => {
     if (!bundle || !product) return;
     const variant = product.variants.nodes.find((v) => v.availableForSale);
     if (!variant) return;
@@ -735,7 +766,10 @@ function VolumeBundle(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
-      ref: elementRef,
+      ref: (el) => {
+        elementRef(el);
+        setConfigVarsRef(el);
+      },
       className: `lb-bundle lb-bundle--volume ${className ?? ""}`,
       role: "region",
       "aria-label": bundle.title,
@@ -754,12 +788,12 @@ 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_core7.formatMoney)(basePrice, currency),
+              (0, import_core8.formatMoney)(basePrice, currency),
               " each"
             ] }),
             (() => {
               const variant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
-              const unitPriceText = variant ? (0, import_core7.formatUnitPrice)(
+              const unitPriceText = variant ? (0, import_core8.formatUnitPrice)(
                 variant.unitPrice,
                 variant.unitPriceMeasurement,
                 currency
@@ -785,7 +819,7 @@ function VolumeBundle(props) {
                     "+ items"
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-price", role: "cell", children: [
-                    (0, import_core7.formatMoney)(ts.unitPrice, currency),
+                    (0, import_core8.formatMoney)(ts.unitPrice, currency),
                     " each"
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
@@ -851,21 +885,21 @@ function VolumeBundle(props) {
 }
 
 // src/hooks/useBundlesForProduct.ts
-var import_react6 = require("react");
-var import_core8 = require("@lime-bundles/core");
+var import_react7 = require("react");
+var import_core9 = require("@lime-bundles/core");
 var INITIAL_STATE2 = {
   status: "loading",
   bundles: null,
   error: null
 };
 function useBundlesForProduct(options) {
-  const [state, setState] = (0, import_react6.useState)(
+  const [state, setState] = (0, import_react7.useState)(
     INITIAL_STATE2
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const controller = new AbortController();
     setState(INITIAL_STATE2);
-    (0, import_core8.fetchBundlesForProduct)({
+    (0, import_core9.fetchBundlesForProduct)({
       shopDomain: options.shopDomain,
       storefrontAccessToken: options.storefrontAccessToken,
       productHandle: options.productHandle,
@@ -888,7 +922,7 @@ function useBundlesForProduct(options) {
       signal: controller.signal
     }).then((css) => {
       if (controller.signal.aborted) return;
-      (0, import_core8.injectCustomCss)(options.shopDomain, css);
+      (0, import_core9.injectCustomCss)(options.shopDomain, css);
     }).catch(() => {
     });
     return () => {
@@ -904,8 +938,8 @@ function useBundlesForProduct(options) {
 }
 
 // src/index.ts
-var import_core9 = require("@lime-bundles/core");
 var import_core10 = require("@lime-bundles/core");
+var import_core11 = require("@lime-bundles/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BUNDLES_FOR_PRODUCT_QUERY,
@@ -930,6 +964,7 @@ var import_core10 = require("@lime-bundles/core");
   formatCents,
   formatCountdown,
   formatMoney,
+  formatUnitPrice,
   getABTestAssignment,
   getActiveTier,
   hasConsent,
@@ -944,10 +979,12 @@ var import_core10 = require("@lime-bundles/core");
   reportImpression,
   sanitizeCustomCss,
   setConsent,
+  thumbnailRatioVars,
   transformImageUrl,
   useAnalytics,
   useBundleData,
   useBundlesForProduct,
+  useWidgetConfigVars,
   validateQuantity
 });
 //# sourceMappingURL=index.cjs.map