@magicfeedback/popup-sdk 1.10.0 → 1.11.0

package/dist/index.js

@@ -5631,6 +5631,9 @@ function ensureFontFace(family, url) {
   }
   if (el.textContent !== css) el.textContent = css;
 }
+function hasFinePointer() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches;
+}
 async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, options) {
   let surveyCompletedEmitted = false;
   let stylesInjected = false;
@@ -6061,6 +6064,13 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   if (pos.padding) container.style.padding = pos.padding;
   let revealed = false;
   let revealTimer = null;
+  let surveyLoaded = false;
+  let openFocusDone = false;
+  function autofocusOnOpen() {
+    if (openFocusDone || !revealed || !surveyLoaded) return;
+    openFocusDone = true;
+    if (hasFinePointer()) formInstance?.focusFirstQuestion?.();
+  }
   function reveal() {
     if (revealed) return;
     revealed = true;
@@ -6071,6 +6081,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     if (!container.contains(popup)) return;
     container.style.visibility = "visible";
     container.style.pointerEvents = "";
+    autofocusOnOpen();
   }
   function revealWhenPainted2() {
     if (revealed) return;
@@ -6123,7 +6134,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       addSuccessScreen: false,
       // Surveys multi-idioma: native pide a la API este idioma (el del init o el del
       // dispositivo) y, si el survey no lo tiene, la API sirve el idioma por defecto.
-      lang: options?.language
+      lang: options?.language,
+      // Foco en la primera pregunta de escribir tras Start, Siguiente o Atrás. Native lo
+      // aplica después de afterSubmitEvent/onBackEvent, cuando `setLoading(false)` ya ha
+      // quitado el `inert`. La apertura va aparte (ver autofocusOnOpen).
+      autofocus: "navigation"
     };
     generateOptions.onLoadedEvent = ({ formData, lang }) => {
       const shownLang = typeof lang === "string" && lang.trim().length > 0 ? lang : void 0;
@@ -6178,12 +6193,14 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         updateButtons("in_progress_first");
       }
       updateProgress({ progress: formInstance.progress, total: formInstance.total });
-      emit("popup_clicked", surveyId, { action: "loaded" });
       setLoading(false);
+      if (!surveyLoaded) {
+        surveyLoaded = true;
+        autofocusOnOpen();
+      }
     };
     generateOptions.beforeSubmitEvent = () => {
       setLoading(true);
-      emit("popup_clicked", surveyId, { action: "before_submit" });
     };
     generateOptions.afterSubmitEvent = ({ error, completed, total, progress, followup }) => {
       const errText = error ? typeof error === "string" ? error : error.message ?? String(error) : "";
@@ -6192,13 +6209,12 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         if (errText.toLowerCase().includes("no response")) {
           errorHint.textContent = labels.errorRequired;
           errorHint.style.display = "block";
-          emit("popup_clicked", surveyId, { action: "validation_error_required" });
           updateNavButtons();
           return;
         }
         errorHint.textContent = labels.errorSubmit;
         errorHint.style.display = "block";
-        emit("popup_clicked", surveyId, { action: "submit_error", error: errText });
+        sdkWarn("[Deepdots] survey submit error:", errText);
         return;
       }
       errorHint.style.display = "none";
