@lime-bundles/react 2.4.0 → 3.0.0

package/dist/index.js

@@ -4,7 +4,9 @@ import {
   formatMoney,
   formatUnitPrice,
   calculateDiscount,
-  resolveBundleQty
+  resolveBundleQty,
+  isVariantFulfillable,
+  shouldShowLowStockBadge
 } from "@lime-bundles/core";
 
 // src/hooks/useBundleData.ts
@@ -302,6 +304,20 @@ var { computePosition, emptyTypeAheadState, handleKey, pushTypeAheadChar } = dro
 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,
@@ -351,6 +367,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: {
@@ -360,7 +381,8 @@ function VariantDropdown({
           width: rect.width
         },
         viewportHeight: window.innerHeight,
-        desiredHeight
+        desiredHeight,
+        clip
       })
     );
   }, [isOpen, options.length]);
@@ -594,8 +616,14 @@ function FixedBundle(props) {
   }, [result, onError]);
   const handleAddToCart = useCallback4(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) => isVariantFulfillable(v, resolveBundleQty(bundle, p.id, v.id))
+      )
+    ).map((p) => {
+      const variant = selectedVariants[p.id] ?? p.variants.nodes.find(
+        (v) => isVariantFulfillable(v, resolveBundleQty(bundle, p.id, v.id))
+      );
       return {
         productId: p.id,
         variant,
@@ -665,6 +693,7 @@ function FixedBundle(props) {
         /* @__PURE__ */ jsx2("div", { className: "lb-bundle__products", children: bundle.products.map((product) => /* @__PURE__ */ jsx2(
           FixedProductRow,
           {
+            bundle,
             product,
             currency,
             onVariantChange: handleVariantChange
@@ -686,7 +715,7 @@ function FixedBundle(props) {
     }
   );
 }
-function FixedProductRow({ product, currency, onVariantChange }) {
+function FixedProductRow({ bundle, product, currency, onVariantChange }) {
   const variants = product.variants.nodes;
   const optionNames = useMemo4(() => {
     const first = variants[0];
@@ -700,7 +729,9 @@ function FixedProductRow({ product, currency, onVariantChange }) {
   useEffect6(() => {
     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) => isVariantFulfillable(v, resolveBundleQty(bundle, product.id, v.id))
+  ) ?? variants[0];
   const priceText = displayVariant ? formatMoney(displayVariant.price.amount, currency) : formatMoney(product.priceRange.minVariantPrice.amount, currency);
   const unitPriceText = displayVariant ? formatUnitPrice(
     displayVariant.unitPrice,
@@ -708,6 +739,12 @@ function FixedProductRow({ product, currency, onVariantChange }) {
     currency
   ) : null;
   const thumbImage = displayVariant?.image ?? product.featuredImage;
+  const showLowStock = !!displayVariant && shouldShowLowStockBadge(
+    displayVariant,
+    resolveBundleQty(bundle, product.id, displayVariant.id),
+    bundle.widgetConfig.lowStockThreshold,
+    bundle.widgetConfig.showLowStockBadge
+  );
   return /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__product", part: "product", children: [
     thumbImage && /* @__PURE__ */ jsx2(
       "img",
@@ -722,6 +759,11 @@ function FixedProductRow({ product, currency, onVariantChange }) {
       /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-title", children: product.title }),
       /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-price", children: priceText }),
       unitPriceText && /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+      showLowStock && /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-low-stock-badge", children: [
+        "Only ",
+        displayVariant.quantityAvailable,
+        " left"
+      ] }),
       showPicker && /* @__PURE__ */ jsx2("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
         const dropdownOptions = optionsFor(optionIndex).map((o) => ({
           value: o.value,
@@ -748,10 +790,15 @@ import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMem
 import {
   formatMoney as formatMoney2,
   formatUnitPrice as formatUnitPrice2,
-  validateQuantity,
-  resolveBundleQty as resolveBundleQty2
+  isVariantFulfillable as isVariantFulfillable2,
+  shouldShowLowStockBadge as shouldShowLowStockBadge2,
+  maxAddableQuantity,
+  DEFAULT_PRODUCT_RULE
 } from "@lime-bundles/core";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ruleFor(bundle, productId) {
+  return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE;
+}
 function MixMatchBundle(props) {
   const {
     shopDomain,
@@ -795,56 +842,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 = useMemo5(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const sel of selections.values()) {
+      if (sel.quantity > 0) ids.add(sel.productId);
+    }
+    return ids;
+  }, [selections]);
+  const totalQuantity = useMemo5(
+    () => Array.from(selections.values()).reduce((sum, s) => sum + s.quantity, 0),
+    [selections]
   );
-  const validation = bundle ? validateQuantity(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
-  const toggleProduct = useCallback5(
+  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 = useCallback5(
     (productId, variant) => {
+      if (!bundle) return;
+      const rule = ruleFor(bundle, productId);
+      const maxAddable = 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 ? resolveBundleQty2(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 = useCallback5(
-    (productId, variantId, quantity) => {
+  const deselect = useCallback5((productId, variantId) => {
+    setSelections((prev) => {
+      if (!prev.has(`${productId}:${variantId}`)) return prev;
+      const next = new Map(prev);
+      next.delete(`${productId}:${variantId}`);
+      return next;
+    });
+  }, []);
+  const setQuantity = useCallback5(
+    (productId, variant, quantity) => {
+      if (!bundle) return;
+      const rule = ruleFor(bundle, productId);
+      const maxAddable = 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 = useCallback5(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 {
@@ -870,15 +953,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__ */ jsxs3("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
       /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--title" }),
@@ -901,26 +976,29 @@ function MixMatchBundle(props) {
       children: [
         /* @__PURE__ */ jsx3("h3", { className: "lb-bundle__title", children: bundle.title }),
         bundle.discountLabel && /* @__PURE__ */ jsx3("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
-        /* @__PURE__ */ jsx3("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__ */ jsx3("p", { className: "lb-bundle__instructions", children: requiredPicks > 0 ? `Pick ${requiredPicks} product${requiredPicks === 1 ? "" : "s"}` : "Pick your products" }),
         /* @__PURE__ */ jsx3("div", { className: "lb-bundle__products lb-bundle__products--selectable", children: bundle.products.map((product) => /* @__PURE__ */ jsx3(
           MixMatchProductRow,
           {
+            bundle,
             product,
             currency,
+            showStepper,
             selections,
-            onToggle: toggleProduct,
-            onUpdateQuantity: updateQuantity
+            onSelect: selectVariant,
+            onDeselect: deselect,
+            onSetQuantity: setQuantity
           },
           product.id
         )) }),
-        validation.message && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__validation", role: "status", children: validation.message }),
+        validationMessage && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__validation", role: "status", children: validationMessage }),
         cartError && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
         /* @__PURE__ */ jsx3(
           "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`
           }
@@ -930,11 +1008,14 @@ function MixMatchBundle(props) {
   );
 }
 function MixMatchProductRow({
+  bundle,
   product,
   currency,
+  showStepper,
   selections,
-  onToggle,
-  onUpdateQuantity
+  onSelect,
+  onDeselect,
+  onSetQuantity
 }) {
   const variants = product.variants.nodes;
   const optionNames = useMemo5(() => {
@@ -942,9 +1023,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) => isVariantFulfillable2(v, rule.min)) ?? variants[0] ?? null;
   if (!displayVariant) return null;
+  const fulfillable = isVariantFulfillable2(displayVariant, rule.min);
+  const maxAddable = maxAddableQuantity(displayVariant, rule.max, 0);
   const key = `${product.id}:${displayVariant.id}`;
   const selected = selections.get(key);
   const thumbImage = displayVariant.image ?? product.featuredImage;
@@ -971,6 +1055,16 @@ function MixMatchProductRow({
           /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-title", children: product.title }),
           /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-price", children: formatMoney2(displayVariant.price.amount, currency) }),
           unitPriceText && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+          shouldShowLowStockBadge2(
+            displayVariant,
+            rule.min,
+            bundle.widgetConfig.lowStockThreshold,
+            bundle.widgetConfig.showLowStockBadge
+          ) && /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-low-stock-badge", children: [
+            "Only ",
+            displayVariant.quantityAvailable,
+            " left"
+          ] }),
           showPicker && !selected && /* @__PURE__ */ jsx3("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
@@ -989,39 +1083,58 @@ function MixMatchProductRow({
             );
           }) })
         ] }),
-        /* @__PURE__ */ jsx3("div", { className: "lb-bundle__product-actions", children: selected ? /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__quantity-control", children: [
+        /* @__PURE__ */ jsx3("div", { className: "lb-bundle__product-actions", children: selected ? showStepper ? /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__quantity-control", children: [
           /* @__PURE__ */ jsx3(
             "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__ */ jsx3("span", { children: selected.quantity }),
+          /* @__PURE__ */ jsx3("span", { "aria-live": "polite", children: selected.quantity }),
           /* @__PURE__ */ jsx3(
             "button",
             {
               "aria-label": `Increase ${product.title}`,
-              onClick: () => onUpdateQuantity(
+              onClick: () => onSetQuantity(
                 product.id,
-                displayVariant.id,
+                displayVariant,
                 selected.quantity + 1
               ),
+              disabled: selected.quantity >= maxAddable,
               children: "+"
             }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              className: "lb-bundle__remove-btn",
+              "aria-label": `Remove ${product.title}`,
+              onClick: () => onDeselect(product.id, displayVariant.id),
+              children: "Remove"
+            }
           )
         ] }) : /* @__PURE__ */ jsx3(
+          "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__ */ jsx3(
           "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"
           }
         ) })
       ]
@@ -1035,7 +1148,9 @@ import {
   formatMoney as formatMoney3,
   formatUnitPrice as formatUnitPrice3,
   calculateTierSavings,
-  getActiveTier
+  getActiveTier,
+  isVariantFulfillable as isVariantFulfillable3,
+  shouldShowLowStockBadge as shouldShowLowStockBadge3
 } from "@lime-bundles/core";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function VolumeBundle(props) {
@@ -1087,7 +1202,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) => isVariantFulfillable3(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;
@@ -1108,7 +1224,9 @@ function VolumeBundle(props) {
   const activeTier = bundle ? getActiveTier(bundle.volumeTiers, quantity) : null;
   const handleAddToCart = useCallback6(async () => {
     if (!bundle || !product) return;
-    const variant = selectedVariant ?? product.variants.nodes.find((v) => v.availableForSale);
+    const variant = selectedVariant ?? product.variants.nodes.find(
+      (v) => isVariantFulfillable3(v, quantity)
+    );
     if (!variant) return;
     const lines = [
       {
@@ -1273,6 +1391,16 @@ function VolumeBundle(props) {
           ] })
         ] }),
         cartError && /* @__PURE__ */ jsx4("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        bundle && displayVariant && shouldShowLowStockBadge3(
+          displayVariant,
+          minTierQty,
+          bundle.widgetConfig.lowStockThreshold,
+          bundle.widgetConfig.showLowStockBadge
+        ) && /* @__PURE__ */ jsxs4("span", { className: "lb-bundle-low-stock-badge", children: [
+          "Only ",
+          displayVariant.quantityAvailable,
+          " left"
+        ] }),
         /* @__PURE__ */ jsx4(
           "button",
           {
@@ -1359,7 +1487,7 @@ import {
   computeBundleSaleCents,
   calculateTierSavings as calculateTierSavings2,
   getActiveTier as getActiveTier2,
-  validateQuantity as validateQuantity2,
+  validateQuantity,
   transformImageUrl,
   formatCountdown,
   formatMoney as formatMoney4,
@@ -1427,6 +1555,6 @@ export {
   useBundlesForProduct,
   useVariantSelection,
   useWidgetConfigVars,
-  validateQuantity2 as validateQuantity
+  validateQuantity
 };
 //# sourceMappingURL=index.js.map