@lime-bundles/react 2.4.0 → 2.5.0

package/dist/index.cjs

@@ -641,8 +641,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 +718,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 +740,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 +754,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 +764,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 +784,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,
@@ -947,6 +967,7 @@ function MixMatchBundle(props) {
         /* @__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,
             selections,
@@ -972,6 +993,7 @@ function MixMatchBundle(props) {
   );
 }
 function MixMatchProductRow({
+  bundle,
   product,
   currency,
   selections,
@@ -985,8 +1007,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) => (0, import_core9.isVariantFulfillable)(v, (0, import_core9.resolveBundleQty)(bundle, product.id, v.id))
+  ) ?? variants[0] ?? null;
   if (!displayVariant) return null;
+  const displayVariantQty = (0, import_core9.resolveBundleQty)(
+    bundle,
+    product.id,
+    displayVariant.id
+  );
+  const displayVariantFulfillable = (0, import_core9.isVariantFulfillable)(
+    displayVariant,
+    displayVariantQty
+  );
   const key = `${product.id}:${displayVariant.id}`;
   const selected = selections.get(key);
   const thumbImage = displayVariant.image ?? product.featuredImage;
@@ -1013,6 +1046,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,
+            displayVariantQty,
+            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,
@@ -1062,8 +1105,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"
           }
         ) })
       ]
@@ -1124,7 +1167,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 +1189,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 +1356,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",
           {