@magicfeedback/popup-sdk 1.7.1 → 1.8.0

package/dist/react-native.mjs

@@ -1,6 +1,8 @@
 import {
   LABELS,
+  PRIMARY_COLOR_JS,
   RESOLVE_LOCALE_JS,
+  REVEAL_TIMEOUT_MS,
   RTL_LOCALES,
   STORAGE_KEYS,
   TrackingManager,
@@ -15,7 +17,7 @@ import {
   sdkWarn,
   setLogger,
   style_default
-} from "./chunk-WNIUIOKF.mjs";
+} from "./chunk-322DDMX6.mjs";
 
 // src/react-native/index.tsx
 import { createContext, useContext, useEffect, useRef, useState } from "react";
@@ -211,6 +213,30 @@ function resolveEnvironment(nodeEnv) {
 }
 
 // src/ui/surveyHtml.ts
+var REVEAL_JS = `
+function ddCreateReveal(popup, onReveal, timeoutMs){
+  var revealed=false, timer=null;
+  function reveal(){
+    if(revealed){ return; }
+    revealed=true;
+    if(timer){ clearTimeout(timer); timer=null; }
+    onReveal();
+  }
+  function revealWhenPainted(){
+    if(revealed){ return; }
+    var imgs=popup.querySelectorAll('img'), pending=[];
+    for(var i=0;i<imgs.length;i++){ if(!imgs[i].complete){ pending.push(imgs[i]); } }
+    if(!pending.length){ reveal(); return; }
+    var left=pending.length;
+    function onSettled(){ left--; if(left<=0){ reveal(); } }
+    for(var j=0;j<pending.length;j++){
+      pending[j].addEventListener('load', onSettled);
+      pending[j].addEventListener('error', onSettled);
+    }
+  }
+  timer=setTimeout(reveal, timeoutMs);
+  return { reveal: reveal, whenPainted: revealWhenPainted };
+}`;
 var POSITION_MAP = {
   center: { justifyContent: "center", alignItems: "center", padding: "0", background: "rgba(0,0,0,0.5)" },
   bottom: { justifyContent: "center", alignItems: "flex-end", padding: "16px", background: "transparent" },
@@ -284,7 +310,13 @@ function buildSurveyHtml(opts) {
 ${style_default}
 ${fontFaceCss}
 html,body{margin:0;padding:0;height:100%;font-family:${fontFamilyValue}}
-body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${bodyBg};padding:${bodyPadding};box-sizing:border-box}
+/* Apertura diferida: ni la tarjeta ni el velo se pintan hasta que el survey est\xE1 listo
+   (\`dd-ready\`). Si el fondo entrara antes, en RN se ver\xEDa el velo oscuro varios cientos de ms
+   antes que el contenido, que es la misma mala sensaci\xF3n que el spinner. */
+body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:transparent;padding:${bodyPadding};box-sizing:border-box}
+body.dd-ready{background:${bodyBg}}
+#dd-popup{visibility:hidden}
+body.dd-ready #dd-popup{visibility:visible}
 .deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${cardBg};color-scheme:${colorScheme};border-radius:${cardRadius};padding:24px;box-shadow:${cardShadow};max-width:${cardMaxWidth};width:${cardWidth};min-height:${cardMinHeight};height:${cardHeight};max-height:${cardMaxHeight};box-sizing:border-box}
 .deepdots-popup-header{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;flex:0 0 auto}
 /* Neutraliza la regla \`.deepdots-popup h2\` del CSS del survey (uppercase, centrado y
@@ -318,6 +350,13 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 #dd-form-wrapper{width:100%;flex:1 1 auto}
 #mf{width:100%;box-sizing:border-box;visibility:hidden}
 .deepdots-popup-main *{max-width:100%;box-sizing:border-box}
+/* El margen lateral lo pone la tarjeta: el CSS del survey lo a\xF1ade otra vez en el contenedor, en
+   el formulario y en el bloque de cada pregunta, y eso deja el enunciado y las opciones m\xE1s
+   adentro que el logo, el t\xEDtulo y la barra de progreso. Solo el lateral; el vertical separa las
+   preguntas. Mismas reglas que en el popup DOM (renderPopup.ts). */
+.deepdots-popup .magicfeedback-container,
+.deepdots-popup .magicfeedback-form,
+.deepdots-popup .magicfeedback-div{padding-left:0;padding-right:0}
 #dd-logo{max-height:40px;max-width:100%;object-fit:contain;display:block;margin:12px 0 0 0}
 .deepdots-error-hint{display:none;margin:12px 0 0 0;padding:10px 12px;border-radius:6px;background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;font-size:13px}
 /* Pantalla final: el HTML del editor de la plataforma (imagen + texto), centrado. */
