@lime-bundles/widget 4.1.0 → 4.1.1

package/dist/index.js

@@ -508,7 +508,7 @@ function buildWidgetShell(typeClass, opts) {
       "data-countdown": ""
     });
     const label2 = box("span", "lb-bundle-countdown-label");
-    label2.textContent = opts.countdownLabel ?? "Ends in";
+    label2.textContent = opts.countdownLabel ?? "Limited time offer";
     countdown.appendChild(label2);
     countdown.appendChild(
       box("span", "lb-bundle-countdown-timer", {
@@ -520,10 +520,12 @@ function buildWidgetShell(typeClass, opts) {
   const products = box("div", typeClass + "__products lb-edge-fade");
   root.appendChild(products);
   root.appendChild(box("div", "lb-bundle-divider"));
-  const summary = box("div", "lb-bundle-summary");
+  const summary = box("div", "lb-bundle-summary", {
+    "data-pricing-section": ""
+  });
   const text = box("div", "lb-bundle-summary__text");
   const label = box("span", "lb-bundle-summary__label");
-  label.textContent = opts.summaryLabel ?? "Bundle price";
+  label.textContent = opts.summaryLabel ?? "Bundle total";
   text.appendChild(label);
   if (opts.withItemCount) {
     label.appendChild(box("span", "", { "data-item-count": "" }));
@@ -554,6 +556,7 @@ function buildWidgetShell(typeClass, opts) {
   summary.appendChild(prices);
   root.appendChild(summary);
   const cta = box("button", "lb-bundle-cta", {
+    "data-cta-text": opts.ctaText,
     type: "button",
     "data-add-bundle": ""
   });
@@ -572,7 +575,9 @@ function buildWidgetShell(typeClass, opts) {
   );
   return { root, products, cta };
 }
-function buildVolumeTiers(tiers, groupLabel) {
+function buildVolumeTiers(tiers, groupLabel, opts = {}) {
+  const showCompare = opts.showCompare !== false;
+  const showPriceEach = opts.showPriceEach !== false;
   const group = box("div", "lb-volume__tiers lb-edge-fade", {
     role: "radiogroup",
     "aria-label": groupLabel,
@@ -597,8 +602,17 @@ function buildVolumeTiers(tiers, groupLabel) {
     label.textContent = tier.label;
     info.appendChild(label);
     const price = box("span", "lb-volume__tier-price");
-    price.appendChild(box("span", "lb-volume__tier-compare"));
-    price.appendChild(box("span", "", { "data-tier-price-each": "" }));
+    if (showCompare && (tier.percent > 0 || tier.amountCents > 0)) {
+      price.appendChild(box("span", "lb-volume__tier-compare"));
+    }
+    if (showPriceEach) {
+      price.appendChild(box("span", "", { "data-tier-price-each": "" }));
+      if (opts.unitLabel) {
+        const unit = box("span", "lb-volume__tier-unit");
+        unit.textContent = opts.unitLabel;
+        price.appendChild(unit);
+      }
+    }
     info.appendChild(price);
     el2.appendChild(info);
     if (tier.badgeLabel || tier.savingsLabel) {
@@ -707,7 +721,10 @@ var DEFAULT_STRINGS = {
   required: "Required",
   soldOut: "Sold out",
   outOfStock: "Out of stock",
-  itemsOutOfStock: "__COUNT__ items out of stock",
+  itemsOutOfStock: {
+    one: "__COUNT__ item out of stock",
+    other: "__COUNT__ items out of stock"
+  },
   quantity: "Quantity",
   increaseQuantity: "Increase quantity",
   decreaseQuantity: "Decrease quantity",
@@ -727,11 +744,26 @@ var DEFAULT_STRINGS = {
   stepsCompleted: "__COUNT__ of __TOTAL__ steps completed",
   each: " each",
   buyQty: "Buy __COUNT__",
+  itemCount: {
+    one: "__COUNT__ item",
+    other: "__COUNT__ items"
+  },
   needsSpots: {
     one: "Needs __COUNT__ spot",
     other: "Needs __COUNT__ spots"
   }
 };
+function formatItemsOutOfStock(t, count) {
+  const raw = t.itemsOutOfStock;
+  let tpl;
+  if (raw && typeof raw === "object") {
+    const form = new Intl.PluralRules(t.locale || "en").select(count);
+    tpl = raw[form] || raw.other;
+  } else {
+    tpl = raw;
+  }
+  return (tpl || "__COUNT__ items out of stock").split("__COUNT__").join(String(count));
+}
 
 // ../render/src/dropdown/bind.ts
 import { dropdown } from "@lime-bundles/core";
@@ -1188,7 +1220,7 @@ function renderFixedBundle(container, bundle, outOfStockBehavior, onAddToCart, o
     shell.cta.disabled = true;
     const label = shell.cta.querySelector("[data-cta-label]");
     if (label) {
-      label.textContent = (t.itemsOutOfStock || "__COUNT__ items out of stock").split("__COUNT__").join(String(oosProducts.length));
+      label.textContent = formatItemsOutOfStock(t, oosProducts.length);
     }
   } else {
     shell.cta.addEventListener("click", () => {
@@ -2553,17 +2585,17 @@ function buildPickerModal(opts) {
 }
 
 // src/renderers/mix-match.ts
-function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart, onCleanup) {
+function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart, onCleanup, currentProductHandle) {
   const wc = bundle.widgetConfig;
   const t = DEFAULT_STRINGS;
   const requiredQty = bundle.minQuantity || 1;
   const rulesMap = mergeRuleMaps(bundle.productRules, bundle.variantRules);
   const adapted = adaptProducts(bundle);
-  const eligibleProducts = adapted.map((p) => ({
+  const eligibleProducts = adapted.map((p, i) => ({
     id: Number(p.productId),
     title: p.title ?? "",
     url: p.url ?? null,
-    type: "",
+    type: bundle.products[i]?.productType ?? "",
     featuredImage: p.featuredImage ?? null,
     available: p.variants.some((v) => v.available),
     optionNames: p.optionNames,
@@ -2608,16 +2640,21 @@ function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart
   const overlay = buildPickerModal({
     bundleGid: bundle.id,
     domId: bundle.id.replace(/\D/g, ""),
-    showSearch: true,
-    showTypeFilters: false,
+    showSearch: wc.showSearch !== false,
+    showTypeFilters: wc.mixMatchShowTypeFilters !== false,
     segmentCount: requiredQty,
     wizard: false
   });
   shell.root.appendChild(overlay);
+  const currentIdx = currentProductHandle ? bundle.products.findIndex((p) => p.handle === currentProductHandle) : -1;
   const selectedItems = seedSelection(
     eligibleProducts,
     rulesMap,
-    requiredQty
+    requiredQty,
+    {
+      enabled: !!currentProductHandle,
+      currentProductId: currentIdx !== -1 ? eligibleProducts[currentIdx]?.id ?? null : null
+    }
   );
   const rowCapacity = {
     remainingSpots: () => remainingUnits(selectedItems, requiredQty),
@@ -2654,7 +2691,13 @@ function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart
       shell.root,
       selectedItems,
       requiredQty,
-      bundle,
+      // The shared updater reads the theme data-block shape: discount fields
+      // flat, not nested under discountConfig. Passing the bundle itself left
+      // `discountType` undefined, so the summary never painted.
+      {
+        discountType: bundle.discountConfig.discountType,
+        discountValue: bundle.discountConfig.discountValue
+      },
       (total, type, value) => calculateDiscount(total, type, value),
       updatePricing2(formatMoney)
     );
@@ -2667,7 +2710,7 @@ function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart
     rulesMap,
     eligibleProducts,
     requiredQty,
-    showQtySelector: true,
+    showQtySelector: wc.mixMatchShowQuantitySelector !== false,
     items: selectedItems,
     formatMoney,
     rowCapacity,
@@ -2730,6 +2773,13 @@ function renderMixMatchBundle(container, bundle, outOfStockBehavior, onAddToCart
   onCleanup?.(bindDropdowns(shell.root));
 }
 
+// src/renderers/volume.ts
+import {
+  bestValueTierIndex,
+  resolveDefaultTierIndex,
+  resolvePopularTierIndex
+} from "@lime-bundles/core";
+
 // ../render/src/volume/pricing.ts
 function calcTierPrice(basePrice, discountType, tierEl) {
   if (discountType === "fixed_amount") {
@@ -2758,6 +2808,23 @@ function formatItemCount(qty, translations) {
   const tpl = translations.itemCount[form] || translations.itemCount.other || "__COUNT__";
   return " (" + tpl.split("__COUNT__").join(String(qty)) + ")";
 }
+function updateAllTierPrices(allTiers, basePrice, discountType, formatMoney) {
+  for (let i = 0; i < allTiers.length; i++) {
+    const tierEl = allTiers[i];
+    const priceEachEl = tierEl.querySelector(
+      "[data-tier-price-each]"
+    );
+    if (priceEachEl) {
+      priceEachEl.textContent = formatMoney(
+        calcTierPrice(basePrice, discountType, tierEl)
+      );
+    }
+    const compareEl = tierEl.querySelector(
+      ".lb-volume__tier-compare"
+    );
+    if (compareEl) compareEl.textContent = formatMoney(basePrice);
+  }
+}
 function selectTier(container, allTiers, basePrice, discountType, index, translations, formatMoney) {
   for (let i = 0; i < allTiers.length; i++) {
     allTiers[i].setAttribute("aria-checked", i === index ? "true" : "false");
@@ -2815,8 +2882,17 @@ function renderVolumeBundle(container, bundle, outOfStockBehavior, onAddToCart)
   const discountType = bundle.discountConfig.discountType;
   const formatMoney = intlFormatMoney(product.priceRange.minVariantPrice.currencyCode);
   const t = DEFAULT_STRINGS;
-  const popularIdx = wc.popularBadge?.visible ? Math.floor((bundle.volumeTiers.length - 1) / 2) : -1;
-  const defaultIdx = 0;
+  const bestIdx = bestValueTierIndex(bundle.volumeTiers, discountType);
+  const defaultIdx = resolveDefaultTierIndex(
+    wc.defaultTier,
+    bundle.volumeTiers.length,
+    bestIdx
+  );
+  const popularIdx = resolvePopularTierIndex(
+    wc.popularBadge?.tierIndex,
+    wc.popularBadge?.visible !== false,
+    bestIdx
+  );
   const tiers = bundle.volumeTiers.map((tier, i) => {
     const percent = discountType === "fixed_amount" ? 0 : Math.round(tier.percentage ?? 0);
     const amountCents = discountType === "fixed_amount" ? Math.round((tier.amount ?? 0) * 100) : 0;
@@ -2837,16 +2913,21 @@ function renderVolumeBundle(container, bundle, outOfStockBehavior, onAddToCart)
     title: bundle.title,
     subtitle: bundle.description,
     summaryLabel: "Total",
-    withItemCount: true,
+    withItemCount: wc.pricing?.showItemCount !== false,
     totalPriceSlot: true,
     showSavingsBar: wc.savingsBar?.visible !== false,
     showComparePrice: wc.pricing?.showCompareAtPrice !== false,
     ctaText: wc.cta?.ctaText || t.addToCart || "Add to cart",
     endsAt: wc.countdown?.showCountdown === false ? null : bundle.endsAt
   });
-  const group = buildVolumeTiers(tiers, "Select quantity");
+  const group = buildVolumeTiers(tiers, "Select quantity", {
+    showCompare: wc.pricing?.showComparePrice !== false,
+    showPriceEach: wc.pricing?.showPerUnitPrice !== false,
+    unitLabel: (t.each || "each").trim()
+  });
   shell.products.replaceWith(group);
   const tierEls = group.querySelectorAll("[data-tier-index]");
+  updateAllTierPrices(tierEls, basePrice, discountType, formatMoney);
   let selectedIndex = defaultIdx;
   const apply = () => selectTier(shell.root, tierEls, basePrice, discountType, selectedIndex, t, formatMoney);
   group.addEventListener("click", (e) => {
@@ -2996,6 +3077,13 @@ function buildBogoCartItems(sides, percent, buyQty, getQty) {
 }
 
 // src/renderers/bogo.ts
+function buildBogoPlus() {
+  const plus = document.createElement("div");
+  plus.className = "lb-bogo__plus";
+  plus.setAttribute("aria-hidden", "true");
+  plus.innerHTML = '<svg width="12" height="12" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><line x1="9" y1="3" x2="9" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="3" y1="9" x2="15" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
+  return plus;
+}
 function renderBogoBundle(container, bundle, outOfStockBehavior, onAddToCart, onCleanup) {
   const wc = bundle.widgetConfig;
   const buyProduct = bundle.products.find((p) => p.id === bundle.buyProductId);
@@ -3044,6 +3132,7 @@ function renderBogoBundle(container, bundle, outOfStockBehavior, onAddToCart, on
   const badgeText = percent >= 100 ? "Free" : percent + "% off";
   sides.forEach((side, i) => {
     const isGet = i === 1;
+    if (isGet) shell.products.appendChild(buildBogoPlus());
     const isOos = !side.variants.some((v) => v.available);
     const row = buildRowSkeleton(side, t, {
       isOos,
@@ -3072,7 +3161,7 @@ function renderBogoBundle(container, bundle, outOfStockBehavior, onAddToCart, on
     shell.cta.disabled = true;
     const label = shell.cta.querySelector("[data-cta-label]");
     if (label) {
-      label.textContent = (t.itemsOutOfStock || "__COUNT__ items out of stock").split("__COUNT__").join(String(oosCount));
+      label.textContent = formatItemsOutOfStock(t, oosCount);
     }
   } else {
     shell.cta.addEventListener("click", () => {
@@ -3798,8 +3887,8 @@ function renderMultiStepBundle(container, bundle, outOfStockBehavior, onAddToCar
   const overlay = buildPickerModal({
     bundleGid: bundle.id,
     domId: bundle.id.replace(/\D/g, ""),
-    showSearch: true,
-    showTypeFilters: true,
+    showSearch: wc.showSearch !== false,
+    showTypeFilters: wc.mixMatchShowTypeFilters !== false,
     segmentCount: null,
     wizard: true
   });
@@ -3846,8 +3935,8 @@ function renderMultiStepBundle(container, bundle, outOfStockBehavior, onAddToCar
     selections,
     t,
     rulesMap,
-    showQtySelector: true,
-    showTypeFilters: true,
+    showQtySelector: wc.mixMatchShowQuantitySelector !== false,
+    showTypeFilters: wc.mixMatchShowTypeFilters !== false,
     formatMoney,
     dropdown: void 0,
     portalTarget: null,
@@ -6553,6 +6642,13 @@ var LimeBundleElement = class extends HTMLElement {
   buyer = void 0;
   shadow;
   bundles = [];
+  /**
+   * The product handle this embed is standing on, when one can be resolved
+   * (attribute → meta tag → /products/<handle> path). The mix-and-match
+   * courtesy seed uses it to pre-add the current product the way the theme
+   * widget does; null on pages with no product context.
+   */
+  currentProductHandle = null;
   abortController = null;
   impressionCleanups = [];
   /**
@@ -6672,11 +6768,12 @@ var LimeBundleElement = class extends HTMLElement {
     try {
       let bundlePromise;
       let singleBundleMode = false;
+      this.currentProductHandle = resolveProductHandle(this.productHandleAttr);
       if (this.bundleGid) {
         singleBundleMode = true;
         bundlePromise = this.fetchSingleBundle(client, controller.signal);
       } else {
-        const handle = resolveProductHandle(this.productHandleAttr);
+        const handle = this.currentProductHandle;
         if (!handle) {
           this.teardownImpressions();
           this.renderError(
@@ -6890,6 +6987,7 @@ var LimeBundleElement = class extends HTMLElement {
       container.setAttribute("aria-label", bundle.title);
       container.setAttribute("data-bundle-type", bundle.bundleType);
       container.setAttribute("data-bundle-gid", bundle.id);
+      if (bundle.endsAt) container.setAttribute("data-ends-at", bundle.endsAt);
       applyWidgetConfigVars(container, bundle.widgetConfig);
       this.renderCleanups.push(trackInputMode(container));
       const dispatch = (lines) => this.handleAddToCart(bundle, lines);
@@ -6910,7 +7008,8 @@ var LimeBundleElement = class extends HTMLElement {
             bundle,
             this.outOfStockBehavior,
             dispatch,
-            registerCleanup
+            registerCleanup,
+            this.currentProductHandle
           );
           break;
         case "volume":