@lime-bundles/widget 0.1.1 → 1.0.0

package/dist/index.cjs

@@ -20,8 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  LimeBundleElement: () => LimeBundleElement,
-  trackPurchase: () => trackPurchase
+  LimeBundleElement: () => LimeBundleElement
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -30,7 +29,7 @@ var import_core4 = require("@lime-bundles/core");
 
 // src/renderers/fixed.ts
 var import_core = require("@lime-bundles/core");
-function renderFixedBundle(container, bundle, addToCart) {
+function renderFixedBundle(container, bundle, onAddToCart) {
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const title = document.createElement("h3");
   title.className = "lb-bundle__title";
@@ -71,23 +70,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);
 }
@@ -99,7 +95,7 @@ function escapeHtml(str) {
 
 // src/renderers/mix-match.ts
 var import_core2 = require("@lime-bundles/core");
-function renderMixMatchBundle(container, bundle, addToCart) {
+function renderMixMatchBundle(container, bundle, onAddToCart) {
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const selections = /* @__PURE__ */ new Map();
   const title = document.createElement("h3");
@@ -163,29 +159,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 = (0, import_core2.validateQuantity)(total, bundle.minQuantity, bundle.maxQuantity);
+    const total = Array.from(selections.values()).reduce(
+      (s, v) => s + v.quantity,
+      0
+    );
+    const validation = (0, import_core2.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) {
@@ -196,7 +194,7 @@ function escapeHtml2(str) {
 
 // src/renderers/volume.ts
 var import_core3 = require("@lime-bundles/core");
-function renderVolumeBundle(container, bundle, addToCart) {
+function renderVolumeBundle(container, bundle, onAddToCart) {
   const product = bundle.products[0];
   if (!product) return;
   const basePrice = parseFloat(product.priceRange.minVariantPrice.amount);
@@ -256,7 +254,11 @@ function renderVolumeBundle(container, bundle, addToCart) {
   button.setAttribute("part", "button");
   container.appendChild(button);
   function updateTiers() {
-    const savings = (0, import_core3.calculateTierSavings)(bundle.volumeTiers, basePrice, quantity);
+    const savings = (0, import_core3.calculateTierSavings)(
+      bundle.volumeTiers,
+      basePrice,
+      quantity
+    );
     tiersDiv.innerHTML = "";
     for (const ts of savings) {
       const row = document.createElement("div");
@@ -292,22 +294,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) {
@@ -383,20 +382,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" });
@@ -407,17 +421,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();
       }
     }
@@ -431,8 +444,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") ?? "";
@@ -441,147 +454,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 = (0, import_core4.createStorefrontClient)({
+      shopDomain: this.shopDomain,
+      accessToken: this.storefrontToken
+    });
     try {
-      const client = (0, import_core4.createStorefrontClient)({
-        shopDomain: this.shopDomain,
-        accessToken: this.storefrontToken
-      });
-      const data = await client.query(
-        import_core4.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(import_core4.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 = (0, import_core4.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) {
+        (0, import_core4.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 = (0, import_core4.detectCartApi)();
-      const cart = apiType === "ajax" ? (0, import_core4.createAjaxCartApi)(this.bundleGid, this.bundle.bundleType) : (0, import_core4.createStorefrontCartApi)(
-        (0, import_core4.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(
+      import_core4.BUNDLE_METAOBJECT_QUERY,
+      { id: this.bundleGid },
+      { signal }
+    );
+    if (!data.metaobject) {
+      this.bundles = [];
+      return;
+    }
+    const parsed = (0, import_core4.parseMetaobjectBundle)(
+      data.metaobject.id,
+      data.metaobject.fields
+    );
+    this.bundles = parsed ? [parsed] : [];
+  }
+  async fetchProductBundles(client, signal, productHandle) {
+    const data = await client.query(
+      import_core4.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 = (0, import_core4.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 = (0, import_core4.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(
+          import_core4.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(
+          import_core4.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);
-          (0, import_core4.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);
+    (0, import_core4.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 = (0, import_core4.observeImpression)(this, () => {
+  setupImpressionFor(bundle, element) {
+    if (!this.analyticsEnabled || !this.appUrl) return;
+    const cleanup = (0, import_core4.observeImpression)(element, () => {
       (0, import_core4.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 = `
@@ -607,66 +738,12 @@ 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);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  LimeBundleElement,
-  trackPurchase
+  LimeBundleElement
 });
 //# sourceMappingURL=index.cjs.map