@magicfeedback/popup-sdk 1.8.0 → 1.8.2

package/dist/index.d.mts

@@ -95,7 +95,8 @@ interface AnalyticsEnvelope {
 interface AnalyticsFlushMeta {
     /**
      * `true` cuando el flush ocurre porque la página/app se está cerrando. El sink debe usar
-     * un transporte que sobreviva al unload (sendBeacon) y no puede esperar respuestas.
+     * un transporte que sobreviva al unload (`fetch` con `keepalive`) y no puede esperar
+     * respuestas.
      */
     final?: boolean;
     /**
@@ -174,9 +175,11 @@ interface FeedbackSinkOptions {
     /** fetch inyectable (tests / RN). */
     fetchImpl?: typeof fetch;
     /**
-     * `navigator.sendBeacon` inyectable. Solo se usa en el flush final (cierre de página):
-     * sobrevive al unload, a cambio de no poder leer la respuesta. Si no se pasa, el flush
-     * final usa `fetch` con `keepalive`.
+     * @deprecated Se ignora. El flush final salía por `sendBeacon`, que va SIEMPRE con
+     * credenciales; contra la API (`Access-Control-Allow-Origin: *` + `Allow-Credentials:
+     * true`) el preflight fallaba y el lote de cierre, el único con `completed:true`, no
+     * llegaba nunca. Ahora sale por `fetch` con `keepalive`. Se mantiene en el tipo para no
+     * romper a quien lo pase.
      */
     sendBeaconImpl?: (url: string, body: Blob | string) => boolean;
     /** Callback invocado cuando el backend devuelve un nuevo sessionId (primer POST). */
@@ -194,8 +197,9 @@ interface FeedbackSinkOptions {
  * Garantías de entrega:
  *  - mientras no se conozca el `sessionId`, los lotes se **serializan** (esperan la primera
  *    respuesta): dos POSTs a la vez sin `sessionId` crearían dos registros y partirían los datos;
- *  - `keepalive` para que el navegador no cancele el POST al navegar fuera, y `sendBeacon`
- *    en el flush final (cierre de página), donde `fetch` puede morir con el documento;
+ *  - `keepalive` para que el navegador no cancele el POST al navegar fuera ni al cerrar la
+ *    página, también en el flush final (sin `sendBeacon`: ver `sendBeaconImpl`);
+ *  - sin credenciales, que es lo único que pasa el CORS de la API (`Allow-Origin: *`);
  *  - la promesa **rechaza** en fallo transitorio (red, 5xx, 408, 429) para que el
  *    `AnalyticsManager` re-encole el lote; un 4xx se loguea y se descarta.
  */
@@ -801,12 +805,14 @@ declare class DeepdotsPopups {
      * se llama en init(), al volver a foreground y al conceder el consentimiento.
      */
     private openSession;
+    /** Web: si la pestaña se ve. Sin `document` (RN) manda AppState vía onForeground/onBackground. */
+    private isDocumentVisible;
     /** Payload que se ENVIARÍA al endpoint de analytics (no envía ni vacía el buffer). */
     previewAnalytics(): AnalyticsEnvelope;
     /**
      * Envía el lote acumulado de analytics y vacía el buffer.
-     * `final: true` (cierre de página/app) cambia el transporte a `sendBeacon`, que sobrevive
-     * al unload; un lote que falle por red o 5xx se re-encola para el siguiente flush.
+     * `final: true` (cierre de página/app): el lote no espera al primer POST en vuelo, porque
+     * el documento se muere; un lote que falle por red o 5xx se re-encola para el siguiente flush.
      */
     flushAnalytics(options?: {
         final?: boolean;
@@ -817,6 +823,7 @@ declare class DeepdotsPopups {
     private analyticsIdentity;
     /** Flush automático al ocultar/cerrar la página (no perder el lote pendiente). */
     private setupAnalyticsFlush;
+    private startAnalyticsFlushTimer;
     /** Enable auto-launch functionality with configured triggers */
     autoLaunch(): void;
     /** Inicia los triggers configurados */
@@ -896,11 +903,18 @@ declare class DeepdotsPopups {
     private mapPopupTriggerType;
     private markSurveyProgress;
     /**
-     * Rehidrata el estado de redisplay desde el storage. `answeredSurveys` se reconstruye
-     * desde las entradas COMPLETED: es exactamente lo que persiste `markSurveyAnswered`.
+     * Fusiona el estado de redisplay del storage con el de memoria: por cada popup/survey gana
+     * la entrada MÁS RECIENTE. Fusionar y no sustituir es lo que hace convivir a varias
+     * pestañas sobre el mismo `localStorage`: se llama en el `init()`, antes de cada decisión
+     * de mostrar y antes de cada escritura. `answeredSurveys` se reconstruye desde las
+     * entradas COMPLETED: es exactamente lo que persiste `markSurveyAnswered`.
      */
     private loadPopupState;
-    /** Vuelca el estado de redisplay al storage. Sin storage (o bloqueado) degrada a memoria. */
+    /**
+     * Vuelca el estado de redisplay al storage. Sin storage (o bloqueado) degrada a memoria.
+     * Fusiona antes de escribir: escribir solo la foto en memoria borraba lo que otra pestaña
+     * hubiese guardado desde nuestro `init()`.
+     */
     private persistPopupState;
     private isPopupDefinition;
     private isPopupTrigger;

package/dist/index.d.ts

@@ -95,7 +95,8 @@ interface AnalyticsEnvelope {
 interface AnalyticsFlushMeta {
     /**
      * `true` cuando el flush ocurre porque la página/app se está cerrando. El sink debe usar
-     * un transporte que sobreviva al unload (sendBeacon) y no puede esperar respuestas.
+     * un transporte que sobreviva al unload (`fetch` con `keepalive`) y no puede esperar
+     * respuestas.
      */
     final?: boolean;
     /**
@@ -174,9 +175,11 @@ interface FeedbackSinkOptions {
     /** fetch inyectable (tests / RN). */
     fetchImpl?: typeof fetch;
     /**
-     * `navigator.sendBeacon` inyectable. Solo se usa en el flush final (cierre de página):
-     * sobrevive al unload, a cambio de no poder leer la respuesta. Si no se pasa, el flush
-     * final usa `fetch` con `keepalive`.
+     * @deprecated Se ignora. El flush final salía por `sendBeacon`, que va SIEMPRE con
+     * credenciales; contra la API (`Access-Control-Allow-Origin: *` + `Allow-Credentials:
+     * true`) el preflight fallaba y el lote de cierre, el único con `completed:true`, no
+     * llegaba nunca. Ahora sale por `fetch` con `keepalive`. Se mantiene en el tipo para no
+     * romper a quien lo pase.
      */
     sendBeaconImpl?: (url: string, body: Blob | string) => boolean;
     /** Callback invocado cuando el backend devuelve un nuevo sessionId (primer POST). */
@@ -194,8 +197,9 @@ interface FeedbackSinkOptions {
  * Garantías de entrega:
  *  - mientras no se conozca el `sessionId`, los lotes se **serializan** (esperan la primera
  *    respuesta): dos POSTs a la vez sin `sessionId` crearían dos registros y partirían los datos;
- *  - `keepalive` para que el navegador no cancele el POST al navegar fuera, y `sendBeacon`
- *    en el flush final (cierre de página), donde `fetch` puede morir con el documento;
+ *  - `keepalive` para que el navegador no cancele el POST al navegar fuera ni al cerrar la
+ *    página, también en el flush final (sin `sendBeacon`: ver `sendBeaconImpl`);
+ *  - sin credenciales, que es lo único que pasa el CORS de la API (`Allow-Origin: *`);
  *  - la promesa **rechaza** en fallo transitorio (red, 5xx, 408, 429) para que el
  *    `AnalyticsManager` re-encole el lote; un 4xx se loguea y se descarta.
  */
@@ -801,12 +805,14 @@ declare class DeepdotsPopups {
      * se llama en init(), al volver a foreground y al conceder el consentimiento.
      */
     private openSession;
+    /** Web: si la pestaña se ve. Sin `document` (RN) manda AppState vía onForeground/onBackground. */
+    private isDocumentVisible;
     /** Payload que se ENVIARÍA al endpoint de analytics (no envía ni vacía el buffer). */
     previewAnalytics(): AnalyticsEnvelope;
     /**
      * Envía el lote acumulado de analytics y vacía el buffer.
-     * `final: true` (cierre de página/app) cambia el transporte a `sendBeacon`, que sobrevive
-     * al unload; un lote que falle por red o 5xx se re-encola para el siguiente flush.
+     * `final: true` (cierre de página/app): el lote no espera al primer POST en vuelo, porque
+     * el documento se muere; un lote que falle por red o 5xx se re-encola para el siguiente flush.
      */
     flushAnalytics(options?: {
         final?: boolean;
@@ -817,6 +823,7 @@ declare class DeepdotsPopups {
     private analyticsIdentity;
     /** Flush automático al ocultar/cerrar la página (no perder el lote pendiente). */
     private setupAnalyticsFlush;
+    private startAnalyticsFlushTimer;
     /** Enable auto-launch functionality with configured triggers */
     autoLaunch(): void;
     /** Inicia los triggers configurados */
@@ -896,11 +903,18 @@ declare class DeepdotsPopups {
     private mapPopupTriggerType;
     private markSurveyProgress;
     /**
-     * Rehidrata el estado de redisplay desde el storage. `answeredSurveys` se reconstruye
-     * desde las entradas COMPLETED: es exactamente lo que persiste `markSurveyAnswered`.
+     * Fusiona el estado de redisplay del storage con el de memoria: por cada popup/survey gana
+     * la entrada MÁS RECIENTE. Fusionar y no sustituir es lo que hace convivir a varias
+     * pestañas sobre el mismo `localStorage`: se llama en el `init()`, antes de cada decisión
+     * de mostrar y antes de cada escritura. `answeredSurveys` se reconstruye desde las
+     * entradas COMPLETED: es exactamente lo que persiste `markSurveyAnswered`.
      */
     private loadPopupState;
-    /** Vuelca el estado de redisplay al storage. Sin storage (o bloqueado) degrada a memoria. */
+    /**
+     * Vuelca el estado de redisplay al storage. Sin storage (o bloqueado) degrada a memoria.
+     * Fusiona antes de escribir: escribir solo la foto en memoria borraba lo que otra pestaña
+     * hubiese guardado desde nuestro `init()`.
+     */
     private persistPopupState;
     private isPopupDefinition;
     private isPopupTrigger;

package/dist/index.js

@@ -542,6 +542,29 @@ function ddApplySurveyPrimaryColor(el, style){
   }
 });
 
+// src/ui/busy.ts
+function setSurveyBusy(el, busy) {
+  if (!el) return;
+  el.style.pointerEvents = busy ? "none" : "";
+  el.setAttribute("aria-busy", busy ? "true" : "false");
+  if ("inert" in el) {
+    el.inert = busy;
+  }
+}
+var BUSY_JS;
+var init_busy = __esm({
+  "src/ui/busy.ts"() {
+    "use strict";
+    BUSY_JS = `
+function ddSetSurveyBusy(el, busy){
+  if(!el){ return; }
+  el.style.pointerEvents = busy ? 'none' : '';
+  el.setAttribute('aria-busy', busy ? 'true' : 'false');
+  if('inert' in el){ el.inert = busy; }
+}`;
+  }
+});
+
 // src/assets/style.css
 var style_default;
 var init_style = __esm({
@@ -2431,9 +2454,9 @@ var init_logo = __esm({
   }
 });
 
-// node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js
+// ../../../../../../../Users/sarias/developer/Deepdots/deepdots-popup-sdk/node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js
 var require_magicfeedback_sdk_browser = __commonJS({
-  "node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js"(exports, module2) {
+  "../../../../../../../Users/sarias/developer/Deepdots/deepdots-popup-sdk/node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js"(exports, module2) {
     "use strict";
     !(function(e, t) {
       "object" == typeof exports && "object" == typeof module2 ? module2.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.magicfeedback = t() : e.magicfeedback = t();
@@ -5381,6 +5404,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   revealTimer = setTimeout(reveal, REVEAL_TIMEOUT_MS);
   function setLoading(isLoading) {
     spinnerEl.style.display = isLoading ? "flex" : "none";
+    setSurveyBusy(formWrapper, isLoading);
     if (!isLoading) {
       formHost.style.visibility = "visible";
       revealWhenPainted2();
@@ -5536,6 +5560,7 @@ var init_renderPopup = __esm({
     init_font();
     init_logo();
     init_surveyPalette();
+    init_busy();
     init_logger();
     init_labels();
     init_reveal();
@@ -5778,6 +5803,7 @@ init_font();
 init_labels();
 init_reveal();
 init_surveyPalette();
+init_busy();
 init_style();
 var REVEAL_JS = `
 function ddCreateReveal(popup, onReveal, timeoutMs){
@@ -5997,6 +6023,7 @@ ${customCss}
   var footer=document.getElementById('dd-footer');
   var spinner=document.getElementById('dd-spinner');
   var formHost=document.getElementById('mf');
+  var formWrapper=document.getElementById('dd-form-wrapper');
   var errorHint=document.getElementById('dd-error');
   var backBtn=document.getElementById('dd-back');
   var startBtn=document.getElementById('dd-start');
@@ -6156,6 +6183,7 @@ ${customCss}
   }
 
 ${PRIMARY_COLOR_JS}
+${BUSY_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.
@@ -6166,6 +6194,11 @@ ${REVEAL_JS}
 
   function setLoading(isLoading){
     spinner.style.display=isLoading?'flex':'none';
+    // El spinner no tapa el survey (28px en posicion absoluta), asi que sin esto el usuario
+    // puede seguir cambiando de opcion mientras se envia la pagina, y ese cambio ya no viaja
+    // con ella. Se bloquea el wrapper, que es el elemento estable: el div de dentro lo
+    // sustituye @magicfeedback/native por su propio contenedor al generar el survey.
+    ddSetSurveyBusy(formWrapper, isLoading);
     if(!isLoading){
       formHost.style.visibility='visible';
       // Fin de la carga, sea por survey cargado o por error. Entre p\xE1ginas es no-op: la
@@ -6771,14 +6804,7 @@ function createFeedbackSink(options) {
   const post = async (body, final, sessionEnd = false) => {
     const json = JSON.stringify(body);
     const small = json.length <= KEEPALIVE_MAX_BYTES;
-    if (final && options.sendBeaconImpl && small) {
-      const payload = typeof Blob !== "undefined" ? new Blob([json], { type: "application/json" }) : json;
-      if (options.sendBeaconImpl(url, payload)) {
-        options.log?.("[DeepdotsAnalytics] final flush via sendBeacon");
-        return;
-      }
-      options.log?.("[DeepdotsAnalytics] sendBeacon rejected the batch; falling back to fetch");
-    }
+    if (final) options.log?.("[DeepdotsAnalytics] final flush via fetch keepalive");
     const f = options.fetchImpl ?? (typeof fetch !== "undefined" ? fetch : void 0);
     if (!f) {
       options.log?.("[DeepdotsAnalytics] no fetch available; payload not sent", body);
@@ -6788,6 +6814,9 @@ function createFeedbackSink(options) {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: json,
+      // La API autentica por `publicKey` en el body y responde `Allow-Origin: *`: una
+      // petición con credenciales fallaría el CORS. Explícito para no depender del default.
+      credentials: "omit",
       // keepalive: el POST sobrevive a la navegación mientras el body sea pequeño.
       ...small ? { keepalive: true } : {}
     });
@@ -6880,6 +6909,15 @@ var NavigationObserver = class {
     this.closeCurrent();
     this.currentScreen = null;
   }
+  /**
+   * Retoma el seguimiento en la pantalla actual tras un `stop()`, cuando se abre una sesión
+   * nueva sin navegar (cambio de usuario, vuelta de la bfcache). No-op si nunca se instaló
+   * (navegación manual por `setScreen`, RN) o si ya hay pantalla en curso.
+   */
+  restart() {
+    if (!this.installed || this.currentScreen != null || typeof window === "undefined") return;
+    this.begin(window.location.href);
+  }
   closeCurrent() {
     if (this.currentScreen == null) return;
     const exit = this.now();
@@ -7523,8 +7561,6 @@ var DeepdotsPopups = class {
       baseUrl: this.baseUrl,
       keys: config.analytics,
       log: (...a) => this.log(...a),
-      // sendBeacon: único transporte que sobrevive al cierre de la página.
-      sendBeaconImpl: typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function" ? (url, body) => navigator.sendBeacon(url, body) : void 0,
       onSessionId: (id) => {
         this.analyticsFeedbackSessionId = id;
       },
@@ -7572,7 +7608,6 @@ var DeepdotsPopups = class {
     this.navObserver.onVisit((v) => this.track("deepdots_page_view", { screen: v.screen, duration_seconds: v.durationSeconds }));
     this.navObserver.install();
     this.engagement = new EngagementTracker();
-    this.engagement.resume();
     this.setupAnalyticsFlush();
     this.openSession();
     const pendingCrashes = this.crashReporter.drainPendingCrashes();
@@ -7791,6 +7826,7 @@ var DeepdotsPopups = class {
     this.navStarted = false;
     this.analytics?.exitAllMiniServices();
     this.flushEngagement();
+    this.engagement?.pause();
     this.track("deepdots_session_end", { reason });
     this.flushAnalytics({ final: reason === "page_hide", sessionEnd: true });
     this.analyticsFeedbackSessionId = void 0;
@@ -7806,6 +7842,12 @@ var DeepdotsPopups = class {
     if (!this.tracking?.isTrackingEnabled()) return;
     this.sessionOpen = true;
     this.track("deepdots_session_start", {});
+    this.navObserver?.restart();
+    if (this.isDocumentVisible()) this.engagement?.resume();
+  }
+  /** Web: si la pestaña se ve. Sin `document` (RN) manda AppState vía onForeground/onBackground. */
+  isDocumentVisible() {
+    return typeof document === "undefined" || document.visibilityState !== "hidden";
   }
   /** Payload que se ENVIARÍA al endpoint de analytics (no envía ni vacía el buffer). */
   previewAnalytics() {
@@ -7818,8 +7860,8 @@ var DeepdotsPopups = class {
   }
   /**
    * Envía el lote acumulado de analytics y vacía el buffer.
-   * `final: true` (cierre de página/app) cambia el transporte a `sendBeacon`, que sobrevive
-   * al unload; un lote que falle por red o 5xx se re-encola para el siguiente flush.
+   * `final: true` (cierre de página/app): el lote no espera al primer POST en vuelo, porque
+   * el documento se muere; un lote que falle por red o 5xx se re-encola para el siguiente flush.
    */
   flushAnalytics(options) {
     if (!this.tracking?.isTrackingEnabled()) return;
@@ -7840,21 +7882,30 @@ var DeepdotsPopups = class {
   /** Flush automático al ocultar/cerrar la página (no perder el lote pendiente). */
   setupAnalyticsFlush() {
     if (typeof document === "undefined" || typeof window === "undefined") return;
-    this.analyticsFlushTimer = setInterval(() => this.flushAnalytics(), ANALYTICS_FLUSH_INTERVAL_MS);
+    this.startAnalyticsFlushTimer();
     window.addEventListener("pagehide", () => {
       clearInterval(this.analyticsFlushTimer);
       this.closeSession("page_hide");
     });
+    window.addEventListener("pageshow", (event) => {
+      if (!event.persisted) return;
+      this.startAnalyticsFlushTimer();
+      this.openSession();
+    });
     document.addEventListener("visibilitychange", () => {
       if (document.visibilityState === "hidden") {
         this.flushEngagement();
         this.engagement?.pause();
         this.flushAnalytics();
       } else if (document.visibilityState === "visible") {
-        this.engagement?.resume();
+        if (this.sessionOpen) this.engagement?.resume();
       }
     });
   }
+  startAnalyticsFlushTimer() {
+    clearInterval(this.analyticsFlushTimer);
+    this.analyticsFlushTimer = setInterval(() => this.flushAnalytics(), ANALYTICS_FLUSH_INTERVAL_MS);
+  }
   /** Enable auto-launch functionality with configured triggers */
   autoLaunch() {
     if (!this.initialized) {
@@ -7948,6 +7999,7 @@ var DeepdotsPopups = class {
     this.emitEvent("popup_shown", def.surveyId, { popupId: def.id });
   }
   shouldShow(def, pathUrl, skipPathCheck = false) {
+    if (this.storage) this.loadPopupState(this.storage);
     if (this.isPathExcluded(def, pathUrl)) {
       return false;
     }
@@ -8474,22 +8526,32 @@ var DeepdotsPopups = class {
     this.persistPopupState();
   }
   /**
-   * Rehidrata el estado de redisplay desde el storage. `answeredSurveys` se reconstruye
-   * desde las entradas COMPLETED: es exactamente lo que persiste `markSurveyAnswered`.
+   * Fusiona el estado de redisplay del storage con el de memoria: por cada popup/survey gana
+   * la entrada MÁS RECIENTE. Fusionar y no sustituir es lo que hace convivir a varias
+   * pestañas sobre el mismo `localStorage`: se llama en el `init()`, antes de cada decisión
+   * de mostrar y antes de cada escritura. `answeredSurveys` se reconstruye desde las
+   * entradas COMPLETED: es exactamente lo que persiste `markSurveyAnswered`.
    */
   loadPopupState(storage) {
     const state = readPopupState(storage);
     Object.entries(state.lastShown).forEach(([popupId, timestamp]) => {
-      this.lastShown.set(popupId, timestamp);
+      if (timestamp > (this.lastShown.get(popupId) ?? -Infinity)) this.lastShown.set(popupId, timestamp);
     });
     Object.entries(state.progress).forEach(([surveyId, entry]) => {
+      const current = this.surveyProgress.get(surveyId);
+      if (current && current.timestamp >= entry.timestamp) return;
       this.surveyProgress.set(surveyId, { status: entry.status, timestamp: entry.timestamp });
       if (entry.status === "COMPLETED") this.answeredSurveys.add(surveyId);
     });
   }
-  /** Vuelca el estado de redisplay al storage. Sin storage (o bloqueado) degrada a memoria. */
+  /**
+   * Vuelca el estado de redisplay al storage. Sin storage (o bloqueado) degrada a memoria.
+   * Fusiona antes de escribir: escribir solo la foto en memoria borraba lo que otra pestaña
+   * hubiese guardado desde nuestro `init()`.
+   */
   persistPopupState() {
     if (!this.storage) return;
+    this.loadPopupState(this.storage);
     writePopupState(this.storage, {
       lastShown: Object.fromEntries(this.lastShown),
       progress: Object.fromEntries(this.surveyProgress)