@magicfeedback/popup-sdk 1.3.0 → 1.5.0

package/dist/{renderPopup-NJK7Z46E.mjs → renderPopup-PXJEND4Y.mjs}

@@ -8,7 +8,7 @@ import {
   sdkLog,
   sdkWarn,
   style_default
-} from "./chunk-XFA2Y6CK.mjs";
+} from "./chunk-JSBMP4MI.mjs";
 
 // node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js
 var require_magicfeedback_sdk_browser = __commonJS({
@@ -1950,6 +1950,10 @@ function ensureSpinnerStyles(_popup) {
   const style = document.createElement("style");
   style.id = "deepdots-spinner-styles";
   style.textContent = `
+    /* 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. */
+    .deepdots-popup .magicfeedback-questions .magicfeedback-div:first-child .magicfeedback-label { margin-top: 0; }
     @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; }
@@ -1976,7 +1980,9 @@ function ensureResponsiveStyles(_popup) {
       .deepdots-popup button { font-size: 16px !important; }
       .deepdots-popup-header button { width:48px; height:48px; }
       .deepdots-popup-header button svg { width:26px; height:26px; }
-      .deepdots-popup-footer { flex-direction: column-reverse !important; gap: 12px !important; }
+      /* Apilados en el orden del DOM: la acci\xF3n principal (Send/Start/Complete) arriba y
+         Back debajo. */
+      .deepdots-popup-footer { flex-direction: column !important; gap: 4px !important; }
       .deepdots-popup-footer button { width: 100%; }
     }
     @media (max-width: 400px) {
@@ -1994,6 +2000,18 @@ function ensureResponsiveStyles(_popup) {
   `;
   document.head.appendChild(style);
 }
+function ensureCustomCss(css) {
+  const STYLE_ID = "deepdots-custom-css";
+  const existing = document.getElementById(STYLE_ID);
+  if (!css) {
+    existing?.remove();
+    return;
+  }
+  const el = existing ?? document.createElement("style");
+  el.id = STYLE_ID;
+  if (el.textContent !== css) el.textContent = css;
+  document.head.appendChild(el);
+}
 function ensureFontFace(family, url) {
   const css = buildFontFaceCss(family, url);
   if (!css) return;
@@ -2006,9 +2024,11 @@ function ensureFontFace(family, url) {
   }
   if (el.textContent !== css) el.textContent = css;
 }
-async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
+async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, options) {
   let surveyCompletedEmitted = false;
   let stylesInjected = false;
+  let pageDepth = 0;
+  let onStartPage = false;
   const isDark = style?.theme === "dark";
   const theme = {
     popupBg: isDark ? "#1e1e1e" : "#fff",
@@ -2019,7 +2039,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     colorScheme: isDark ? "dark" : "light",
     textPrimary: isDark ? "#f0f0f0" : "#111",
     closeBtnHoverBg: isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.06)",
-    closeBtnHoverColor: isDark ? "#fff" : "#000000"
+    closeBtnHoverColor: isDark ? "#fff" : "#000000",
+    textMuted: isDark ? "#9ca3af" : "#6b7280",
+    progressTrack: isDark ? "#3f3f46" : "#e5e7eb"
   };
   const positionMap = {
     "center": { justifyContent: "center", alignItems: "center", background: "rgba(0,0,0,0.5)" },
@@ -2032,6 +2054,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   };
   const pos = positionMap[style?.position ?? "center"] ?? positionMap["center"];
   const popup = document.createElement("div");
+  popup.id = "dd-popup";
   popup.className = "deepdots-popup";
   popup.style.cssText = `
       position: relative;
@@ -2045,6 +2068,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       box-shadow: 0 4px 6px rgba(0,0,0,0.1);
       max-width: 600px;
       width: 90%;
+      max-height: 90vh;
       min-height: 200px;
     `;
   const font = style?.font;
@@ -2057,8 +2081,21 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   }
   const header = document.createElement("div");
   header.className = "deepdots-popup-header";
