@magicfeedback/popup-sdk 1.0.9 → 1.0.11

package/dist/index.mjs

@@ -1774,7 +1774,7 @@ function ensureResponsiveStyles(popup) {
   `;
   popup.appendChild(style);
 }
-async function renderPopup(container, surveyId, productId, actions, emit, onClose) {
+async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production") {
   let surveyCompletedEmitted = false;
   let stylesInjected = false;
   const popup = document.createElement("div");
@@ -1799,7 +1799,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   closeBtn.type = "button";
   closeBtn.setAttribute("aria-label", "Close popup");
   closeBtn.innerHTML = `
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     `;
@@ -1850,6 +1850,20 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   main.style.cssText = "display:flex; flex-direction:column; width:100%; max-height:80vh; overflow-y:auto;";
   const formWrapper = document.createElement("div");
   formWrapper.style.cssText = "width:100%; flex: 1 1 auto;";
+  const errorHint = document.createElement("div");
+  errorHint.className = "deepdots-error-hint";
+  errorHint.style.cssText = `
+      display: none;
+      margin: 12px 0 0 0;
+      padding: 10px 12px;
+      border-radius: 6px;
+      background: #FEF3C7; /* amber-100 */
+      color: #92400E; /* amber-700 */
+      border: 1px solid #FCD34D; /* amber-300 */
+      font-size: 13px;
+    `;
+  errorHint.setAttribute("role", "alert");
+  errorHint.setAttribute("aria-live", "polite");
   const spinnerEl = document.createElement("div");
   spinnerEl.className = "mf-spinner";
   spinnerEl.setAttribute("role", "status");
@@ -1863,6 +1877,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   formWrapper.appendChild(spinnerEl);
   formWrapper.appendChild(formHost);
   main.appendChild(formWrapper);
+  main.appendChild(errorHint);
   const footer = document.createElement("div");
   footer.className = "deepdots-popup-footer";
   footer.setAttribute("data-actions-wrapper", "true");
@@ -2007,7 +2022,6 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         setLoading(false);
         break;
       case "error":
-        closeButton.style.display = "inline-flex";
         setLoading(false);
         break;
     }
@@ -2044,13 +2058,13 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       setLoading(false);
       return;
     }
-    import_native.default.init({ debug: true, env: "prod" });
+    import_native.default.init({ debug: true, env: env === "production" ? "prod" : "dev" });
     formInstance = import_native.default.form(surveyId, productId);
     const generateOptions = {
       addButton: false,
       getMetaData: true
     };
-    generateOptions.onLoadedEvent = ({ formData, progress }) => {
+    generateOptions.onLoadedEvent = ({ formData }) => {
       try {
       } catch (e) {
       }
@@ -2136,11 +2150,23 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       emit("popup_clicked", surveyId, { action: "before_submit" });
     };
     generateOptions.afterSubmitEvent = ({ error, completed, total, progress }) => {
-      if (error) {
-        emit("popup_clicked", surveyId, { action: "submit_error", error });
-        updateButtons("error");
+      const errText = error ? typeof error === "string" ? error : error.message ?? String(error) : "";
+      if (errText) {
+        setLoading(false);
+        if (errText.toLowerCase().includes("no response")) {
+          errorHint.textContent = "Please answer the required question to continue.";
+          errorHint.style.display = "block";
+          emit("popup_clicked", surveyId, { action: "validation_error_required" });
+          updateButtons("in_progress_next");
+          return;
+        }
+        errorHint.textContent = "An error occurred while submitting. Please try again or close the popup.";
+        errorHint.style.display = "block";
+        emit("popup_clicked", surveyId, { action: "submit_error", error: errText });
         return;
       }
+      errorHint.style.display = "none";
+      setLoading(false);
       if (completed) {
         emit("survey_completed", surveyId, { action: "completed" });
         surveyCompletedEmitted = true;
@@ -2183,6 +2209,9 @@ function setupTrigger(popups, trigger) {
     case "exit":
       setupExitTrigger(popups, trigger);
       break;
+    case "click":
+      setupClickTrigger(popups, trigger);
+      break;
   }
 }
 function setupTimeTrigger(popups, trigger) {
@@ -2205,23 +2234,120 @@ function setupScrollTrigger(popups, trigger) {
   popups.debug(`Scroll trigger set for ${threshold}%`);
 }
 function setupExitTrigger(popups, trigger) {
-  const handler = (e) => {
-    if (e.clientY <= 0) {
-      popups.triggerSurvey(trigger.surveyId);
-      document.removeEventListener("mouseout", handler);
+  let fired = false;
+  let lastUrl = typeof window !== "undefined" ? window.location.href : "";
+  const historyRef = typeof window !== "undefined" ? window.history : null;
+  const originalPushState = historyRef ? historyRef.pushState.bind(historyRef) : null;
+  const originalReplaceState = historyRef ? historyRef.replaceState.bind(historyRef) : null;
+  const cleanup = () => {
+    document.removeEventListener("click", handleNavClick, true);
+    window.removeEventListener("popstate", handlePopState);
+    if (historyRef && originalPushState) historyRef.pushState = originalPushState;
+    if (historyRef && originalReplaceState) historyRef.replaceState = originalReplaceState;
+  };
+  const fireOnce = () => {
+    if (fired) return;
+    fired = true;
+    popups.triggerSurvey(trigger.surveyId);
+    cleanup();
+  };
+  const handleNavClick = (e) => {
+    if (fired) return;
+    if (e.defaultPrevented) return;
+    if (e.button !== 0) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    const target = e.target?.closest?.("a");
+    if (!target) return;
+    const href = target.getAttribute("href");
+    if (!href || href.startsWith("#")) return;
+    const targetAttr = target.getAttribute("target");
+    if (targetAttr && targetAttr !== "_self") return;
+    let url;
+    try {
+      url = new URL(href, window.location.href);
+    } catch {
+      return;
+    }
+    if (url.origin !== window.location.origin) return;
+    e.preventDefault();
+    fireOnce();
+  };
+  const shouldBlockUrl = (rawUrl) => {
+    if (!rawUrl) return false;
+    let url;
+    try {
+      url = rawUrl instanceof URL ? rawUrl : new URL(rawUrl, window.location.href);
+    } catch {
+      return false;
+    }
+    if (url.origin !== window.location.origin) return false;
+    if (url.href === window.location.href) return false;
+    return true;
+  };
+  const handlePopState = () => {
+    if (fired) return;
+    fireOnce();
+    if (historyRef && originalPushState && lastUrl) {
+      originalPushState(null, document.title, lastUrl);
     }
   };
-  document.addEventListener("mouseout", handler);
-  popups.debug("Exit intent trigger set");
+  if (historyRef && originalPushState && originalReplaceState) {
+    historyRef.pushState = function(data, unused, url) {
+      if (!fired && shouldBlockUrl(url)) {
+        fireOnce();
+        return;
+      }
+      const result = originalPushState(data, unused, url);
+      lastUrl = window.location.href;
+      return result;
+    };
+    historyRef.replaceState = function(data, unused, url) {
+      if (!fired && shouldBlockUrl(url)) {
+        fireOnce();
+        return;
+      }
+      const result = originalReplaceState(data, unused, url);
+      lastUrl = window.location.href;
+      return result;
+    };
+  }
+  document.addEventListener("click", handleNavClick, true);
+  window.addEventListener("popstate", handlePopState);
+  popups.debug("Exit intent trigger set (navigation/spa)");
+}
+function setupClickTrigger(popups, trigger) {
+  const targetId = typeof trigger.value === "string" ? trigger.value : "";
+  if (!targetId) {
+    popups.debug("Click trigger missing element id", trigger);
+    return;
+  }
+  const attach = () => {
+    const el = document.getElementById(targetId);
+    if (!el) {
+      popups.debug("Click trigger target not found", targetId);
+      return false;
+    }
+    const handler = (e) => {
+      if (e.defaultPrevented) return;
+      popups.triggerSurvey(trigger.surveyId);
+      el.removeEventListener("click", handler);
+    };
+    el.addEventListener("click", handler);
+    popups.debug(`Click trigger set for #${targetId}`);
+    return true;
+  };
+  if (typeof document === "undefined") return;
+  if (attach()) return;
+  window.addEventListener("DOMContentLoaded", () => attach(), { once: true });
 }
 
 // src/config/env.ts
 var ENVIRONMENT_MAP = {
   development: {
-    apiBaseUrl: "https://api-dev.magicfeedback.com"
+    apiBaseUrl: "https://api-dev.deepdots.com"
   },
   production: {
-    apiBaseUrl: "https://api.magicfeedback.com"
+    apiBaseUrl: "https://api.deepdots.com"
   }
 };
 function resolveEnvironment(nodeEnv) {
@@ -2303,10 +2429,10 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
-  show(surveyId, productId, actions, emit, onClose) {
+  show(surveyId, productId, actions, emit, onClose, env = "production") {
     if (!this.container) this.init();
     if (!this.container) return;
-    renderPopup(this.container, surveyId, productId, actions, emit, onClose);
+    renderPopup(this.container, surveyId, productId, actions, emit, onClose, env);
   }
   hide() {
     if (this.container) {
@@ -2339,8 +2465,12 @@ var DeepdotsPopups = class {
     this.pendingAutoLaunch = false;
     this.answeredSurveys = /* @__PURE__ */ new Set();
     this.lastShown = /* @__PURE__ */ new Map();
+    // popupId -> timestamp mostrado
+    this.surveyToPopupId = /* @__PURE__ */ new Map();
+    // surveyId -> popupId
+    this.baseUrl = "";
+    this.env = "production";
   }
-  // popupId -> timestamp mostrado
   /** Initialize the SDK with configuration */
   init(config) {
     if (this.initialized) {
@@ -2348,12 +2478,14 @@ var DeepdotsPopups = class {
       return;
     }
     const env = resolveEnvironment(config.nodeEnv);
+    this.baseUrl = env.apiBaseUrl;
+    this.env = config.nodeEnv || "production";
     this.config = {
       apiKey: config.apiKey || void 0,
-      baseUrl: env.apiBaseUrl,
       mode: config.mode || "client",
       debug: config.debug || false,
-      popups: config.popups || []
+      popups: config.popups || [],
+      userId: config.userId || void 0
     };
     this.initialized = true;
     this.log("SDK initialized", this.config);
@@ -2402,8 +2534,9 @@ var DeepdotsPopups = class {
     if (isDefinition) {
       const def = options;
       this.log("Showing popup (definition)", def);
+      this.surveyToPopupId.set(def.surveyId, def.id);
       this.renderPopup(def.surveyId, def.productId, def.actions);
-      this.emitEvent("popup_shown", def.surveyId);
+      this.emitEvent("popup_shown", def.surveyId, { popupId: def.id });
     } else {
       const opt = options;
       this.log("Showing popup (legacy options)", opt);
@@ -2432,9 +2565,10 @@ var DeepdotsPopups = class {
   configureTriggersFromDefinitions() {
     const derived = [];
     const validDefs = this.validatePopupDefinitions(this.popupDefinitions);
+    console.log("validDefs", validDefs);
     validDefs.forEach((def) => {
-      if (!def.trigger) return;
-      const t = def.trigger;
+      if (!def.triggers) return;
+      const t = def.triggers;
       let type;
       switch (t.type) {
         case "time_on_page":
@@ -2446,11 +2580,14 @@ var DeepdotsPopups = class {
         case "exit":
           type = "exit";
           break;
+        case "click":
+          type = "click";
+          break;
         default:
           this.debug("Unsupported trigger type", t.type);
           return;
       }
-      const value = type === "time" ? t.value * 1e3 : t.value;
+      const value = type === "time" && typeof t.value === "number" ? t.value * 1e3 : t.value;
       derived.push({ type, value, surveyId: def.surveyId });
     });
     if (derived.length) {
@@ -2472,10 +2609,52 @@ var DeepdotsPopups = class {
     this.lastShown.set(def.id, Date.now());
   }
   shouldShow(def) {
-    const conditions = def.trigger.condition || [];
+    if (!this.matchesSegmentsPath(def)) {
+      return false;
+    }
+    const conditions = def.triggers.condition || [];
     if (!conditions.length) return true;
     return conditions.every((c) => this.evaluateCondition(def, c));
   }
+  matchesSegmentsPath(def) {
+    const paths = def.segments?.path;
+    if (!paths || paths.length === 0) return true;
+    if (typeof window === "undefined" || !window.location) {
+      this.debug("No window.location available for path comparison", { popupId: def.id, paths });
+      return true;
+    }
+    const currentPath = window.location.pathname || "";
+    const currentHref = window.location.href || "";
+    const normalize = (value) => {
+      if (value.length > 1 && value.endsWith("/")) return value.slice(0, -1);
+      return value;
+    };
+    const normalizedPath = normalize(currentPath);
+    const normalizedHref = normalize(currentHref);
+    const matches = paths.some((rawCandidate) => {
+      const candidate = normalize(rawCandidate);
+      let match = false;
+      if (candidate.startsWith("http://") || candidate.startsWith("https://")) {
+        match = normalizedHref === candidate;
+      } else if (candidate.startsWith("/")) {
+        match = normalizedHref.includes(candidate);
+      } else {
+        match = normalizedPath === candidate;
+      }
+      this.debug("Path comparison", {
+        popupId: def.id,
+        candidate,
+        currentPath: normalizedPath,
+        currentHref: normalizedHref,
+        match
+      });
+      return match;
+    });
+    if (!matches) {
+      this.debug("No path match for popup", { popupId: def.id, paths, currentPath: normalizedPath });
+    }
+    return matches;
+  }
   evaluateCondition(def, condition) {
     if (!condition.answered && this.answeredSurveys.has(def.surveyId)) {
       return false;
@@ -2494,29 +2673,59 @@ var DeepdotsPopups = class {
   markSurveyAnswered(surveyId) {
     this.answeredSurveys.add(surveyId);
   }
-  /** Simula fetch al servidor para obtener popups */
+  /** Fetch al servidor para obtener popups */
   async fetchPopupsFromServer() {
-    await new Promise((res) => setTimeout(res, 50));
-    return this.generateFakePopups();
+    const apiKey = this.config?.apiKey;
+    const baseUrl = this.baseUrl;
+    if (!apiKey || !baseUrl) {
+      this.log("Missing apiKey or baseUrl. Skipping popups fetch.");
+      return [];
+    }
+    const endpoint = `${baseUrl}/sdk/${encodeURIComponent(apiKey)}/popups`;
+    try {
+      const response = await fetch(endpoint);
+      if (!response.ok) {
+        this.log("Failed to fetch popups", response.status, response.statusText);
+        return [];
+      }
+      const raw = await response.text();
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) {
+        this.log("Unexpected popups payload", parsed);
+        return [];
+      }
+      console.log("res: ", parsed, this.validatePopupDefinitions(parsed));
+      return parsed;
+    } catch (error) {
+      this.log("Error fetching popups", error);
+      return [];
+    }
   }
-  /** Genera datos fake para pruebas en modo server */
-  generateFakePopups() {
-    return [
-      {
-        id: "popup-123",
-        title: "Would you like to help us improve?",
-        message: "<p>Take a quick survey and share your thoughts.</p>",
-        trigger: { type: "time_on_page", value: 1, condition: [{ answered: false, cooldownDays: 7 }] },
-        actions: {
-          accept: { label: "Take Survey", surveyId: "survey-abc" },
-          decline: { label: "Not Now", cooldownDays: 7 }
-        },
-        surveyId: "survey-abc",
-        productId: "product-xyz",
-        style: { theme: "light", position: "bottom-right", imageUrl: null },
-        segments: { lang: ["en"], path: ["/checkout"] }
+  /** Notifica eventos de popup a la API */
+  async postPopupEvent(status, popupId, userId) {
+    const apiKey = this.config?.apiKey;
+    const baseUrl = this.baseUrl;
+    if (!apiKey || !baseUrl) {
+      return;
+    }
+    const endpoint = `${baseUrl}/sdk/popups`;
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          publicKey: apiKey,
+          status,
+          popupId,
+          userId: userId || void 0
+        })
+      });
+      if (!response.ok) {
+        this.log("Failed to post popup event", response.status, response.statusText);
       }
-    ];
+    } catch (error) {
+      this.log("Error posting popup event", error);
+    }
   }
   /** Add an event listener */
   on(eventType, listener) {
@@ -2556,11 +2765,26 @@ var DeepdotsPopups = class {
   /** Render the popup UI */
   renderPopup(surveyId, productId, actions) {
     if (this.renderer) {
-      this.renderer.show(surveyId, productId, actions, (type, id, payload) => this.emitEvent(type, id, payload), () => this.hidePopup());
+      this.renderer.show(
+        surveyId,
+        productId,
+        actions,
+        (type, id, payload) => this.emitEvent(type, id, payload),
+        () => this.hidePopup(),
+        this.env
+      );
       return;
     }
     if (!this.popupContainer) return;
-    renderPopup(this.popupContainer, surveyId, productId, actions, (type, id, payload) => this.emitEvent(type, id, payload), () => this.hidePopup());
+    renderPopup(
+      this.popupContainer,
+      surveyId,
+      productId,
+      actions,
+      (type, id, payload) => this.emitEvent(type, id, payload),
+      () => this.hidePopup(),
+      this.env
+    );
   }
   /** Hide the popup */
   hidePopup() {
@@ -2580,6 +2804,16 @@ var DeepdotsPopups = class {
     if (type === "survey_completed") {
       this.markSurveyAnswered(surveyId);
     }
+    if (type === "popup_shown" || type === "survey_completed") {
+      const popupIdFromData = data?.popupId;
+      const popupId = popupIdFromData || this.surveyToPopupId.get(surveyId);
+      if (popupId) {
+        const userIdFromData = data?.userId;
+        void this.postPopupEvent(type === "popup_shown" ? "opened" : "completed", popupId, userIdFromData || this.config?.userId);
+      } else {
+        this.debug("No popupId available to post event", { type, surveyId });
+      }
+    }
     const listeners = this.listeners.get(type);
     if (listeners) {
       listeners.forEach((listener) => {
@@ -2612,10 +2846,26 @@ var DeepdotsPopups = class {
   isPopupDefinition(value) {
     if (typeof value !== "object" || value === null) return false;
     const v = value;
-    return typeof v.id === "string" && typeof v.title === "string" && typeof v.message === "string" && typeof v.surveyId === "string" && typeof v.productId === "string" && !!v.trigger;
+    const trigger = v.triggers || v.triggers;
+    if (!trigger) return false;
+    return typeof v.id === "string" && typeof v.title === "string" && typeof v.message === "string" && typeof v.surveyId === "string" && typeof v.productId === "string";
+  }
+  normalizePopupDefinition(def) {
+    if (typeof def !== "object" || def === null) return null;
+    const raw = def;
+    const trigger = raw.triggers || raw.triggers;
+    if (!trigger) return null;
+    const condition = trigger.condition ?? raw.conditions ?? [];
+    return {
+      ...raw,
+      triggers: {
+        ...trigger,
+        condition
+      }
+    };
   }
   validatePopupDefinitions(defs) {
-    return defs.filter((d) => this.isPopupDefinition(d));
+    return defs.map((def) => this.normalizePopupDefinition(def)).filter((def) => !!def && this.isPopupDefinition(def));
   }
 };
 export {