@lime-bundles/widget 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -7,16 +7,20 @@ declare class LimeBundleElement extends HTMLElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** Clean up stale bundle state and active impression observer. */
     private teardownImpression;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private get shopDomain();
     private get storefrontToken();
     private get bundleGid();
-    private get cartId();
     private get appUrl();
     private get analyticsEnabled();
     private fetchBundle;
+    /**
+     * Dispatch add-to-cart for merchant handling. Returns true — the widget
+     * reports success optimistically. If the merchant's cart mutation fails,
+     * they're responsible for surfacing that error in their own UI.
+     */
+    private dispatchAddToCart;
     private renderBundle;
     private setupImpression;
     private renderLoading;
@@ -24,33 +28,4 @@ declare class LimeBundleElement extends HTMLElement {
     private render;
 }
 
-/**
- * Thank-you page snippet — fires purchase events for headless storefronts.
- *
- * Usage:
- *   <script src="https://unpkg.com/@lime-bundles/widget/dist/lime-thankyou.js"></script>
- *   <script>
- *     LimeBundles.trackPurchase({
- *       shopDomain: 'my-store.myshopify.com',
- *       orderId: 'gid://shopify/Order/12345',
- *       lineItems: [
- *         { bundleGid: '...', bundleType: 'fixed', price: 29.99, quantity: 1 }
- *       ]
- *     });
- *   </script>
- */
-interface PurchaseLineItem {
-    bundleGid: string;
-    bundleType: string;
-    price: number;
-    quantity: number;
-}
-interface TrackPurchaseInput {
-    shopDomain: string;
-    orderId: string;
-    lineItems: PurchaseLineItem[];
-    appUrl?: string;
-}
-declare function trackPurchase(input: TrackPurchaseInput): void;
-
-export { LimeBundleElement, trackPurchase };
+export { LimeBundleElement };

package/dist/index.d.ts

@@ -7,16 +7,20 @@ declare class LimeBundleElement extends HTMLElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** Clean up stale bundle state and active impression observer. */
     private teardownImpression;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private get shopDomain();
     private get storefrontToken();
     private get bundleGid();
-    private get cartId();
     private get appUrl();
     private get analyticsEnabled();
     private fetchBundle;
+    /**
+     * Dispatch add-to-cart for merchant handling. Returns true — the widget
+     * reports success optimistically. If the merchant's cart mutation fails,
+     * they're responsible for surfacing that error in their own UI.
+     */
+    private dispatchAddToCart;
     private renderBundle;
     private setupImpression;
     private renderLoading;
@@ -24,33 +28,4 @@ declare class LimeBundleElement extends HTMLElement {
     private render;
 }
 
-/**
- * Thank-you page snippet — fires purchase events for headless storefronts.
- *
- * Usage:
- *   <script src="https://unpkg.com/@lime-bundles/widget/dist/lime-thankyou.js"></script>
- *   <script>
- *     LimeBundles.trackPurchase({
- *       shopDomain: 'my-store.myshopify.com',
- *       orderId: 'gid://shopify/Order/12345',
- *       lineItems: [
- *         { bundleGid: '...', bundleType: 'fixed', price: 29.99, quantity: 1 }
- *       ]
- *     });
- *   </script>
- */
-interface PurchaseLineItem {
-    bundleGid: string;
-    bundleType: string;
-    price: number;
-    quantity: number;
-}
-interface TrackPurchaseInput {
-    shopDomain: string;
-    orderId: string;
-    lineItems: PurchaseLineItem[];
-    appUrl?: string;
-}
-declare function trackPurchase(input: TrackPurchaseInput): void;
-
-export { LimeBundleElement, trackPurchase };
+export { LimeBundleElement };

package/dist/index.js

@@ -2,18 +2,19 @@
 import {
   createStorefrontClient,
   BUNDLE_METAOBJECT_QUERY,
+  SHOP_CUSTOM_CSS_QUERY,
   parseMetaobjectBundle,
-  detectCartApi,
-  createAjaxCartApi,
-  createStorefrontCartApi,
   observeImpression,
   reportImpression,
-  reportAddToCart
+  reportAddToCart,
+  injectCustomCss
 } 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 +55,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 +79,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 +147,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 +181,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 +245,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 +285,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) {
@@ -371,7 +378,6 @@ var LimeBundleElement = class extends HTMLElement {
     "shop-domain",
     "storefront-token",
     "bundle-gid",
-    "cart-id",
     "app-url",
     "analytics",
     "locale"
@@ -392,7 +398,6 @@ var LimeBundleElement = class extends HTMLElement {
     this.abortController?.abort();
     this.teardownImpression();
   }
-  /** Clean up stale bundle state and active impression observer. */
   teardownImpression() {
     this.impressionCleanup?.();
     this.impressionCleanup = null;
@@ -414,9 +419,6 @@ var LimeBundleElement = class extends HTMLElement {
   get bundleGid() {
     return this.getAttribute("bundle-gid") ?? "";
   }
-  get cartId() {
-    return this.getAttribute("cart-id") ?? void 0;
-  }
   get appUrl() {
     return this.getAttribute("app-url") ?? "";
   }
@@ -425,7 +427,9 @@ var LimeBundleElement = class extends HTMLElement {
   }
   async fetchBundle() {
     if (!this.shopDomain || !this.storefrontToken || !this.bundleGid) {
-      this.renderError("Missing required attributes: shop-domain, storefront-token, bundle-gid");
+      this.renderError(
+        "Missing required attributes: shop-domain, storefront-token, bundle-gid"
+      );
       return;
     }
     this.abortController?.abort();
@@ -437,26 +441,37 @@ var LimeBundleElement = class extends HTMLElement {
         shopDomain: this.shopDomain,
         accessToken: this.storefrontToken
       });
-      const data = await client.query(
-        BUNDLE_METAOBJECT_QUERY,
-        { id: this.bundleGid }
-      );
+      const [bundleData, cssData] = await Promise.all([
+        client.query(
+          BUNDLE_METAOBJECT_QUERY,
+          { id: this.bundleGid },
+          { signal: controller.signal }
+        ),
+        client.query(
+          SHOP_CUSTOM_CSS_QUERY,
+          void 0,
+          { signal: controller.signal }
+        ).catch(() => null)
+      ]);
       if (controller.signal.aborted) return;
-      if (!data.metaobject) {
+      if (!bundleData.metaobject) {
         this.bundle = null;
         this.teardownImpression();
         this.renderError("Bundle not found");
         return;
       }
       this.bundle = parseMetaobjectBundle(
-        data.metaobject.id,
-        data.metaobject.fields
+        bundleData.metaobject.id,
+        bundleData.metaobject.fields
       );
       if (!this.bundle) {
         this.teardownImpression();
         this.renderError("Bundle is not active or has expired");
         return;
       }
+      if (cssData?.shop?.metafield?.value) {
+        injectCustomCss(this.shopDomain, cssData.shop.metafield.value);
+      }
       this.renderBundle();
       this.setupImpression();
     } catch (err) {
@@ -468,73 +483,70 @@ var LimeBundleElement = class extends HTMLElement {
       );
     }
   }
+  /**
+   * Dispatch add-to-cart for merchant handling. Returns true — the widget
+   * reports success optimistically. If the merchant's cart mutation fails,
+   * they're responsible for surfacing that error in their own UI.
+   */
+  dispatchAddToCart = (lines) => {
+    this.dispatchEvent(
+      new CustomEvent("lime-bundle:add-to-cart", {
+        detail: { lines },
+        bubbles: true,
+        composed: true
+      })
+    );
+    if (this.analyticsEnabled && this.appUrl && this.bundle) {
+      const quantity = lines.reduce((sum, l) => sum + l.quantity, 0);
+      const totalPrice = lines.reduce((sum, line) => {
+        const product = this.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: this.bundleGid,
+          bundleType: this.bundle.bundleType,
+          productId: this.bundle.products[0]?.id ?? "",
+          quantity,
+          totalPrice: Math.round(totalPrice * 100) / 100
+        }
+      );
+    }
+  };
   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"
-        };
-      }
-      if (result.success) {
-        this.dispatchEvent(
-          new CustomEvent("lime-bundle:add-to-cart", {
-            detail: { items, cartId: result.cartId },
-            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);
+        renderFixedBundle(
+          container,
+          this.bundle,
+          this.dispatchAddToCart
+        );
         break;
       case "mix_match":
-        renderMixMatchBundle(container, this.bundle, addToCart);
+        renderMixMatchBundle(
+          container,
+          this.bundle,
+          this.dispatchAddToCart
+        );
         break;
       case "volume":
-        renderVolumeBundle(container, this.bundle, addToCart);
+        renderVolumeBundle(
+          container,
+          this.bundle,
+          this.dispatchAddToCart
+        );
         break;
     }
     this.shadow.innerHTML = "";
@@ -590,65 +602,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