@@ -325,7 +364,7 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 .deepdots-success img{max-width:100%;height:auto;margin:0 auto 16px auto;display:block}
 .deepdots-success p{margin:0;font-size:16px;font-weight:600;line-height:1.4}
 .deepdots-popup-footer{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:4px;margin-top:auto;width:100%;padding-top:12px}
-.dd-nav-btn{display:none;border:none;min-height:44px;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:15px;font-weight:600;align-items:center;justify-content:center;text-align:center}
+.dd-nav-btn{display:none;border:none;min-height:44px;padding:12px 24px;border-radius:999px;cursor:pointer;font-size:15px;font-weight:600;align-items:center;justify-content:center;text-align:center}
 /* Secundario como bot\xF3n de texto: sin borde ni fondo, para que el primario sea la \xFAnica CTA. */
 #dd-back{background:transparent;color:${textMuted};border:none}
 #dd-start,#dd-complete,#dd-submit{background:#1E293B;color:#fff;border:none}
@@ -550,9 +589,23 @@ ${customCss}
     }
   }
 
+${PRIMARY_COLOR_JS}
+${REVEAL_JS}
+  // El popup se ense\xF1a cuando el survey est\xE1 pintado; \`ready\` deja al host abrir su propio
+  // Modal en ese momento en vez de montar un WebView en blanco.
+  var ddReveal=ddCreateReveal(popup, function(){
+    document.body.classList.add('dd-ready');
+    emitJSON('ready');
+  }, ${REVEAL_TIMEOUT_MS});
+
   function setLoading(isLoading){
     spinner.style.display=isLoading?'flex':'none';
-    if(!isLoading){ formHost.style.visibility='visible'; }
+    if(!isLoading){
+      formHost.style.visibility='visible';
+      // Fin de la carga, sea por survey cargado o por error. Entre p\xE1ginas es no-op: la
+      // revelaci\xF3n solo act\xFAa la primera vez.
+      ddReveal.whenPainted();
+    }
     footer.style.display=isLoading?'none':'flex';
     backBtn.disabled=isLoading; startBtn.disabled=isLoading; completeBtn.disabled=isLoading; submitBtn.disabled=isLoading;
     if(isLoading){ updateButtons(null); }
@@ -595,6 +648,10 @@ ${customCss}
             if(s.loadingBarColor){ progressBar.style.background=s.loadingBarColor; progressFollowUp.style.background=s.loadingBarColor; }
             if(chromeOn && s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
             if(s.contentAlign){ main.style.justifyContent = s.contentAlign==='center' ? 'center' : 'flex-start'; }
+            // El survey pinta sus controles con --mf-primary, que sale de primaryColor; si la
+            // integraci\xF3n solo configura el del bot\xF3n, el popup mezclar\xEDa el color de la marca
+            // con el gris azulado por defecto del paquete.
+            ddApplySurveyPrimaryColor(popup, s);
             if(s.buttonPrimaryColor){
               submitBtn.style.background=s.buttonPrimaryColor; submitBtn.style.border='none'; submitBtn.style.color='#fff';
               startBtn.style.background=s.buttonPrimaryColor; startBtn.style.border='none'; startBtn.style.color='#fff';
@@ -686,6 +743,7 @@ ${customCss}
 }
 
 // src/platform/react-native-renderer.ts
+var NATIVE_READY_GRACE_MS = 500;
 var ReactNativePopupRenderer = class {
   constructor(options = {}) {
     this.options = options;
@@ -693,6 +751,8 @@ var ReactNativePopupRenderer = class {
     this.onCloseFn = null;
     this.currentSurveyId = null;
     this.partialEmitted = false;
+    this.readyEmitted = false;
+    this.readyTimer = null;
   }
   init() {
   }
@@ -701,6 +761,8 @@ var ReactNativePopupRenderer = class {
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
     this.partialEmitted = false;
+    this.readyEmitted = false;
+    this.armReadyFallback(surveyId);
     const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null, analyticsFeedbackSessionId ?? null);
     const html = buildSurveyHtml({
       surveyId,
@@ -728,9 +790,32 @@ var ReactNativePopupRenderer = class {
     }
   }
   hide() {
+    this.clearReadyFallback();
     this.options.onHide?.();
     this.currentSurveyId = null;
   }
+  /** Respaldo del aviso de listo por si el WebView no llega a ejecutar el HTML. */
+  armReadyFallback(surveyId) {
+    this.clearReadyFallback();
+    if (!this.options.onReady) return;
+    this.readyTimer = setTimeout(() => {
+      this.readyTimer = null;
+      this.emitReady(surveyId);
+    }, REVEAL_TIMEOUT_MS + NATIVE_READY_GRACE_MS);
+  }
+  clearReadyFallback() {
+    if (this.readyTimer !== null) {
+      clearTimeout(this.readyTimer);
+      this.readyTimer = null;
+    }
+  }
+  /** Idempotente: el WebView puede avisar a la vez que vence el respaldo. */
+  emitReady(surveyId) {
+    if (this.readyEmitted) return;
+    this.readyEmitted = true;
+    this.clearReadyFallback();
+    this.options.onReady?.({ surveyId });
+  }
   /**
    * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a
    * eventos del SDK: primera interacción → `popup_clicked` (PARTIAL), completado →
@@ -746,6 +831,9 @@ var ReactNativePopupRenderer = class {
       name = raw;
     }
     switch (name) {
+      case "ready":
+        this.emitReady(surveyId);
+        break;
       case "loaded":
       case "before_submit":
       case "after_submit":
@@ -773,6 +861,33 @@ function createReactNativeRenderer() {
   return new ReactNativePopupRenderer();
 }
 
+// src/ui/preload.ts
+var defaultLoader = () => import("./renderPopup-SNDPX5RX.mjs");
+var pending = null;
+function preloadRenderPopup(loader = defaultLoader) {
+  if (pending) return pending;
+  try {
+    pending = loader().then(() => void 0).catch(() => {
+      pending = null;
+    });
+  } catch {
+    pending = null;
+    return Promise.resolve();
+  }
+  return pending;
+}
+function schedulePreloadRenderPopup(loader) {
+  const run = () => {
+    void preloadRenderPopup(loader);
+  };
+  const idle = globalThis.requestIdleCallback;
+  if (typeof idle === "function") {
+    idle(run, { timeout: 2e3 });
+    return;
+  }
+  setTimeout(run, 0);
+}
+
 // src/platform/renderer.ts
 var NoopPopupRenderer = class {
   show() {
@@ -807,13 +922,20 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
+  /**
+   * Descarga el chunk de `renderPopup` antes de que ningún trigger dispare, para que abrir el
+   * popup no empiece por esperar ~238 KB de JS.
+   */
+  preload() {
+    schedulePreloadRenderPopup();
+  }
   show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, _renderChrome, options) {
     if (this.visible) return;
     if (!this.container || !document.body.contains(this.container)) this.init();
     if (!this.container) return;
     this.visible = true;
     const container = this.container;
-    void import("./renderPopup-EWGKG53W.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-SNDPX5RX.mjs").then(({ renderPopup }) => {
       renderPopup(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId, options);
     });
   }
@@ -821,6 +943,8 @@ var BrowserPopupRenderer = class {
     this.visible = false;
     if (this.container) {
       this.container.style.display = "none";
+      this.container.style.visibility = "";
+      this.container.style.pointerEvents = "";
       this.container.innerHTML = "";
     }
   }
@@ -1890,6 +2014,7 @@ var DeepdotsPopups = class {
       this.popupDefinitions = this.validatePopupDefinitions(defs);
       this.popupsLoaded = true;
       this.log("Popups loaded from API", this.popupDefinitions);
+      if (this.popupDefinitions.length) this.renderer.preload?.();
       this.configureTriggersFromDefinitions();
       this.processDeferredExitQueue();
       if (this.pendingAutoLaunch) {
@@ -2248,6 +2373,9 @@ var DeepdotsPopups = class {
     this.emitEvent("popup_shown", def.surveyId, { popupId: def.id });
   }
   shouldShow(def, pathUrl, skipPathCheck = false) {
+    if (this.isPathExcluded(def, pathUrl)) {
+      return false;
+    }
     if (!skipPathCheck && !this.matchesSegmentsPath(def, pathUrl)) {
       return false;
     }
@@ -2278,40 +2406,85 @@ var DeepdotsPopups = class {
     }
     return matches;
   }
+  /** `segments.path`: rutas donde el popup PUEDE mostrarse. Sin lista, en todas. */
   matchesSegmentsPath(def, pathUrl) {
     const paths = def.segments?.path;
-    if (!paths || paths.length === 0) return true;
-    if (typeof window === "undefined" || !window.location) {
+    if (!Array.isArray(paths) || paths.length === 0) return true;
+    const location = this.resolveCurrentLocation(pathUrl);
+    if (!location) {
       this.debug("No window.location available for path comparison", { popupId: def.id, paths });
       return true;
     }
-    const normalizedHref = this.normalizeUrl(pathUrl || window.location.href || "");
-    const currentUrl = this.safeParseUrl(normalizedHref);
-    const normalizedPath = this.normalizeUrl(currentUrl?.pathname || window.location.pathname || "");
     const matches = paths.some((rawCandidate) => {
-      const candidate = this.normalizeUrl(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;
-      }
+      const match = this.matchesPathCandidate(rawCandidate, location);
       this.debug("Path comparison", {
         popupId: def.id,
-        candidate,
-        currentPath: normalizedPath,
-        currentHref: normalizedHref,
+        candidate: rawCandidate,
+        currentPath: location.path,
+        currentHref: location.href,
         match
       });
       return match;
     });
     if (!matches) {
-      this.debug("No path match for popup", { popupId: def.id, paths, currentPath: normalizedPath });
+      this.debug("No path match for popup", { popupId: def.id, paths, currentPath: location.path });
     }
     return matches;
   }
+  /**
+   * `segments.excludedPaths`: rutas donde el popup NO debe mostrarse. Gana sobre
+   * `segments.path` (`path: ['/']` + `excludedPaths: ['/cart']` = en todas menos el
+   * carrito) y se aplica también cuando no hay `path` (= en todas menos las excluidas).
+   */
+  isPathExcluded(def, pathUrl) {
+    const excluded = def.segments?.excludedPaths;
+    if (!Array.isArray(excluded) || excluded.length === 0) return false;
+    const location = this.resolveCurrentLocation(pathUrl);
+    if (!location) {
+      this.debug("No window.location available for excluded path comparison", { popupId: def.id, excluded });
+      return false;
+    }
+    const hit = excluded.find((rawCandidate) => this.matchesPathCandidate(rawCandidate, location));
+    if (hit !== void 0) {
+      this.debug("Popup excluded by path", {
+        popupId: def.id,
+        candidate: hit,
+        currentPath: location.path,
+        currentHref: location.href
+      });
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Compara UN candidato de `segments.path`/`segments.excludedPaths` con la ruta
+   * actual. Mismas reglas para incluir y para excluir:
+   *  - URL absoluta  → href completo exacto
+   *  - empieza por / → subcadena del href (así entran las rutas con hash: `/#/home`)
+   *  - resto         → pathname exacto
+   * Ignora entradas que no sean string: el backend puede colar un `null` en la lista
+   * y no puede tumbar la evaluación del trigger entero (mismo fallo que hubo con
+   * `segments.lang`).
+   */
+  matchesPathCandidate(rawCandidate, location) {
+    if (typeof rawCandidate !== "string") return false;
+    const candidate = this.normalizeUrl(rawCandidate);
+    if (!candidate) return false;
+    if (candidate.startsWith("http://") || candidate.startsWith("https://")) {
+      return location.href === candidate;
+    }
+    if (candidate.startsWith("/")) {
+      return location.href.includes(candidate);
+    }
+    return location.path === candidate;
+  }
+  /** href + pathname normalizados de la ruta a evaluar, o null si no hay `window.location`. */
+  resolveCurrentLocation(pathUrl) {
+    if (typeof window === "undefined" || !window.location) return null;
+    const href = this.normalizeUrl(pathUrl || window.location.href || "");
+    const parsed = this.safeParseUrl(href);
+    return { href, path: this.normalizeUrl(parsed?.pathname || window.location.pathname || "") };
+  }
   evaluateCooldown(def, condition) {
     switch (condition.answered) {
       case "SHOWED":
@@ -2377,7 +2550,7 @@ var DeepdotsPopups = class {
   processDeferredExitQueue() {
     const queue = this.getDeferredExitQueue();
     if (!queue.length) return;
-    const pending = [];
+    const pending2 = [];
     const now = Date.now();
     queue.forEach((item) => {
       const def = this.popupDefinitions.find((popup) => popup.id === item.id && popup.surveyId === item.surveyId);
@@ -2388,10 +2561,10 @@ var DeepdotsPopups = class {
         this.tryShowDeferredExitPopup(item);
         return;
       }
-      pending.push(item);
+      pending2.push(item);
       this.scheduleDeferredExitPopup(item);
     });
-    this.setDeferredExitQueue(pending);
+    this.setDeferredExitQueue(pending2);
   }
   scheduleDeferredExitPopup(item) {
     if (typeof window === "undefined") return;
@@ -2464,7 +2637,7 @@ var DeepdotsPopups = class {
   async fetchPopupsFromServer() {
     const apiKey = this.config?.apiKey;
     const baseUrl = this.baseUrl;
-    const userId = this.config?.userId;
+    const userId = this.tracking?.getUserId() ?? this.config?.userId;
     if (!apiKey || !baseUrl) {
       this.log("Missing apiKey or baseUrl. Skipping popups fetch.");
       return [];
@@ -2608,7 +2781,7 @@ var DeepdotsPopups = class {
     }
     if (!this.popupContainer) return;
     const container = this.popupContainer;
-    void import("./renderPopup-EWGKG53W.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-SNDPX5RX.mjs").then(({ renderPopup }) => {
       renderPopup(
         container,
         surveyId,
@@ -2889,16 +3062,24 @@ function DeepdotsProvider({ config, children }) {
   }, []);
   return /* @__PURE__ */ jsxs(DeepdotsContext.Provider, { value: sdk, children: [
     children,
-    survey ? /* @__PURE__ */ jsx(Modal, { visible: true, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
-      WebView,
-      {
-        style: { flex: 1 },
-        originWhitelist: ["*"],
-        javaScriptEnabled: true,
-        source: { html: survey.html, baseUrl: "https://sdk.deepdots.com/" },
-        onMessage: (e) => rendererRef.current?.handleMessage(e.nativeEvent.data)
-      }
-    ) }) }) : null
+    survey ? (
+      // El Modal se abre en cuanto hay popup, y es el HTML del WebView el que se revela solo
+      // cuando el survey está pintado (apertura diferida): con el Modal transparente, hasta ese
+      // momento no se ve nada, ni velo ni spinner. No se difiere el Modal con `onReady` porque
+      // React Native no monta los hijos de un Modal cerrado: el WebView no llegaría a cargar y
+      // el aviso no llegaría nunca. El host que quiera diferir su contenedor debe montar el
+      // WebView invisible (ver el ejemplo de `ReactNativePopupRenderer`).
+      /* @__PURE__ */ jsx(Modal, { visible: true, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+        WebView,
+        {
+          style: { flex: 1 },
+          originWhitelist: ["*"],
+          javaScriptEnabled: true,
+          source: { html: survey.html, baseUrl: "https://sdk.deepdots.com/" },
+          onMessage: (e) => rendererRef.current?.handleMessage(e.nativeEvent.data)
+        }
+      ) }) })
+    ) : null
   ] });
 }
 export {