@magicfeedback/popup-sdk 1.7.1 → 1.7.2

package/dist/index.mjs

@@ -1,7 +1,9 @@
 import {
   InMemoryStorage,
   LABELS,
+  PRIMARY_COLOR_JS,
   RESOLVE_LOCALE_JS,
+  REVEAL_TIMEOUT_MS,
   RTL_LOCALES,
   STORAGE_KEYS,
   SUPPORTED_LANGUAGES,
@@ -18,7 +20,7 @@ import {
   sdkWarn,
   setLogger,
   style_default
-} from "./chunk-W6MPSWMS.mjs";
+} from "./chunk-XHR3MHJO.mjs";
 
 // src/types/index.ts
 var POPUP_TRIGGER_CONDITION_STATUSES = [
@@ -209,6 +211,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" },
@@ -282,7 +308,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
@@ -316,6 +348,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. */
@@ -323,7 +362,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}
@@ -548,9 +587,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); }
@@ -593,6 +646,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';
@@ -684,6 +741,7 @@ ${customCss}
 }
 
 // src/platform/react-native-renderer.ts
+var NATIVE_READY_GRACE_MS = 500;
 var ReactNativePopupRenderer = class {
   constructor(options = {}) {
     this.options = options;
@@ -691,6 +749,8 @@ var ReactNativePopupRenderer = class {
     this.onCloseFn = null;
     this.currentSurveyId = null;
     this.partialEmitted = false;
+    this.readyEmitted = false;
+    this.readyTimer = null;
   }
   init() {
   }
@@ -699,6 +759,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,
@@ -726,9 +788,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 →
@@ -744,6 +829,9 @@ var ReactNativePopupRenderer = class {
       name = raw;
     }
     switch (name) {
+      case "ready":
+        this.emitReady(surveyId);
+        break;
       case "loaded":
       case "before_submit":
       case "after_submit":
@@ -771,6 +859,33 @@ function createReactNativeRenderer() {
   return new ReactNativePopupRenderer();
 }
 
+// src/ui/preload.ts
+var defaultLoader = () => import("./renderPopup-5QXL6EJW.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() {
@@ -805,13 +920,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-HHQMAW3G.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-5QXL6EJW.mjs").then(({ renderPopup }) => {
       renderPopup(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId, options);
     });
   }
@@ -819,6 +941,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 = "";
     }
   }
@@ -1888,6 +2012,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) {
@@ -2375,7 +2500,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);
@@ -2386,10 +2511,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;
@@ -2462,7 +2587,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 [];
@@ -2606,7 +2731,7 @@ var DeepdotsPopups = class {
     }
     if (!this.popupContainer) return;
     const container = this.popupContainer;
-    void import("./renderPopup-HHQMAW3G.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-5QXL6EJW.mjs").then(({ renderPopup }) => {
       renderPopup(
         container,
         surveyId,
@@ -2861,8 +2986,10 @@ export {
   MAX_TRACKED_MESSAGES,
   MESSAGE_CHANNELS,
   MessageGuard,
+  NATIVE_READY_GRACE_MS,
   NoopPopupRenderer,
   POPUP_TRIGGER_CONDITION_STATUSES,
+  REVEAL_TIMEOUT_MS,
   RTL_LOCALES,
   ReactNativePopupRenderer,
   SUPPORTED_LANGUAGES,