@runwell/shopify-toolkit 0.21.0 → 0.24.0

package/modules/runwell-bundle-system/assets/runwell-bundle-system.css

@@ -607,6 +607,252 @@
   opacity: 0.7;
 }
 
+/* ---------- Mode C BYOB ---------- */
+
+.runwell-bundle-system__byob-summary {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card, #fff);
+  box-shadow: var(--runwell-shadow-card, 0 2px 8px rgba(0,0,0,0.04));
+  margin-bottom: 16px;
+}
+
+.runwell-bundle-system__byob-counter {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.runwell-bundle-system__byob-counter-of,
+.runwell-bundle-system__byob-counter-label {
+  font-weight: 400;
+  opacity: 0.75;
+  font-size: 0.85rem;
+}
+
+.runwell-bundle-system__byob-pricing {
+  margin-left: auto;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.runwell-bundle-system__byob-pricing-subtotal {
+  opacity: 0.55;
+  font-size: 0.85rem;
+}
+
+.runwell-bundle-system__byob-pricing-current {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.runwell-bundle-system__byob-pricing-badge {
+  padding: 4px 10px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  border-radius: 999px;
+  background: var(--runwell-accent, currentColor);
+  color: var(--runwell-cream, #fff);
+}
+
+.runwell-bundle-system__byob-helper {
+  width: 100%;
+  margin: 0;
+  font-size: 0.8rem;
+  opacity: 0.75;
+}
+
+.runwell-bundle-system__byob-picker--grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+@media (min-width: 640px) {
+  .runwell-bundle-system__byob-picker--grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .runwell-bundle-system__byob-picker--grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.runwell-bundle-system__byob-candidate {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 44px;
+  padding: 10px;
+  border: 2px solid color-mix(in srgb, currentColor 10%, transparent);
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card, #fff);
+  cursor: pointer;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+
+.runwell-bundle-system__byob-candidate:hover {
+  border-color: color-mix(in srgb, var(--runwell-accent, currentColor) 50%, transparent);
+}
+
+.runwell-bundle-system__byob-candidate:has(.runwell-bundle-system__byob-input:checked) {
+  border-color: var(--runwell-accent, currentColor);
+  background: color-mix(in srgb, var(--runwell-accent, currentColor) 6%, var(--runwell-surface-card, #fff));
+}
+
+.runwell-bundle-system__byob-candidate--required {
+  border-style: dashed;
+  opacity: 0.95;
+}
+
+.runwell-bundle-system__byob-candidate--unavailable {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.runwell-bundle-system__byob-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.runwell-bundle-system__byob-candidate-thumb {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: var(--runwell-radius-sm, 4px);
+  display: block;
+}
+
+.runwell-bundle-system__byob-candidate-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.runwell-bundle-system__byob-candidate-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.runwell-bundle-system__byob-candidate-price {
+  font-size: 0.85rem;
+  opacity: 0.8;
+}
+
+.runwell-bundle-system__byob-candidate-badge {
+  margin-top: 4px;
+  align-self: flex-start;
+  padding: 2px 8px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--runwell-blue, currentColor) 18%, transparent);
+}
+
+.runwell-bundle-system__byob-picker--accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.runwell-bundle-system__byob-accordion {
+  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+  border-radius: var(--runwell-radius-md, 12px);
+  background: var(--runwell-surface-card, #fff);
+}
+
+.runwell-bundle-system__byob-accordion-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  min-height: 44px;
+  font-weight: 600;
+  cursor: pointer;
+  list-style: none;
+}
+
+.runwell-bundle-system__byob-accordion-summary::-webkit-details-marker {
+  display: none;
+}
+
+.runwell-bundle-system__byob-accordion-count {
+  margin-left: auto;
+  padding: 2px 10px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--runwell-accent, currentColor) 16%, transparent);
+}
+
+.runwell-bundle-system__byob-accordion-body {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  padding: 0 16px 16px 16px;
+}
+
+@media (min-width: 768px) {
+  .runwell-bundle-system__byob-accordion-body {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.runwell-bundle-system__byob-picker--radio {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.runwell-bundle-system__byob-radio-group {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.runwell-bundle-system__byob-radio-legend {
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.75;
+  margin-bottom: 4px;
+}
+
+.runwell-bundle-system__byob-candidate--radio {
+  flex-direction: row;
+  align-items: center;
+  padding: 10px 12px;
+}
+
+.runwell-bundle-system__byob-candidate--radio .runwell-bundle-system__byob-candidate-thumb {
+  width: 56px;
+  height: 56px;
+  aspect-ratio: 1 / 1;
+}
+
 /* ---------- Surface 4: cart drawer bundle cross-sell ---------- */
 
 .runwell-bundle-cart-xsell {

package/modules/runwell-bundle-system/assets/runwell-bundle-system.js

@@ -72,6 +72,204 @@
       });
   }
 
+  /* -------------------------------------------------------------------
+   * Mode A quantity builder
+   *
+   * Per-tier radio selection state + image thumbnail swap + ATC.
+   * ATC handles two cases:
+   *   1. Plain tier: standard product form POST.
+   *   2. free_gift tier: intercept the submit, build a multi-line
+   *      /cart/add.js POST with the bundle qty + 1 of the free gift
+   *      product (read from data-free-gift-variant-id on the section).
+   * After success: open Dawn cart drawer + dispatch cart:updated so any
+   * downstream xsell listeners refresh.
+   * ----------------------------------------------------------------- */
+  function initQuantityBuilder() {
+    document
+      .querySelectorAll('[data-runwell-bundle-quantity-builder]')
+      .forEach(function (section) {
+        // Tier selection visual state
+        section
+          .querySelectorAll('[data-runwell-tier-radio]')
+          .forEach(function (radio) {
+            radio.addEventListener('change', function () {
+              section
+                .querySelectorAll('.runwell-bundle-quantity-builder__option')
+                .forEach(function (label) {
+                  const input = label.querySelector('[data-runwell-tier-radio]');
+                  label.classList.toggle(
+                    'runwell-bundle-quantity-builder__option--selected',
+                    input ? input.checked : false
+                  );
+                });
+            });
+          });
+
+        // Thumbnail swap (image gallery)
+        section.querySelectorAll('[data-thumb]').forEach(function (btn) {
+          btn.addEventListener('click', function () {
+            const idx = btn.dataset.thumb;
+            section
+              .querySelectorAll('.runwell-bundle-quantity-builder__slide')
+              .forEach(function (s) {
+                s.classList.toggle(
+                  'runwell-bundle-quantity-builder__slide--active',
+                  s.dataset.slide === idx
+                );
+              });
+            section
+              .querySelectorAll('.runwell-bundle-quantity-builder__thumb')
+              .forEach(function (t) {
+                t.classList.toggle(
+                  'runwell-bundle-quantity-builder__thumb--active',
+                  t === btn
+                );
+              });
+          });
+        });
+
+        // ATC handler
+        const form = section.querySelector('[data-runwell-bundle-form]');
+        if (!form) return;
+        const atc = form.querySelector('[data-runwell-bundle-atc]');
+        const giftVariantId = section.dataset.freeGiftVariantId || '';
+
+        form.addEventListener('submit', function (e) {
+          e.preventDefault();
+          const selected = form.querySelector(
+            '.runwell-bundle-quantity-builder__option--selected'
+          );
+          if (!selected) return;
+          const qty = parseInt(selected.dataset.tierQty || '1', 10);
+          const wantsGift = selected.dataset.tierFreeGift === 'true' && giftVariantId !== '';
+          const variantId = form.querySelector('input[name="id"]').value;
+
+          setAtcState(atc, 'loading');
+
+          const items = [{ id: parseInt(variantId, 10), quantity: qty }];
+          if (wantsGift) {
+            items.push({ id: parseInt(giftVariantId, 10), quantity: 1 });
+          }
+
+          fetch('/cart/add.js', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+            body: JSON.stringify({ items: items }),
+          })
+            .then(function (r) {
+              if (!r.ok) throw new Error('add failed');
+              return r.json();
+            })
+            .then(function () {
+              setAtcState(atc, 'added');
+              document.dispatchEvent(new CustomEvent('cart:updated', { bubbles: true }));
+              // Open Dawn cart drawer if present
+              const drawer = document.querySelector('cart-drawer');
+              if (drawer && typeof drawer.open === 'function') drawer.open();
+              setTimeout(function () {
+                setAtcState(atc, 'idle');
+              }, 2000);
+            })
+            .catch(function () {
+              setAtcState(atc, 'idle');
+            });
+        });
+      });
+  }
+
+  function setAtcState(atc, state) {
+    if (!atc) return;
+    const textEl = atc.querySelector('.runwell-bundle-quantity-builder__atc-text');
+    const loadEl = atc.querySelector('.runwell-bundle-quantity-builder__atc-loading');
+    if (!textEl || !loadEl) return;
+    if (state === 'loading') {
+      textEl.style.display = 'none';
+      loadEl.style.display = 'inline';
+      atc.disabled = true;
+    } else if (state === 'added') {
+      loadEl.style.display = 'none';
+      textEl.textContent = 'ADDED';
+      textEl.style.display = 'inline';
+    } else {
+      loadEl.style.display = 'none';
+      textEl.textContent = 'ADD TO CART';
+      textEl.style.display = 'inline';
+      atc.disabled = false;
+    }
+  }
+
+  /* -------------------------------------------------------------------
+   * Cart-drawer xsell refresh
+   *
+   * The cart drawer is server-rendered once. When customers add or
+   * change items via async fetch (PDP ATC, qty controls, remove), the
+   * bundle xsell area would otherwise stay stale. We hook fetch() to
+   * detect cart mutations, then re-render #CartDrawer-XsellSlot from
+   * the current page's cart-drawer section via Section Rendering API.
+   *
+   * Tenants opt in by adding <div id="CartDrawer-XsellSlot"> around the
+   * bundle xsell in their cart-drawer snippet (or by using the
+   * snippets/runwell-bundle-cart-xsell.liquid wrapper which does this).
+   * If the slot isn't present, this is a no-op.
+   * ----------------------------------------------------------------- */
+  function initCartMutationRefresh() {
+    if (window.__runwellBundleCartRefreshInstalled) return;
+    window.__runwellBundleCartRefreshInstalled = true;
+
+    const MUTATION_RE = /\/cart\/(add|change|update|clear)(?:\.js)?(?:[?#]|$)/;
+    let pending = null;
+
+    function scheduleRefresh() {
+      if (pending) return;
+      pending = setTimeout(function () {
+        pending = null;
+        refresh();
+      }, 120);
+    }
+
+    function refresh() {
+      const slot = document.getElementById('CartDrawer-XsellSlot');
+      if (!slot) return;
+      const url =
+        window.location.pathname +
+        (window.location.search ? window.location.search + '&' : '?') +
+        'sections=cart-drawer';
+      fetch(url, { credentials: 'same-origin' })
+        .then(function (r) {
+          return r.json();
+        })
+        .then(function (data) {
+          const html = data && data['cart-drawer'];
+          if (!html) return;
+          const doc = new DOMParser().parseFromString(html, 'text/html');
+          const fresh = doc.getElementById('CartDrawer-XsellSlot');
+          if (!fresh) return;
+          slot.innerHTML = fresh.innerHTML;
+        })
+        .catch(function () {
+          /* silent; keep current xsell */
+        });
+    }
+
+    const origFetch = window.fetch;
+    window.fetch = function () {
+      const args = arguments;
+      const p = origFetch.apply(this, args);
+      try {
+        const first = args[0];
+        const url = typeof first === 'string' ? first : (first && first.url) || '';
+        if (MUTATION_RE.test(url)) {
+          p.then(scheduleRefresh, function () {});
+        }
+      } catch (e) {}
+      return p;
+    };
+
+    ['cart:updated', 'cart:refresh', 'cart-drawer:updated'].forEach(function (name) {
+      document.addEventListener(name, scheduleRefresh);
+    });
+  }
+
   function initFilterChip() {
     document
       .querySelectorAll('[data-runwell-bundle-filter-chip]')
@@ -271,17 +469,178 @@
     });
   }
 
+  /* ---------- Mode C BYOB ---------- */
+
+  function parsePricingValue(raw) {
+    if (raw == null || raw === '') return null;
+    try { return JSON.parse(raw); } catch (e) { return null; }
+  }
+
+  function computeByobPrice(subtotalCents, pricingModel, pricingValue) {
+    if (pricingModel === 'fixed_bundle_price' || pricingModel === 'fixed_price') {
+      const v = typeof pricingValue === 'object' && pricingValue !== null
+        ? (pricingValue.amount || pricingValue.price || 0)
+        : pricingValue;
+      return Math.max(0, parseInt(v, 10) || 0);
+    }
+    if (pricingModel === 'percent_off_subtotal') {
+      const pct = typeof pricingValue === 'object' && pricingValue !== null
+        ? (pricingValue.pct || pricingValue.percent || 0)
+        : pricingValue;
+      const discounted = subtotalCents * (1 - (parseFloat(pct) || 0) / 100);
+      return Math.max(0, Math.round(discounted));
+    }
+    if (pricingModel === 'dollar_off_subtotal') {
+      const off = typeof pricingValue === 'object' && pricingValue !== null
+        ? (pricingValue.amount || pricingValue.off || 0)
+        : pricingValue;
+      return Math.max(0, subtotalCents - (parseInt(off, 10) || 0));
+    }
+    return subtotalCents;
+  }
+
+  function formatByobMoney(cents) {
+    return '$' + (cents / 100).toFixed(2);
+  }
+
+  function initByob() {
+    document
+      .querySelectorAll('[data-runwell-byob-picker]')
+      .forEach(function (picker) {
+        const form = picker.closest('form');
+        if (!form) return;
+        const root = form.parentElement || form;
+        const summary = root.querySelector('[data-runwell-byob-summary]');
+        const atc = form.querySelector('[data-runwell-byob-atc]');
+
+        const layout = picker.dataset.byobLayout;
+        const min = parseInt(picker.dataset.byobMin, 10) || 0;
+        const max = parseInt(picker.dataset.byobMax, 10) || 0;
+        const pricingModel = picker.dataset.byobPricingModel;
+        const pricingValue = parsePricingValue(picker.dataset.byobPricingValue);
+
+        function getSelected() {
+          return Array.from(picker.querySelectorAll('.runwell-bundle-system__byob-input:checked'))
+            .map(function (input) {
+              const label = input.closest('.runwell-bundle-system__byob-candidate');
+              return {
+                handle: label.dataset.handle,
+                price: parseInt(label.dataset.price, 10) || 0,
+                variantId: label.dataset.variantId,
+                category: label.dataset.category || null,
+                input: input
+              };
+            });
+        }
+
+        function updateAccordionCounts() {
+          if (layout !== 'accordion') return;
+          picker.querySelectorAll('.runwell-bundle-system__byob-accordion').forEach(function (acc) {
+            const count = acc.querySelectorAll('.runwell-bundle-system__byob-input:checked').length;
+            const badge = acc.querySelector('[data-runwell-byob-cat-count]');
+            if (badge) badge.textContent = count;
+          });
+        }
+
+        function enforceMax(selected) {
+          if (layout === 'radio') return;
+          if (selected.length <= max) return;
+          const overflow = selected.slice(max);
+          overflow.forEach(function (s) {
+            if (!s.input.disabled) s.input.checked = false;
+          });
+        }
+
+        function render() {
+          let selected = getSelected();
+          enforceMax(selected);
+          selected = getSelected();
+
+          const count = selected.length;
+          const subtotal = selected.reduce(function (acc, s) { return acc + s.price; }, 0);
+          const total = computeByobPrice(subtotal, pricingModel, pricingValue);
+          const savings = Math.max(0, subtotal - total);
+
+          if (summary) {
+            const selEl = summary.querySelector('[data-runwell-byob-selected]');
+            const totalEl = summary.querySelector('[data-runwell-byob-total]');
+            const subEl = summary.querySelector('[data-runwell-byob-subtotal]');
+            const subAmt = summary.querySelector('[data-runwell-byob-subtotal-amount]');
+            const savEl = summary.querySelector('[data-runwell-byob-savings]');
+            const savAmt = summary.querySelector('[data-runwell-byob-savings-amount]');
+            const helper = summary.querySelector('[data-runwell-byob-helper]');
+
+            if (selEl) selEl.textContent = count;
+            if (totalEl) totalEl.textContent = formatByobMoney(total);
+            const isFixed = pricingModel === 'fixed_bundle_price' || pricingModel === 'fixed_price';
+            if (savings > 0 && !isFixed) {
+              if (subEl) { subEl.hidden = false; if (subAmt) subAmt.textContent = formatByobMoney(subtotal); }
+              if (savEl) { savEl.hidden = false; if (savAmt) savAmt.textContent = formatByobMoney(savings); }
+            } else {
+              if (subEl) subEl.hidden = true;
+              if (savEl) savEl.hidden = true;
+            }
+            if (helper) helper.style.display = count >= min ? 'none' : '';
+          }
+
+          if (atc) {
+            const ok = count >= min && count <= max;
+            atc.disabled = !ok;
+          }
+          updateAccordionCounts();
+        }
+
+        picker.addEventListener('change', function (e) {
+          if (!e.target.matches('.runwell-bundle-system__byob-input')) return;
+          render();
+        });
+
+        form.addEventListener('submit', function (e) {
+          const selected = getSelected();
+          if (selected.length < min || selected.length > max) {
+            e.preventDefault();
+            return;
+          }
+          e.preventDefault();
+          const items = selected.map(function (s) {
+            return { id: parseInt(s.variantId, 10), quantity: 1 };
+          });
+          fetch('/cart/add.js', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+            body: JSON.stringify({ items: items })
+          })
+            .then(function (r) { return r.json(); })
+            .then(function () {
+              document.dispatchEvent(new CustomEvent('cart:refresh'));
+              window.location.href = '/cart';
+            })
+            .catch(function () {
+              if (atc) atc.disabled = false;
+            });
+        });
+
+        render();
+      });
+  }
+
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', function () {
       initFomo();
       initTierSync();
       initFilterChip();
       initCartXsell();
+      initByob();
+      initQuantityBuilder();
+      initCartMutationRefresh();
     });
   } else {
     initFomo();
     initTierSync();
     initFilterChip();
     initCartXsell();
+    initByob();
+    initQuantityBuilder();
+    initCartMutationRefresh();
   }
 })();

