@gengage/assistant-fe 0.1.0

package/dist/simrel.js

@@ -0,0 +1,620 @@
+import { b as k, n as x, p as U, c as S, a as T, r as L, o as m, s as g, d as G, g as M, f as P, q as y, B as O, j as v, t as B, h as j, i as q, w as z, k as D, l as H, m as F } from "./types-yxW8WA7u.js";
+function A(n) {
+  const e = n.headers.get("Content-Type") ?? "";
+  return e.includes("application/x-ndjson") || e.includes("text/event-stream");
+}
+async function $(n, e) {
+  const t = [], r = {
+    onEvent: (i) => {
+      const o = T(i);
+      if (!(!o || o.type !== "ui_spec")) {
+        for (const s of Object.values(o.spec.elements))
+          if (s.type === "ProductCard" && s.props) {
+            const a = s.props.product ?? s.props;
+            typeof a.sku == "string" && typeof a.name == "string" && t.push(a);
+          }
+      }
+    }
+  };
+  return e !== void 0 && (r.signal = e), await S(n, r), t;
+}
+async function J(n, e, t) {
+  const r = k("similar_products", e), i = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(n)
+  };
+  t !== void 0 && (i.signal = t);
+  const o = await fetch(r, i);
+  if (!o.ok)
+    throw new Error(`HTTP ${o.status}: ${o.statusText}`);
+  if (A(o))
+    return $(o, t);
+  const s = await o.text();
+  return s ? x(JSON.parse(s)) : [];
+}
+async function W(n, e) {
+  const t = [];
+  let r = null;
+  const i = {
+    onEvent: (o) => {
+      const s = T(o);
+      if (s) {
+        if (s.type === "metadata" && s.meta) {
+          const a = s.meta.group_name;
+          if (typeof a == "string") {
+            r = { name: a, products: [] };
+            const d = s.meta.highlight;
+            typeof d == "string" && (r.highlight = d), t.push(r);
+          }
+        }
+        if (s.type === "ui_spec" && r) {
+          for (const a of Object.values(s.spec.elements))
+            if (a.type === "ProductCard" && a.props) {
+              const d = a.props.product ?? a.props;
+              typeof d.sku == "string" && typeof d.name == "string" && r.products.push(d);
+            }
+        }
+      }
+    }
+  };
+  return e !== void 0 && (i.signal = e), await S(n, i), t;
+}
+async function Q(n, e, t) {
+  const r = k("product_groupings", e), i = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(n)
+  };
+  t !== void 0 && (i.signal = t);
+  const o = await fetch(r, i);
+  if (!o.ok)
+    throw new Error(`HTTP ${o.status}: ${o.statusText}`);
+  if (A(o))
+    return W(o, t);
+  const s = await o.text();
+  return s ? U(JSON.parse(s)) : [];
+}
+function w(n) {
+  const { product: e, index: t, discountType: r, onClick: i, onAddToCart: o, renderCard: s } = n, a = n.i18n, d = a?.priceSuffix ?? " TL";
+  if (s) {
+    const c = document.createElement("div");
+    return c.className = "gengage-simrel-card gengage-simrel-card--custom", c.innerHTML = s(e, t), c.addEventListener("click", (h) => {
+      h.target.closest(".gengage-simrel-atc") || i(e);
+    }), c;
+  }
+  const l = document.createElement("article");
+  l.className = "gengage-simrel-card", l.setAttribute("role", "listitem"), l.dataset.sku = e.sku;
+  const u = document.createElement("div");
+  if (u.className = "gengage-simrel-card-image", e.imageUrl) {
+    const c = document.createElement("img");
+    c.src = e.imageUrl, c.alt = e.name, c.loading = "lazy", u.appendChild(c);
+  }
+  if (r === "badge" && e.discountPercent && e.discountPercent > 0) {
+    const c = document.createElement("span");
+    c.className = "gengage-simrel-badge", c.textContent = `%${e.discountPercent}`, u.appendChild(c);
+  }
+  l.appendChild(u);
+  const p = document.createElement("div");
+  if (p.className = "gengage-simrel-card-info", e.brand) {
+    const c = document.createElement("div");
+    c.className = "gengage-simrel-card-brand", c.textContent = e.brand, p.appendChild(c);
+  }
+  const f = document.createElement("div");
+  if (f.className = "gengage-simrel-card-name", f.textContent = e.name, p.appendChild(f), e.rating != null && e.rating > 0) {
+    const c = document.createElement("div");
+    c.className = "gengage-simrel-card-rating";
+    const h = "★".repeat(Math.round(e.rating)) + "☆".repeat(5 - Math.round(e.rating));
+    if (c.textContent = h, e.reviewCount != null) {
+      const b = document.createElement("span");
+      b.className = "gengage-simrel-card-review-count", b.textContent = ` (${e.reviewCount})`, c.appendChild(b);
+    }
+    p.appendChild(c);
+  }
+  const C = document.createElement("div");
+  if (C.className = "gengage-simrel-card-price", e.originalPrice && e.originalPrice !== e.price && (r === "strike-through" || !r)) {
+    const c = document.createElement("span");
+    c.className = "gengage-simrel-card-price-original", c.textContent = e.originalPrice + d, C.appendChild(c);
+  }
+  if (e.price) {
+    const c = document.createElement("span");
+    c.className = "gengage-simrel-card-price-current", c.textContent = e.price + d, C.appendChild(c);
+  }
+  if (p.appendChild(C), l.appendChild(p), e.cartCode) {
+    const c = document.createElement("button");
+    c.className = "gengage-simrel-atc", c.type = "button", c.textContent = a?.addToCartButton ?? "Sepete Ekle", c.addEventListener("click", (h) => {
+      h.stopPropagation(), o({ sku: e.sku, quantity: 1, cartCode: e.cartCode });
+    }), l.appendChild(c);
+  }
+  return l.addEventListener("click", (c) => {
+    c.target.closest(".gengage-simrel-atc") || i(e);
+  }), l;
+}
+function E(n) {
+  const e = document.createElement("div");
+  e.className = "gengage-simrel-grid", e.setAttribute("role", "list"), e.setAttribute("aria-label", n.i18n?.similarProductsAriaLabel ?? "Similar products"), n.columns && e.style.setProperty("--gengage-simrel-columns", String(n.columns));
+  for (let t = 0; t < n.products.length; t++) {
+    const i = {
+      product: n.products[t],
+      index: t,
+      onClick: n.onClick,
+      onAddToCart: n.onAddToCart
+    };
+    n.i18n !== void 0 && (i.i18n = n.i18n), n.discountType !== void 0 && (i.discountType = n.discountType), n.renderCard !== void 0 && (i.renderCard = n.renderCard);
+    const o = w(i);
+    e.appendChild(o);
+  }
+  if (n.products.length === 0) {
+    const t = document.createElement("div");
+    t.className = "gengage-simrel-empty", t.textContent = n.i18n?.emptyStateMessage ?? "Benzer ürün bulunamadı.", e.appendChild(t);
+  }
+  return e;
+}
+function V(n) {
+  const e = document.createElement("div");
+  if (e.className = "gengage-simrel-groups", n.groups.length === 0) {
+    const a = document.createElement("div");
+    return a.className = "gengage-simrel-empty", a.textContent = n.i18n?.emptyStateMessage ?? "Benzer ürün bulunamadı.", e.appendChild(a), e;
+  }
+  const t = document.createElement("div");
+  t.className = "gengage-simrel-tabs", t.setAttribute("role", "tablist");
+  const r = document.createElement("div");
+  r.className = "gengage-simrel-tab-content";
+  for (let a = 0; a < n.groups.length; a++) {
+    const d = n.groups[a], l = document.createElement("button");
+    l.className = "gengage-simrel-tab", l.type = "button", l.textContent = d.name, l.setAttribute("role", "tab"), l.setAttribute("aria-selected", a === 0 ? "true" : "false"), a === 0 && l.classList.add("gengage-simrel-tab--active"), l.addEventListener("click", () => {
+      const u = t.querySelector(".gengage-simrel-tab--active");
+      u?.classList.remove("gengage-simrel-tab--active"), u?.setAttribute("aria-selected", "false"), l.classList.add("gengage-simrel-tab--active"), l.setAttribute("aria-selected", "true"), r.innerHTML = "";
+      const p = {
+        products: d.products,
+        onClick: n.onClick,
+        onAddToCart: n.onAddToCart
+      };
+      n.i18n !== void 0 && (p.i18n = n.i18n), n.discountType !== void 0 && (p.discountType = n.discountType), n.renderCard !== void 0 && (p.renderCard = n.renderCard);
+      const f = E(p);
+      r.appendChild(f);
+    }), t.appendChild(l);
+  }
+  e.appendChild(t);
+  const o = {
+    products: n.groups[0].products,
+    onClick: n.onClick,
+    onAddToCart: n.onAddToCart
+  };
+  n.i18n !== void 0 && (o.i18n = n.i18n), n.discountType !== void 0 && (o.discountType = n.discountType), n.renderCard !== void 0 && (o.renderCard = n.renderCard);
+  const s = E(o);
+  return r.appendChild(s), e.appendChild(r), e;
+}
+function _(n) {
+  if (!n || typeof n != "object") return null;
+  const e = n;
+  if (typeof e.sku != "string" || typeof e.name != "string" || typeof e.url != "string")
+    return null;
+  const t = {
+    sku: e.sku,
+    name: e.name,
+    url: e.url
+  }, r = e.imageUrl;
+  typeof r == "string" && (t.imageUrl = r);
+  const i = e.price;
+  typeof i == "string" && (t.price = i);
+  const o = e.originalPrice;
+  typeof o == "string" && (t.originalPrice = o);
+  const s = e.discountPercent;
+  typeof s == "number" && (t.discountPercent = s);
+  const a = e.brand;
+  typeof a == "string" && (t.brand = a);
+  const d = e.rating;
+  typeof d == "number" && (t.rating = d);
+  const l = e.reviewCount;
+  typeof l == "number" && (t.reviewCount = l);
+  const u = e.cartCode;
+  typeof u == "string" && (t.cartCode = u);
+  const p = e.inStock;
+  return typeof p == "boolean" && (t.inStock = p), t;
+}
+function Y(n) {
+  if (!n || typeof n != "object") return null;
+  const e = n, t = e.title, r = e.type;
+  if (typeof t != "string" || typeof r != "string") return null;
+  const i = { title: t, type: r };
+  return e.payload !== void 0 && (i.payload = e.payload), i;
+}
+const R = {
+  ProductGrid: ({ element: n, renderElement: e }) => {
+    const t = document.createElement("div");
+    t.className = "gengage-simrel-grid", t.setAttribute("role", "list");
+    const r = n.props?.columns;
+    typeof r == "number" && Number.isFinite(r) && r > 0 && t.style.setProperty("--gengage-simrel-columns", String(r));
+    for (const i of n.children ?? []) {
+      const o = e(i);
+      o && t.appendChild(o);
+    }
+    if (t.children.length === 0) {
+      const i = document.createElement("div");
+      i.className = "gengage-simrel-empty", i.textContent = "Benzer ürün bulunamadı.", t.appendChild(i);
+    }
+    return t;
+  },
+  ProductCard: ({ element: n, context: e }) => {
+    const t = n.props?.product ?? n.props, r = _(t);
+    if (!r) return null;
+    const i = n.props?.index, o = typeof i == "number" && Number.isFinite(i) ? i : 0, s = n.props?.discountType, a = s === "strike-through" || s === "badge" ? s : e.discountType, d = {
+      product: r,
+      index: o,
+      onClick: e.onClick,
+      onAddToCart: e.onAddToCart,
+      i18n: e.i18n
+    };
+    return a !== void 0 && (d.discountType = a), e.renderCard !== void 0 && (d.renderCard = e.renderCard), w(d);
+  },
+  GroupTabs: ({ element: n, context: e }) => {
+    const t = n.props?.groups;
+    if (!Array.isArray(t)) return null;
+    const r = [];
+    for (const o of t) {
+      if (!o || typeof o != "object") continue;
+      const s = o;
+      if (typeof s.name != "string") continue;
+      const a = [];
+      if (Array.isArray(s.products))
+        for (const l of s.products) {
+          const u = _(l);
+          u && a.push(u);
+        }
+      const d = {
+        name: s.name,
+        products: a
+      };
+      typeof s.highlight == "string" && (d.highlight = s.highlight), r.push(d);
+    }
+    const i = {
+      groups: r,
+      onClick: e.onClick,
+      onAddToCart: e.onAddToCart,
+      i18n: e.i18n
+    };
+    return e.discountType !== void 0 && (i.discountType = e.discountType), e.renderCard !== void 0 && (i.renderCard = e.renderCard), V(i);
+  },
+  EmptyState: ({ element: n, context: e }) => {
+    const t = document.createElement("div");
+    t.className = "gengage-simrel-empty";
+    const r = n.props?.message;
+    return t.textContent = typeof r == "string" ? r : e.i18n.emptyStateMessage, t;
+  },
+  AddToCartButton: ({ element: n, context: e }) => {
+    const t = n.props?.sku, r = n.props?.cartCode;
+    if (typeof t != "string" || typeof r != "string") return null;
+    const i = document.createElement("button");
+    i.className = "gengage-simrel-atc", i.type = "button";
+    const o = n.props?.label;
+    return i.textContent = typeof o == "string" ? o : e.i18n.addToCartButton, i.addEventListener("click", (s) => {
+      s.preventDefault(), s.stopPropagation(), e.onAddToCart({ sku: t, quantity: 1, cartCode: r });
+    }), i;
+  },
+  QuickActions: ({ element: n, context: e }) => {
+    const t = document.createElement("div");
+    t.className = "gengage-simrel-quick-actions";
+    const r = n.props?.actions;
+    if (!Array.isArray(r) || !e.onAction) return t;
+    for (const i of r) {
+      if (!i || typeof i != "object") continue;
+      const o = i, s = o.label, a = Y(o.action);
+      if (typeof s != "string" || !a) continue;
+      const d = document.createElement("button");
+      d.className = "gengage-simrel-quick-action", d.type = "button", d.textContent = s, d.addEventListener("click", (l) => {
+        l.preventDefault(), l.stopPropagation(), e.onAction?.(a);
+      }), t.appendChild(d);
+    }
+    return t;
+  }
+}, N = ({
+  element: n,
+  renderElement: e
+}) => {
+  if (!n.children || n.children.length === 0)
+    return null;
+  const t = document.createElement("div");
+  for (const r of n.children) {
+    const i = e(r);
+    i && t.appendChild(i);
+  }
+  return t;
+};
+function K() {
+  return { ...R };
+}
+function X(n, e, t = R, r = N) {
+  return L({
+    spec: n,
+    context: e,
+    registry: t,
+    containerClassName: "gengage-simrel-uispec",
+    unknownRenderer: r
+  });
+}
+const I = {
+  similarProductsAriaLabel: "Benzer ürünler",
+  emptyStateMessage: "Benzer ürün bulunamadı.",
+  addToCartButton: "Sepete Ekle",
+  priceSuffix: " TL"
+}, Z = {
+  similarProductsAriaLabel: "Similar products",
+  emptyStateMessage: "No similar products found.",
+  addToCartButton: "Add to cart",
+  priceSuffix: ""
+};
+function ee(n) {
+  return n ? n.toLowerCase().split("-")[0] ?? "tr" : "tr";
+}
+function te(n) {
+  return ee(n) === "en" ? Z : I;
+}
+const ne = m({
+  sku: g(),
+  name: g(),
+  imageUrl: g().url().optional(),
+  price: g().optional(),
+  originalPrice: g().optional(),
+  discountPercent: y().optional(),
+  url: g().url(),
+  brand: g().optional(),
+  rating: y().min(0).max(5).optional(),
+  reviewCount: y().int().nonnegative().optional()
+}), re = m({
+  layout: P(["grid", "carousel"]).optional(),
+  columns: y().int().positive().optional()
+}), ie = m({
+  product: ne,
+  index: y().int().nonnegative(),
+  discountType: P(["strike-through", "badge"]).optional()
+}), oe = m({
+  sku: g(),
+  label: g().optional(),
+  cartCode: g()
+}), se = m({
+  actions: G(
+    m({
+      label: g(),
+      action: m({
+        title: g(),
+        type: g(),
+        payload: M().optional()
+      })
+    })
+  )
+}), ae = m({
+  message: g().optional()
+}), le = {
+  components: {
+    ProductGrid: {
+      schema: re,
+      description: "Outer grid or carousel container for similar products."
+    },
+    ProductCard: {
+      schema: ie,
+      description: "A single product card with image, title, price, and actions."
+    },
+    AddToCartButton: {
+      schema: oe,
+      description: "Add-to-cart CTA rendered inside or below a product card."
+    },
+    QuickActions: {
+      schema: se,
+      description: "A row of quick-action buttons below product info."
+    },
+    EmptyState: {
+      schema: ae,
+      description: "Empty state shown when no similar products are available."
+    }
+  }
+};
+class ce extends O {
+  constructor() {
+    super(...arguments), this._abortController = null, this._contentEl = null, this._i18n = I;
+  }
+  async onInit(e) {
+    this._i18n = this._resolveI18n(e), this._contentEl = document.createElement("div"), this._contentEl.className = "gengage-simrel-container", this.root.appendChild(this._contentEl), this._lastSku = e.sku, await this._fetchAndRender(e.sku), this.isVisible = !0;
+  }
+  onUpdate(e) {
+    const t = e.sku;
+    !t || t === this._lastSku || (this._lastSku = t, this._fetchAndRender(t));
+  }
+  onShow() {
+    this._contentEl && (this._contentEl.style.opacity = "0", this._contentEl.style.transition = "opacity 0.3s ease-in", requestAnimationFrame(() => {
+      this._contentEl && (this._contentEl.style.opacity = "1");
+    }));
+  }
+  onHide() {
+  }
+  onDestroy() {
+    this._abort(), this._contentEl && (this._contentEl.remove(), this._contentEl = null);
+  }
+  // ---------------------------------------------------------------------------
+  // Internal event dispatchers
+  // ---------------------------------------------------------------------------
+  _handleProductClick(e) {
+    const t = {
+      sku: e.sku,
+      name: e.name,
+      url: e.url
+    };
+    if (e.imageUrl !== void 0 && (t.imageUrl = e.imageUrl), e.price !== void 0 && (t.price = e.price), e.originalPrice !== void 0 && (t.originalPrice = e.originalPrice), e.discountPercent !== void 0 && (t.discountPercent = e.discountPercent), e.brand !== void 0 && (t.brand = e.brand), e.rating !== void 0 && (t.rating = e.rating), e.reviewCount !== void 0 && (t.reviewCount = e.reviewCount), e.cartCode !== void 0 && (t.cartCode = e.cartCode), e.inStock !== void 0 && (t.inStock = e.inStock), this.config.onProductClick?.(t) === !1) return;
+    const r = this.config.session?.sessionId ?? null;
+    v("gengage:similar:product-click", {
+      sku: e.sku,
+      url: e.url,
+      sessionId: r
+    }), this.config.onProductNavigate?.(e.url, e.sku, r);
+  }
+  _handleAddToCart(e) {
+    this.config.onAddToCart?.(e), v("gengage:similar:add-to-cart", e), this.track(
+      B(this.analyticsContext(), {
+        attribution_source: "simrel",
+        attribution_action_id: crypto.randomUUID(),
+        cart_value: 0,
+        // Host page should enrich via event listener
+        currency: "TRY",
+        line_items: e.quantity,
+        sku: e.sku
+      })
+    );
+  }
+  // ---------------------------------------------------------------------------
+  // Private
+  // ---------------------------------------------------------------------------
+  _abort() {
+    this._abortController?.abort(), this._abortController = null;
+  }
+  async _fetchAndRender(e) {
+    if (this._abort(), this._abortController = new AbortController(), !this._contentEl) return;
+    this._contentEl.innerHTML = "";
+    const t = document.createElement("div");
+    t.className = "gengage-simrel-loading";
+    const r = document.createElement("div");
+    r.className = "gengage-simrel-spinner", t.appendChild(r), this._contentEl.appendChild(t);
+    const i = {
+      middlewareUrl: this.config.middlewareUrl
+    }, o = crypto.randomUUID(), s = Date.now();
+    this.track(
+      j(this.analyticsContext(), {
+        endpoint: "similar_products",
+        request_id: o,
+        widget: "simrel"
+      })
+    );
+    try {
+      const a = {
+        account_id: this.config.accountId,
+        session_id: this.config.session?.sessionId ?? "",
+        correlation_id: this.config.session?.sessionId ?? "",
+        sku: e
+      };
+      this.config.domain !== void 0 && (a.domain = this.config.domain);
+      const d = await J(a, i, this._abortController.signal);
+      if (!this._contentEl) return;
+      if (this._contentEl.innerHTML = "", d.length > 0)
+        try {
+          const l = d.map((p) => p.sku), u = await Q(
+            {
+              account_id: this.config.accountId,
+              session_id: this.config.session?.sessionId ?? "",
+              correlation_id: this.config.session?.sessionId ?? "",
+              skus: l
+            },
+            i,
+            this._abortController.signal
+          );
+          if (u.length > 0 && this._contentEl) {
+            const p = this._buildGroupsSpec(u), f = this._renderUISpec(p);
+            this._contentEl.appendChild(f);
+            return;
+          }
+        } catch {
+        }
+      if (this._contentEl) {
+        const l = this._buildProductsSpec(d), u = this._renderUISpec(l);
+        this._contentEl.appendChild(u);
+      }
+      this.track(
+        q(this.analyticsContext(), {
+          request_id: o,
+          latency_ms: Date.now() - s,
+          chunk_count: d.length,
+          widget: "simrel"
+        })
+      ), this.track(
+        z(this.analyticsContext(), {
+          message_count: d.length,
+          history_ref: o,
+          redaction_level: "none",
+          widget: "simrel"
+        })
+      );
+    } catch (a) {
+      if (a instanceof DOMException && a.name === "AbortError") return;
+      v("gengage:global:error", {
+        source: "simrel",
+        code: "FETCH_ERROR",
+        message: D(this.config.locale)
+      }), this.track(
+        H(this.analyticsContext(), {
+          request_id: o,
+          error_code: "FETCH_ERROR",
+          error_message: a instanceof Error ? a.message : String(a),
+          widget: "simrel"
+        })
+      ), this._contentEl && (this._contentEl.innerHTML = "", this._contentEl.style.display = "none");
+    }
+  }
+  _resolveI18n(e) {
+    return { ...te(e.locale), ...e.i18n };
+  }
+  _resolveUISpecRegistry() {
+    const e = K();
+    return F(e, this.config.renderer?.registry);
+  }
+  _buildRenderContext() {
+    const e = this.config.renderCard, t = {
+      onClick: (r) => this._handleProductClick(r),
+      onAddToCart: (r) => this._handleAddToCart(r),
+      i18n: this._i18n
+    };
+    return this.config.discountType !== void 0 && (t.discountType = this.config.discountType), e !== void 0 && (t.renderCard = e), t;
+  }
+  _renderUISpec(e) {
+    const t = this._resolveUISpecRegistry(), r = this._buildRenderContext(), i = this.config.renderer?.unknownRenderer ?? N, o = (d, l) => X(d, l, t, i), s = this.config.renderer?.renderUISpec;
+    return s ? s(e, r, {
+      registry: t,
+      unknownRenderer: i,
+      defaultRender: o
+    }) : o(e, r);
+  }
+  _buildProductsSpec(e) {
+    const t = {}, r = [];
+    for (let i = 0; i < e.length; i++) {
+      const o = e[i], s = `product-${i}`;
+      r.push(s), t[s] = {
+        type: "ProductCard",
+        props: {
+          product: o,
+          index: i,
+          discountType: this.config.discountType
+        }
+      };
+    }
+    return t.root = {
+      type: "ProductGrid",
+      props: {
+        layout: "grid"
+      },
+      children: r
+    }, {
+      root: "root",
+      elements: t
+    };
+  }
+  _buildGroupsSpec(e) {
+    return {
+      root: "root",
+      elements: {
+        root: {
+          type: "GroupTabs",
+          props: { groups: e }
+        }
+      }
+    };
+  }
+}
+function ue() {
+  return new ce();
+}
+export {
+  ce as GengageSimRel,
+  K as createDefaultSimRelUISpecRegistry,
+  ue as createSimRelWidget,
+  N as defaultSimRelUnknownUISpecRenderer,
+  X as renderSimRelUISpec,
+  le as simRelCatalog
+};
+//# sourceMappingURL=simrel.js.map