@lime-bundles/widget 4.6.5 → 4.6.7

package/dist/index.js

@@ -46,6 +46,121 @@ function bundleLineAttributes(bundleGid, bundleType) {
   ];
 }
 
+// ../render/src/cart.ts
+var CART_STOCK_WARNING_CODES = [
+  "MERCHANDISE_NOT_ENOUGH_STOCK",
+  "MERCHANDISE_OUT_OF_STOCK"
+];
+function isStockWarning(warning) {
+  return !!warning.code && CART_STOCK_WARNING_CODES.indexOf(warning.code) !== -1;
+}
+function hasStockWarning(warnings) {
+  const list = warnings || [];
+  for (let i = 0; i < list.length; i++) {
+    if (isStockWarning(list[i])) return true;
+  }
+  return false;
+}
+function stockWarningMessage(warnings) {
+  const list = warnings || [];
+  for (let i = 0; i < list.length; i++) {
+    const warning = list[i];
+    if (isStockWarning(warning) && warning.message) return warning.message;
+  }
+  return void 0;
+}
+function totalPerVariant(lines) {
+  const totals = /* @__PURE__ */ Object.create(null);
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    totals[line.variantId] = (totals[line.variantId] || 0) + (line.quantity || 0);
+  }
+  return totals;
+}
+function bundleAddFellShort(requested, before, after) {
+  const wanted = totalPerVariant(requested);
+  const had = totalPerVariant(before);
+  const has = totalPerVariant(after);
+  for (const variantId in wanted) {
+    if ((has[variantId] || 0) - (had[variantId] || 0) < wanted[variantId]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// ../render/src/strings.ts
+var DEFAULT_STRINGS = {
+  locale: "en",
+  addItem: "Add",
+  addedItem: "Added",
+  removeItem: "Remove",
+  swapItem: "Swap",
+  required: "Required",
+  soldOut: "Sold out",
+  outOfStock: "Out of stock",
+  itemsOutOfStock: {
+    one: "__COUNT__ item out of stock",
+    other: "__COUNT__ items out of stock"
+  },
+  cartStockError: "We couldn't add this bundle to your cart. __MESSAGE__",
+  quantity: "Quantity",
+  increaseQuantity: "Increase quantity",
+  decreaseQuantity: "Decrease quantity",
+  allTypes: "All",
+  editSelection: "Edit selection",
+  addToCart: "Add to cart",
+  bundlePrice: "Bundle total",
+  save: "Save",
+  complete: "Complete",
+  ofSelected: "__COUNT__ of __TOTAL__ added",
+  moreToGo: "__COUNT__ more to go",
+  nProductsShown: "__COUNT__ products shown",
+  bundleComplete: "Your bundle is complete",
+  chooseMoreUnlock: "Choose __COUNT__ more to unlock __PCT__% off",
+  chooseMoreComplete: "Choose __COUNT__ more to complete your bundle",
+  stepOf: "Step __STEP__ of __TOTAL__",
+  stepsCompleted: "__COUNT__ of __TOTAL__ steps completed",
+  doorChoose: "Choose your products",
+  doorContinue: "Continue building",
+  doorQuickSteps: {
+    one: "__COUNT__ quick step",
+    other: "__COUNT__ quick steps"
+  },
+  doorStepsToGo: {
+    one: "__COUNT__ step to go",
+    other: "__COUNT__ steps to go"
+  },
+  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));
+}
+var CART_STOCK_ERROR_FALLBACK = "We couldn't add this bundle to your cart. __MESSAGE__";
+function formatCartStockError(template, message) {
+  const tpl = (template || "").trim() || CART_STOCK_ERROR_FALLBACK;
+  const warning = (message || "").trim();
+  const composed = tpl.indexOf("__MESSAGE__") === -1 ? tpl + " " + warning : tpl.split("__MESSAGE__").join(warning);
+  return composed.replace(/\s+/g, " ").trim();
+}
+
 // ../render/src/adapt.ts
 import {
   formatUnitPrice,
@@ -380,6 +495,55 @@ function buildOptionGroups(container, product, selected) {
   }
 }
 
+// ../render/src/product/placeholder.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var PLACEHOLDER_ATTR = "data-lb-placeholder";
+var PLACEHOLDER_CLASS = "lb-thumb--placeholder";
+function builtInMark() {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", "lb-bundle-placeholder-icon");
+  svg.setAttribute("viewBox", "0 0 48 48");
+  const rect = document.createElementNS(SVG_NS, "rect");
+  rect.setAttribute("x", "15");
+  rect.setAttribute("y", "15");
+  rect.setAttribute("width", "18");
+  rect.setAttribute("height", "18");
+  rect.setAttribute("rx", "2");
+  svg.appendChild(rect);
+  const dot = document.createElementNS(SVG_NS, "circle");
+  dot.setAttribute("cx", "20.5");
+  dot.setAttribute("cy", "20.5");
+  dot.setAttribute("r", "1.5");
+  svg.appendChild(dot);
+  const ridge = document.createElementNS(SVG_NS, "path");
+  ridge.setAttribute("d", "M33 27l-5-5L17 33");
+  svg.appendChild(ridge);
+  return svg;
+}
+var make = builtInMark;
+function mark() {
+  const node = make();
+  const el2 = node.nodeType === 1 ? node : null;
+  if (el2) {
+    el2.setAttribute(PLACEHOLDER_ATTR, "");
+    el2.setAttribute("aria-hidden", "true");
+    el2.setAttribute("focusable", "false");
+  }
+  return node;
+}
+function showThumbnailPlaceholder(box2) {
+  const img = box2.querySelector("img");
+  if (img) img.remove();
+  box2.classList.add(PLACEHOLDER_CLASS);
+  if (box2.querySelector("[" + PLACEHOLDER_ATTR + "]")) return;
+  box2.appendChild(mark());
+}
+function hideThumbnailPlaceholder(box2) {
+  const existing = box2.querySelector("[" + PLACEHOLDER_ATTR + "]");
+  if (existing) existing.remove();
+  box2.classList.remove(PLACEHOLDER_CLASS);
+}
+
 // ../render/src/product/row.ts
 var productImgSrc = /* @__PURE__ */ new WeakMap();
 function updateThumbnail(row, variant, productImage) {
@@ -390,8 +554,12 @@ function updateThumbnail(row, variant, productImage) {
     const seed = productImage || (img ? img.src : null);
     if (seed) productImgSrc.set(row, seed);
   }
-  const nextSrc = variant.image || productImgSrc.get(row) || null;
-  if (!nextSrc) return;
+  const nextSrc = variant && variant.image || productImgSrc.get(row) || null;
+  if (!nextSrc) {
+    showThumbnailPlaceholder(thumb);
+    return;
+  }
+  hideThumbnailPlaceholder(thumb);
   if (img) {
     img.src = nextSrc;
     img.srcset = "";
@@ -410,7 +578,10 @@ function updateInlineQuantity(row, qty) {
   el2.textContent = "\xD7" + qty;
 }
 function applyVariant(row, variant, product, formatMoney) {
-  if (!variant) return;
+  if (!variant) {
+    updateThumbnail(row, null, product.featuredImage);
+    return;
+  }
   updateThumbnail(row, variant, product.featuredImage);
   updateInlineQuantity(row, variant.quantity || product.quantity || 1);
   const priceEl = row.querySelector("[data-product-price]");
@@ -460,8 +631,11 @@ function buildRowSkeleton(product, t, opts) {
   if (opts.bogoRole) row.setAttribute("data-bogo-role", opts.bogoRole);
   const thumb = box("div", "lb-bundle-thumbnail", { "data-thumbnail": "" });
   const ratio = product.featuredImageRatio;
-  if (opts.thumbnailRatio === "original" && ratio != null && ratio > 0) {
-    thumb.style.setProperty("--lb-row-thumb-ratio", String(ratio));
+  if (opts.thumbnailRatio === "original") {
+    thumb.style.setProperty(
+      "--lb-row-thumb-ratio",
+      String(ratio != null && ratio > 0 ? ratio : 1)
+    );
   }
   row.appendChild(thumb);
   const info = box("div", "lb-bundle-product-info");
@@ -743,70 +917,6 @@ function initCountdown(container) {
   }
 }
 
-// ../render/src/strings.ts
-var DEFAULT_STRINGS = {
-  locale: "en",
-  addItem: "Add",
-  addedItem: "Added",
-  removeItem: "Remove",
-  swapItem: "Swap",
-  required: "Required",
-  soldOut: "Sold out",
-  outOfStock: "Out of stock",
-  itemsOutOfStock: {
-    one: "__COUNT__ item out of stock",
-    other: "__COUNT__ items out of stock"
-  },
-  quantity: "Quantity",
-  increaseQuantity: "Increase quantity",
-  decreaseQuantity: "Decrease quantity",
-  allTypes: "All",
-  editSelection: "Edit selection",
-  addToCart: "Add to cart",
-  bundlePrice: "Bundle total",
-  save: "Save",
-  complete: "Complete",
-  ofSelected: "__COUNT__ of __TOTAL__ added",
-  moreToGo: "__COUNT__ more to go",
-  nProductsShown: "__COUNT__ products shown",
-  bundleComplete: "Your bundle is complete",
-  chooseMoreUnlock: "Choose __COUNT__ more to unlock __PCT__% off",
-  chooseMoreComplete: "Choose __COUNT__ more to complete your bundle",
-  stepOf: "Step __STEP__ of __TOTAL__",
-  stepsCompleted: "__COUNT__ of __TOTAL__ steps completed",
-  doorChoose: "Choose your products",
-  doorContinue: "Continue building",
-  doorQuickSteps: {
-    one: "__COUNT__ quick step",
-    other: "__COUNT__ quick steps"
-  },
-  doorStepsToGo: {
-    one: "__COUNT__ step to go",
-    other: "__COUNT__ steps to go"
-  },
-  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";
 
@@ -1426,17 +1536,25 @@ function buildPickerRow(p, rowIndex, ctx) {
   addedBadge.textContent = t.addedItem || "Added";
   addedBadge.hidden = true;
   thumbDiv.appendChild(addedBadge);
+  const paintThumb = (src) => {
+    if (!src) {
+      showThumbnailPlaceholder(thumbDiv);
+      return;
+    }
+    hideThumbnailPlaceholder(thumbDiv);
+    let img = thumbDiv.querySelector("img");
+    if (!img) {
+      img = document.createElement("img");
+      img.sizes = PICKER_SIZES;
+      img.alt = p.title;
+      img.loading = "lazy";
+      thumbDiv.appendChild(img);
+    }
+    img.src = imgWidth(src, PICKER_BASE_WIDTH);
+    img.srcset = srcset(src, PICKER_WIDTHS);
+  };
   const firstAvailable = p.variants.find((v) => v.available) ?? null;
-  const initialThumbSrc = firstAvailable && firstAvailable.image || p.featuredImage;
-  if (initialThumbSrc) {
-    const img = document.createElement("img");
-    img.src = imgWidth(initialThumbSrc, PICKER_BASE_WIDTH);
-    img.srcset = srcset(initialThumbSrc, PICKER_WIDTHS);
-    img.sizes = PICKER_SIZES;
-    img.alt = p.title;
-    img.loading = "lazy";
-    thumbDiv.appendChild(img);
-  }
+  paintThumb(firstAvailable && firstAvailable.image || p.featuredImage);
   row.appendChild(thumbDiv);
   const infoDiv = document.createElement("div");
   infoDiv.className = "lb-mix-match__modal-product-info";
@@ -1647,12 +1765,7 @@ function buildPickerRow(p, rowIndex, ctx) {
         unitPriceEl.textContent = "";
         unitPriceEl.hidden = true;
       }
-      const rowImg = thumbDiv.querySelector("img");
-      const imgSrc = v.image || p.featuredImage;
-      if (rowImg && imgSrc) {
-        rowImg.src = imgWidth(imgSrc, PICKER_BASE_WIDTH);
-        rowImg.srcset = srcset(imgSrc, PICKER_WIDTHS);
-      }
+      paintThumb(v.image || p.featuredImage);
       setBoundsForVariant?.(v, capacity.variantUnitsElsewhere(v.id));
       if (v.options) recomputeDisabled(v.options);
       refresh();
@@ -2230,6 +2343,8 @@ function buildSlotCard(item, trans, formatMoney, removable, onRemove, onEdit) {
     img.alt = item.title;
     img.loading = "lazy";
     thumb.appendChild(img);
+  } else {
+    showThumbnailPlaceholder(thumb);
   }
   card.appendChild(thumb);
   const info = document.createElement("div");
@@ -4546,6 +4661,15 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   display: block;
 }
 
+/* Same reset, one more victim. A thumbnail is emitted empty and filled at
+   hydration, so between the two it matched \`div:empty\` and vanished \u2014 taking
+   the row's gap with it and starting that title 72px left of every other
+   row's (issue #552). The box holds its place either way now: the product's
+   image lands in it, or the placeholder mark does. */
+.lb-bundle-thumbnail:empty {
+  display: flex;
+}
+
 /* Divider */
 .lb-bundle-divider {
   height: var(--lb-border-width);
@@ -4584,11 +4708,6 @@ var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle
   object-fit: var(--lb-thumbnail-img-fit, cover);
 }
 
-.lb-bundle-thumbnail svg {
-  width: 28px;
-  height: 28px;
-  color: color-mix(in srgb, var(--lb-text) 35%, transparent);
-}
 
 .lb-bundle-product-info {
   flex: 1;
@@ -5030,15 +5149,33 @@ a.lb-bundle-product-name:focus-visible {
   border: 0 !important;
 }
 
-/* Placeholder SVG icon for missing images */
+/* Missing-image placeholder.
+   Two marks share these rules: Shopify's own \`placeholder_svg_tag\`
+   illustration, which the theme scripts clone out of the <template> in
+   bundle-widget.liquid, and the line glyph the headless renderer falls back to
+   when there is no Liquid to supply one. */
+.lb-thumb--placeholder > [data-lb-placeholder] {
+  display: block;
+  width: 100%;
+  /* The mark carries the box's height, not the other way round: the
+     "original" thumbnail ratio sizes a box to its image's proportions and an
+     imageless row has no image, so without this the box would be 60px by
+     nothing. A box that already has a ratio caps the mark instead. */
+  height: auto;
+  max-height: 100%;
+  aspect-ratio: 1 / 1;
+}
+
 .lb-bundle-placeholder-icon {
-  width: 28px;
-  height: 28px;
   stroke: color-mix(in srgb, var(--lb-text) 35%, transparent);
   stroke-width: 1.5;
   fill: none;
 }
 
+.lb-bundle-placeholder-svg {
+  fill: color-mix(in srgb, var(--lb-text) 22%, transparent);
+}
+
 /* Out-of-stock product row */
 .lb-bundle-product-row--oos {
   opacity: 0.5;
@@ -7580,7 +7717,33 @@ var LimeBundleElement = class extends HTMLElement {
     const key = cartStorageKey(this.shopDomain);
     let cartId = storage?.getItem(key) ?? null;
     const isStaleCartError = (errors) => errors.length > 0 && errors.every((e) => (e.field ?? []).includes("cartId"));
-    const stockCapped = (warnings) => (warnings ?? []).some((w) => w.code === "MERCHANDISE_NOT_ENOUGH_STOCK");
+    const requested = lines.map((line) => ({
+      variantId: line.merchandiseId,
+      quantity: line.quantity
+    }));
+    const bundleLinesOf = (payload) => {
+      const nodes = payload?.cart?.lines?.nodes;
+      if (!nodes) return null;
+      const found = [];
+      for (const node of nodes) {
+        if (!node.attributes.some((a) => a.key === BUNDLE_GID_ATTRIBUTE)) {
+          continue;
+        }
+        const variantId = node.merchandise?.id;
+        if (!variantId) continue;
+        found.push({ variantId, quantity: node.quantity });
+      }
+      return found;
+    };
+    const fellShort = (payload) => {
+      const after = bundleLinesOf(payload);
+      if (!after) return hasStockWarning(payload?.warnings);
+      return bundleAddFellShort(requested, [], after);
+    };
+    const stockError = (payload) => formatCartStockError(
+      DEFAULT_STRINGS.cartStockError,
+      stockWarningMessage(payload?.warnings)
+    );
     const fail = (message) => {
       this.dispatchEvent(
         new CustomEvent("lime-bundle:error", {
@@ -7611,8 +7774,8 @@ var LimeBundleElement = class extends HTMLElement {
             return;
           }
           storage?.removeItem(key);
-        } else if (stockCapped(payload?.warnings)) {
-          fail("Some items in this bundle are out of stock.");
+        } else if (fellShort(payload)) {
+          fail(stockError(payload));
           return;
         } else if (payload?.cart) {
           checkoutUrl = payload.cart.checkoutUrl;
@@ -7628,8 +7791,8 @@ var LimeBundleElement = class extends HTMLElement {
           fail(payload.userErrors[0].message);
           return;
         }
-        if (stockCapped(payload?.warnings)) {
-          fail("Some items in this bundle are out of stock.");
+        if (fellShort(payload)) {
+          fail(stockError(payload));
           return;
         }
         if (payload?.cart) {