@lime-bundles/react 2.4.0 → 3.0.0

package/dist/index.cjs

@@ -349,6 +349,20 @@ var { computePosition, emptyTypeAheadState, handleKey, pushTypeAheadChar } = imp
 var ITEM_HEIGHT_PX = 32;
 var LIST_PAD_Y = 8;
 var MAX_VISIBLE_ITEMS = 8;
+function findScrollableAncestor(el) {
+  const win = el.ownerDocument?.defaultView;
+  if (!win) return null;
+  let cur = el.parentElement;
+  while (cur && cur !== el.ownerDocument.body) {
+    const style = win.getComputedStyle(cur);
+    const overflowY = style.overflowY;
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "hidden") {
+      return cur;
+    }
+    cur = cur.parentElement;
+  }
+  return null;
+}
 function VariantDropdown({
   options,
   value,
@@ -398,6 +412,11 @@ function VariantDropdown({
     if (rect.width === 0) return;
     const visibleCount = Math.min(options.length || 1, MAX_VISIBLE_ITEMS);
     const desiredHeight = visibleCount * ITEM_HEIGHT_PX + LIST_PAD_Y;
+    const scrollable = findScrollableAncestor(trigger);
+    const clip = scrollable ? (() => {
+      const r = scrollable.getBoundingClientRect();
+      return { top: r.top, bottom: r.bottom };
+    })() : void 0;
     setPosition(
       computePosition({
         trigger: {
@@ -407,7 +426,8 @@ function VariantDropdown({
           width: rect.width
         },
         viewportHeight: window.innerHeight,
-        desiredHeight
+        desiredHeight,
+        clip
       })
     );
   }, [isOpen, options.length]);
@@ -641,8 +661,14 @@ function FixedBundle(props) {
   }, [result, onError]);
   const handleAddToCart = (0, import_react6.useCallback)(async () => {
     if (!bundle) return;
-    const bundleLines = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
-      const variant = selectedVariants[p.id] ?? p.variants.nodes.find((v) => v.availableForSale);
+    const bundleLines = bundle.products.filter(
+      (p) => p.variants.nodes.some(
+        (v) => (0, import_core8.isVariantFulfillable)(v, (0, import_core8.resolveBundleQty)(bundle, p.id, v.id))
+      )
+    ).map((p) => {
+      const variant = selectedVariants[p.id] ?? p.variants.nodes.find(
+        (v) => (0, import_core8.isVariantFulfillable)(v, (0, import_core8.resolveBundleQty)(bundle, p.id, v.id))
+      );
       return {
         productId: p.id,
         variant,
@@ -712,6 +738,7 @@ function FixedBundle(props) {
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__products", children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           FixedProductRow,
           {
+            bundle,
             product,
             currency,
             onVariantChange: handleVariantChange
@@ -733,7 +760,7 @@ function FixedBundle(props) {
     }
   );
 }
-function FixedProductRow({ product, currency, onVariantChange }) {
+function FixedProductRow({ bundle, product, currency, onVariantChange }) {
   const variants = product.variants.nodes;
   const optionNames = (0, import_react6.useMemo)(() => {
     const first = variants[0];
@@ -747,7 +774,9 @@ function FixedProductRow({ product, currency, onVariantChange }) {
   (0, import_react6.useEffect)(() => {
     onVariantChange(product.id, selectedVariant ?? null);
   }, [selectedVariant, product.id, onVariantChange]);
-  const displayVariant = selectedVariant ?? variants.find((v) => v.availableForSale) ?? variants[0];
+  const displayVariant = selectedVariant ?? variants.find(
+    (v) => (0, import_core8.isVariantFulfillable)(v, (0, import_core8.resolveBundleQty)(bundle, product.id, v.id))
+  ) ?? variants[0];
   const priceText = displayVariant ? (0, import_core8.formatMoney)(displayVariant.price.amount, currency) : (0, import_core8.formatMoney)(product.priceRange.minVariantPrice.amount, currency);
   const unitPriceText = displayVariant ? (0, import_core8.formatUnitPrice)(
     displayVariant.unitPrice,
@@ -755,6 +784,12 @@ function FixedProductRow({ product, currency, onVariantChange }) {
     currency
   ) : null;
   const thumbImage = displayVariant?.image ?? product.featuredImage;
+  const showLowStock = !!displayVariant && (0, import_core8.shouldShowLowStockBadge)(
+    displayVariant,
+    (0, import_core8.resolveBundleQty)(bundle, product.id, displayVariant.id),
+    bundle.widgetConfig.lowStockThreshold,
+    bundle.widgetConfig.showLowStockBadge
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle__product", part: "product", children: [
     thumbImage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "img",
@@ -769,6 +804,11 @@ function FixedProductRow({ product, currency, onVariantChange }) {
       /* @__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: priceText }),
       unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+      showLowStock && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
+        "Only ",
+        displayVariant.quantityAvailable,
+        " left"
+      ] }),
       showPicker && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
         const dropdownOptions = optionsFor(optionIndex).map((o) => ({
           value: o.value,
@@ -794,6 +834,9 @@ function FixedProductRow({ product, currency, onVariantChange }) {
 var import_react7 = require("react");
 var import_core9 = require("@lime-bundles/core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function ruleFor(bundle, productId) {
+  return bundle.productRules[productId] ?? import_core9.DEFAULT_PRODUCT_RULE;
+}
 function MixMatchBundle(props) {
   const {
     shopDomain,
@@ -837,56 +880,92 @@ function MixMatchBundle(props) {
       );
     }
   }, [result, onError]);
-  const totalQuantity = Array.from(selections.values()).reduce(
-    (sum, s) => sum + s.quantity,
-    0
+  const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
+  const distinctSelectedProducts = (0, import_react7.useMemo)(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const sel of selections.values()) {
+      if (sel.quantity > 0) ids.add(sel.productId);
+    }
+    return ids;
+  }, [selections]);
+  const totalQuantity = (0, import_react7.useMemo)(
+    () => Array.from(selections.values()).reduce((sum, s) => sum + s.quantity, 0),
+    [selections]
   );
-  const validation = bundle ? (0, import_core9.validateQuantity)(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
-  const toggleProduct = (0, import_react7.useCallback)(
+  const requiredPicks = bundle?.minQuantity ?? 0;
+  const meetsMinPicks = distinctSelectedProducts.size >= requiredPicks;
+  const valid = !!bundle && meetsMinPicks;
+  const remaining = Math.max(0, requiredPicks - distinctSelectedProducts.size);
+  const validationMessage = valid ? null : remaining > 0 ? `Pick ${remaining} more product${remaining === 1 ? "" : "s"}` : null;
+  const selectVariant = (0, import_react7.useCallback)(
     (productId, variant) => {
+      if (!bundle) return;
+      const rule = ruleFor(bundle, productId);
+      const maxAddable = (0, import_core9.maxAddableQuantity)(variant, rule.max, 0);
+      if (maxAddable < rule.min) return;
       setSelections((prev) => {
         const next = new Map(prev);
-        const key = `${productId}:${variant.id}`;
-        if (next.has(key)) {
-          next.delete(key);
-        } else {
-          const configuredQty = bundle ? (0, import_core9.resolveBundleQty)(bundle, productId, variant.id) : 1;
-          next.set(key, {
-            productId,
-            variantId: variant.id,
-            quantity: configuredQty
-          });
-        }
+        next.set(`${productId}:${variant.id}`, {
+          productId,
+          variantId: variant.id,
+          quantity: rule.min
+        });
         return next;
       });
     },
     [bundle]
   );
-  const updateQuantity = (0, import_react7.useCallback)(
-    (productId, variantId, quantity) => {
+  const deselect = (0, import_react7.useCallback)((productId, variantId) => {
+    setSelections((prev) => {
+      if (!prev.has(`${productId}:${variantId}`)) return prev;
+      const next = new Map(prev);
+      next.delete(`${productId}:${variantId}`);
+      return next;
+    });
+  }, []);
+  const setQuantity = (0, import_react7.useCallback)(
+    (productId, variant, quantity) => {
+      if (!bundle) return;
+      const rule = ruleFor(bundle, productId);
+      const maxAddable = (0, import_core9.maxAddableQuantity)(variant, rule.max, 0);
+      const key = `${productId}:${variant.id}`;
       setSelections((prev) => {
         const next = new Map(prev);
-        const key = `${productId}:${variantId}`;
-        if (quantity <= 0) {
+        if (quantity < rule.min || maxAddable < rule.min) {
           next.delete(key);
-        } else {
-          next.set(key, { productId, variantId, quantity });
+          return next;
         }
+        const clamped = Math.min(quantity, maxAddable);
+        next.set(key, {
+          productId,
+          variantId: variant.id,
+          quantity: clamped
+        });
         return next;
       });
     },
-    []
+    [bundle]
   );
   const handleAddToCart = (0, import_react7.useCallback)(async () => {
-    if (!bundle || !validation.valid) return;
-    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 }
-      ]
-    }));
+    if (!bundle || !valid) return;
+    const byVariant = /* @__PURE__ */ new Map();
+    for (const sel of selections.values()) {
+      if (sel.quantity <= 0) continue;
+      byVariant.set(
+        sel.variantId,
+        (byVariant.get(sel.variantId) ?? 0) + sel.quantity
+      );
+    }
+    const lines = Array.from(byVariant.entries()).map(
+      ([variantId, quantity]) => ({
+        merchandiseId: variantId,
+        quantity,
+        attributes: [
+          { key: "_lime_bundle_gid", value: bundle.id },
+          { key: "_lime_bundle_type", value: bundle.bundleType }
+        ]
+      })
+    );
     setAddingToCart(true);
     setCartError(null);
     try {
@@ -912,15 +991,7 @@ function MixMatchBundle(props) {
     } finally {
       setAddingToCart(false);
     }
-  }, [
-    bundle,
-    selections,
-    validation.valid,
-    onAddToCart,
-    onError,
-    trackAddToCart,
-    totalQuantity
-  ]);
+  }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
   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" }),
@@ -943,26 +1014,29 @@ function MixMatchBundle(props) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "lb-bundle__title", children: bundle.title }),
         bundle.discountLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__instructions", children: bundle.minQuantity && bundle.maxQuantity ? `Select ${bundle.minQuantity}\u2013${bundle.maxQuantity} items` : bundle.minQuantity ? `Select at least ${bundle.minQuantity} items` : bundle.maxQuantity ? `Select up to ${bundle.maxQuantity} items` : "Select your items" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__instructions", children: requiredPicks > 0 ? `Pick ${requiredPicks} product${requiredPicks === 1 ? "" : "s"}` : "Pick your products" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__products lb-bundle__products--selectable", children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           MixMatchProductRow,
           {
+            bundle,
             product,
             currency,
+            showStepper,
             selections,
-            onToggle: toggleProduct,
-            onUpdateQuantity: updateQuantity
+            onSelect: selectVariant,
+            onDeselect: deselect,
+            onSetQuantity: setQuantity
           },
           product.id
         )) }),
-        validation.message && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__validation", role: "status", children: validation.message }),
+        validationMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__validation", role: "status", children: validationMessage }),
         cartError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: addingToCart || !validation.valid,
+            disabled: addingToCart || !valid,
             "aria-busy": addingToCart,
             children: addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText ?? `Add ${totalQuantity} Items to Cart`
           }
@@ -972,11 +1046,14 @@ function MixMatchBundle(props) {
   );
 }
 function MixMatchProductRow({
+  bundle,
   product,
   currency,
+  showStepper,
   selections,
-  onToggle,
-  onUpdateQuantity
+  onSelect,
+  onDeselect,
+  onSetQuantity
 }) {
   const variants = product.variants.nodes;
   const optionNames = (0, import_react7.useMemo)(() => {
@@ -984,9 +1061,12 @@ function MixMatchProductRow({
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
+  const rule = ruleFor(bundle, product.id);
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const displayVariant = selectedVariant ?? variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
+  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core9.isVariantFulfillable)(v, rule.min)) ?? variants[0] ?? null;
   if (!displayVariant) return null;
+  const fulfillable = (0, import_core9.isVariantFulfillable)(displayVariant, rule.min);
+  const maxAddable = (0, import_core9.maxAddableQuantity)(displayVariant, rule.max, 0);
   const key = `${product.id}:${displayVariant.id}`;
   const selected = selections.get(key);
   const thumbImage = displayVariant.image ?? product.featuredImage;
@@ -1013,6 +1093,16 @@ function MixMatchProductRow({
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-price", children: (0, import_core9.formatMoney)(displayVariant.price.amount, currency) }),
           unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+          (0, import_core9.shouldShowLowStockBadge)(
+            displayVariant,
+            rule.min,
+            bundle.widgetConfig.lowStockThreshold,
+            bundle.widgetConfig.showLowStockBadge
+          ) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
+            "Only ",
+            displayVariant.quantityAvailable,
+            " left"
+          ] }),
           showPicker && !selected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
@@ -1031,39 +1121,58 @@ function MixMatchProductRow({
             );
           }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-actions", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-actions", children: selected ? showStepper ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               "aria-label": `Decrease ${product.title}`,
-              onClick: () => onUpdateQuantity(
+              onClick: () => onSetQuantity(
                 product.id,
-                displayVariant.id,
+                displayVariant,
                 selected.quantity - 1
               ),
+              disabled: selected.quantity <= rule.min,
               children: "\u2212"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: selected.quantity }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-live": "polite", children: selected.quantity }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               "aria-label": `Increase ${product.title}`,
-              onClick: () => onUpdateQuantity(
+              onClick: () => onSetQuantity(
                 product.id,
-                displayVariant.id,
+                displayVariant,
                 selected.quantity + 1
               ),
+              disabled: selected.quantity >= maxAddable,
               children: "+"
             }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              className: "lb-bundle__remove-btn",
+              "aria-label": `Remove ${product.title}`,
+              onClick: () => onDeselect(product.id, displayVariant.id),
+              children: "Remove"
+            }
           )
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            className: "lb-bundle__select-btn lb-bundle__select-btn--selected",
+            "aria-label": `Remove ${product.title}`,
+            onClick: () => onDeselect(product.id, displayVariant.id),
+            children: "Selected"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             className: "lb-bundle__select-btn",
-            onClick: () => onToggle(product.id, displayVariant),
-            disabled: !displayVariant.availableForSale,
-            children: displayVariant.availableForSale ? "Select" : "Sold out"
+            onClick: () => onSelect(product.id, displayVariant),
+            disabled: !fulfillable || maxAddable <= 0,
+            children: fulfillable && maxAddable > 0 ? "Select" : "Sold out"
           }
         ) })
       ]
@@ -1124,7 +1233,8 @@ function VolumeBundle(props) {
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const displayVariant = selectedVariant ?? variants.find((v) => v.availableForSale) ?? variants[0];
+  const minTierQty = bundle?.volumeTiers[0]?.minQuantity ?? 1;
+  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core10.isVariantFulfillable)(v, minTierQty)) ?? variants[0];
   const basePrice = displayVariant ? parseFloat(displayVariant.price.amount) : product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
   const currency = product?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const thumbImage = displayVariant?.image ?? product?.featuredImage ?? null;
@@ -1145,7 +1255,9 @@ function VolumeBundle(props) {
   const activeTier = bundle ? (0, import_core10.getActiveTier)(bundle.volumeTiers, quantity) : null;
   const handleAddToCart = (0, import_react8.useCallback)(async () => {
     if (!bundle || !product) return;
-    const variant = selectedVariant ?? product.variants.nodes.find((v) => v.availableForSale);
+    const variant = selectedVariant ?? product.variants.nodes.find(
+      (v) => (0, import_core10.isVariantFulfillable)(v, quantity)
+    );
     if (!variant) return;
     const lines = [
       {
@@ -1310,6 +1422,16 @@ function VolumeBundle(props) {
           ] })
         ] }),
         cartError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        bundle && displayVariant && (0, import_core10.shouldShowLowStockBadge)(
+          displayVariant,
+          minTierQty,
+          bundle.widgetConfig.lowStockThreshold,
+          bundle.widgetConfig.showLowStockBadge
+        ) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
+          "Only ",
+          displayVariant.quantityAvailable,
+          " left"
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {