@magicfeedback/popup-sdk 1.0.9 → 1.0.10

package/dist/index.js

@@ -1812,7 +1812,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   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" aria-hidden="true">
+      <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>
     `;
@@ -1863,6 +1863,20 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   main.style.cssText = "display:flex; flex-direction:column; width:100%; max-height:80vh; overflow-y:auto;";
   const formWrapper = document.createElement("div");
   formWrapper.style.cssText = "width:100%; flex: 1 1 auto;";
+  const errorHint = document.createElement("div");
+  errorHint.className = "deepdots-error-hint";
+  errorHint.style.cssText = `
+      display: none;
+      margin: 12px 0 0 0;
+      padding: 10px 12px;
+      border-radius: 6px;
+      background: #FEF3C7; /* amber-100 */
+      color: #92400E; /* amber-700 */
+      border: 1px solid #FCD34D; /* amber-300 */
+      font-size: 13px;
+    `;
+  errorHint.setAttribute("role", "alert");
+  errorHint.setAttribute("aria-live", "polite");
   const spinnerEl = document.createElement("div");
   spinnerEl.className = "mf-spinner";
   spinnerEl.setAttribute("role", "status");
@@ -1876,6 +1890,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   formWrapper.appendChild(spinnerEl);
   formWrapper.appendChild(formHost);
   main.appendChild(formWrapper);
+  main.appendChild(errorHint);
   const footer = document.createElement("div");
   footer.className = "deepdots-popup-footer";
   footer.setAttribute("data-actions-wrapper", "true");
@@ -2020,7 +2035,6 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         setLoading(false);
         break;
       case "error":
-        closeButton.style.display = "inline-flex";
         setLoading(false);
         break;
     }
@@ -2063,7 +2077,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       addButton: false,
       getMetaData: true
     };
-    generateOptions.onLoadedEvent = ({ formData, progress }) => {
+    generateOptions.onLoadedEvent = ({ formData }) => {
       try {
       } catch (e) {
       }
@@ -2149,11 +2163,23 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       emit("popup_clicked", surveyId, { action: "before_submit" });
     };
     generateOptions.afterSubmitEvent = ({ error, completed, total, progress }) => {
-      if (error) {
-        emit("popup_clicked", surveyId, { action: "submit_error", error });
-        updateButtons("error");
+      const errText = error ? typeof error === "string" ? error : error.message ?? String(error) : "";
+      if (errText) {
+        setLoading(false);
+        if (errText.toLowerCase().includes("no response")) {
+          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");
+          return;
+        }
+        errorHint.textContent = "An error occurred while submitting. Please try again or close the popup.";
+        errorHint.style.display = "block";
+        emit("popup_clicked", surveyId, { action: "submit_error", error: errText });
         return;
       }
+      errorHint.style.display = "none";
+      setLoading(false);
       if (completed) {
         emit("survey_completed", surveyId, { action: "completed" });
         surveyCompletedEmitted = true;