@lime-bundles/widget 0.1.1 → 1.0.0

package/dist/index.js

@@ -2,18 +2,23 @@
 import {
   createStorefrontClient,
   BUNDLE_METAOBJECT_QUERY,
+  BUNDLES_FOR_PRODUCT_QUERY,
+  CART_CREATE_MUTATION,
+  CART_LINES_ADD_MUTATION,
+  SHOP_CUSTOM_CSS_QUERY,
   parseMetaobjectBundle,
-  detectCartApi,
-  createAjaxCartApi,
-  createStorefrontCartApi,
   observeImpression,
   reportImpression,
-  reportAddToCart
+  reportAddToCart,
+  injectCustomCss,
+  fetchBundlesForProduct
 } from "@lime-bundles/core";
 
 // src/renderers/fixed.ts
-import { formatMoney } from "@lime-bundles/core";
-function renderFixedBundle(container, bundle, addToCart) {
+import {
+  formatMoney
+} from "@lime-bundles/core";
+function renderFixedBundle(container, bundle, onAddToCart) {
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const title = document.createElement("h3");
   title.className = "lb-bundle__title";
@@ -54,23 +59,20 @@ function renderFixedBundle(container, bundle, addToCart) {
   button.className = "lb-bundle__cta";
   button.textContent = bundle.widgetConfig.ctaText ?? "Add Bundle to Cart";
   button.setAttribute("part", "button");
-  button.addEventListener("click", async () => {
-    button.disabled = true;
-    button.textContent = "Adding...";
-    const items = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
+  button.addEventListener("click", () => {
+    const lines = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
       const variant = p.variants.nodes.find((v) => v.availableForSale);
-      return { variantId: variant.id, quantity: 1 };
+      return {
+        merchandiseId: variant.id,
+        quantity: 1,
+        attributes: [
+          { key: "_lime_bundle_gid", value: bundle.id },
+          { key: "_lime_bundle_type", value: bundle.bundleType }
+        ]
+      };
     });
-    const result = await addToCart(items);
-    button.disabled = false;
-    button.textContent = bundle.widgetConfig.ctaText ?? "Add Bundle to Cart";
-    if (!result.success) {
-      const error = document.createElement("p");
-      error.className = "lb-bundle__error";
-      error.textContent = result.error ?? "Failed to add to cart";
-      container.appendChild(error);
-      setTimeout(() => error.remove(), 5e3);
-    }
+    if (lines.length === 0) return;
+    onAddToCart(lines);
   });
   container.appendChild(button);
 }
@@ -81,8 +83,11 @@ function escapeHtml(str) {
 }
 
 // src/renderers/mix-match.ts
-import { formatMoney as formatMoney2, validateQuantity } from "@lime-bundles/core";
-function renderMixMatchBundle(container, bundle, addToCart) {
+import {
+  formatMoney as formatMoney2,
+  validateQuantity
+} from "@lime-bundles/core";
+function renderMixMatchBundle(container, bundle, onAddToCart) {
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const selections = /* @__PURE__ */ new Map();
   const title = document.createElement("h3");
@@ -146,29 +151,31 @@ function renderMixMatchBundle(container, bundle, addToCart) {
   button.disabled = true;
   container.appendChild(button);
   function updateCta() {
-    const total = Array.from(selections.values()).reduce((s, v) => s + v.quantity, 0);
-    const validation = validateQuantity(total, bundle.minQuantity, bundle.maxQuantity);
+    const total = Array.from(selections.values()).reduce(
+      (s, v) => s + v.quantity,
+      0
+    );
+    const validation = validateQuantity(
+      total,
+      bundle.minQuantity,
+      bundle.maxQuantity
+    );
     button.disabled = !validation.valid;
     button.textContent = bundle.widgetConfig.ctaText ?? `Add ${total} Items to Cart`;
     validationEl.textContent = validation.message ?? "";
   }
   updateCta();
-  button.addEventListener("click", async () => {
-    button.disabled = true;
-    button.textContent = "Adding...";
-    const items = Array.from(selections.entries()).map(([, s]) => ({
-      variantId: s.variantId,
-      quantity: s.quantity
+  button.addEventListener("click", () => {
+    const lines = Array.from(selections.values()).map((s) => ({
+      merchandiseId: s.variantId,
+      quantity: s.quantity,
+      attributes: [
+        { key: "_lime_bundle_gid", value: bundle.id },
+        { key: "_lime_bundle_type", value: bundle.bundleType }
+      ]
     }));
-    const result = await addToCart(items);
-    updateCta();
-    if (!result.success) {
-      const error = document.createElement("p");
-      error.className = "lb-bundle__error";
-      error.textContent = result.error ?? "Failed to add to cart";
-      container.appendChild(error);
-      setTimeout(() => error.remove(), 5e3);
-    }
+    if (lines.length === 0) return;
+    onAddToCart(lines);
   });
 }
 function escapeHtml2(str) {
@@ -178,8 +185,11 @@ function escapeHtml2(str) {
 }
 
 // src/renderers/volume.ts
-import { formatMoney as formatMoney3, calculateTierSavings } from "@lime-bundles/core";
-function renderVolumeBundle(container, bundle, addToCart) {
+import {
+  formatMoney as formatMoney3,
+  calculateTierSavings
+} from "@lime-bundles/core";
+function renderVolumeBundle(container, bundle, onAddToCart) {
   const product = bundle.products[0];
   if (!product) return;
   const basePrice = parseFloat(product.priceRange.minVariantPrice.amount);
@@ -239,7 +249,11 @@ function renderVolumeBundle(container, bundle, addToCart) {
   button.setAttribute("part", "button");
   container.appendChild(button);
   function updateTiers() {
-    const savings = calculateTierSavings(bundle.volumeTiers, basePrice, quantity);
+    const savings = calculateTierSavings(
+      bundle.volumeTiers,
+      basePrice,
+      quantity
+    );
     tiersDiv.innerHTML = "";
     for (const ts of savings) {
       const row = document.createElement("div");
@@ -275,22 +289,19 @@ function renderVolumeBundle(container, bundle, addToCart) {
       updateTiers();
     }
   });
-  button.addEventListener("click", async () => {
+  button.addEventListener("click", () => {
     const variant = product.variants.nodes.find((v) => v.availableForSale);
     if (!variant) return;
-    button.disabled = true;
-    button.textContent = "Adding...";
-    const items = [{ variantId: variant.id, quantity }];
-    const result = await addToCart(items);
-    button.disabled = false;
-    updateTiers();
-    if (!result.success) {
-      const error = document.createElement("p");
-      error.className = "lb-bundle__error";
-      error.textContent = result.error ?? "Failed to add to cart";
-      container.appendChild(error);
-      setTimeout(() => error.remove(), 5e3);
-    }
+    onAddToCart([
+      {
+        merchandiseId: variant.id,
+        quantity,
+        attributes: [
+          { key: "_lime_bundle_gid", value: bundle.id },
+          { key: "_lime_bundle_type", value: bundle.bundleType }
+        ]
+      }
+    ]);
   });
 }
 function escapeHtml3(str) {
@@ -366,20 +377,35 @@ var WIDGET_STYLES = `
 `;
 
 // src/lime-bundle.ts
+var cartStorageKey = (shopDomain) => `lb_cart_id:${shopDomain}`;
+function resolveProductHandle(explicit) {
+  if (explicit) return explicit.trim() || null;
+  if (typeof document !== "undefined") {
+    const meta = document.querySelector(
+      'meta[name="shopify:product-handle"]'
+    );
+    if (meta?.content) return meta.content.trim() || null;
+  }
+  if (typeof window !== "undefined") {
+    const match = window.location.pathname.match(/\/products\/([^/?#]+)/);
+    if (match?.[1]) return decodeURIComponent(match[1]);
+  }
+  return null;
+}
 var LimeBundleElement = class extends HTMLElement {
   static observedAttributes = [
     "shop-domain",
     "storefront-token",
     "bundle-gid",
-    "cart-id",
+    "product-handle",
     "app-url",
     "analytics",
     "locale"
   ];
   shadow;
-  bundle = null;
+  bundles = [];
   abortController = null;
-  impressionCleanup = null;
+  impressionCleanups = [];
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
@@ -390,17 +416,16 @@ var LimeBundleElement = class extends HTMLElement {
   }
   disconnectedCallback() {
     this.abortController?.abort();
-    this.teardownImpression();
+    this.teardownImpressions();
   }
-  /** Clean up stale bundle state and active impression observer. */
-  teardownImpression() {
-    this.impressionCleanup?.();
-    this.impressionCleanup = null;
+  teardownImpressions() {
+    for (const cleanup of this.impressionCleanups) cleanup();
+    this.impressionCleanups = [];
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue || !this.isConnected) return;
-    if (name === "bundle-gid" || name === "shop-domain" || name === "storefront-token") {
-      if (this.shopDomain && this.storefrontToken && this.bundleGid) {
+    if (name === "bundle-gid" || name === "product-handle" || name === "shop-domain" || name === "storefront-token") {
+      if (this.shopDomain && this.storefrontToken) {
         this.fetchBundle();
       }
     }
@@ -414,8 +439,8 @@ var LimeBundleElement = class extends HTMLElement {
   get bundleGid() {
     return this.getAttribute("bundle-gid") ?? "";
   }
-  get cartId() {
-    return this.getAttribute("cart-id") ?? void 0;
+  get productHandleAttr() {
+    return this.getAttribute("product-handle") ?? "";
   }
   get appUrl() {
     return this.getAttribute("app-url") ?? "";
@@ -424,147 +449,265 @@ var LimeBundleElement = class extends HTMLElement {
     return this.getAttribute("analytics") !== "false";
   }
   async fetchBundle() {
-    if (!this.shopDomain || !this.storefrontToken || !this.bundleGid) {
-      this.renderError("Missing required attributes: shop-domain, storefront-token, bundle-gid");
+    if (!this.shopDomain || !this.storefrontToken) {
+      this.renderError(
+        "Missing required attributes: shop-domain, storefront-token"
+      );
       return;
     }
     this.abortController?.abort();
     const controller = new AbortController();
     this.abortController = controller;
     this.renderLoading();
+    const client = createStorefrontClient({
+      shopDomain: this.shopDomain,
+      accessToken: this.storefrontToken
+    });
     try {
-      const client = createStorefrontClient({
-        shopDomain: this.shopDomain,
-        accessToken: this.storefrontToken
-      });
-      const data = await client.query(
-        BUNDLE_METAOBJECT_QUERY,
-        { id: this.bundleGid }
-      );
+      let bundlePromise;
+      let singleBundleMode = false;
+      if (this.bundleGid) {
+        singleBundleMode = true;
+        bundlePromise = this.fetchSingleBundle(client, controller.signal);
+      } else {
+        const handle = resolveProductHandle(this.productHandleAttr);
+        if (!handle) {
+          this.teardownImpressions();
+          this.renderError(
+            "No bundle-gid or product-handle provided, and the current URL doesn't match /products/<handle>."
+          );
+          return;
+        }
+        bundlePromise = this.fetchProductBundles(
+          client,
+          controller.signal,
+          handle
+        );
+      }
+      const cssPromise = client.query(SHOP_CUSTOM_CSS_QUERY, void 0, {
+        signal: controller.signal
+      }).catch(() => null);
+      await bundlePromise;
       if (controller.signal.aborted) return;
-      if (!data.metaobject) {
-        this.bundle = null;
-        this.teardownImpression();
+      if (singleBundleMode && this.bundles.length === 0) {
+        this.teardownImpressions();
         this.renderError("Bundle not found");
         return;
       }
-      this.bundle = parseMetaobjectBundle(
-        data.metaobject.id,
-        data.metaobject.fields
-      );
-      if (!this.bundle) {
-        this.teardownImpression();
-        this.renderError("Bundle is not active or has expired");
-        return;
+      const css = await cssPromise;
+      if (css?.shop?.metafield?.value) {
+        injectCustomCss(this.shopDomain, css.shop.metafield.value);
       }
-      this.renderBundle();
-      this.setupImpression();
+      this.renderBundles();
     } catch (err) {
       if (controller.signal.aborted) return;
-      this.bundle = null;
-      this.teardownImpression();
+      this.bundles = [];
+      this.teardownImpressions();
       this.renderError(
         err instanceof Error ? err.message : "Failed to load bundle"
       );
     }
   }
-  renderBundle() {
-    if (!this.bundle) return;
-    const container = document.createElement("div");
-    container.className = "lb-bundle";
-    container.setAttribute("role", "region");
-    container.setAttribute("aria-label", this.bundle.title);
-    const addToCart = async (items) => {
-      const apiType = detectCartApi();
-      const cart = apiType === "ajax" ? createAjaxCartApi(this.bundleGid, this.bundle.bundleType) : createStorefrontCartApi(
-        createStorefrontClient({
-          shopDomain: this.shopDomain,
-          accessToken: this.storefrontToken
-        }),
-        this.bundleGid,
-        this.bundle.bundleType,
-        this.cartId
-      );
-      let result;
-      try {
-        result = await cart.addLines(items);
-      } catch (err) {
-        result = {
-          success: false,
-          error: err instanceof Error ? err.message : "Cart add failed"
-        };
+  async fetchSingleBundle(client, signal) {
+    const data = await client.query(
+      BUNDLE_METAOBJECT_QUERY,
+      { id: this.bundleGid },
+      { signal }
+    );
+    if (!data.metaobject) {
+      this.bundles = [];
+      return;
+    }
+    const parsed = parseMetaobjectBundle(
+      data.metaobject.id,
+      data.metaobject.fields
+    );
+    this.bundles = parsed ? [parsed] : [];
+  }
+  async fetchProductBundles(client, signal, productHandle) {
+    const data = await client.query(
+      BUNDLES_FOR_PRODUCT_QUERY,
+      { handle: productHandle },
+      { signal }
+    );
+    if (!data.product) {
+      this.bundles = [];
+      return;
+    }
+    const refs = data.product.metafield?.references?.nodes ?? [];
+    const bundles = [];
+    for (const ref of refs) {
+      const parsed = parseMetaobjectBundle(ref.id, ref.fields);
+      if (parsed) bundles.push(parsed);
+    }
+    this.bundles = bundles;
+  }
+  /**
+   * Dispatch add-to-cart with a cancelable event, then — unless a listener
+   * called preventDefault — execute the default cart-and-checkout flow.
+   *
+   * `fire-and-forget` against `reportAddToCart` runs regardless so merchants
+   * with BYO cart still get analytics.
+   */
+  handleAddToCart = async (bundle, lines) => {
+    const ev = new CustomEvent("lime-bundle:add-to-cart", {
+      detail: { lines },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    const allowDefault = this.dispatchEvent(ev);
+    this.reportAddToCartEvent(bundle, lines);
+    if (allowDefault) {
+      await this.defaultAddToCart(lines);
+    }
+  };
+  /**
+   * Default cart flow: Shopify's Storefront Cart API is tokenless, so we
+   * don't need any additional scopes. Persist the cart ID in localStorage
+   * so subsequent adds on the same browser session join the existing cart
+   * instead of creating a new one every click.
+   */
+  async defaultAddToCart(lines) {
+    if (typeof window === "undefined") return;
+    const client = createStorefrontClient({
+      shopDomain: this.shopDomain,
+      accessToken: this.storefrontToken
+    });
+    const storage = window.localStorage;
+    const key = cartStorageKey(this.shopDomain);
+    const existingCartId = storage?.getItem(key) ?? null;
+    try {
+      let checkoutUrl = null;
+      if (existingCartId) {
+        const res = await client.query(
+          CART_LINES_ADD_MUTATION,
+          { cartId: existingCartId, lines }
+        );
+        const payload = res.cartLinesAdd;
+        if (payload?.userErrors?.length) {
+          storage?.removeItem(key);
+        } else if (payload?.cart) {
+          checkoutUrl = payload.cart.checkoutUrl;
+        }
       }
-      if (result.success) {
+      if (!checkoutUrl) {
+        const res = await client.query(
+          CART_CREATE_MUTATION,
+          { input: { lines } }
+        );
+        const payload = res.cartCreate;
+        if (payload?.cart) {
+          storage?.setItem(key, payload.cart.id);
+          checkoutUrl = payload.cart.checkoutUrl;
+        }
+      }
+      if (checkoutUrl) {
+        window.location.assign(checkoutUrl);
+      } else {
         this.dispatchEvent(
-          new CustomEvent("lime-bundle:add-to-cart", {
-            detail: { items, cartId: result.cartId },
+          new CustomEvent("lime-bundle:error", {
+            detail: { message: "Cart creation failed", code: "CART_ERROR" },
             bubbles: true,
             composed: true
           })
         );
-        if (this.analyticsEnabled && this.appUrl) {
-          const quantity = items.reduce((sum, i) => sum + i.quantity, 0);
-          const totalPrice = items.reduce((sum, item) => {
-            const product = this.bundle.products.find(
-              (p) => p.variants.nodes.some((v) => v.id === item.variantId)
-            );
-            const variant = product?.variants.nodes.find((v) => v.id === item.variantId);
-            const price = variant ? parseFloat(variant.price.amount) : 0;
-            return sum + price * item.quantity;
-          }, 0);
-          reportAddToCart(
-            { shopDomain: this.shopDomain, appUrl: this.appUrl },
-            {
-              bundleGid: this.bundleGid,
-              bundleType: this.bundle.bundleType,
-              productId: this.bundle.products[0]?.id ?? "",
-              quantity,
-              totalPrice: Math.round(totalPrice * 100) / 100
-            }
-          );
-        }
       }
-      return result;
-    };
-    switch (this.bundle.bundleType) {
-      case "fixed":
-        renderFixedBundle(container, this.bundle, addToCart);
-        break;
-      case "mix_match":
-        renderMixMatchBundle(container, this.bundle, addToCart);
-        break;
-      case "volume":
-        renderVolumeBundle(container, this.bundle, addToCart);
-        break;
+    } catch (err) {
+      this.dispatchEvent(
+        new CustomEvent("lime-bundle:error", {
+          detail: {
+            message: err instanceof Error ? err.message : "Cart mutation failed",
+            code: "CART_ERROR"
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
     }
+  }
+  reportAddToCartEvent(bundle, lines) {
+    if (!this.analyticsEnabled || !this.appUrl) return;
+    const quantity = lines.reduce((sum, l) => sum + l.quantity, 0);
+    const totalPrice = lines.reduce((sum, line) => {
+      const product = bundle.products.find(
+        (p) => p.variants.nodes.some((v) => v.id === line.merchandiseId)
+      );
+      const variant = product?.variants.nodes.find(
+        (v) => v.id === line.merchandiseId
+      );
+      const price = variant ? parseFloat(variant.price.amount) : 0;
+      return sum + price * line.quantity;
+    }, 0);
+    reportAddToCart(
+      { shopDomain: this.shopDomain, appUrl: this.appUrl },
+      {
+        bundleGid: bundle.id,
+        bundleType: bundle.bundleType,
+        productId: bundle.products[0]?.id ?? "",
+        quantity,
+        totalPrice: Math.round(totalPrice * 100) / 100
+      }
+    );
+  }
+  renderBundles() {
+    this.teardownImpressions();
     this.shadow.innerHTML = "";
     const style = document.createElement("style");
     style.textContent = WIDGET_STYLES;
     this.shadow.appendChild(style);
-    this.shadow.appendChild(container);
+    for (const bundle of this.bundles) {
+      const container = document.createElement("div");
+      container.className = "lb-bundle";
+      container.setAttribute("role", "region");
+      container.setAttribute("aria-label", bundle.title);
+      const dispatch = (lines) => this.handleAddToCart(bundle, lines);
+      switch (bundle.bundleType) {
+        case "fixed":
+          renderFixedBundle(container, bundle, dispatch);
+          break;
+        case "mix_match":
+          renderMixMatchBundle(
+            container,
+            bundle,
+            dispatch
+          );
+          break;
+        case "volume":
+          renderVolumeBundle(container, bundle, dispatch);
+          break;
+      }
+      this.shadow.appendChild(container);
+      this.setupImpressionFor(bundle, container);
+    }
+    const first = this.bundles[0];
     this.dispatchEvent(
       new CustomEvent("lime-bundle:loaded", {
         detail: {
-          bundleType: this.bundle.bundleType,
-          title: this.bundle.title
+          bundleCount: this.bundles.length,
+          bundleTypes: this.bundles.map((b) => b.bundleType),
+          // Legacy fields — meaningful only in single-bundle mode. Preserved
+          // for merchants who attached listeners against the pre-1.0 shape.
+          bundleType: first?.bundleType,
+          title: first?.title
         },
         bubbles: true,
         composed: true
       })
     );
   }
-  setupImpression() {
-    if (!this.analyticsEnabled || !this.bundle || !this.appUrl) return;
-    this.impressionCleanup?.();
-    this.impressionCleanup = observeImpression(this, () => {
+  setupImpressionFor(bundle, element) {
+    if (!this.analyticsEnabled || !this.appUrl) return;
+    const cleanup = observeImpression(element, () => {
       reportImpression(
         { shopDomain: this.shopDomain, appUrl: this.appUrl },
         {
-          bundleGid: this.bundleGid,
-          bundleType: this.bundle.bundleType
+          bundleGid: bundle.id,
+          bundleType: bundle.bundleType
         }
       );
     });
+    this.impressionCleanups.push(cleanup);
   }
   renderLoading() {
     this.shadow.innerHTML = `
@@ -590,65 +733,11 @@ var LimeBundleElement = class extends HTMLElement {
   }
 };
 
-// src/thankyou/index.ts
-var reportedPurchases = /* @__PURE__ */ new Set();
-function trackPurchase(input) {
-  const appUrl = input.appUrl ?? `https://${input.shopDomain}`;
-  const bundleMap = /* @__PURE__ */ new Map();
-  for (const item of input.lineItems) {
-    if (!item.bundleGid) continue;
-    const existing = bundleMap.get(item.bundleGid);
-    if (existing) {
-      existing.revenue += item.price * item.quantity;
-      existing.lineItemCount += 1;
-    } else {
-      bundleMap.set(item.bundleGid, {
-        bundleType: item.bundleType,
-        revenue: item.price * item.quantity,
-        lineItemCount: 1
-      });
-    }
-  }
-  for (const [bundleGid, data] of bundleMap) {
-    const dedupKey = `${input.orderId}:${bundleGid}`;
-    if (reportedPurchases.has(dedupKey)) continue;
-    reportedPurchases.add(dedupKey);
-    const payload = {
-      shopDomain: input.shopDomain,
-      eventType: "bundle_purchased",
-      bundleGid,
-      bundleType: data.bundleType,
-      orderId: input.orderId,
-      revenue: Math.round(data.revenue * 100) / 100,
-      lineItemCount: data.lineItemCount,
-      occurredAt: (/* @__PURE__ */ new Date()).toISOString()
-    };
-    const url = `${appUrl}/api/analytics`;
-    const body = JSON.stringify(payload);
-    try {
-      fetch(url, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body
-      }).catch(() => {
-        if (typeof navigator !== "undefined" && navigator.sendBeacon) {
-          navigator.sendBeacon(url, body);
-        }
-      });
-    } catch {
-      if (typeof navigator !== "undefined" && navigator.sendBeacon) {
-        navigator.sendBeacon(url, body);
-      }
-    }
-  }
-}
-
 // src/index.ts
 if (typeof customElements !== "undefined" && !customElements.get("lime-bundle")) {
   customElements.define("lime-bundle", LimeBundleElement);
 }
 export {
-  LimeBundleElement,
-  trackPurchase
+  LimeBundleElement
 };
 //# sourceMappingURL=index.js.map