@prosdevlab/experience-sdk-plugins 0.1.0 → 0.1.3

package/dist/index.js

@@ -0,0 +1,634 @@
+import { storagePlugin } from '@lytics/sdk-kit-plugins';
+
+// src/utils/sanitize.ts
+var ALLOWED_TAGS = ["strong", "em", "a", "br", "span", "b", "i", "p"];
+var ALLOWED_ATTRIBUTES = {
+  a: ["href", "class", "style", "title"],
+  span: ["class", "style"],
+  p: ["class", "style"]
+  // Other tags have no attributes allowed
+};
+function sanitizeHTML(html) {
+  if (!html || typeof html !== "string") {
+    return "";
+  }
+  const temp = document.createElement("div");
+  temp.innerHTML = html;
+  function sanitizeNode(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return escapeHTML(node.textContent || "");
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node;
+      const tagName = element.tagName.toLowerCase();
+      if (!tagName || tagName.includes(" ")) {
+        return "";
+      }
+      if (!ALLOWED_TAGS.includes(tagName)) {
+        return "";
+      }
+      const allowedAttrs = ALLOWED_ATTRIBUTES[tagName] || [];
+      const attrs = [];
+      for (const attr of allowedAttrs) {
+        const value = element.getAttribute(attr);
+        if (value !== null) {
+          if (attr === "href") {
+            const sanitizedHref = sanitizeURL(value);
+            if (sanitizedHref) {
+              attrs.push(`href="${escapeAttribute(sanitizedHref)}"`);
+            }
+          } else {
+            attrs.push(`${attr}="${escapeAttribute(value)}"`);
+          }
+        }
+      }
+      const attrString = attrs.length > 0 ? " " + attrs.join(" ") : "";
+      let innerHTML = "";
+      for (const child of Array.from(element.childNodes)) {
+        innerHTML += sanitizeNode(child);
+      }
+      if (tagName === "br") {
+        return `<br${attrString} />`;
+      }
+      return `<${tagName}${attrString}>${innerHTML}</${tagName}>`;
+    }
+    return "";
+  }
+  let sanitized = "";
+  for (const child of Array.from(temp.childNodes)) {
+    sanitized += sanitizeNode(child);
+  }
+  return sanitized;
+}
+function escapeHTML(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function sanitizeURL(url) {
+  if (!url || typeof url !== "string") {
+    return "";
+  }
+  let decoded;
+  try {
+    decoded = decodeURIComponent(url);
+  } catch {
+    decoded = url;
+  }
+  const trimmed = decoded.trim().toLowerCase();
+  if (trimmed.startsWith("javascript:") || trimmed.startsWith("data:") || url.toLowerCase().trim().startsWith("javascript:") || url.toLowerCase().trim().startsWith("data:")) {
+    return "";
+  }
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("mailto:") || trimmed.startsWith("tel:") || trimmed.startsWith("/") || trimmed.startsWith("#") || trimmed.startsWith("?")) {
+    return url;
+  }
+  if (!trimmed.includes(":")) {
+    return url;
+  }
+  return "";
+}
+
+// src/banner/banner.ts
+var bannerPlugin = (plugin, instance, config) => {
+  plugin.ns("banner");
+  plugin.defaults({
+    banner: {
+      position: "top",
+      dismissable: true,
+      zIndex: 1e4
+    }
+  });
+  const activeBanners = /* @__PURE__ */ new Map();
+  function injectDefaultStyles() {
+    const styleId = "xp-banner-styles";
+    if (document.getElementById(styleId)) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      .xp-banner {
+        position: fixed;
+        left: 0;
+        right: 0;
+        width: 100%;
+        padding: 16px 20px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        line-height: 1.5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        z-index: 10000;
+        background: #f9fafb;
+        color: #111827;
+        border-bottom: 1px solid #e5e7eb;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+      }
+      
+      .xp-banner--top {
+        top: 0;
+      }
+      
+      .xp-banner--bottom {
+        bottom: 0;
+        border-bottom: none;
+        border-top: 1px solid #e5e7eb;
+        box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.05);
+      }
+      
+      .xp-banner__container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 20px;
+        width: 100%;
+      }
+      
+      .xp-banner__content {
+        flex: 1;
+        min-width: 0;
+      }
+      
+      .xp-banner__title {
+        font-weight: 600;
+        margin-bottom: 4px;
+        margin-top: 0;
+        font-size: 14px;
+      }
+      
+      .xp-banner__message {
+        margin: 0;
+        font-size: 14px;
+      }
+      
+      .xp-banner__buttons {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+        flex-shrink: 0;
+      }
+      
+      .xp-banner__button {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-decoration: none;
+      }
+      
+      .xp-banner__button--primary {
+        background: #2563eb;
+        color: #ffffff;
+      }
+      
+      .xp-banner__button--primary:hover {
+        background: #1d4ed8;
+      }
+      
+      .xp-banner__button--secondary {
+        background: #ffffff;
+        color: #374151;
+        border: 1px solid #d1d5db;
+      }
+      
+      .xp-banner__button--secondary:hover {
+        background: #f9fafb;
+      }
+      
+      .xp-banner__button--link {
+        background: transparent;
+        color: #2563eb;
+        padding: 4px 8px;
+        font-weight: 400;
+        text-decoration: underline;
+      }
+      
+      .xp-banner__button--link:hover {
+        background: rgba(0, 0, 0, 0.05);
+      }
+      
+      .xp-banner__close {
+        background: transparent;
+        border: none;
+        color: #6b7280;
+        font-size: 24px;
+        line-height: 1;
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+        flex-shrink: 0;
+      }
+      
+      .xp-banner__close:hover {
+        opacity: 1;
+      }
+      
+      @media (max-width: 640px) {
+        .xp-banner__container {
+          flex-direction: column;
+          align-items: stretch;
+        }
+        
+        .xp-banner__buttons {
+          width: 100%;
+          flex-direction: column;
+        }
+        
+        .xp-banner__button {
+          width: 100%;
+        }
+      }
+      
+      /* Dark mode support */
+      @media (prefers-color-scheme: dark) {
+        .xp-banner {
+          background: #1f2937;
+          color: #f3f4f6;
+          border-bottom-color: #374151;
+        }
+        
+        .xp-banner--bottom {
+          border-top-color: #374151;
+        }
+        
+        .xp-banner__button--primary {
+          background: #3b82f6;
+        }
+        
+        .xp-banner__button--primary:hover {
+          background: #2563eb;
+        }
+        
+        .xp-banner__button--secondary {
+          background: #374151;
+          color: #f3f4f6;
+          border-color: #4b5563;
+        }
+        
+        .xp-banner__button--secondary:hover {
+          background: #4b5563;
+        }
+        
+        .xp-banner__button--link {
+          color: #93c5fd;
+        }
+        
+        .xp-banner__close {
+          color: #9ca3af;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  function createBannerElement(experience) {
+    const content = experience.content;
+    const position = content.position ?? config.get("banner.position") ?? "top";
+    const dismissable = content.dismissable ?? config.get("banner.dismissable") ?? true;
+    const zIndex = config.get("banner.zIndex") ?? 1e4;
+    injectDefaultStyles();
+    const banner = document.createElement("div");
+    banner.setAttribute("data-experience-id", experience.id);
+    const baseClasses = ["xp-banner", `xp-banner--${position}`];
+    if (content.className) {
+      baseClasses.push(content.className);
+    }
+    banner.className = baseClasses.join(" ");
+    if (content.style) {
+      Object.assign(banner.style, content.style);
+    }
+    if (zIndex !== 1e4) {
+      banner.style.zIndex = String(zIndex);
+    }
+    const container = document.createElement("div");
+    container.className = "xp-banner__container";
+    banner.appendChild(container);
+    const contentDiv = document.createElement("div");
+    contentDiv.className = "xp-banner__content";
+    if (content.title) {
+      const title = document.createElement("h3");
+      title.className = "xp-banner__title";
+      title.innerHTML = sanitizeHTML(content.title);
+      contentDiv.appendChild(title);
+    }
+    const message = document.createElement("p");
+    message.className = "xp-banner__message";
+    message.innerHTML = sanitizeHTML(content.message);
+    contentDiv.appendChild(message);
+    container.appendChild(contentDiv);
+    banner.appendChild(contentDiv);
+    const buttonContainer = document.createElement("div");
+    buttonContainer.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    `;
+    const buttonsDiv = document.createElement("div");
+    buttonsDiv.className = "xp-banner__buttons";
+    function createButton(buttonConfig) {
+      const button = document.createElement("button");
+      button.textContent = buttonConfig.text;
+      const variant = buttonConfig.variant || "primary";
+      const buttonClasses = ["xp-banner__button", `xp-banner__button--${variant}`];
+      if (buttonConfig.className) {
+        buttonClasses.push(buttonConfig.className);
+      }
+      button.className = buttonClasses.join(" ");
+      if (buttonConfig.style) {
+        Object.assign(button.style, buttonConfig.style);
+      }
+      button.addEventListener("click", () => {
+        instance.emit("experiences:action", {
+          experienceId: experience.id,
+          type: "banner",
+          action: buttonConfig.action,
+          url: buttonConfig.url,
+          metadata: buttonConfig.metadata,
+          variant,
+          timestamp: Date.now()
+        });
+        if (buttonConfig.url) {
+          window.location.href = buttonConfig.url;
+        }
+      });
+      return button;
+    }
+    if (content.buttons && content.buttons.length > 0) {
+      content.buttons.forEach((buttonConfig) => {
+        const button = createButton(buttonConfig);
+        buttonsDiv.appendChild(button);
+      });
+    }
+    if (dismissable) {
+      const closeButton = document.createElement("button");
+      closeButton.className = "xp-banner__close";
+      closeButton.innerHTML = "&times;";
+      closeButton.setAttribute("aria-label", "Close banner");
+      closeButton.addEventListener("click", () => {
+        remove(experience.id);
+        instance.emit("experiences:dismissed", {
+          experienceId: experience.id,
+          type: "banner"
+        });
+      });
+      buttonsDiv.appendChild(closeButton);
+    }
+    container.appendChild(buttonsDiv);
+    return banner;
+  }
+  function show(experience) {
+    if (activeBanners.has(experience.id)) {
+      return;
+    }
+    if (typeof document === "undefined") {
+      return;
+    }
+    const banner = createBannerElement(experience);
+    document.body.appendChild(banner);
+    activeBanners.set(experience.id, banner);
+    instance.emit("experiences:shown", {
+      experienceId: experience.id,
+      type: "banner",
+      timestamp: Date.now()
+    });
+  }
+  function remove(experienceId) {
+    if (experienceId) {
+      const banner = activeBanners.get(experienceId);
+      if (banner?.parentNode) {
+        banner.parentNode.removeChild(banner);
+      }
+      activeBanners.delete(experienceId);
+    } else {
+      for (const [id, banner] of activeBanners.entries()) {
+        if (banner?.parentNode) {
+          banner.parentNode.removeChild(banner);
+        }
+        activeBanners.delete(id);
+      }
+    }
+  }
+  function isShowing() {
+    return activeBanners.size > 0;
+  }
+  plugin.expose({
+    banner: {
+      show,
+      remove,
+      isShowing
+    }
+  });
+  instance.on("experiences:evaluated", (payload) => {
+    const items = Array.isArray(payload) ? payload : [payload];
+    for (const item of items) {
+      const typedItem = item;
+      const decision = typedItem.decision;
+      const experience = typedItem.experience;
+      if (experience?.type === "banner") {
+        if (decision?.show) {
+          show(experience);
+        } else if (experience.id && activeBanners.has(experience.id)) {
+          remove(experience.id);
+        }
+      }
+    }
+  });
+  instance.on("sdk:destroy", () => {
+    remove();
+  });
+};
+
+// src/debug/debug.ts
+var debugPlugin = (plugin, instance, config) => {
+  plugin.ns("debug");
+  plugin.defaults({
+    debug: {
+      enabled: false,
+      console: false,
+      window: true
+    }
+  });
+  const isEnabled = () => config.get("debug.enabled") ?? false;
+  const shouldLogConsole = () => config.get("debug.console") ?? false;
+  const shouldEmitWindow = () => config.get("debug.window") ?? true;
+  const log = (message, data) => {
+    if (!isEnabled()) return;
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+    const logData = {
+      timestamp,
+      message,
+      data
+    };
+    if (shouldLogConsole()) {
+      console.log(`[experiences] ${message}`, data || "");
+    }
+    if (shouldEmitWindow() && typeof window !== "undefined") {
+      const event = new CustomEvent("experience-sdk:debug", {
+        detail: logData
+      });
+      window.dispatchEvent(event);
+    }
+  };
+  plugin.expose({
+    debug: {
+      log,
+      isEnabled
+    }
+  });
+  if (isEnabled()) {
+    instance.on("experiences:ready", () => {
+      if (!isEnabled()) return;
+      log("SDK initialized and ready");
+    });
+    instance.on("experiences:registered", (payload) => {
+      if (!isEnabled()) return;
+      log("Experience registered", payload);
+    });
+    instance.on("experiences:evaluated", (payload) => {
+      if (!isEnabled()) return;
+      log("Experience evaluated", payload);
+    });
+  }
+};
+var frequencyPlugin = (plugin, instance, config) => {
+  plugin.ns("frequency");
+  plugin.defaults({
+    frequency: {
+      enabled: true,
+      namespace: "experiences:frequency"
+    }
+  });
+  const experienceFrequencyMap = /* @__PURE__ */ new Map();
+  if (!instance.storage) {
+    instance.use(storagePlugin);
+  }
+  const isEnabled = () => config.get("frequency.enabled") ?? true;
+  const getNamespace = () => config.get("frequency.namespace") ?? "experiences:frequency";
+  const getStorageBackend = (per) => {
+    return per === "session" ? sessionStorage : localStorage;
+  };
+  const getStorageKey = (experienceId) => {
+    return `${getNamespace()}:${experienceId}`;
+  };
+  const getImpressionData = (experienceId, per) => {
+    const storage = getStorageBackend(per);
+    const key = getStorageKey(experienceId);
+    const raw = storage.getItem(key);
+    if (!raw) {
+      return {
+        count: 0,
+        lastImpression: 0,
+        impressions: [],
+        per
+      };
+    }
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return {
+        count: 0,
+        lastImpression: 0,
+        impressions: [],
+        per
+      };
+    }
+  };
+  const saveImpressionData = (experienceId, data) => {
+    const per = data.per || "session";
+    const storage = getStorageBackend(per);
+    const key = getStorageKey(experienceId);
+    storage.setItem(key, JSON.stringify(data));
+  };
+  const getTimeWindow = (per) => {
+    switch (per) {
+      case "session":
+        return Number.POSITIVE_INFINITY;
+      // Session storage handles this
+      case "day":
+        return 24 * 60 * 60 * 1e3;
+      // 24 hours
+      case "week":
+        return 7 * 24 * 60 * 60 * 1e3;
+    }
+  };
+  const getImpressionCount = (experienceId, per = "session") => {
+    if (!isEnabled()) return 0;
+    const data = getImpressionData(experienceId, per);
+    return data.count;
+  };
+  const hasReachedCap = (experienceId, max, per) => {
+    if (!isEnabled()) return false;
+    const data = getImpressionData(experienceId, per);
+    const timeWindow = getTimeWindow(per);
+    const now = Date.now();
+    if (per === "session") {
+      return data.count >= max;
+    }
+    const recentImpressions = data.impressions.filter((timestamp) => now - timestamp < timeWindow);
+    return recentImpressions.length >= max;
+  };
+  const recordImpression = (experienceId, per = "session") => {
+    if (!isEnabled()) return;
+    const data = getImpressionData(experienceId, per);
+    const now = Date.now();
+    data.count += 1;
+    data.lastImpression = now;
+    data.impressions.push(now);
+    data.per = per;
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60 * 1e3;
+    data.impressions = data.impressions.filter((ts) => ts > sevenDaysAgo);
+    saveImpressionData(experienceId, data);
+    instance.emit("experiences:impression-recorded", {
+      experienceId,
+      count: data.count,
+      timestamp: now
+    });
+  };
+  plugin.expose({
+    frequency: {
+      getImpressionCount,
+      hasReachedCap,
+      recordImpression,
+      // Internal method to register experience frequency config
+      _registerExperience: (experienceId, per) => {
+        experienceFrequencyMap.set(experienceId, per);
+      }
+    }
+  });
+  if (isEnabled()) {
+    instance.on("experiences:evaluated", (payload) => {
+      const items = Array.isArray(payload) ? payload : [payload];
+      for (const item of items) {
+        const decision = item.decision;
+        if (decision?.show && decision.experienceId) {
+          let per = experienceFrequencyMap.get(decision.experienceId) || "session";
+          if (!experienceFrequencyMap.has(decision.experienceId)) {
+            const freqStep = decision.trace.find(
+              (t) => t.step === "check-frequency-cap"
+            );
+            if (freqStep?.input && typeof freqStep.input === "object" && "per" in freqStep.input) {
+              per = freqStep.input.per;
+              experienceFrequencyMap.set(decision.experienceId, per);
+            }
+          }
+          recordImpression(decision.experienceId, per);
+        }
+      }
+    });
+  }
+};
+
+export { bannerPlugin, debugPlugin, frequencyPlugin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map