-  header.style.cssText = "display:flex; justify-content:flex-end; align-items:center; width:100%;";
+  header.style.cssText = "display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; flex:0 0 auto;";
+  const titleEl = document.createElement("h2");
+  titleEl.id = "dd-title";
+  titleEl.className = "deepdots-popup-title";
+  titleEl.style.cssText = `margin:0; font-size:17px; font-weight:600; line-height:1.3; color:${theme.textPrimary}; text-transform:none; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;`;
+  titleEl.hidden = true;
+  const setTitle = (value) => {
+    if (!value) return;
+    titleEl.textContent = value;
+    titleEl.hidden = false;
+  };
+  setTitle(options?.title);
+  header.appendChild(titleEl);
   const closeBtn = document.createElement("button");
+  closeBtn.id = "dd-close";
   closeBtn.type = "button";
   closeBtn.setAttribute("aria-label", "Close popup");
   closeBtn.innerHTML = `
@@ -2095,25 +2132,86 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     emit("popup_clicked", surveyId, { action: "close_icon" });
     onClose();
   };
+  closeBtn.style.flex = "0 0 auto";
+  closeBtn.style.marginLeft = "auto";
   header.appendChild(closeBtn);
+  let progressEnabled = options?.showProgressBar === true;
+  let progressShowUnit = true;
+  let progressUnit = "fraction";
+  const progressEl = document.createElement("div");
+  progressEl.id = "dd-progress";
+  progressEl.className = "deepdots-progress";
+  progressEl.style.cssText = "display:none; flex-direction:column; gap:8px; width:100%; flex:0 0 auto; padding:16px 0; box-sizing:border-box;";
+  const progressHead = document.createElement("div");
+  progressHead.className = "deepdots-progress-head";
+  progressHead.style.cssText = "display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%; gap:8px;";
+  const progressLabel = document.createElement("span");
+  progressLabel.id = "dd-progress-label";
+  progressLabel.style.cssText = "font-size:13px; line-height:1.2;";
+  const progressCurrent = document.createElement("span");
+  progressCurrent.id = "dd-progress-current";
+  progressCurrent.style.cssText = `font-weight:700; color:${theme.textPrimary};`;
+  const progressTotal = document.createElement("span");
+  progressTotal.id = "dd-progress-total";
+  progressTotal.style.cssText = `font-weight:400; color:${theme.textMuted};`;
+  progressLabel.appendChild(progressCurrent);
+  progressLabel.appendChild(progressTotal);
+  const progressFollowUp = document.createElement("span");
+  progressFollowUp.id = "dd-progress-followup";
+  progressFollowUp.textContent = "Follow-up";
+  progressFollowUp.style.cssText = "display:none; font-size:12px; font-weight:600; color:#fff; background:rgba(59,130,246,0.44); border-radius:999px; padding:2px 10px;";
+  progressHead.appendChild(progressLabel);
+  progressHead.appendChild(progressFollowUp);
+  const progressTrack = document.createElement("div");
+  progressTrack.className = "deepdots-progress-track";
+  progressTrack.style.cssText = `width:100%; height:4px; border-radius:999px; background:${theme.progressTrack}; overflow:hidden;`;
+  const progressBar = document.createElement("div");
+  progressBar.id = "dd-progress-bar";
+  progressBar.style.cssText = "height:100%; width:0%; background:#22C55E; border-radius:999px; transition:width 450ms ease;";
+  progressTrack.appendChild(progressBar);
+  progressEl.appendChild(progressHead);
+  progressEl.appendChild(progressTrack);
+  function updateProgress(p) {
+    const total = typeof p.total === "number" ? p.total : 0;
+    const progress = typeof p.progress === "number" ? p.progress : 0;
+    if (!progressEnabled || onStartPage || p.completed || total <= 1) {
+      progressEl.style.display = "none";
+      containerContent.style.paddingTop = "16px";
+      return;
+    }
+    progressEl.style.display = "flex";
+    containerContent.style.paddingTop = "0";
+    const current = Math.min(total, Math.max(1, progress + 1));
+    const pct = Math.min(100, Math.max(0, current / total * 100));
+    progressBar.style.width = `${pct}%`;
+    const label = Math.min(total, Math.max(1, Math.floor(progress) + 1));
+    progressLabel.style.display = progressShowUnit ? "block" : "none";
+    if (progressUnit === "percentage") {
+      progressCurrent.textContent = `${Math.round(pct)}%`;
+      progressTotal.textContent = "";
+    } else {
+      progressCurrent.textContent = `Question ${label}`;
+      progressTotal.textContent = ` of ${total}`;
+    }
+    progressFollowUp.style.display = p.followup ? "inline-block" : "none";
+  }
   ensureMagicFeedbackStyles(popup);
   ensureSpinnerStyles(popup);
   ensureResponsiveStyles(popup);
+  ensureCustomCss(options?.surveyCss);
   const containerContent = document.createElement("div");
-  containerContent.className = "deepdots-popup-container-conetent";
-  containerContent.style.cssText = `
-    display:flex; 
-    flex-direction:column; 
-    padding: 0 20px 12px 20px;
-      max-height: 80vh; /* l\xEDmite general del popup */
-      overflow: hidden; /* quita scroll del contenedor principal */
-`;
+  containerContent.id = "dd-content";
+  containerContent.className = "deepdots-popup-container-content";
+  containerContent.style.cssText = "display:flex; flex-direction:column; flex:1 1 auto; min-height:0; padding:16px 0 0 0; overflow:hidden;";
   const main = document.createElement("div");
+  main.id = "dd-main";
   main.className = "deepdots-popup-main";
-  main.style.cssText = "display:flex; flex-direction:column; width:100%; max-height:80vh; overflow-y:auto;";
+  main.style.cssText = "display:flex; flex-direction:column; width:100%; flex:1 1 auto; min-height:0; overflow-y:auto;";
   const formWrapper = document.createElement("div");
+  formWrapper.id = "dd-form-wrapper";
   formWrapper.style.cssText = "width:100%; flex: 1 1 auto;";
   const errorHint = document.createElement("div");
+  errorHint.id = "dd-error";
   errorHint.className = "deepdots-error-hint";
   errorHint.style.cssText = `
       display: none;
