@magicfeedback/popup-sdk 1.3.0 → 1.4.0

package/dist/index.mjs

@@ -19,6 +19,10 @@ var POPUP_TRIGGER_CONDITION_STATUSES = [
 ];
 
 // src/triggers/index.ts
+function toNumericValue(value, fallback) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
 function setupTrigger(popups, trigger) {
   switch (trigger.type) {
     case "time":
@@ -39,14 +43,14 @@ function setupTrigger(popups, trigger) {
   }
 }
 function setupTimeTrigger(popups, trigger) {
-  const delay = trigger.value || 5e3;
+  const delay = toNumericValue(trigger.value, 5e3);
   setTimeout(() => {
     popups.triggerSurvey(trigger.surveyId, trigger.popupId);
   }, delay);
   popups.debug(`Time trigger set for ${delay}ms`);
 }
 function setupScrollTrigger(popups, trigger) {
-  const threshold = trigger.value || 50;
+  const threshold = toNumericValue(trigger.value, 50);
   const handler = () => {
     const scrollPercentage = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) * 100;
     if (scrollPercentage >= threshold) {
@@ -221,6 +225,16 @@ function buildSurveyHtml(opts) {
   const colorScheme = isDark ? "dark" : "light";
   const textPrimary = isDark ? "#f0f0f0" : "#111";
   const pos = POSITION_MAP[opts.position ?? "center"] ?? POSITION_MAP.center;
+  const chrome = opts.chrome !== false;
+  const bodyBg = chrome ? pos.background : "transparent";
+  const bodyPadding = chrome ? pos.padding : "0";
+  const bodyDisplay = chrome ? "flex" : "block";
+  const cardBg = chrome ? popupBg : "transparent";
+  const cardShadow = chrome ? "0 4px 6px rgba(0,0,0,0.1)" : "none";
+  const cardRadius = chrome ? "8px" : "0";
+  const cardMaxWidth = chrome ? "600px" : "none";
+  const cardWidth = chrome ? "90%" : "100%";
+  const cardMinHeight = chrome ? "200px" : "0";
   const backLabel = JSON.stringify(opts.actions?.back?.label ?? "Back");
   const startLabel = JSON.stringify(opts.actions?.start?.label ?? "Start survey");
   const completeLabel = JSON.stringify(opts.actions?.complete?.label ?? "Complete survey");
@@ -232,8 +246,8 @@ function buildSurveyHtml(opts) {
 ${style_default}
 ${fontFaceCss}
 html,body{margin:0;padding:0;height:100%;font-family:${fontFamilyValue}}
-body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${pos.background};padding:${pos.padding};box-sizing:border-box}
-.deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${popupBg};color-scheme:${colorScheme};border-radius:8px;padding:24px;box-shadow:0 4px 6px rgba(0,0,0,0.1);max-width:600px;width:90%;min-height:200px;box-sizing:border-box}
+body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${bodyBg};padding:${bodyPadding};box-sizing:border-box}
+.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};box-sizing:border-box}
 .deepdots-popup-header{display:flex;justify-content:flex-end;align-items:center;width:100%}
 #dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px}
 .deepdots-popup-container-content{display:flex;flex-direction:column;padding:0 20px 12px 20px;max-height:80vh;overflow:hidden;box-sizing:border-box}
@@ -291,6 +305,7 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
   function emit(s){ try{ if(window.ReactNativeWebView){ window.ReactNativeWebView.postMessage(s); } }catch(e){} }
   function emitJSON(n,p){ try{ emit(JSON.stringify({name:n,payload:p||{}})); }catch(e){} }
   window.DeepdotsClose = function(){ emitJSON('popup_close'); };
+  var chromeOn=${chrome ? "true" : "false"};
 
   var popup=document.getElementById('dd-popup');
   var main=document.getElementById('dd-main');
@@ -366,7 +381,7 @@ body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignI
           var s=args && args.formData ? args.formData.style : null;
           if(s && !stylesInjected){
             stylesInjected=true;
-            if(s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
+            if(chromeOn && s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
             if(s.contentAlign){ main.style.justifyContent = s.contentAlign==='center' ? 'center' : 'flex-start'; }
             if(s.buttonPrimaryColor){
               submitBtn.style.background=s.buttonPrimaryColor; submitBtn.style.border='none'; submitBtn.style.color='#fff';
@@ -455,7 +470,7 @@ 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, renderChrome) {
     this.emitFn = emit;
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
@@ -470,7 +485,9 @@ var ReactNativePopupRenderer = class {
       font: style?.font,
       theme: style?.theme,
       position: style?.position,
-      actions
+      actions,
+      // renderChrome:false (init) → HTML sin tarjeta/overlay: el host lo envuelve en su Modal.
+      chrome: renderChrome
     });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
@@ -561,13 +578,13 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
-  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, _renderChrome) {
     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-NJK7Z46E.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-TCKR5Z3P.mjs").then(({ renderPopup }) => {
       renderPopup(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId);
     });
   }
@@ -1415,6 +1432,8 @@ var DeepdotsPopups = class {
     this.deferredExitTimers = [];
     this.baseUrl = "";
     this.env = "production";
+    /** Si el SDK pinta el "modal" del popup (RN). Default true; false = el host lo envuelve. */
+    this.renderChrome = true;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     this.tracking = null;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -1465,6 +1484,7 @@ var DeepdotsPopups = class {
     const env = resolveEnvironment(config.nodeEnv);
     this.baseUrl = env.apiBaseUrl;
     this.env = config.nodeEnv || "production";
+    this.renderChrome = config.renderChrome ?? true;
     this.config = {
       apiKey: config.apiKey || void 0,
       debug: config.debug || false,
@@ -1650,6 +1670,22 @@ var DeepdotsPopups = class {
   trackFunnelStep(funnel, step, taskId, params) {
     this.track("deepdots_funnel_step", { funnel, step, task_id: taskId, ...params ?? {} });
   }
+  /**
+   * Product Effectiveness: una interacción significativa del usuario (`interaction_type` es la
+   * dimensión de agrupación, p. ej. `get_help`, `homepage`, `contact_support`).
+   *
+   * Existe como evento RESERVADO para que la convención no la invente cada host: un `track()`
+   * custom acaba como `deepdots_event_…` y no lo cuenta la analítica de effectiveness.
+   * Un `interactionType` vacío se descarta con warning (no aporta dato agrupable).
+   */
+  trackMeaningfulInteraction(interactionType, params) {
+    const type = typeof interactionType === "string" ? interactionType.trim() : "";
+    if (!type) {
+      console.warn("[DeepdotsPopups] trackMeaningfulInteraction discarded: empty interaction_type");
+      return;
+    }
+    this.track("deepdots_meaningful_interaction", { interaction_type: type, ...params ?? {} });
+  }
   /**
    * Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app).
    * No-op si tracking off. El evento se descarta (con warning) si el `channel` no es válido,
@@ -2250,13 +2286,14 @@ var DeepdotsPopups = class {
         style,
         sessionId,
         miniService,
-        analyticsFeedbackSessionId
+        analyticsFeedbackSessionId,
+        this.renderChrome
       );
       return;
     }
     if (!this.popupContainer) return;
     const container = this.popupContainer;
-    void import("./renderPopup-NJK7Z46E.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-TCKR5Z3P.mjs").then(({ renderPopup }) => {
       renderPopup(
         container,
         surveyId,