@lime-bundles/react 2.4.0 → 2.5.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
@@ -594,8 +596,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 +673,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 +695,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 +709,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 +719,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 +739,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,
@@ -749,7 +771,9 @@ import {
   formatMoney as formatMoney2,
   formatUnitPrice as formatUnitPrice2,
   validateQuantity,
-  resolveBundleQty as resolveBundleQty2
+  resolveBundleQty as resolveBundleQty2,
+  isVariantFulfillable as isVariantFulfillable2,
+  shouldShowLowStockBadge as shouldShowLowStockBadge2
 } from "@lime-bundles/core";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function MixMatchBundle(props) {
@@ -905,6 +929,7 @@ function MixMatchBundle(props) {
         /* @__PURE__ */ jsx3("div", { className: "lb-bundle__products lb-bundle__products--selectable", children: bundle.products.map((product) => /* @__PURE__ */ jsx3(
           MixMatchProductRow,
           {
+            bundle,
             product,
             currency,
             selections,
@@ -930,6 +955,7 @@ function MixMatchBundle(props) {
   );
 }
 function MixMatchProductRow({
+  bundle,
   product,
   currency,
   selections,
@@ -943,8 +969,19 @@ function MixMatchProductRow({
   }, [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] ?? null;
+  const displayVariant = selectedVariant ?? variants.find(
+    (v) => isVariantFulfillable2(v, resolveBundleQty2(bundle, product.id, v.id))
+  ) ?? variants[0] ?? null;
   if (!displayVariant) return null;
+  const displayVariantQty = resolveBundleQty2(
+    bundle,
+    product.id,
+    displayVariant.id
+  );
+  const displayVariantFulfillable = isVariantFulfillable2(
+    displayVariant,
+    displayVariantQty
+  );
   const key = `${product.id}:${displayVariant.id}`;
   const selected = selections.get(key);
   const thumbImage = displayVariant.image ?? product.featuredImage;
@@ -971,6 +1008,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,
+            displayVariantQty,
+            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,
@@ -1020,8 +1067,8 @@ function MixMatchProductRow({
           {
             className: "lb-bundle__select-btn",
             onClick: () => onToggle(product.id, displayVariant),
-            disabled: !displayVariant.availableForSale,
-            children: displayVariant.availableForSale ? "Select" : "Sold out"
+            disabled: !displayVariantFulfillable,
+            children: displayVariantFulfillable ? "Select" : "Sold out"
           }
         ) })
       ]
@@ -1035,7 +1082,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 +1136,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 +1158,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 +1325,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",
           {