@@ -2142,20 +2240,24 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   main.appendChild(formWrapper);
   main.appendChild(errorHint);
   const footer = document.createElement("div");
+  footer.id = "dd-footer";
   footer.className = "deepdots-popup-footer";
   footer.setAttribute("data-actions-wrapper", "true");
-  footer.style.cssText = "display:flex; flex-direction: row-reverse ;justify-content:space-between; align-items:center; gap:8px; margin-top:auto; width:100%; padding-top:16px;";
+  footer.style.cssText = "display:flex; flex-direction: row-reverse ;justify-content:space-between; align-items:center; gap:4px; margin-top:auto; width:100%; padding-top:12px;";
   const backButton = document.createElement("button");
+  backButton.id = "dd-back";
+  backButton.className = "dd-nav-btn";
   backButton.textContent = actions?.back ? actions.back.label : "Back";
   backButton.style.cssText = `
       background: transparent;
-      color: #333;
-      border: 1px solid #999;
+      color: ${theme.textMuted};
+      border: none;
+      min-height: 44px;
       padding: 12px 24px;
-      border-radius: 4px;
+      border-radius: 6px;
       cursor: pointer;
-      font-size: 14px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      font-size: 15px;
+      font-weight: 600;
       transition: filter .15s ease;
       display: inline-flex;
       align-items: center;
@@ -2173,15 +2275,19 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     formInstance?.back?.();
   };
   const startButton = document.createElement("button");
+  startButton.id = "dd-start";
+  startButton.className = "dd-nav-btn";
   startButton.textContent = actions?.start ? actions.start.label : "Start survey";
   startButton.style.cssText = `
       background: #1E293B;
       color: #fff;
       border: none;
