@magicfeedback/popup-sdk 1.14.0 → 1.16.0

package/dist/index.mjs

@@ -21,7 +21,7 @@ import {
   sdkWarn,
   setLogger,
   style_default
-} from "./chunk-C7VD3HY4.mjs";
+} from "./chunk-AFRHPS3K.mjs";
 
 // src/types/index.ts
 var POPUP_TRIGGER_CONDITION_STATUSES = [
@@ -292,12 +292,14 @@ function buildSurveyHtml(opts) {
   const startLabel = jsonForScript(initActionLabels.start);
   const completeLabel = jsonForScript(initActionLabels.complete);
   const submitLabel = jsonForScript(initActionLabels.accept);
+  const cancelLabel = jsonForScript(initActionLabels.decline);
   const labelsTableJson = jsonForScript(LABELS);
   const actionOverridesJson = jsonForScript({
     accept: trimmedOrNull(opts.actions?.accept?.label),
     start: trimmedOrNull(opts.actions?.start?.label),
     complete: trimmedOrNull(opts.actions?.complete?.label),
-    back: trimmedOrNull(opts.actions?.back?.label)
+    back: trimmedOrNull(opts.actions?.back?.label),
+    decline: trimmedOrNull(opts.actions?.decline?.label)
   });
   const initLangJson = jsonForScript(opts.language ?? "");
   const initDirection = directionFor(opts.language);
@@ -359,6 +361,7 @@ body.dd-ready #dd-popup{visibility:visible}
 #dd-logo{max-height:40px;max-width:100%;object-fit:contain;display:block;margin:12px 0 0 0}
 .deepdots-error-hint{display:none;margin:12px 0 0 0;padding:10px 12px;border-radius:6px;background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;font-size:13px}
 /* Pantalla final: el HTML del editor de la plataforma (imagen + texto), centrado. */
+.deepdots-load-error{display:none;width:100%;text-align:center;padding:24px 0;font-size:15px;color:${textPrimary}}
 .deepdots-success{display:none;width:100%;text-align:center;padding:24px 0;color:${textPrimary}}
 .deepdots-success img{max-width:100%;height:auto;margin:0 auto 16px auto;display:block}
 .deepdots-success p{margin:0;font-size:16px;font-weight:600;line-height:1.4}
@@ -366,7 +369,7 @@ body.dd-ready #dd-popup{visibility:visible}
 .dd-nav-btn{display:none;border:none;min-height:44px;padding:12px 24px;border-radius:999px;cursor:pointer;font-size:15px;font-weight:600;align-items:center;justify-content:center;text-align:center}
 /* Secundario como bot\xF3n de texto: sin borde ni fondo, para que el primario sea la \xFAnica CTA. */
 #dd-back{background:transparent;color:${textMuted};border:none}
-#dd-start,#dd-complete,#dd-submit{background:#1E293B;color:#fff;border:none}
+#dd-start,#dd-complete,#dd-submit,#dd-cancel{background:#1E293B;color:#fff;border:none}
 #dd-submit:disabled,#dd-start:disabled,#dd-back:disabled,#dd-complete:disabled{opacity:0.6;cursor:not-allowed}
 .mf-spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
 .mf-spinner-circle{width:28px;height:28px;border:3px solid #e0e6ed;border-top-color:#1E293B;border-radius:50%;animation:ddspin 0.9s linear infinite}
@@ -407,6 +410,7 @@ ${customCss}
         <div class="mf-spinner" id="dd-spinner" role="status" aria-label="${initLabels.loadingAria}"><div class="mf-spinner-circle"></div></div>
         <div id="mf"></div>
       </div>
+      <div class="deepdots-load-error" id="dd-load-error" role="alert"></div>
       <div class="deepdots-error-hint" id="dd-error" role="alert" aria-live="polite"></div>
     </div>
     <div class="deepdots-popup-footer" id="dd-footer">
@@ -414,6 +418,7 @@ ${customCss}
       <button type="button" class="dd-nav-btn" id="dd-back"></button>
       <button type="button" class="dd-nav-btn" id="dd-complete"></button>
       <button type="button" class="dd-nav-btn" id="dd-start"></button>
+      <button type="button" class="dd-nav-btn" id="dd-cancel"></button>
     </div>
   </div>
 </div>
@@ -436,6 +441,8 @@ ${customCss}
   var startBtn=document.getElementById('dd-start');
   var completeBtn=document.getElementById('dd-complete');
   var submitBtn=document.getElementById('dd-submit');
+  var cancelBtn=document.getElementById('dd-cancel');
+  var loadErrorEl=document.getElementById('dd-load-error');
   var titleEl=document.getElementById('dd-title');
   var progressEl=document.getElementById('dd-progress');
   var progressLabel=document.getElementById('dd-progress-label');
@@ -465,6 +472,8 @@ ${customCss}
     startBtn.textContent=DD_ACTION_OVERRIDES.start||next.start;
     completeBtn.textContent=DD_ACTION_OVERRIDES.complete||next.complete;
     submitBtn.textContent=DD_ACTION_OVERRIDES.accept||next.accept;
+    cancelBtn.textContent=DD_ACTION_OVERRIDES.decline||next.decline;
+    loadErrorEl.textContent=next.errorLoad;
     if(closeEl){ closeEl.setAttribute('aria-label',next.closeAria); }
     if(spinner){ spinner.setAttribute('aria-label',next.loadingAria); }
     progressFollowUp.textContent=next.followUp;
@@ -519,6 +528,7 @@ ${customCss}
   startBtn.textContent=${startLabel};
   completeBtn.textContent=${completeLabel};
   submitBtn.textContent=${submitLabel};
+  cancelBtn.textContent=${cancelLabel};
 
   closeEl.onclick=function(){ emitJSON('popup_close'); };
   backBtn.onclick=function(){ if(window.DeepdotsForm && window.DeepdotsForm.back){ window.DeepdotsForm.back(); } };
@@ -530,6 +540,8 @@ ${customCss}
     }
   };
   completeBtn.onclick=function(){ emitJSON('popup_close'); };
+  // \xDAnica acci\xF3n del survey que no carga: cierra igual que la X.
+  cancelBtn.onclick=function(){ emitJSON('popup_close'); };
   var surveyCompletedEmitted=false;
   submitBtn.onclick=function(){
     if(surveyCompletedEmitted) return;
@@ -571,6 +583,7 @@ ${customCss}
     startBtn.style.display='none';
     submitBtn.style.display='none';
     completeBtn.style.display='none';
+    cancelBtn.style.display='none';
     backBtn.style.width='';
     startBtn.style.width='';
     submitBtn.style.width='';
@@ -586,6 +599,8 @@ ${customCss}
     } else if(state==='completed'){
       completeBtn.style.display='inline-flex';
       completeBtn.style.width='100%';
+    } else if(state==='load_error'){
+      cancelBtn.style.display='inline-flex';
     }
   }
 
