@magicfeedback/popup-sdk 1.8.5 → 1.9.0

package/dist/react-native.d.mts

@@ -122,6 +122,19 @@ interface DeepdotsLogger {
     error?: (...args: unknown[]) => void;
     info?: (...args: unknown[]) => void;
 }
+/**
+ * A session of the analytics channel as the Deepdots API sees it. Every session becomes ONE
+ * feedback, and `sessionId` is what the API stores as `sdkSessionId` on it: the value to look
+ * that feedback up with (`GET /feedbacks?filter={"where":{"sdkSessionId":"<sessionId>"}}`).
+ * A session that closes again keeps that one feedback: the API updates it.
+ *  - `open`: the API acknowledged the session's first batch; its events keep accumulating.
+ *  - `closed`: the API acknowledged the session's closing batch (`completed: true`); the
+ *    feedback is created from it within seconds.
+ */
+interface FeedbackSession {
+    sessionId: string;
+    status: 'open' | 'closed';
+}
 interface DeepdotsInitParams {
     /** API key for authentication */
     apiKey?: string;
@@ -157,6 +170,17 @@ interface DeepdotsInitParams {
      * logged when `debug` is true.
      */
     analytics?: AnalyticsKeys;
+    /**
+     * Called when the analytics channel opens or closes a session (needs `analytics`), with the
+     * id the Deepdots API stores as `sdkSessionId` on the feedback the session becomes: send it
+     * to your backend to attach data to that feedback later. A session whose only batch is the
+     * closing one reports just `closed`. `closed` does not come when the page unloads before the
+     * closing request returns, for a session dropped after 30 min hidden, nor when the closing
+     * request fails (the API closes those itself, later): their id already came with `open`. Key
+     * by `sessionId`, not by order: the next session's `open` can arrive before the previous
+     * one's `closed`. Same value as `getFeedbackSessionId()` while the session is open.
+     */
+    onFeedbackSession?: (session: FeedbackSession) => void;
     /**
      * IP geolocation (country/city) added to analytics. Default `true`. The lookup calls
      * third-party services (ipapi.co, then ipwho.is, then ipinfo.io as fallbacks, 3 s timeout
@@ -392,6 +416,8 @@ declare class DeepdotsPopups {
     private analytics;
     /** feedbackSessionId cacheado del canal de analytics (devuelto por POST /sdk/feedback). */
     private analyticsFeedbackSessionId;
+    /** `init({ onFeedbackSession })`: avisa al host al abrir y cerrar cada registro. */
+    private onFeedbackSession;
     /** Timer del flush periódico de analytics (cada ANALYTICS_FLUSH_INTERVAL_MS). */
     private analyticsFlushTimer;
     /** Crash & error reporting (#14–17). Null hasta init(). */
@@ -435,6 +461,15 @@ declare class DeepdotsPopups {
     getUserId(): string | null;
     /** Session id de navegación actual. Null si tracking off. */
     getSessionId(): string | null;
+    /**
+     * Id del registro de analytics abierto: el `sessionId` que devolvió `POST /sdk/feedback`,
+     * que la API guarda como `sdkSessionId` en el Feedback en que se convierte la sesión. No es
+     * `getSessionId()`. Null hasta que el backend acepta el primer lote y de nuevo al cerrar la
+     * sesión: para saber también qué registro se cerró, usa `init({ onFeedbackSession })`.
+     */
+    getFeedbackSessionId(): string | null;
+    /** Avisa al host del registro abierto o cerrado; un fallo del host no corta el envío. */
+    private notifyFeedbackSession;
     /** Activa/desactiva el tracking (identidad + sesión + analytics). Kill-switch del contrato §7bis. */
     setTrackingEnabled(enabled: boolean): void;
     /** Registra un evento de analítica (modelo GA: nombre + params). No-op si tracking off. */

package/dist/react-native.d.ts

@@ -122,6 +122,19 @@ interface DeepdotsLogger {
     error?: (...args: unknown[]) => void;
     info?: (...args: unknown[]) => void;
 }
+/**
+ * A session of the analytics channel as the Deepdots API sees it. Every session becomes ONE
+ * feedback, and `sessionId` is what the API stores as `sdkSessionId` on it: the value to look
+ * that feedback up with (`GET /feedbacks?filter={"where":{"sdkSessionId":"<sessionId>"}}`).
+ * A session that closes again keeps that one feedback: the API updates it.
+ *  - `open`: the API acknowledged the session's first batch; its events keep accumulating.
+ *  - `closed`: the API acknowledged the session's closing batch (`completed: true`); the
+ *    feedback is created from it within seconds.
+ */
+interface FeedbackSession {
+    sessionId: string;
+    status: 'open' | 'closed';
+}
 interface DeepdotsInitParams {
     /** API key for authentication */
     apiKey?: string;
@@ -157,6 +170,17 @@ interface DeepdotsInitParams {
      * logged when `debug` is true.
      */
     analytics?: AnalyticsKeys;
+    /**
+     * Called when the analytics channel opens or closes a session (needs `analytics`), with the
+     * id the Deepdots API stores as `sdkSessionId` on the feedback the session becomes: send it
+     * to your backend to attach data to that feedback later. A session whose only batch is the
+     * closing one reports just `closed`. `closed` does not come when the page unloads before the
+     * closing request returns, for a session dropped after 30 min hidden, nor when the closing
+     * request fails (the API closes those itself, later): their id already came with `open`. Key
+     * by `sessionId`, not by order: the next session's `open` can arrive before the previous
+     * one's `closed`. Same value as `getFeedbackSessionId()` while the session is open.
+     */
+    onFeedbackSession?: (session: FeedbackSession) => void;
     /**
      * IP geolocation (country/city) added to analytics. Default `true`. The lookup calls
      * third-party services (ipapi.co, then ipwho.is, then ipinfo.io as fallbacks, 3 s timeout
@@ -392,6 +416,8 @@ declare class DeepdotsPopups {
     private analytics;
     /** feedbackSessionId cacheado del canal de analytics (devuelto por POST /sdk/feedback). */
     private analyticsFeedbackSessionId;
+    /** `init({ onFeedbackSession })`: avisa al host al abrir y cerrar cada registro. */
+    private onFeedbackSession;
     /** Timer del flush periódico de analytics (cada ANALYTICS_FLUSH_INTERVAL_MS). */
     private analyticsFlushTimer;
     /** Crash & error reporting (#14–17). Null hasta init(). */
@@ -435,6 +461,15 @@ declare class DeepdotsPopups {
     getUserId(): string | null;
     /** Session id de navegación actual. Null si tracking off. */
     getSessionId(): string | null;
+    /**
+     * Id del registro de analytics abierto: el `sessionId` que devolvió `POST /sdk/feedback`,
+     * que la API guarda como `sdkSessionId` en el Feedback en que se convierte la sesión. No es
+     * `getSessionId()`. Null hasta que el backend acepta el primer lote y de nuevo al cerrar la
+     * sesión: para saber también qué registro se cerró, usa `init({ onFeedbackSession })`.
+     */
+    getFeedbackSessionId(): string | null;
+    /** Avisa al host del registro abierto o cerrado; un fallo del host no corta el envío. */
+    private notifyFeedbackSession;
     /** Activa/desactiva el tracking (identidad + sesión + analytics). Kill-switch del contrato §7bis. */
     setTrackingEnabled(enabled: boolean): void;
     /** Registra un evento de analítica (modelo GA: nombre + params). No-op si tracking off. */

package/dist/react-native.js

@@ -563,7 +563,9 @@ var init_style = __esm({
  *     repintar\xEDa su web.
  *  4. El grupo .magicfeedback-radio se cualifica como div.magicfeedback-radio (la clase acaba
  *     tambi\xE9n en el <input> del boolean).
- *  5. Al final, un bloque de reglas propias del popup (fuente en los controles y padding del
+ *  5. Todo :hover va dentro de @media (hover: hover): en t\xE1ctil WebKit deja el hover pegado
+ *     en el \xFAltimo punto tocado y la opci\xF3n de la p\xE1gina siguiente parec\xEDa seleccionada.
+ *  6. Al final, un bloque de reglas propias del popup (fuente en los controles y padding del
  *     radio nativo).
  *
  * Las variables --mf-* se dejan en :root a prop\xF3sito: el modal del priority-list se portea a
@@ -801,9 +803,11 @@ var init_style = __esm({
     text-underline-offset: 2px;
 }
 
-.magicfeedback-info-message a:hover,
-.magicfeedback-start-message a:hover {
-    color: var(--mf-primary-hover);
+@media (hover: hover) {
+    .magicfeedback-info-message a:hover,
+    .magicfeedback-start-message a:hover {
+        color: var(--mf-primary-hover);
+    }
 }
 
 .magicfeedback-info-message ul,
@@ -1029,10 +1033,12 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-checkbox-container:hover,
-.magicfeedback-radio-container:hover {
-    background-color: var(--mf-bg-hover);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-checkbox-container:hover,
+    .magicfeedback-radio-container:hover {
+        background-color: var(--mf-bg-hover);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-checkbox-container:has(input:checked),
@@ -1099,9 +1105,11 @@ div.magicfeedback-radio {
     height: inherit;
 }
 
-.magicfeedback-boolean-option label:hover {
-    background-color: var(--mf-bg-hover);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-boolean-option label:hover {
+        background-color: var(--mf-bg-hover);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-boolean-option input[type="radio"]:checked + label {
@@ -1172,9 +1180,11 @@ div.magicfeedback-radio {
     border: 2px solid transparent;
 }
 
-.magicfeedback-rating-option-label-container img:hover {
-    transform: scale(1.1);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-rating-option-label-container img:hover {
+        transform: scale(1.1);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-rating-option-label-container input[type="radio"]:checked + img {
@@ -1326,9 +1336,11 @@ div.magicfeedback-radio {
     font-size: 0.8rem;
 }
 
-.magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
-.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
-    background: var(--mf-primary-light);
+@media (hover: hover) {
+    .magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+    .magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+        background: var(--mf-primary-light);
+    }
 }
 
 .magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
@@ -1365,8 +1377,10 @@ div.magicfeedback-radio {
     font-size: var(--mf-font-size-sm);
 }
 
-.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
-    background: var(--mf-primary-light);
+@media (hover: hover) {
+    .magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+        background: var(--mf-primary-light);
+    }
 }
 
 .magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
@@ -1399,9 +1413,11 @@ div.magicfeedback-radio {
     color: var(--mf-primary);
 }
 
-.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
-.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
-    background: var(--mf-primary-light);
+@media (hover: hover) {
+    .magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+    .magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+        background: var(--mf-primary-light);
+    }
 }
 
 .magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
@@ -1455,10 +1471,12 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
-    color: #fbbf24;
-    transform: scale(1.1);
+@media (hover: hover) {
+    .magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
+    .magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
+        color: #fbbf24;
+        transform: scale(1.1);
+    }
 }
 
 .magicfeedback-rating-star-selected {
@@ -1499,9 +1517,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-image-option-label-container:hover img {
-    border-color: var(--mf-primary);
-    box-shadow: var(--mf-shadow-md);
+@media (hover: hover) {
+    .magicfeedback-image-option-label-container:hover img {
+        border-color: var(--mf-primary);
+        box-shadow: var(--mf-shadow-md);
+    }
 }
 
 .magicfeedback-image-option-label-container input:checked + img {
@@ -1542,9 +1562,11 @@ div.magicfeedback-radio {
     background-color: var(--mf-bg-secondary);
 }
 
-.magicfeedback-multi-question-matrix-row-tr:hover {
-    background-color: var(--mf-bg-hover);
-    box-shadow: var(--mf-shadow-sm);
+@media (hover: hover) {
+    .magicfeedback-multi-question-matrix-row-tr:hover {
+        background-color: var(--mf-bg-hover);
+        box-shadow: var(--mf-shadow-sm);
+    }
 }
 
 .magicfeedback-multi-question-matrix-table td {
@@ -1580,9 +1602,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-priority-list-item:hover {
-    box-shadow: var(--mf-shadow-sm);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-priority-list-item:hover {
+        box-shadow: var(--mf-shadow-sm);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-priority-list-item-label {
@@ -1603,10 +1627,12 @@ div.magicfeedback-radio {
     user-select: none;
 }
 
-.magicfeedback-priority-list-arrow-up:hover,
-.magicfeedback-priority-list-arrow-down:hover {
-    color: var(--mf-primary);
-    transform: scale(1.2);
+@media (hover: hover) {
+    .magicfeedback-priority-list-arrow-up:hover,
+    .magicfeedback-priority-list-arrow-down:hover {
+        color: var(--mf-primary);
+        transform: scale(1.2);
+    }
 }
 
 /* ========================================
@@ -1713,10 +1739,12 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-md);
 }
 
-.magicfeedback-submit:hover {
-    background-color: var(--mf-primary-hover);
-    box-shadow: var(--mf-shadow-lg);
-    transform: translateY(-2px);
+@media (hover: hover) {
+    .magicfeedback-submit:hover {
+        background-color: var(--mf-primary-hover);
+        box-shadow: var(--mf-shadow-lg);
+        transform: translateY(-2px);
+    }
 }
 
 .magicfeedback-submit:active {
@@ -1742,9 +1770,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-back:hover {
-    border-color: var(--mf-primary);
-    background-color: var(--mf-bg-hover);
+@media (hover: hover) {
+    .magicfeedback-back:hover {
+        border-color: var(--mf-primary);
+        background-color: var(--mf-bg-hover);
+    }
 }
 
 /* ========================================
@@ -1764,8 +1794,10 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-skip-container:hover {
-    color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-skip-container:hover {
+        color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-skip-container input[type="checkbox"] {
@@ -1906,9 +1938,11 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-sm);
 }
 
-.magicfeedback-button:hover {
-    background: var(--mf-bg-hover);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-button:hover {
+        background: var(--mf-bg-hover);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-button:active {
@@ -1922,8 +1956,10 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-md);
 }
 
-.magicfeedback-button-primary:hover {
-    background: var(--mf-primary-hover);
+@media (hover: hover) {
+    .magicfeedback-button-primary:hover {
+        background: var(--mf-primary-hover);
+    }
 }
 
 .magicfeedback-button-primary:active {
@@ -1949,8 +1985,10 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-md);
 }
 
-.magicfeedback-start-message-button:hover {
-    background: var(--mf-primary-hover);
+@media (hover: hover) {
+    .magicfeedback-start-message-button:hover {
+        background: var(--mf-primary-hover);
+    }
 }
 
 /* ========================================
@@ -2086,12 +2124,18 @@ div.magicfeedback-radio {
     color: #666;
 }
 
-.magicfeedback-modal-close:hover,
 .magicfeedback-modal-close:focus {
     color: #000;
     outline: none;
 }
 
+@media (hover: hover) {
+    .magicfeedback-modal-close:hover {
+        color: #000;
+        outline: none;
+    }
+}
+
 /* ========================================
    FILE / IMAGE UPLOAD
    ======================================== */
@@ -2135,9 +2179,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition);
 }
 
-.magicfeedback-upload-dropzone:hover {
-    border-color: var(--mf-primary);
-    background-color: var(--mf-bg-hover);
+@media (hover: hover) {
+    .magicfeedback-upload-dropzone:hover {
+        border-color: var(--mf-primary);
+        background-color: var(--mf-bg-hover);
+    }
 }
 
 .magicfeedback-upload-dropzone:focus-within {
@@ -2275,13 +2321,20 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-upload-remove:hover,
 .magicfeedback-upload-remove:focus-visible {
     color: var(--mf-error);
     background-color: var(--mf-primary-light);
     outline: none;
 }
 
+@media (hover: hover) {
+    .magicfeedback-upload-remove:hover {
+        color: var(--mf-error);
+        background-color: var(--mf-primary-light);
+        outline: none;
+    }
+}
+
 .magicfeedback-upload-remove svg {
     width: 16px;
     height: 16px;
@@ -4376,8 +4429,10 @@ async function safeBodyText(res) {
 function createFeedbackSink(options) {
   let feedbackSessionId;
   let firstPostInFlight = null;
+  let generation = 0;
   const url = `${options.baseUrl}/sdk/feedback`;
   const post = async (body, final, sessionEnd = false) => {
+    const postGeneration = generation;
     const json = JSON.stringify(body);
     const small = json.length <= KEEPALIVE_MAX_BYTES;
     if (final) options.log?.("[DeepdotsAnalytics] final flush via fetch keepalive");
@@ -4407,9 +4462,25 @@ function createFeedbackSink(options) {
       );
       return;
     }
-    if (sessionEnd) return;
+    if (sessionEnd) {
+      let closedId = body.sessionId;
+      try {
+        const data = await res.json();
+        closedId = data?.sessionId ?? closedId;
+      } catch {
+      }
+      try {
+        if (closedId) options.onSessionClosed?.(closedId);
+      } catch {
+      }
+      return;
+    }
     try {
       const data = await res.json();
+      if (postGeneration !== generation) {
+        options.log?.("[DeepdotsAnalytics] sessionId of a closed session ignored:", data?.sessionId);
+        return;
+      }
       if (data?.sessionId && data.sessionId !== feedbackSessionId) {
         feedbackSessionId = data.sessionId;
         options.log?.("[DeepdotsAnalytics] feedbackSessionId cached:", feedbackSessionId);
@@ -4422,6 +4493,7 @@ function createFeedbackSink(options) {
     if (meta?.resetSession) {
       feedbackSessionId = void 0;
       firstPostInFlight = null;
+      generation++;
       options.onSessionReset?.();
       return;
     }
@@ -4436,6 +4508,7 @@ function createFeedbackSink(options) {
     if (sessionEnd) {
       feedbackSessionId = void 0;
       firstPostInFlight = null;
+      generation++;
       options.onSessionReset?.();
     } else if (!feedbackSessionId) {
       firstPostInFlight = sent.then(
@@ -5086,6 +5159,8 @@ var DeepdotsPopups = class {
     this.analytics = null;
     /** feedbackSessionId cacheado del canal de analytics (devuelto por POST /sdk/feedback). */
     this.analyticsFeedbackSessionId = void 0;
+    /** `init({ onFeedbackSession })`: avisa al host al abrir y cerrar cada registro. */
+    this.onFeedbackSession = void 0;
     /** Timer del flush periódico de analytics (cada ANALYTICS_FLUSH_INTERVAL_MS). */
     this.analyticsFlushTimer = void 0;
     /** Crash & error reporting (#14–17). Null hasta init(). */
@@ -5143,6 +5218,7 @@ var DeepdotsPopups = class {
     this.renderChrome = config.renderChrome ?? true;
     this.showProgressBar = config.showProgressBar;
     this.surveyCss = config.surveyCss;
+    this.onFeedbackSession = config.onFeedbackSession;
     this.config = {
       apiKey: config.apiKey || void 0,
       debug: config.debug || false,
@@ -5176,7 +5252,9 @@ var DeepdotsPopups = class {
       log: (...a) => this.log(...a),
       onSessionId: (id) => {
         this.analyticsFeedbackSessionId = id;
+        this.notifyFeedbackSession(id, "open");
       },
+      onSessionClosed: (id) => this.notifyFeedbackSession(id, "closed"),
       onSessionReset: () => {
         this.analyticsFeedbackSessionId = void 0;
       }
@@ -5251,6 +5329,23 @@ var DeepdotsPopups = class {
   getSessionId() {
     return this.tracking?.getSessionId() ?? null;
   }
+  /**
+   * Id del registro de analytics abierto: el `sessionId` que devolvió `POST /sdk/feedback`,
+   * que la API guarda como `sdkSessionId` en el Feedback en que se convierte la sesión. No es
+   * `getSessionId()`. Null hasta que el backend acepta el primer lote y de nuevo al cerrar la
+   * sesión: para saber también qué registro se cerró, usa `init({ onFeedbackSession })`.
+   */
+  getFeedbackSessionId() {
+    return this.analyticsFeedbackSessionId ?? null;
+  }
+  /** Avisa al host del registro abierto o cerrado; un fallo del host no corta el envío. */
+  notifyFeedbackSession(sessionId, status) {
+    try {
+      this.onFeedbackSession?.({ sessionId, status });
+    } catch (error) {
+      this.log("analytics \xB7 onFeedbackSession threw:", error);
+    }
+  }
   /** Activa/desactiva el tracking (identidad + sesión + analytics). Kill-switch del contrato §7bis. */
   setTrackingEnabled(enabled) {
     if (!enabled) this.closeSession("tracking_disabled");