@@ -6217,7 +6233,6 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       updateProgress({ progress, total, followup });
     };
     generateOptions.onBackEvent = ({ progress, error, followup }) => {
-      emit("popup_clicked", surveyId, { action: "back" });
       if (!error) pageDepth = Math.max(0, pageDepth - 1);
       updateNavButtons();
       updateProgress({ progress, total: formInstance.total, followup });
@@ -6864,11 +6879,25 @@ ${customCss}
 ${PRIMARY_COLOR_JS}
 ${BUSY_JS}
 ${REVEAL_JS}
+  // Foco en la primera pregunta si es de escribir. Al navegar lo pone @magicfeedback/native
+  // (autofocus:'navigation'); la apertura la decide el popup, que es quien sabe cu\xE1ndo se revela.
+  // Necesita el popup revelado y el survey cargado, que llegan en cualquier orden, y solo con
+  // rat\xF3n o trackpad: en t\xE1ctil sacar\xEDa el teclado sin que el usuario haya tocado nada.
+  var ddRevealed=false, ddSurveyLoaded=false, ddOpenFocusDone=false;
+  function ddAutofocusOnOpen(){
+    if(ddOpenFocusDone || !ddRevealed || !ddSurveyLoaded){ return; }
+    ddOpenFocusDone=true;
+    var fine=typeof window.matchMedia==='function' && window.matchMedia('(pointer: fine)').matches;
+    var f=window.DeepdotsForm;
+    if(fine && f && typeof f.focusFirstQuestion==='function'){ f.focusFirstQuestion(); }
+  }
   // 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');
+    ddRevealed=true;
+    ddAutofocusOnOpen();
   }, ${REVEAL_TIMEOUT_MS});
 
   function setLoading(isLoading){
@@ -6909,6 +6938,9 @@ ${REVEAL_JS}
         // Surveys multi-idioma: native pide a la API este idioma (el del init o el del
         // dispositivo); si el survey no lo tiene, la API sirve el idioma por defecto.
         lang:${initLangJson}||undefined,
+        // Foco en la primera pregunta de escribir tras Start, Siguiente o Atr\xE1s. Las versiones
+        // de native sin esta opci\xF3n la ignoran.
+        autofocus:'navigation',
         onLoadedEvent:function(args){
           // Idioma en el que native muestra el survey: manda sobre el del init para que el
           // chrome no se quede en ingl\xE9s delante de un survey traducido. Native < 2.3 no lo
@@ -6968,6 +7000,8 @@ ${REVEAL_JS}
           updateProgress({ progress:form.progress, total:form.total, completed:false, followup:false });
           emitJSON('loaded');
           setLoading(false);
+          // La primera carga es la apertura; las siguientes (tras Start) las enfoca native.
+          if(!ddSurveyLoaded){ ddSurveyLoaded=true; ddAutofocusOnOpen(); }
         },
         beforeSubmitEvent:function(){
           setLoading(true);
@@ -7120,6 +7154,7 @@ var ReactNativePopupRenderer = class {
         this.emitReady(surveyId);
         break;
       case "loaded":
+        break;
       case "before_submit":
       case "after_submit":
       case "back":
@@ -7498,7 +7533,7 @@ async function safeBodyText(res) {
   }
 }
 function createFeedbackSink(options) {
-  let feedbackSessionId;
+  let feedbackSessionId = options.initialSessionId || void 0;
   let firstPostInFlight = null;
   let generation = 0;
   const url = `${options.baseUrl}/sdk/feedback`;
@@ -7591,6 +7626,50 @@ function createFeedbackSink(options) {
   };
 }
 
+// src/analytics/suspended-session.ts
+var SUSPENDED_SESSION_KEY = "deepdots.analytics.suspended";
+function getSessionStorage() {
+  try {
+    return typeof window !== "undefined" && window.sessionStorage ? window.sessionStorage : null;
+  } catch {
+    return null;
+  }
+}
+function writeSuspendedSession(storage, session) {
+  try {
+    storage.setItem(SUSPENDED_SESSION_KEY, JSON.stringify(session));
+    return true;
+  } catch {
+    return false;
+  }
+}
+function clearSuspendedSession(storage) {
+  try {
+    storage.removeItem(SUSPENDED_SESSION_KEY);
+  } catch {
+  }
+}
+function takeSuspendedSession(storage, match, now, windowMs) {
+  let raw = null;
+  try {
+    raw = storage.getItem(SUSPENDED_SESSION_KEY);
+  } catch {
+    return null;
+  }
+  if (!raw) return null;
+  clearSuspendedSession(storage);
+  try {
+    const s = JSON.parse(raw);
+    if (typeof s.sessionId !== "string" || !s.sessionId) return null;
+    if (typeof s.at !== "number" || now - s.at < 0 || now - s.at > windowMs) return null;
+    if (s.integration !== match.integration) return null;
+    if ((s.userId ?? null) !== match.userId) return null;
+    return { sessionId: s.sessionId, integration: s.integration, userId: s.userId ?? null, at: s.at };
+  } catch {
+    return null;
+  }
+}
+
 // src/tracking/navigation-observer.ts
 var UUID_PREFIX = /^[0-9a-f]{8}-[0-9a-f]{4}-/i;
 function screenPath(href) {
@@ -8189,8 +8268,10 @@ var ANALYTICS_HEARTBEAT_MS = 5 * 6e4;
 var ANALYTICS_SESSION_TIMEOUT_MS = 30 * 6e4;
 var ANALYTICS_SERVER_IDLE_MS = 60 * 6e4;
 var ANALYTICS_SESSION_DISCARD_MS = ANALYTICS_SERVER_IDLE_MS - 10 * 6e4;
+var ANALYTICS_RESUME_WINDOW_MS = 6e4;
 var RESERVED_EVENT_PREFIX = "deepdots_";
 var CUSTOM_EVENT_PREFIX = "deepdots_event_";
+var MAX_PENDING_TRIGGERS = 20;
 var DeepdotsPopups = class {
   constructor() {
     this.config = null;
@@ -8204,6 +8285,14 @@ var DeepdotsPopups = class {
     // deprecated: mantenido para compatibilidad interna
     this.popupDefinitions = [];
     this.popupsLoaded = false;
+    /**
+     * `true` mientras el `GET /sdk/{apiKey}/popups` de `init()` está en vuelo. En esa ventana los
+     * disparos del host (`triggerEvent`, `triggerSurvey`) no tienen contra qué evaluarse, así que
+     * se guardan en `pendingTriggers` y se reproducen al cargar. Click, scroll, time y exit no
+     * hacen falta: son listeners que `autoLaunch` instala ya con las definiciones cargadas.
+     */
+    this.awaitingPopups = false;
+    this.pendingTriggers = [];
     this.pendingAutoLaunch = false;
     // Estado que alimenta las reglas de redisplay. Copia de trabajo en memoria; la fuente
     // duradera es el storage (`popup-state-store`), rehidratada en `init()` — sin eso, una
@@ -8258,6 +8347,13 @@ var DeepdotsPopups = class {
     this.lastEngagementAt = 0;
     /** Cuándo se ocultó la pestaña por última vez (ms epoch); null si está visible. */
     this.hiddenAt = null;
+    /**
+     * Sesión suspendida por un `pagehide` (ms epoch y `deepdots_user_id`); null si no hay.
+     * `openSession` la reanuda si sigue a tiempo (ver ANALYTICS_RESUME_WINDOW_MS).
+     */
+    this.suspended = null;
+    /** Integración de analytics del init: la sesión suspendida solo la hereda la misma. */
+    this.analyticsIntegration = void 0;
     /**
      * Idioma resuelto en init() (explícito > navigator.language > Intl). Única fuente de
      * verdad para el context de analytics Y para la segmentación por idioma de los popups.
@@ -8317,10 +8413,17 @@ var DeepdotsPopups = class {
       }
     }
     this.log("tracking \xB7 user_id:", this.tracking.getUserId(), "\xB7 new_user:", this.tracking.isNewUser(), "\xB7 enabled:", this.tracking.isTrackingEnabled());
+    this.analyticsIntegration = config.analytics?.integration;
+    const resumable = this.readResumableSession();
+    if (resumable) {
+      this.analyticsFeedbackSessionId = resumable.sessionId;
+      this.suspended = { at: resumable.at, userId: resumable.userId };
+    }
     const analyticsSink = config.analytics ? createFeedbackSink({
       baseUrl: this.baseUrl,
       keys: config.analytics,
       log: (...a) => this.log(...a),
+      initialSessionId: resumable?.sessionId,
       onSessionId: (id) => {
         this.analyticsFeedbackSessionId = id;
         this.notifyFeedbackSession(id, "open");
@@ -8370,6 +8473,9 @@ var DeepdotsPopups = class {
     this.engagement = new EngagementTracker();
     this.setupAnalyticsFlush();
     this.openSession();
+    if (resumable && this.analyticsFeedbackSessionId === resumable.sessionId) {
+      this.notifyFeedbackSession(resumable.sessionId, "open");
+    }
     const pendingCrashes = this.crashReporter.drainPendingCrashes();
     if (this.tracking?.isTrackingEnabled()) {
       for (const rec of pendingCrashes) {
@@ -8380,8 +8486,10 @@ var DeepdotsPopups = class {
     this.log("SDK initialized", this.config);
     if (this.renderer.init) this.renderer.init();
     this.setupPopupContainer();
+    this.awaitingPopups = Boolean(this.config.apiKey && this.baseUrl);
     this.fetchPopupsFromServer().then((defs) => {
-      this.popupDefinitions = this.validatePopupDefinitions(defs);
+      if (!defs) this.dropPendingTriggers();
+      this.popupDefinitions = this.validatePopupDefinitions(defs ?? []);
       this.popupsLoaded = true;
       this.log("Popups loaded from API", this.popupDefinitions);
       if (this.popupDefinitions.length) this.renderer.preload?.();
@@ -8390,6 +8498,7 @@ var DeepdotsPopups = class {
       if (this.pendingAutoLaunch) {
         this.startTriggers();
       }
+      this.replayPendingTriggers();
     });
   }
   /** User id actual (generado por el SDK o provisto por el cliente). Null si tracking off. */
@@ -8618,9 +8727,15 @@ var DeepdotsPopups = class {
   openSession() {
     if (this.sessionOpen) return;
     if (!this.tracking?.isTrackingEnabled()) return;
+    const suspendedMs = this.takeSuspendedSession();
     this.sessionOpen = true;
     this.lastEngagementAt = Date.now();
-    this.track("deepdots_session_start", {});
+    if (suspendedMs === null) {
+      this.track("deepdots_session_start", {});
+    } else {
+      this.track("deepdots_session_resume", { suspended_ms: suspendedMs });
+      this.log("tracking \xB7 session resumed after", suspendedMs, "ms:", this.analyticsFeedbackSessionId);
+    }
     this.navObserver?.restart();
     if (this.isDocumentVisible()) this.engagement?.resume();
   }
@@ -8685,6 +8800,75 @@ var DeepdotsPopups = class {
     }
     this.openSession();
   }
+  /**
+   * `pagehide` en web: SUSPENDE la sesión en vez de cerrarla, porque el navegador lo lanza
+   * igual al recargar que al cerrar la pestaña. Vuelca lo pendiente (page_view de la
+   * pantalla, mini-services, engagement) con un `deepdots_session_suspend` y SIN
+   * `completed`, y deja el registro en `sessionStorage` (ver `suspended-session.ts`):
+   *  - si la página vuelve a cargar en esta pestaña, `init()` sigue en el mismo registro;
+   *  - si la pestaña se cerró, el backend lo cierra a los pocos minutos sin otro lote.
+   *
+   * Devuelve false cuando no se puede suspender — aún no se conoce el registro (el primer
+   * POST sigue en vuelo) o no hay `sessionStorage` — y entonces el caller cierra como antes.
+   */
+  suspendSession() {
+    if (!this.sessionOpen || !this.tracking?.isTrackingEnabled()) return false;
+    const sessionId = this.analyticsFeedbackSessionId;
+    const integration = this.analyticsIntegration;
+    const storage = getSessionStorage();
+    if (!sessionId || !integration || !storage) return false;
+    const at = Date.now();
+    const userId = this.tracking.getUserId();
+    if (!writeSuspendedSession(storage, { sessionId, integration, userId, at })) return false;
+    this.sessionOpen = false;
+    this.suspended = { at, userId };
+    this.navObserver?.stop();
+    this.navStarted = false;
+    this.analytics?.exitAllMiniServices();
+    this.flushEngagement();
+    this.engagement?.pause();
+    this.track("deepdots_session_suspend", { reason: "page_hide" });
+    this.flushAnalytics({ final: true });
+    this.log("tracking \xB7 session suspended:", sessionId);
+    return true;
+  }
+  /**
+   * Recoge la sesión que dejó suspendida la carga anterior de esta pestaña (ver
+   * `suspendSession`). Solo con analytics configurado y el tracking activo: sin ellos no hay
+   * registro en el que seguir.
+   */
+  readResumableSession() {
+    const integration = this.analyticsIntegration;
+    const storage = getSessionStorage();
+    if (!integration || !storage || !this.tracking?.isTrackingEnabled()) return null;
+    return takeSuspendedSession(
+      storage,
+      { integration, userId: this.tracking.getUserId() },
+      Date.now(),
+      ANALYTICS_RESUME_WINDOW_MS
+    );
+  }
+  /**
+   * Consume la sesión suspendida al abrir: los ms que estuvo suspendida si se puede seguir en
+   * ella (mismo usuario, dentro de ANALYTICS_RESUME_WINDOW_MS); null si no había o ya no toca.
+   * En ese caso se olvida su registro sin enviar nada: lo cierra el backend, y la sesión que
+   * se abre ahora va a uno nuevo.
+   */
+  takeSuspendedSession() {
+    const suspended = this.suspended;
+    if (!suspended) return null;
+    this.suspended = null;
+    const storage = getSessionStorage();
+    if (storage) clearSuspendedSession(storage);
+    const suspendedMs = Math.max(0, Date.now() - suspended.at);
+    if (this.analyticsFeedbackSessionId && suspendedMs <= ANALYTICS_RESUME_WINDOW_MS && suspended.userId === (this.tracking?.getUserId() ?? null)) {
+      return suspendedMs;
+    }
+    this.analytics?.discardSession(this.analyticsIdentity());
+    this.analyticsFeedbackSessionId = void 0;
+    this.tracking?.setSessionId(null);
+    return null;
+  }
   /** Olvida la sesión abierta sin enviar nada (ver onDocumentVisible). */
   discardSession() {
     this.sessionOpen = false;
@@ -8733,7 +8917,7 @@ var DeepdotsPopups = class {
     if (typeof document === "undefined" || typeof window === "undefined") return;
     window.addEventListener("pagehide", () => {
       clearInterval(this.analyticsFlushTimer);
-      this.closeSession("page_hide");
+      if (!this.suspendSession()) this.closeSession("page_hide");
     });
     window.addEventListener("pageshow", (event) => {
       if (!event.persisted) return;
@@ -8801,6 +8985,7 @@ var DeepdotsPopups = class {
   }
   /** Lógica para evaluar condiciones antes de mostrar una encuesta */
   triggerSurvey(surveyId, popupId) {
+    if (this.bufferIfAwaitingPopups({ kind: "survey", surveyId, popupId })) return;
     const def = this.findPopupDefinition(surveyId, popupId);
     if (!def) {
       this.debug("No popup definition for trigger", { surveyId, popupId });
@@ -8822,6 +9007,10 @@ var DeepdotsPopups = class {
       this.debug("Ignoring empty event trigger name");
       return;
     }
+    if (this.bufferIfAwaitingPopups({ kind: "event", name: normalized })) return;
+    this.evaluateEvent(normalized);
+  }
+  evaluateEvent(normalized) {
     const candidates = this.popupDefinitions.filter((def) => {
       return def.triggers.some((trigger) => {
         const triggerValue = String(trigger.value ?? "").trim();
@@ -8839,6 +9028,40 @@ var DeepdotsPopups = class {
     }
     this.showDefinition(matched);
   }
+  /**
+   * Guarda `trigger` si las definiciones aún no han llegado. Devuelve `true` si lo guardó (el
+   * llamador no debe evaluarlo ahora) y `false` si no hay carga en vuelo (se evalúa ya, como
+   * siempre: tras cargar, tras un fallo o sin apiKey).
+   */
+  bufferIfAwaitingPopups(trigger) {
+    if (!this.awaitingPopups) return false;
+    if (this.pendingTriggers.length >= MAX_PENDING_TRIGGERS) {
+      const dropped = this.pendingTriggers.shift();
+      this.debug("Pending trigger buffer full; dropped oldest", dropped);
+    }
+    this.pendingTriggers.push(trigger);
+    this.debug("Popups not loaded yet; trigger buffered", trigger);
+    return true;
+  }
+  /** La carga falló: sin definiciones no hay nada que reproducir, se descarta todo. */
+  dropPendingTriggers() {
+    const dropped = this.pendingTriggers.length;
+    this.awaitingPopups = false;
+    this.pendingTriggers = [];
+    if (dropped > 0) this.debug("Popups failed to load; dropped pending triggers", dropped);
+  }
+  /** Reproduce en orden por la evaluación normal (segmentos, cooldowns y condiciones de AHORA). */
+  replayPendingTriggers() {
+    this.awaitingPopups = false;
+    const replay = this.pendingTriggers;
+    this.pendingTriggers = [];
+    if (!replay.length) return;
+    this.debug("Replaying triggers received before popups loaded", replay.length);
+    replay.forEach((trigger) => {
+      if (trigger.kind === "event") this.evaluateEvent(trigger.name);
+      else this.triggerSurvey(trigger.surveyId, trigger.popupId);
+    });
+  }
   showDefinition(def) {
     this.log("Showing popup (definition)", def);
     this.surveyToPopupId.set(def.surveyId, def.id);
@@ -9109,7 +9332,7 @@ var DeepdotsPopups = class {
     } catch {
     }
   }
-  /** Fetch al servidor para obtener popups */
+  /** Fetch al servidor para obtener popups. `null` si la carga falló (red, no-2xx, payload inválido). */
   async fetchPopupsFromServer() {
     const apiKey = this.config?.apiKey;
     const baseUrl = this.baseUrl;
@@ -9125,19 +9348,19 @@ var DeepdotsPopups = class {
       const response = await fetch(endpoint);
       if (!response.ok) {
         this.log("Failed to fetch popups", response.status, response.statusText);
-        return [];
+        return null;
       }
       const raw = await response.text();
       const parsed = JSON.parse(raw);
       if (!Array.isArray(parsed)) {
         this.log("Unexpected popups payload", parsed);
-        return [];
+        return null;
       }
       this.debug("Fetched popups payload", parsed);
       return parsed;
     } catch (error) {
       this.log("Error fetching popups", error);
-      return [];
+      return null;
     }
   }
   /** Envía los atributos de contact a la API (`POST /sdk/popups/contact`). */