+      min-height: 44px;
       padding: 12px 24px;
-      border-radius: 4px;
+      border-radius: 6px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: 15px;
+      font-weight: 600;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       transition: filter .15s ease;
       display: inline-flex;
@@ -2192,17 +2298,23 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   startButton.onclick = () => {
     emit("popup_clicked", surveyId, { action: "start_survey" });
     formInstance?.startForm?.();
+    onStartPage = false;
+    updateProgress({ progress: formInstance?.progress, total: formInstance?.total });
   };
   const closeButton = document.createElement("button");
+  closeButton.id = "dd-complete";
+  closeButton.className = "dd-nav-btn";
   closeButton.textContent = actions?.complete ? actions.complete.label : "Complete survey";
   closeButton.style.cssText = `
       background: #1E293B;
       color: #fff;
       border: none;
+      min-height: 44px;
       padding: 12px 24px;
-      border-radius: 4px;
+      border-radius: 6px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: 15px;
+      font-weight: 600;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       transition: filter .15s ease;
       display: inline-flex;
@@ -2221,15 +2333,19 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     onClose();
   };
   const submitButton = document.createElement("button");
+  submitButton.id = "dd-submit";
+  submitButton.className = "dd-nav-btn";
   submitButton.textContent = actions?.accept ? actions.accept.label : "Send";
   submitButton.style.cssText = `
       background: #1E293B;
       color: #fff;
       border: none;
+      min-height: 44px;
       padding: 12px 24px;
-      border-radius: 4px;
+      border-radius: 6px;
       cursor: pointer;
-      font-size: 14px;
+      font-size: 15px;
+      font-weight: 600;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       transition: filter .15s ease;
       display: inline-flex;
@@ -2251,8 +2367,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   footer.appendChild(backButton);
   footer.appendChild(closeButton);
   footer.appendChild(startButton);
-  main.appendChild(footer);
   containerContent.appendChild(main);
+  footer.style.flex = "0 0 auto";
+  containerContent.appendChild(footer);
   function updateButtons(state) {
     backButton.style.display = "none";
     startButton.style.display = "none";
@@ -2289,7 +2406,27 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         break;
     }
   }
+  function updateNavButtons() {
+    updateButtons(pageDepth > 0 ? "in_progress_next" : "in_progress_first");
+  }
+  let successMessageHtml = "";
+  function showSuccessScreen() {
+    progressEl.style.display = "none";
+    formWrapper.style.display = "none";
+    let done = main.querySelector(".deepdots-success");
+    if (!done) {
+      done = document.createElement("div");
+      done.className = "deepdots-success";
+      done.style.cssText = `width:100%; text-align:center; padding:24px 0; color:${theme.textPrimary};`;
+      main.insertBefore(done, errorHint);
+    }
+    done.innerHTML = successMessageHtml || "<p>Thank you for your feedback!</p>";
+    done.querySelectorAll("img").forEach((img) => {
+      img.style.cssText = "max-width:100%; height:auto; margin:0 auto 16px auto; display:block;";
+    });
+  }
   popup.appendChild(header);
+  popup.appendChild(progressEl);
   popup.appendChild(containerContent);
   container.innerHTML = "";
   container.appendChild(popup);
