@magicfeedback/popup-sdk 1.14.0 → 1.16.0

package/dist/{renderPopup-Z6TENBP6.mjs → renderPopup-YCAQ3ODC.mjs}

@@ -15,7 +15,7 @@ import {
   sdkWarn,
   setSurveyBusy,
   style_default
-} from "./chunk-C7VD3HY4.mjs";
+} from "./chunk-AFRHPS3K.mjs";
 
 // node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js
 var require_magicfeedback_sdk_browser = __commonJS({
@@ -2868,31 +2868,36 @@ function insertPopupLogo(parent, anchor, style, id) {
 
 // src/ui/renderPopup.ts
 var import_native = __toESM(require_magicfeedback_sdk_browser());
-function ensureMagicFeedbackStyles(_popup) {
-  const STYLE_ID = "magicfeedback-sdk-styles";
-  if (document.getElementById(STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = style_default;
-  document.head.appendChild(style);
+function ensureStyle(id, css, nonce) {
+  let el = document.getElementById(id);
+  if (el && nonce && el.getAttribute("nonce") !== nonce) {
+    el.remove();
+    el = null;
+  }
+  if (!el) {
+    el = document.createElement("style");
+    el.id = id;
+    if (nonce) el.setAttribute("nonce", nonce);
+    el.textContent = css;
+    document.head.appendChild(el);
+  } else if (el.textContent !== css) {
+    el.textContent = css;
+  }
+  return el;
+}
+function ensureMagicFeedbackStyles(nonce) {
+  ensureStyle("magicfeedback-sdk-styles", style_default, nonce);
 }
 var SURVEY_ALIGNMENT_STYLE_ID = "deepdots-survey-alignment";
-function ensureSurveyAlignmentStyles() {
-  if (document.getElementById(SURVEY_ALIGNMENT_STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = SURVEY_ALIGNMENT_STYLE_ID;
-  style.textContent = `
+function ensureSurveyAlignmentStyles(nonce) {
+  ensureStyle(SURVEY_ALIGNMENT_STYLE_ID, `
     .deepdots-popup .magicfeedback-container,
     .deepdots-popup .magicfeedback-form,
     .deepdots-popup .magicfeedback-div { padding-left: 0; padding-right: 0; }
-  `;
-  document.head.appendChild(style);
+  `, nonce);
 }
-function ensureSpinnerStyles(_popup) {
-  if (document.getElementById("deepdots-spinner-styles")) return;
-  const style = document.createElement("style");
-  style.id = "deepdots-spinner-styles";
-  style.textContent = `
+function ensureSpinnerStyles(nonce) {
+  ensureStyle("deepdots-spinner-styles", `
     /* El enunciado trae margin-top:20px del CSS de surveys, que sumaba al hueco de la barra
        de progreso y descompensaba la simetr\xEDa. Solo se anula en el primero: entre preguntas
        de la misma p\xE1gina sigue separando. */
@@ -2900,14 +2905,10 @@ function ensureSpinnerStyles(_popup) {
     @keyframes ddspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     .mf-spinner { display:flex; justify-content:center; align-items:center; padding:8px 0; }
     .mf-spinner-circle { width:28px; height:28px; border:3px solid #e0e6ed; border-top-color:#1E293B; border-radius:50%; animation: ddspin 0.9s linear infinite; }
-  `;
-  document.head.appendChild(style);
+  `, nonce);
 }
-function ensureResponsiveStyles(_popup) {
-  if (document.getElementById("deepdots-responsive-styles")) return;
-  const style = document.createElement("style");
-  style.id = "deepdots-responsive-styles";
-  style.textContent = `
+function ensureResponsiveStyles(nonce) {
+  ensureStyle("deepdots-responsive-styles", `
     /* Responsive adjustments */
     @media (max-width: 640px) {
       .deepdots-popup {
@@ -2940,32 +2941,20 @@ function ensureResponsiveStyles(_popup) {
         overflow-y: auto !important;
       }
     }
-  `;
-  document.head.appendChild(style);
+  `, nonce);
 }
-function ensureCustomCss(css) {
+function ensureCustomCss(css, nonce) {
   const STYLE_ID = "deepdots-custom-css";
-  const existing = document.getElementById(STYLE_ID);
   if (!css) {
-    existing?.remove();
+    document.getElementById(STYLE_ID)?.remove();
     return;
   }
-  const el = existing ?? document.createElement("style");
-  el.id = STYLE_ID;
-  if (el.textContent !== css) el.textContent = css;
-  document.head.appendChild(el);
+  document.head.appendChild(ensureStyle(STYLE_ID, css, nonce));
 }
-function ensureFontFace(family, url) {
+function ensureFontFace(family, url, nonce) {
   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;
+  ensureStyle("deepdots-font-face", css, nonce);
 }
 function hasFinePointer() {
   return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches;
@@ -2975,6 +2964,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   let stylesInjected = false;
   let pageDepth = 0;
   let onStartPage = false;
+  const cspNonce = options?.cspNonce?.trim() || void 0;
   let labels = getLabels(options?.language);
   let actionLabels = resolveActionLabels(actions, options?.language);
   let direction = directionFor(options?.language);
@@ -3026,7 +3016,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     popup.style.fontFamily = familyValue;
     popup.style.setProperty("--deepdots-font", familyValue);
     popup.classList.add("deepdots-has-font");
-    if (font.url) ensureFontFace(font.family, font.url);
+    if (font.url) ensureFontFace(font.family, font.url, cspNonce);
   }
   const header = document.createElement("div");
   header.className = "deepdots-popup-header";
@@ -3075,10 +3065,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     closeBtn.style.color = theme.textPrimary;
     closeBtn.style.transform = "scale(1)";
   };
-  closeBtn.onclick = () => {
+  const closeFromChrome = () => {
     emit("popup_clicked", surveyId, { action: "close_icon" });
     onClose();
   };
+  closeBtn.onclick = closeFromChrome;
   closeBtn.style.flex = "0 0 auto";
   closeBtn.style.marginLeft = "auto";
   header.appendChild(closeBtn);
@@ -3142,11 +3133,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     }
     progressFollowUp.style.display = p.followup ? "inline-block" : "none";
   }
-  ensureMagicFeedbackStyles(popup);
-  ensureSurveyAlignmentStyles();
-  ensureSpinnerStyles(popup);
-  ensureResponsiveStyles(popup);
-  ensureCustomCss(options?.surveyCss);
+  ensureMagicFeedbackStyles(cspNonce);
+  ensureSurveyAlignmentStyles(cspNonce);
+  ensureSpinnerStyles(cspNonce);
+  ensureResponsiveStyles(cspNonce);
+  ensureCustomCss(options?.surveyCss, cspNonce);
   const containerContent = document.createElement("div");
   containerContent.id = "dd-content";
   containerContent.className = "deepdots-popup-container-content";
@@ -3186,6 +3177,12 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   formWrapper.appendChild(spinnerEl);
   formWrapper.appendChild(formHost);
   main.appendChild(formWrapper);
+  const loadErrorEl = document.createElement("div");
+  loadErrorEl.id = "dd-load-error";
+  loadErrorEl.className = "deepdots-load-error";
+  loadErrorEl.setAttribute("role", "alert");
+  loadErrorEl.style.cssText = `display:none; width:100%; text-align:center; padding:24px 0; font-size:15px; color:${theme.textPrimary};`;
+  main.appendChild(loadErrorEl);
   main.appendChild(errorHint);
   const footer = document.createElement("div");
   footer.id = "dd-footer";
@@ -3301,6 +3298,13 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       justify-content: center;
       text-align: center;
     `;
+  const cancelButton = document.createElement("button");
+  cancelButton.id = "dd-cancel";
+  cancelButton.type = "button";
+  cancelButton.className = "dd-nav-btn";
+  cancelButton.textContent = actionLabels.decline;
+  cancelButton.style.cssText = submitButton.style.cssText;
+  cancelButton.onclick = closeFromChrome;
   submitButton.onclick = () => {
     if (!surveyCompletedEmitted) {
       emit("popup_clicked", surveyId, { action: "manual_send" });
@@ -3314,6 +3318,8 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     startButton.textContent = actionLabels.start;
     closeButton.textContent = actionLabels.complete;
     submitButton.textContent = actionLabels.accept;
+    cancelButton.textContent = actionLabels.decline;
+    loadErrorEl.textContent = labels.errorLoad;
     closeBtn.setAttribute("aria-label", labels.closeAria);
     spinnerEl.setAttribute("aria-label", labels.loadingAria);
     progressFollowUp.textContent = labels.followUp;
@@ -3324,10 +3330,12 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   startButton.style.display = "none";
   submitButton.style.display = "none";
   closeButton.style.display = "none";
+  cancelButton.style.display = "none";
   footer.appendChild(submitButton);
   footer.appendChild(backButton);
   footer.appendChild(closeButton);
   footer.appendChild(startButton);
+  footer.appendChild(cancelButton);
   containerContent.appendChild(main);
   footer.style.flex = "0 0 auto";
   containerContent.appendChild(footer);
@@ -3336,6 +3344,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     startButton.style.display = "none";
     submitButton.style.display = "none";
     closeButton.style.display = "none";
+    cancelButton.style.display = "none";
     backButton.style.width = "";
     startButton.style.width = "";
     submitButton.style.width = "";
@@ -3365,6 +3374,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       case "error":
         setLoading(false);
         break;
+      case "load_error":
+        cancelButton.style.display = "inline-flex";
+        break;
     }
   }
   function updateNavButtons() {
@@ -3386,6 +3398,20 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       img.style.cssText = "max-width:100%; height:auto; margin:0 auto 16px auto; display:block;";
     });
   }
+  let loadFailed = false;
+  function showLoadError(reason) {
+    sdkWarn("[Deepdots] survey failed to load:", reason);
+    if (loadFailed) return;
+    loadFailed = true;
+    progressEl.style.display = "none";
+    formWrapper.style.display = "none";
+    errorHint.style.display = "none";
+    loadErrorEl.textContent = labels.errorLoad;
+    loadErrorEl.style.display = "block";
+    setLoading(false);
+    updateButtons("load_error");
+    reveal();
+  }
   popup.appendChild(header);
   popup.appendChild(progressEl);
   popup.appendChild(containerContent);
@@ -3450,7 +3476,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   try {
     if (!import_native.default || typeof import_native.default.form !== "function") {
       sdkWarn("[MagicFeedback] form() no disponible. Fallback manual.");
-      setLoading(false);
+      showLoadError("form() not available");
       return;
     }
     import_native.default.init(
@@ -3476,7 +3502,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       // quitado el `inert`. La apertura va aparte (ver autofocusOnOpen).
       autofocus: "navigation"
     };
-    generateOptions.onLoadedEvent = ({ formData, lang }) => {
+    generateOptions.onLoadedEvent = ({ formData, lang, error }) => {
+      if (error) {
+        showLoadError(error);
+        return;
+      }
       const shownLang = typeof lang === "string" && lang.trim().length > 0 ? lang : void 0;
       const surveyLang = shownLang ?? (Array.isArray(formData?.lang) ? formData.lang.find((l) => typeof l === "string" && l.trim().length > 0) : void 0);
       if (surveyLang) applyLabels(surveyLang);
@@ -3575,11 +3605,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     };
     formInstance.generate(formDivId, generateOptions).catch((err) => {
       sdkError("[MagicFeedback] Error generating form:", err);
-      setLoading(false);
+      showLoadError(err);
     });
   } catch (e) {
     sdkError("[MagicFeedback] Exception initializing form:", e);
-    setLoading(false);
+    showLoadError(e);
   }
 }
 export {
@@ -3587,4 +3617,4 @@ export {
   SURVEY_ALIGNMENT_STYLE_ID,
   renderPopup
 };
-//# sourceMappingURL=renderPopup-Z6TENBP6.mjs.map
+//# sourceMappingURL=renderPopup-YCAQ3ODC.mjs.map