@@ -632,6 +647,26 @@ ${REVEAL_JS}
   }
   setLoading(true);
 
+  // Survey que no ha cargado (406 de /info, sin red, bundle del CDN ca\xEDdo). Antes se emit\xEDa
+  // \`loaded\` y se pintaba un Send sobre un survey vac\xEDo. Espejo de KMP: aviso traducido, la X
+  // sigue, un \xFAnico Cancel, y se revela ya (manda \`ready\`): no hay nada m\xE1s que esperar.
+  // No es interacci\xF3n del usuario: el renderer no lo convierte en popup_clicked.
+  var ddLoadFailed=false;
+  function ddShowLoadError(name, reason){
+    if(ddLoadFailed){ return; }
+    ddLoadFailed=true;
+    var why=(reason && reason.message) ? reason.message : String(reason);
+    emitJSON(name, { message: why });
+    progressEl.style.display='none';
+    formWrapper.style.display='none';
+    errorHint.style.display='none';
+    loadErrorEl.textContent=DD_LABELS_ACTIVE.errorLoad;
+    loadErrorEl.style.display='block';
+    setLoading(false);
+    updateButtons('load_error');
+    ddReveal.reveal();
+  }
+
   var initialized=false;
   function initMF(){
     if(initialized || !window.magicfeedback) return initialized;
@@ -655,6 +690,7 @@ ${REVEAL_JS}
         // de native sin esta opci\xF3n la ignoran.
         autofocus:'navigation',
         onLoadedEvent:function(args){
+          if(args && args.error){ ddShowLoadError('error:load', args.error); return; }
           // 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
           // env\xEDa: entonces el primero de formData.lang (el idioma por defecto).
@@ -758,13 +794,13 @@ ${REVEAL_JS}
           updateProgress({ progress:p&&p.progress, total:form.total, completed:false, followup:p&&p.followup });
           emitJSON('back', p);
         }
-      }).catch(function(e){ setLoading(false); emit('error:init'); });
-    }catch(e){ setLoading(false); emit('error:exception'); }
+      }).catch(function(e){ ddShowLoadError('error:init', e); });
+    }catch(e){ ddShowLoadError('error:exception', e); }
     return true;
   }
   var s=document.createElement('script'); s.src=${JSON.stringify(cdn)}; s.async=true;
   s.onload=function(){ initMF(); };
-  s.onerror=function(){ setLoading(false); emit('error:load'); };
+  s.onerror=function(){ ddShowLoadError('error:load', 'survey script failed to load'); };
   document.head.appendChild(s);
   var tries=0, t=setInterval(function(){ if(initMF()||++tries>40){ clearInterval(t); } },150);
 })();
@@ -881,6 +917,7 @@ var ReactNativePopupRenderer = class {
         this.onCloseFn?.();
         break;
       default:
+        if (typeof name === "string" && name.startsWith("error:")) this.emitReady(surveyId);
         break;
     }
   }