@@ -2335,15 +2472,27 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     formInstance = import_native.default.form(surveyId, productId, profile, metadata);
     const generateOptions = {
       addButton: false,
-      getMetaData: true
+      getMetaData: true,
+      // La pantalla final la pinta el popup: `renderSuccess` de @magicfeedback/native usa
+      // textContent, así que el mensaje de la plataforma (HTML con imagen) no se vería, y
+      // su fallback es un literal genérico que ignora `style.successMessage`.
+      addSuccessScreen: false
     };
     generateOptions.onLoadedEvent = ({ formData }) => {
       try {
-      } catch (e) {
+      } catch {
       }
       const s = formData?.style;
       if (s && !stylesInjected) {
         stylesInjected = true;
+        if (s.successMessage) successMessageHtml = s.successMessage;
+        if (options?.showProgressBar === void 0) progressEnabled = s.showProgressBar === true;
+        if (s.showProgressUnit !== void 0) progressShowUnit = s.showProgressUnit !== false;
+        if (s.progressUnit) progressUnit = s.progressUnit;
+        if (s.loadingBarColor) {
+          progressBar.style.background = s.loadingBarColor;
+          progressFollowUp.style.background = s.loadingBarColor;
+        }
         if (s.boxBackgroundColor) {
           popup.style.background = s.boxBackgroundColor;
         }
@@ -2362,9 +2511,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
           closeButton.style.color = "#fff";
         }
         if (s.buttonSecondaryColor) {
-          backButton.style.background = "#fff";
+          backButton.style.background = "transparent";
           backButton.style.color = s.buttonSecondaryColor;
-          backButton.style.border = `1px solid ${s.buttonSecondaryColor}`;
+          backButton.style.border = "none";
         }
         if (s.logo) {
           if (!document.getElementById("deepdots-popup-logo")) {
@@ -2409,6 +2558,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         }
         if (s.startMessage && s.startMessage !== "") {
           sdkLog(s.startMessage);
+          onStartPage = true;
           updateButtons("start");
         } else {
           updateButtons("in_progress_first");
@@ -2416,6 +2566,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       } else {
         updateButtons("in_progress_first");
       }
+      updateProgress({ progress: formInstance.progress, total: formInstance.total });
       emit("popup_clicked", surveyId, { action: "loaded" });
       setLoading(false);
     };
@@ -2423,7 +2574,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       setLoading(true);
       emit("popup_clicked", surveyId, { action: "before_submit" });
     };
-    generateOptions.afterSubmitEvent = ({ error, completed, total, progress }) => {
+    generateOptions.afterSubmitEvent = ({ error, completed, total, progress, followup }) => {
       const errText = error ? typeof error === "string" ? error : error.message ?? String(error) : "";
       if (errText) {
         setLoading(false);
@@ -2431,7 +2582,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
           errorHint.textContent = "Please answer the required question to continue.";
           errorHint.style.display = "block";
           emit("popup_clicked", surveyId, { action: "validation_error_required" });
-          updateButtons("in_progress_next");
+          updateNavButtons();
           return;
         }
         errorHint.textContent = "An error occurred while submitting. Please try again or close the popup.";
@@ -2444,23 +2595,21 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       if (completed) {
         emit("survey_completed", surveyId, { action: "completed" });
         surveyCompletedEmitted = true;
+        showSuccessScreen();
         updateButtons("completed");
+        updateProgress({ progress, total, completed: true });
         return;
       }
       emit("popup_clicked", surveyId, { action: "partial" });
-      if (total > 1 && progress > 0 && progress < total) {
-        updateButtons("in_progress_next");
-      } else {
-        updateButtons("in_progress_first");
-      }
+      pageDepth++;
+      updateNavButtons();
+      updateProgress({ progress, total, followup });
     };
-    generateOptions.onBackEvent = ({ progress }) => {
+    generateOptions.onBackEvent = ({ progress, error, followup }) => {
       emit("popup_clicked", surveyId, { action: "back" });
-      if (progress === 0) {
-        updateButtons("in_progress_first");
-      } else {
-        updateButtons("in_progress_next");
-      }
+      if (!error) pageDepth = Math.max(0, pageDepth - 1);
+      updateNavButtons();
+      updateProgress({ progress, total: formInstance.total, followup });
     };
     formInstance.generate(formDivId, generateOptions).catch((err) => {
       sdkError("[MagicFeedback] Error generating form:", err);
@@ -2474,4 +2623,4 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
 export {
   renderPopup
 };
-//# sourceMappingURL=renderPopup-NJK7Z46E.mjs.map
+//# sourceMappingURL=renderPopup-PXJEND4Y.mjs.map