@magicfeedback/popup-sdk 1.0.4 → 1.0.6

package/dist/index.mjs

@@ -1721,7 +1721,7 @@ function ensureMagicFeedbackStyles(popup) {
   }
   const link = document.createElement("link");
   link.rel = "stylesheet";
-  link.href = "https://cdn.jsdelivr.net/npm/@magicfeedback/native/dist/styles/index.css";
+  link.href = "https://cdn.jsdelivr.net/npm/@magicfeedback/popup-sdk/dist/assets/style.css";
   link.setAttribute(DATA_ATTR, "true");
   popup.appendChild(link);
 }
@@ -1746,7 +1746,7 @@ function ensureResponsiveStyles(popup) {
       .deepdots-popup {
         width: 100% !important;
         max-width: 100% !important;
-        height: 100vh !important;
+        height: 90vh !important;
         max-height: 100vh !important;
         border-radius: 0 !important;
         padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)) 16px !important;
@@ -1754,12 +1754,15 @@ function ensureResponsiveStyles(popup) {
       }
       .deepdots-popup .mf-spinner-circle { width: 32px; height: 32px; border-width: 4px; }
       .deepdots-popup button { font-size: 16px !important; }
-      .deepdots-popup-footer { flex-direction: column !important; gap: 12px !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; }
       .deepdots-popup-footer button { width: 100%; }
     }
     @media (max-width: 400px) {
       .deepdots-popup { padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) 12px !important; }
-      .deepdots-popup button { padding: 10px 14px !important; }
+      .deepdots-popup-header button { width:48px; height:48px; }
+      .deepdots-popup-header button svg { width:26px; height:26px; }
     }
     @media (orientation: landscape) and (max-height: 480px) {
       .deepdots-popup {
@@ -1773,6 +1776,7 @@ function ensureResponsiveStyles(popup) {
 }
 async function renderPopup(container, surveyId, productId, actions, emit, onClose) {
   let surveyCompletedEmitted = false;
+  let stylesInjected = false;
   const popup = document.createElement("div");
   popup.className = "deepdots-popup";
   popup.style.cssText = `
@@ -1787,33 +1791,41 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       max-width: 600px;
       width: 90%;
       min-height: 200px;
-      max-height: 80vh; /* l\xEDmite general del popup */
-      overflow: hidden; /* quita scroll del contenedor principal */
     `;
   const header = document.createElement("div");
   header.className = "deepdots-popup-header";
-  header.style.cssText = "display:flex; justify-content:flex-end; align-items:center; width:100%; margin-bottom:8px;";
+  header.style.cssText = "display:flex; justify-content:flex-end; align-items:center; width:100%;";
   const closeBtn = document.createElement("button");
   closeBtn.type = "button";
   closeBtn.setAttribute("aria-label", "Close popup");
-  closeBtn.innerHTML = "×";
+  closeBtn.innerHTML = `
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `;
   closeBtn.style.cssText = `
       background:transparent;
       border:none;
-      font-size:22px;
-      line-height:1;
+      width:32px;
+      height:32px;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      border-radius: 8px;
       cursor:pointer;
-      color:#555;
+      color:#111;
       padding:4px;
-      transition: color .15s ease, transform .15s ease;
-      box-shadow: none;
+      transition: color .15s ease, transform .15s ease, background .15s ease;
+      box-shadow: none !important;
     `;
   closeBtn.onmouseenter = () => {
-    closeBtn.style.color = "#111";
-    closeBtn.style.transform = "scale(1.1)";
+    closeBtn.style.color = "#000000";
+    closeBtn.style.background = "rgba(0,0,0,0.06)";
+    closeBtn.style.transform = "scale(1.06)";
   };
   closeBtn.onmouseleave = () => {
-    closeBtn.style.color = "#555";
+    closeBtn.style.color = "#111";
+    closeBtn.style.background = "transparent";
     closeBtn.style.transform = "scale(1)";
   };
   closeBtn.onclick = () => {
@@ -1824,11 +1836,20 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   ensureMagicFeedbackStyles(popup);
   ensureSpinnerStyles(popup);
   ensureResponsiveStyles(popup);
+  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 */
+`;
   const main = document.createElement("div");
   main.className = "deepdots-popup-main";
-  main.style.cssText = "display:flex; flex-direction:column; width:100%; flex-grow:1; overflow-y:auto;";
+  main.style.cssText = "display:flex; flex-direction:column; width:100%; max-height:80vh; overflow-y:auto;";
   const formWrapper = document.createElement("div");
-  formWrapper.style.cssText = "position:relative; min-height:150px; width:100%;";
+  formWrapper.style.cssText = "width:100%; flex: 1 1 auto;";
   const spinnerEl = document.createElement("div");
   spinnerEl.className = "mf-spinner";
   spinnerEl.setAttribute("role", "status");
@@ -1845,25 +1866,84 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const footer = document.createElement("div");
   footer.className = "deepdots-popup-footer";
   footer.setAttribute("data-actions-wrapper", "true");
-  footer.style.cssText = "display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:24px; width:100%;";
-  const cancelButton = document.createElement("button");
-  cancelButton.textContent = actions?.decline ? actions?.decline.label : "Cancel";
-  cancelButton.style.cssText = `
+  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;";
+  const backButton = document.createElement("button");
+  backButton.textContent = "Back";
+  backButton.style.cssText = `
       background: transparent;
       color: #333;
-      border: 1px solid #ddd;
-      padding: 10px 16px;
+      border: 1px solid #999;
+      padding: 12px 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: filter .15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    `;
+  backButton.onmouseenter = () => {
+    backButton.style.filter = "brightness(0.9)";
+  };
+  backButton.onmouseleave = () => {
+    backButton.style.filter = "brightness(1)";
+  };
+  backButton.onclick = () => {
+    emit("popup_clicked", surveyId, { action: "back" });
+    formInstance?.back?.();
+  };
+  const startButton = document.createElement("button");
+  startButton.textContent = actions?.start ? actions.start.label : "Start survey";
+  startButton.style.cssText = `
+      background: #1E293B;
+      color: #fff;
+      border: none;
+      padding: 12px 24px;
       border-radius: 4px;
       cursor: pointer;
       font-size: 14px;
-      transition: background .15s ease;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: filter .15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
     `;
-  cancelButton.onclick = () => {
-    emit("popup_clicked", surveyId, { action: "cancel" });
+  startButton.onclick = () => {
+    emit("popup_clicked", surveyId, { action: "start_survey" });
+    formInstance?.startForm?.();
+  };
+  const closeButton = document.createElement("button");
+  closeButton.textContent = actions?.complete ? actions.complete.label : "Complete survey";
+  closeButton.style.cssText = `
+      background: #1E293B;
+      color: #fff;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: filter .15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    `;
+  closeButton.onmouseenter = () => {
+    closeButton.style.filter = "brightness(0.9)";
+  };
+  closeButton.onmouseleave = () => {
+    closeButton.style.filter = "brightness(1)";
+  };
+  closeButton.onclick = () => {
+    emit("popup_clicked", surveyId, { action: "complete" });
     onClose();
   };
   const submitButton = document.createElement("button");
-  submitButton.textContent = actions?.accept ? actions.accept.label : "Complete Survey";
+  submitButton.textContent = actions?.accept ? actions.accept.label : "Send";
   submitButton.style.cssText = `
       background: #1E293B;
       color: #fff;
@@ -1874,6 +1954,10 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       font-size: 14px;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       transition: filter .15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
     `;
   submitButton.onclick = () => {
     if (!surveyCompletedEmitted) {
@@ -1881,11 +1965,55 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       formInstance?.send?.();
     }
   };
-  footer.appendChild(cancelButton);
+  backButton.style.display = "none";
+  startButton.style.display = "none";
+  submitButton.style.display = "none";
+  closeButton.style.display = "none";
+  footer.appendChild(backButton);
+  footer.appendChild(closeButton);
   footer.appendChild(submitButton);
+  footer.appendChild(startButton);
+  main.appendChild(footer);
+  containerContent.appendChild(main);
+  function updateButtons(state) {
+    backButton.style.display = "none";
+    startButton.style.display = "none";
+    submitButton.style.display = "none";
+    closeButton.style.display = "none";
+    backButton.style.width = "";
+    startButton.style.width = "";
+    submitButton.style.width = "";
+    closeButton.style.width = "";
+    switch (state) {
+      case "loading":
+        break;
+      case "start":
+        startButton.style.display = "inline-flex";
+        startButton.style.width = "100%";
+        break;
+      case "in_progress_first":
+        submitButton.style.display = "inline-flex";
+        submitButton.style.width = "";
+        setLoading(false);
+        break;
+      case "in_progress_next":
+        backButton.style.display = "inline-flex";
+        submitButton.style.display = "inline-flex";
+        setLoading(false);
+        break;
+      case "completed":
+        closeButton.style.display = "inline-flex";
+        closeButton.style.width = "100%";
+        setLoading(false);
+        break;
+      case "error":
+        closeButton.style.display = "inline-flex";
+        setLoading(false);
+        break;
+    }
+  }
   popup.appendChild(header);
-  popup.appendChild(main);
-  popup.appendChild(footer);
+  popup.appendChild(containerContent);
   container.innerHTML = "";
   container.appendChild(popup);
   container.style.display = "flex";
@@ -1894,10 +2022,16 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     if (!isLoading) {
       formHost.style.visibility = "visible";
     }
-    cancelButton.disabled = false;
+    footer.style.display = isLoading ? "none" : "flex";
+    backButton.disabled = isLoading;
+    startButton.disabled = isLoading;
+    closeButton.disabled = isLoading;
     submitButton.disabled = isLoading;
     submitButton.style.opacity = isLoading ? "0.6" : "1";
     submitButton.style.cursor = isLoading ? "not-allowed" : "pointer";
+    if (isLoading) {
+      updateButtons("loading");
+    }
   }
   setLoading(true);
   if (typeof window === "undefined" || typeof document === "undefined") {
@@ -1916,12 +2050,13 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       addButton: false,
       getMetaData: true
     };
-    generateOptions.onLoadedEvent = ({ formData }) => {
+    generateOptions.onLoadedEvent = ({ formData, progress }) => {
       try {
       } catch (e) {
       }
       const s = formData?.style;
-      if (s) {
+      if (s && !stylesInjected) {
+        stylesInjected = true;
         if (s.boxBackgroundColor) {
           popup.style.background = s.boxBackgroundColor;
         }
@@ -1932,50 +2067,66 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
           submitButton.style.background = s.buttonPrimaryColor;
           submitButton.style.border = "none";
           submitButton.style.color = "#fff";
+          startButton.style.background = s.buttonPrimaryColor;
+          startButton.style.border = "none";
+          startButton.style.color = "#fff";
+          closeButton.style.background = s.buttonPrimaryColor;
+          closeButton.style.border = "none";
+          closeButton.style.color = "#fff";
         }
         if (s.buttonSecondaryColor) {
-          cancelButton.style.background = "transparent";
-          cancelButton.style.border = `1px solid ${s.buttonSecondaryColor}`;
-          cancelButton.style.color = "#333";
+          backButton.style.color = "#fff";
+          backButton.style.border = `1px solid ${s.buttonSecondaryColor}`;
         }
         if (s.logo) {
-          const logoImg = document.createElement("img");
-          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 (!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 16px 0";
-                logoImg.style.display = "block";
-                logoImg.style.marginLeft = "0";
-                break;
-              case "right":
-                logoImg.style.margin = "0 0 16px 16px";
-                logoImg.style.display = "block";
-                logoImg.style.marginLeft = "auto";
-                break;
-              case "center":
-                logoImg.style.margin = "0 auto 16px auto";
-                logoImg.style.display = "block";
-                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);
           }
-          popup.insertBefore(logoImg, main);
         }
+        if (s.startMessage && s.startMessage !== "") {
+          console.log(s.startMessage);
+          updateButtons("start");
+        } else {
+          updateButtons("in_progress_first");
+        }
+      } else {
+        updateButtons("in_progress_first");
       }
       emit("popup_clicked", surveyId, { action: "loaded" });
       setLoading(false);
@@ -1985,32 +2136,29 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       emit("popup_clicked", surveyId, { action: "before_submit" });
     };
     generateOptions.afterSubmitEvent = ({ error, completed, total, progress }) => {
-      setLoading(false);
       if (error) {
         emit("popup_clicked", surveyId, { action: "submit_error", error });
+        updateButtons("error");
         return;
       }
       if (completed) {
         emit("survey_completed", surveyId, { action: "completed" });
         surveyCompletedEmitted = true;
-        onClose();
+        updateButtons("completed");
+        return;
       }
-      if (total > 1 && progress < total) {
-        cancelButton.textContent = "Back";
-        cancelButton.onclick = () => {
-          emit("popup_clicked", surveyId, { action: "back" });
-          formInstance.back();
-        };
+      if (total > 1 && progress > 0 && progress < total) {
+        updateButtons("in_progress_next");
+      } else {
+        updateButtons("in_progress_first");
       }
     };
     generateOptions.onBackEvent = ({ progress }) => {
       emit("popup_clicked", surveyId, { action: "back" });
       if (progress === 0) {
-        cancelButton.textContent = actions?.decline ? actions?.decline.label : "Cancel";
-        cancelButton.onclick = () => {
-          emit("popup_clicked", surveyId, { action: "cancel" });
-          onClose();
-        };
+        updateButtons("in_progress_first");
+      } else {
+        updateButtons("in_progress_next");
       }
     };
     formInstance.generate(formDivId, generateOptions).catch((err) => {