package/modules/runwell-bundle-system/module.json

@@ -1,6 +1,6 @@
 {
   "name": "runwell-bundle-system",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "category": "catalog",
   "source": "runwell",
   "base": "bundle-system",
@@ -13,21 +13,29 @@
       "sections/runwell-bundle-home-stacks.liquid",
       "sections/runwell-bundle-cart-xsell.liquid",
       "sections/runwell-bundle-pdp-banner.liquid",
-      "sections/runwell-bundle-collection.liquid"
+      "sections/runwell-bundle-collection.liquid",
+      "sections/runwell-bundle-quantity-builder.liquid"
     ],
     "snippets": [
       "snippets/runwell-bundle-card.liquid",
+      "snippets/runwell-bundle-cart-xsell.liquid",
       "snippets/runwell-bundle-quantity-tiers.liquid",
       "snippets/runwell-bundle-multi-product.liquid",
       "snippets/runwell-bundle-pricing.liquid",
       "snippets/runwell-bundle-cross-supplier.liquid",
       "snippets/runwell-bundle-fomo.liquid",
       "snippets/runwell-bundle-free-gift.liquid",
-      "snippets/runwell-bundle-data.liquid"
+      "snippets/runwell-bundle-data.liquid",
+      "snippets/runwell-bundle-byob-picker.liquid",
+      "snippets/runwell-bundle-byob-picker-grid.liquid",
+      "snippets/runwell-bundle-byob-picker-accordion.liquid",
+      "snippets/runwell-bundle-byob-picker-radio.liquid",
+      "snippets/runwell-bundle-byob-summary.liquid"
     ],
     "assets": [
       "assets/runwell-bundle-system.css",
-      "assets/runwell-bundle-system.js"
+      "assets/runwell-bundle-system.js",
+      "assets/runwell-bundle-quantity-builder.css"
     ]
   },
   "config": {
@@ -74,6 +82,12 @@
       "url": "https://admin.shopify.com/store/{store_handle}/products/new",
       "summary": "Use the Shopify Bundles app to create the bundle (Apps > Bundles > Create). The app creates a bundle product. SKU convention: BUNDLE-<handle>. Then open the bundle product, scroll to Metafields, and fill the runwell.bundle_* fields per the bundle's mode."
     },
+    {
+      "id": "configure-byob-mode",
+      "label": "Configure a BYOB (Mode C) bundle product",
+      "url": "https://admin.shopify.com/store/{store_handle}/products",
+      "summary": "Mode C only. Set bundle_mode = 'byob'. Required: bundle_byob_candidates (list of product references), bundle_byob_min_picks, bundle_byob_max_picks, bundle_pricing_model (fixed_bundle_price / percent_off_subtotal / dollar_off_subtotal), bundle_pricing_value. Optional: bundle_byob_layout (grid default, accordion, radio), bundle_byob_categories (JSON), bundle_byob_required_handles. Install a Shopify Functions discount that mirrors the pricing model so the savings apply at checkout."
+    },
     {
       "id": "configure-quantity-tier-discount-function",
       "label": "Create a Shopify Functions discount for quantity-tier mode (Mode A only)",