@@ -893,7 +930,7 @@ function createReactNativeRenderer() {
 }
 
 // src/ui/preload.ts
-var defaultLoader = () => import("./renderPopup-Z6TENBP6.mjs");
+var defaultLoader = () => import("./renderPopup-YCAQ3ODC.mjs");
 var pending = null;
 function preloadRenderPopup(loader = defaultLoader) {
   if (pending) return pending;
@@ -966,7 +1003,7 @@ var BrowserPopupRenderer = class {
     if (!this.container) return;
     this.visible = true;
     const container = this.container;
-    void import("./renderPopup-Z6TENBP6.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-YCAQ3ODC.mjs").then(({ renderPopup }) => {
       renderPopup(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId, options);
     });
   }
@@ -2002,8 +2039,6 @@ var DeepdotsPopups = class {
     this.renderer = createDefaultRenderer();
     /** Logger para el output de debug. Default `console`; el host puede inyectar el suyo en init(). */
     this.logger = console;
-    this.popupContainer = null;
-    // deprecated: mantenido para compatibilidad interna
     this.popupDefinitions = [];
     this.popupsLoaded = false;
     /**
@@ -2034,6 +2069,7 @@ var DeepdotsPopups = class {
     this.showProgressBar = void 0;
     /** CSS del host inyectado al final de los estilos del popup. */
     this.surveyCss = void 0;
+    this.cspNonce = void 0;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     this.tracking = null;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -2106,6 +2142,7 @@ var DeepdotsPopups = class {
     this.renderChrome = config.renderChrome ?? true;
     this.showProgressBar = config.showProgressBar;
     this.surveyCss = config.surveyCss;
+    this.cspNonce = config.cspNonce;
     this.onFeedbackSession = config.onFeedbackSession;
     this.config = {
       apiKey: config.apiKey || void 0,
@@ -2206,7 +2243,6 @@ var DeepdotsPopups = class {
     this.initialized = true;
     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) => {
       if (!defs) this.dropPendingTriggers();
@@ -3177,27 +3213,6 @@ var DeepdotsPopups = class {
       listeners.delete(listener);
     }
   }
-  /** Setup popup container element */
-  setupPopupContainer() {
-    if (typeof document === "undefined") {
-      return;
-    }
-    this.popupContainer = document.createElement("div");
-    this.popupContainer.id = "deepdots-popup-container";
-    this.popupContainer.style.cssText = `
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: none;
-          z-index: 999999;
-          background: rgba(0, 0, 0, 0.5);
-          justify-content: center;
-          align-items: center;
-        `;
-    document.body.appendChild(this.popupContainer);
-  }
   /** Render the popup UI */
   renderPopup(surveyId, productId, actions, style, title) {
     const userId = this.tracking?.getUserId() ?? this.config?.userId;
@@ -3205,54 +3220,25 @@ var DeepdotsPopups = class {
     const miniService = this.analytics?.getMiniService() ?? void 0;
     const analyticsFeedbackSessionId = this.analyticsFeedbackSessionId;
     this.log("tracking \xB7 survey identity \u2192", { userId: userId ?? null, sessionId: sessionId ?? null, miniService: miniService ?? null, analyticsFeedbackSessionId: analyticsFeedbackSessionId ?? null });
-    if (this.renderer) {
-      this.renderer.show(
-        surveyId,
-        productId,
-        actions,
-        (type, id, payload) => this.emitEvent(type, id, payload),
-        () => this.hidePopup(),
-        this.env,
-        userId,
-        style,
-        sessionId,
-        miniService,
-        analyticsFeedbackSessionId,
-        this.renderChrome,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
-      );
-      return;
-    }
-    if (!this.popupContainer) return;
-    const container = this.popupContainer;
-    void import("./renderPopup-Z6TENBP6.mjs").then(({ renderPopup }) => {
-      renderPopup(
-        container,
-        surveyId,
-        productId,
-        actions,
-        (type, id, payload) => this.emitEvent(type, id, payload),
-        () => this.hidePopup(),
-        this.env,
-        userId,
-        style,
-        sessionId,
-        miniService,
-        analyticsFeedbackSessionId,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
-      );
-    });
+    this.renderer.show(
+      surveyId,
+      productId,
+      actions,
+      (type, id, payload) => this.emitEvent(type, id, payload),
+      () => this.hidePopup(),
+      this.env,
+      userId,
+      style,
+      sessionId,
+      miniService,
+      analyticsFeedbackSessionId,
+      this.renderChrome,
+      { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language, cspNonce: this.cspNonce }
+    );
   }
   /** Hide the popup */
   hidePopup() {
-    if (this.renderer) {
-      this.renderer.hide();
-      return;
-    }
-    if (this.popupContainer) {
-      this.popupContainer.style.display = "none";
-      this.popupContainer.innerHTML = "";
-    }
+    this.renderer.hide();
   }
   /** Emit an event */
   emitEvent(type, surveyId, data) {