@magicfeedback/popup-sdk 1.1.3 → 1.1.5

package/dist/react-native.d.mts

@@ -195,12 +195,21 @@ interface PopupActions {
     start?: PopupActionStart;
     back?: PopupActionDecline;
 }
+/** Fuente personalizable del popup + survey (viene de la API por popup) */
+interface PopupFont {
+    /** Nombre de la familia. Ej: "Inter" (nombre limpio, NO un stack). */
+    family: string;
+    /** Opcional: URL a un archivo de fuente (woff2/ttf/otf) para armar un @font-face. */
+    url?: string;
+}
 /** Configurable popup styles */
 interface PopupStyle {
     theme: 'light' | 'dark';
     position: 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
     /** @deprecated Not used by the SDK; kept only for API compatibility */
     imageUrl?: string | null;
+    /** Fuente personalizada. Si falta, se mantiene el comportamiento actual. */
+    font?: PopupFont;
 }
 
 interface PopupRenderer {
@@ -240,6 +249,28 @@ interface ReactNativeErrorUtils {
     setGlobalHandler(handler: (error: unknown, isFatal?: boolean) => void): void;
 }
 
+/**
+ * Messaging (#18–22): tracking de notificaciones del host (push / in-app).
+ * Un único evento reservado `deepdots_message` con un campo `stage` discriminador;
+ * el funnel se correlaciona por `message_id` y se agrupa por `message_title`.
+ */
+type MessageStage = 'delivered' | 'clicked' | 'converted';
+interface TrackMessageOptions {
+    /** Identificador del mensaje/notificación — correlaciona el funnel delivered→clicked→converted. */
+    id: string;
+    /** Título del mensaje — dimensión de agrupación de #18–22. */
+    title: string;
+    /** Canal de entrega. */
+    channel: 'push' | 'in_app';
+    /** Nombre de la campaña (opcional). */
+    campaign?: string;
+    /** Valor de conversión (opcional, típico en `stage: 'converted'`). */
+    value?: number;
+    currency?: string;
+    /** Parámetros libres adicionales. */
+    params?: Record<string, unknown>;
+}
+
 /**
  * Main class for managing survey popups
  */
@@ -311,6 +342,8 @@ declare class DeepdotsPopups {
     trackFindabilityFriction(frictionTopic: string, params?: Record<string, unknown>): void;
     /** Funnel: un paso del embudo, correlacionado por `taskId`. El backend reconstruye conversión/drop-off/tiempo. */
     trackFunnelStep(funnel: string, step: string, taskId: string, params?: Record<string, unknown>): void;
+    /** Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app). No-op si tracking off. */
+    trackMessage(stage: MessageStage, options: TrackMessageOptions): void;
     /**
      * Navegación MANUAL (entornos sin History API, p. ej. React Native con React Navigation).
      * El host la llama en cada cambio de pantalla; emite `page_view` al salir de la anterior.
@@ -485,7 +518,7 @@ declare class ReactNativePopupRenderer implements PopupRenderer {
     private partialEmitted;
     constructor(options?: ReactNativeRendererOptions);
     init(): void;
-    show(surveyId: string, productId: string, _actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, _style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
+    show(surveyId: string, productId: string, _actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
     hide(): void;
     /**
      * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a

package/dist/react-native.d.ts

@@ -195,12 +195,21 @@ interface PopupActions {
     start?: PopupActionStart;
     back?: PopupActionDecline;
 }
+/** Fuente personalizable del popup + survey (viene de la API por popup) */
+interface PopupFont {
+    /** Nombre de la familia. Ej: "Inter" (nombre limpio, NO un stack). */
+    family: string;
+    /** Opcional: URL a un archivo de fuente (woff2/ttf/otf) para armar un @font-face. */
+    url?: string;
+}
 /** Configurable popup styles */
 interface PopupStyle {
     theme: 'light' | 'dark';
     position: 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
     /** @deprecated Not used by the SDK; kept only for API compatibility */
     imageUrl?: string | null;
+    /** Fuente personalizada. Si falta, se mantiene el comportamiento actual. */
+    font?: PopupFont;
 }
 
 interface PopupRenderer {
@@ -240,6 +249,28 @@ interface ReactNativeErrorUtils {
     setGlobalHandler(handler: (error: unknown, isFatal?: boolean) => void): void;
 }
 
+/**
+ * Messaging (#18–22): tracking de notificaciones del host (push / in-app).
+ * Un único evento reservado `deepdots_message` con un campo `stage` discriminador;
+ * el funnel se correlaciona por `message_id` y se agrupa por `message_title`.
+ */
+type MessageStage = 'delivered' | 'clicked' | 'converted';
+interface TrackMessageOptions {
+    /** Identificador del mensaje/notificación — correlaciona el funnel delivered→clicked→converted. */
+    id: string;
+    /** Título del mensaje — dimensión de agrupación de #18–22. */
+    title: string;
+    /** Canal de entrega. */
+    channel: 'push' | 'in_app';
+    /** Nombre de la campaña (opcional). */
+    campaign?: string;
+    /** Valor de conversión (opcional, típico en `stage: 'converted'`). */
+    value?: number;
+    currency?: string;
+    /** Parámetros libres adicionales. */
+    params?: Record<string, unknown>;
+}
+
 /**
  * Main class for managing survey popups
  */
@@ -311,6 +342,8 @@ declare class DeepdotsPopups {
     trackFindabilityFriction(frictionTopic: string, params?: Record<string, unknown>): void;
     /** Funnel: un paso del embudo, correlacionado por `taskId`. El backend reconstruye conversión/drop-off/tiempo. */
     trackFunnelStep(funnel: string, step: string, taskId: string, params?: Record<string, unknown>): void;
+    /** Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app). No-op si tracking off. */
+    trackMessage(stage: MessageStage, options: TrackMessageOptions): void;
     /**
      * Navegación MANUAL (entornos sin History API, p. ej. React Native con React Navigation).
      * El host la llama en cada cambio de pantalla; emite `page_view` al salir de la anterior.
@@ -485,7 +518,7 @@ declare class ReactNativePopupRenderer implements PopupRenderer {
     private partialEmitted;
     constructor(options?: ReactNativeRendererOptions);
     init(): void;
-    show(surveyId: string, productId: string, _actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, _style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
+    show(surveyId: string, productId: string, _actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
     hide(): void;
     /**
      * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a

package/dist/react-native.js

@@ -141,6 +141,43 @@ var init_tracking_manager = __esm({
   }
 });
 
+// src/ui/font.ts
+function fontFormatFromUrl(url) {
+  const clean = url.split("?")[0].split("#")[0];
+  const ext = clean.slice(clean.lastIndexOf(".") + 1).toLowerCase();
+  return FORMAT_BY_EXT[ext];
+}
+function sanitizeFamily(family) {
+  return family.replace(/[^A-Za-z0-9 ._-]/g, "").trim();
+}
+function isSafeFontUrl(url) {
+  if (!/^(https?:|data:)/i.test(url)) return false;
+  return !/[\x00-\x20"<>\\]/.test(url);
+}
+function buildFontFamilyValue(family) {
+  const safe = sanitizeFamily(family);
+  return `"${safe}", -apple-system, system-ui, sans-serif`;
+}
+function buildFontFaceCss(family, url) {
+  if (!url || !isSafeFontUrl(url)) return "";
+  const safe = sanitizeFamily(family);
+  const fmt = fontFormatFromUrl(url);
+  const src = fmt ? `url("${url}") format("${fmt}")` : `url("${url}")`;
+  return `@font-face{font-family:"${safe}";src:${src};font-display:swap;}`;
+}
+var FORMAT_BY_EXT;
+var init_font = __esm({
+  "src/ui/font.ts"() {
+    "use strict";
+    FORMAT_BY_EXT = {
+      woff2: "woff2",
+      woff: "woff",
+      ttf: "truetype",
+      otf: "opentype"
+    };
+  }
+});
+
 // src/assets/style.css
 var style_default;
 var init_style = __esm({
@@ -285,13 +322,22 @@ var init_style = __esm({
     padding: 0;
     font-weight: 900;
     color: #222;
-    font-family: 'Montserrat';
+    font-family: var(--deepdots-font, 'Montserrat');
     font-size: 18px;
     text-transform: uppercase;
     text-align: center;
     margin-bottom: 40px;
 }
 
+/* Los controles de formulario no heredan font-family por defecto: cuando hay
+   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */
+.deepdots-popup.deepdots-has-font button,
+.deepdots-popup.deepdots-has-font input,
+.deepdots-popup.deepdots-has-font textarea,
+.deepdots-popup.deepdots-has-font select {
+    font-family: var(--deepdots-font, inherit);
+}
+
 .deepdots-popup h6 {
     margin-bottom: 1rem;
 }
@@ -1064,6 +1110,18 @@ function ensureResponsiveStyles(_popup) {
   `;
   document.head.appendChild(style);
 }
+function ensureFontFace(family, url) {
+  const css = buildFontFaceCss(family, url);
+  if (!css) return;
+  const STYLE_ID = "deepdots-font-face";
+  let el = document.getElementById(STYLE_ID);
+  if (!el) {
+    el = document.createElement("style");
+    el.id = STYLE_ID;
+    document.head.appendChild(el);
+  }
+  if (el.textContent !== css) el.textContent = css;
+}
 async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
   let surveyCompletedEmitted = false;
   let stylesInjected = false;
@@ -1099,6 +1157,14 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       width: 90%;
       min-height: 200px;
     `;
+  const font = style?.font;
+  if (font?.family) {
+    const familyValue = buildFontFamilyValue(font.family);
+    popup.style.fontFamily = familyValue;
+    popup.style.setProperty("--deepdots-font", familyValue);
+    popup.classList.add("deepdots-has-font");
+    if (font.url) ensureFontFace(font.family, font.url);
+  }
   const header = document.createElement("div");
   header.className = "deepdots-popup-header";
   header.style.cssText = "display:flex; justify-content:flex-end; align-items:center; width:100%;";
@@ -1520,6 +1586,7 @@ var init_renderPopup = __esm({
   "src/ui/renderPopup.ts"() {
     "use strict";
     init_tracking_manager();
+    init_font();
     import_native = __toESM(require("@magicfeedback/native"));
     init_style();
   }
@@ -1726,6 +1793,7 @@ function resolveEnvironment(nodeEnv) {
 init_tracking_manager();
 
 // src/ui/surveyHtml.ts
+init_font();
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
   const version = opts.version ?? "2.2.4";
@@ -1734,10 +1802,12 @@ function buildSurveyHtml(opts) {
   const pid = JSON.stringify(opts.productId);
   const profileJson = JSON.stringify(opts.profile ?? []);
   const metaJson = JSON.stringify(opts.metadata ?? []);
+  const fontFaceCss = opts.font ? buildFontFaceCss(opts.font.family, opts.font.url) : "";
+  const fontFamilyValue = opts.font ? buildFontFamilyValue(opts.font.family) : "-apple-system,system-ui,sans-serif";
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta name="color-scheme" content="light"/>
-<style>html,body{margin:0;padding:0;background:transparent;font-family:-apple-system,system-ui,sans-serif}#mf{width:100%;box-sizing:border-box}#mf *{max-width:100%;box-sizing:border-box}</style>
+<style>${fontFaceCss}html,body{margin:0;padding:0;background:transparent;font-family:${fontFamilyValue}}#mf{width:100%;box-sizing:border-box}#mf *{max-width:100%;box-sizing:border-box}</style>
 </head><body>
 <div id="mf"></div>
 <script>
@@ -1788,13 +1858,13 @@ var ReactNativePopupRenderer = class {
   }
   init() {
   }
-  show(surveyId, productId, _actions, emit, onClose, env = "production", userId, _style, sessionId, miniService, analyticsFeedbackSessionId) {
+  show(surveyId, productId, _actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
     this.emitFn = emit;
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
     this.partialEmitted = false;
     const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null, analyticsFeedbackSessionId ?? null);
-    const html = buildSurveyHtml({ surveyId, productId, env, profile, metadata });
+    const html = buildSurveyHtml({ surveyId, productId, env, profile, metadata, font: style?.font });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
     } else {
@@ -2460,11 +2530,27 @@ var CrashReporter = class {
   }
 };
 
+// src/analytics/messaging.ts
+function buildMessageParams(stage, o) {
+  const p = {
+    stage,
+    message_id: o.id,
+    message_title: o.title,
+    channel: o.channel
+  };
+  if (o.campaign) p.campaign = o.campaign;
+  if (o.value !== void 0) p.value = o.value;
+  if (o.currency) p.currency = o.currency;
+  return { ...p, ...o.params ?? {} };
+}
+
 // src/core/deepdots-popups.ts
 var EXIT_QUEUE_STORAGE_KEY = "__deepdots_exit_popup_queue__";
 var DAY_IN_MS = 24 * 60 * 60 * 1e3;
 var ANALYTICS_MAX_BATCH_SIZE = 20;
 var ANALYTICS_FLUSH_INTERVAL_MS = 3e4;
+var RESERVED_EVENT_PREFIX = "deepdots_";
+var CUSTOM_EVENT_PREFIX = "deepdots_event_";
 var DeepdotsPopups = class {
   constructor() {
     this.config = null;
@@ -2617,8 +2703,9 @@ var DeepdotsPopups = class {
   /** Registra un evento de analítica (modelo GA: nombre + params). No-op si tracking off. */
   track(name, params) {
     if (!this.tracking?.isTrackingEnabled()) return;
-    this.analytics?.track(name, params);
-    this.log("analytics \xB7 track:", name, params ?? {});
+    const eventName = name.startsWith(RESERVED_EVENT_PREFIX) ? name : `${CUSTOM_EVENT_PREFIX}${name}`;
+    this.analytics?.track(eventName, params);
+    this.log("analytics \xB7 track:", eventName, params ?? {});
   }
   /** User attributes para breakdowns (registration_status, pass_type, sector, pass_status…). */
   setUserAttributes(attributes) {
@@ -2670,6 +2757,10 @@ var DeepdotsPopups = class {
   trackFunnelStep(funnel, step, taskId, params) {
     this.track("deepdots_funnel_step", { funnel, step, task_id: taskId, ...params ?? {} });
   }
+  /** Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app). No-op si tracking off. */
+  trackMessage(stage, options) {
+    this.track("deepdots_message", buildMessageParams(stage, options));
+  }
   /**
    * Navegación MANUAL (entornos sin History API, p. ej. React Native con React Navigation).
    * El host la llama en cada cambio de pantalla; emite `page_view` al salir de la anterior.