@magicfeedback/popup-sdk 1.4.0 → 1.6.0

package/dist/{renderPopup-UYMGEBSI.mjs → renderPopup-SELXQ3UE.mjs}

@@ -6,7 +6,42 @@ import {
   sdkLog,
   sdkWarn,
   style_default
-} from "./chunk-R4B3K2ZW.mjs";
+} from "./chunk-Z3LLJMSH.mjs";
+
+// src/ui/logo.ts
+var BASE_CSS = "max-height:40px; max-width:100%; object-fit:contain; display:block; margin:12px 0 0 0;";
+var MAX_HEIGHT = {
+  small: "30px",
+  medium: "50px",
+  large: "70px"
+};
+function insertPopupLogo(parent, anchor, style, id) {
+  if (!style?.logo) return null;
+  if (parent.ownerDocument.getElementById(id)) return null;
+  const img = parent.ownerDocument.createElement("img");
+  img.id = id;
+  img.src = style.logo;
+  img.alt = "Logo";
+  img.style.cssText = BASE_CSS;
+  if (style.logoSize && MAX_HEIGHT[style.logoSize]) {
+    img.style.maxHeight = MAX_HEIGHT[style.logoSize];
+  }
+  switch (style.logoPosition) {
+    case "left":
+      img.style.margin = "12px 16px 0 0";
+      img.style.marginLeft = "0";
+      break;
+    case "right":
+      img.style.margin = "12px 0 0 16px";
+      img.style.marginLeft = "auto";
+      break;
+    case "center":
+      img.style.margin = "12px auto 0 auto";
+      break;
+  }
+  parent.insertBefore(img, anchor);
+  return img;
+}
 
 // src/ui/renderPopup.ts
 import magicfeedback from "@magicfeedback/native";
@@ -23,6 +58,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; }
@@ -49,7 +88,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) {
@@ -67,6 +108,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;
@@ -79,9 +132,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",
@@ -91,8 +146,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     // oscuros con texto blanco sobre el fondo claro del popup.
     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)" },
@@ -105,6 +161,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;
@@ -118,6 +175,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;
@@ -130,13 +188,26 @@ 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 = `
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 5L19 19M5 19L19 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="butt"/>
       </svg>
     `;
   closeBtn.style.cssText = `
@@ -151,42 +222,101 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       cursor:pointer;
       color:${theme.textPrimary};
       padding:4px;
-      transition: color .15s ease, transform .15s ease, background .15s ease;
+      transition: color .15s ease, transform .15s ease;
       box-shadow: none !important;
     `;
   closeBtn.onmouseenter = () => {
     closeBtn.style.color = theme.closeBtnHoverColor;
-    closeBtn.style.background = theme.closeBtnHoverBg;
     closeBtn.style.transform = "scale(1.06)";
   };
   closeBtn.onmouseleave = () => {
     closeBtn.style.color = theme.textPrimary;
-    closeBtn.style.background = "transparent";
     closeBtn.style.transform = "scale(1)";
   };
   closeBtn.onclick = () => {
     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;
@@ -215,20 +345,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;
@@ -246,15 +380,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;
@@ -265,17 +403,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;
@@ -294,15 +438,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;
@@ -324,8 +472,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";
@@ -362,7 +511,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);
@@ -408,7 +577,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     formInstance = magicfeedback.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 {
@@ -417,6 +590,14 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       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;
         }
@@ -435,53 +616,14 @@ 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}`;
-        }
-        if (s.logo) {
-          if (!document.getElementById("deepdots-popup-logo")) {
-            const logoImg = document.createElement("img");
-            logoImg.id = "deepdots-popup-logo";
-            logoImg.src = s.logo;
-            logoImg.alt = "Logo";
-            logoImg.style.cssText = "max-height:40px; max-width:100%; object-fit:contain;";
-            if (s.logoSize) {
-              switch (s.logoSize) {
-                case "small":
-                  logoImg.style.maxHeight = "30px";
-                  break;
-                case "medium":
-                  logoImg.style.maxHeight = "50px";
-                  break;
-                case "large":
-                  logoImg.style.maxHeight = "70px";
-                  break;
-              }
-            }
-            if (s.logoPosition) {
-              switch (s.logoPosition) {
-                case "left":
-                  logoImg.style.margin = "0 16px 42px 0";
-                  logoImg.style.display = "block";
-                  logoImg.style.marginLeft = "0";
-                  break;
-                case "right":
-                  logoImg.style.margin = "0 0 42px 16px";
-                  logoImg.style.display = "block";
-                  logoImg.style.marginLeft = "auto";
-                  break;
-                case "center":
-                  logoImg.style.margin = "0 auto 42px auto";
-                  logoImg.style.display = "block";
-                  break;
-              }
-            }
-            containerContent.insertBefore(logoImg, main);
-          }
+          backButton.style.border = "none";
         }
+        insertPopupLogo(popup, progressEl, s, "deepdots-popup-logo");
         if (s.startMessage && s.startMessage !== "") {
           sdkLog(s.startMessage);
+          onStartPage = true;
           updateButtons("start");
         } else {
           updateButtons("in_progress_first");
@@ -489,6 +631,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);
     };
@@ -496,7 +639,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);
@@ -504,7 +647,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.";
@@ -517,23 +660,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);
@@ -547,4 +688,4 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
 export {
   renderPopup
 };
-//# sourceMappingURL=renderPopup-UYMGEBSI.mjs.map
+//# sourceMappingURL=renderPopup-SELXQ3UE.mjs.map