@magicfeedback/popup-sdk 1.6.0 → 1.7.1

package/dist/index.mjs

@@ -1,15 +1,24 @@
 import {
   InMemoryStorage,
+  LABELS,
+  RESOLVE_LOCALE_JS,
+  RTL_LOCALES,
   STORAGE_KEYS,
+  SUPPORTED_LANGUAGES,
   TrackingManager,
   buildFontFaceCss,
   buildFontFamilyValue,
   buildSurveyIdentity,
   createDefaultStorage,
+  directionFor,
+  getLabels,
+  isRtlLanguage,
+  resolveActionLabels,
+  resolveLocale,
   sdkWarn,
   setLogger,
   style_default
-} from "./chunk-AN7JIVWB.mjs";
+} from "./chunk-W6MPSWMS.mjs";
 
 // src/types/index.ts
 var POPUP_TRIGGER_CONDITION_STATUSES = [
@@ -212,9 +221,13 @@ var POSITION_MAP = {
 function jsonForScript(value) {
   return JSON.stringify(value ?? null).replace(/</g, "\\u003C").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
+function trimmedOrNull(value) {
+  const trimmed = typeof value === "string" ? value.trim() : "";
+  return trimmed ? value : null;
+}
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
-  const version = opts.version ?? "2.2.8";
+  const version = opts.version ?? "2.2.22";
   const cdn = `https://cdn.jsdelivr.net/npm/@magicfeedback/native@${version}/dist/magicfeedback-sdk.browser.js`;
   const sid = jsonForScript(opts.surveyId);
   const pid = jsonForScript(opts.productId);
@@ -246,10 +259,22 @@ function buildSurveyHtml(opts) {
   const titleJson = jsonForScript(opts.title ?? "");
   const customCss = (opts.surveyCss ?? "").replace(/<\/\s*style/gi, "<\\/style");
   const progressPref = opts.showProgressBar === void 0 ? "null" : String(opts.showProgressBar);
-  const backLabel = jsonForScript(opts.actions?.back?.label ?? "Back");
-  const startLabel = jsonForScript(opts.actions?.start?.label ?? "Start survey");
-  const completeLabel = jsonForScript(opts.actions?.complete?.label ?? "Complete survey");
-  const submitLabel = jsonForScript(opts.actions?.accept?.label ?? "Send");
+  const initLabels = getLabels(opts.language);
+  const initActionLabels = resolveActionLabels(opts.actions, opts.language);
+  const backLabel = jsonForScript(initActionLabels.back);
+  const startLabel = jsonForScript(initActionLabels.start);
+  const completeLabel = jsonForScript(initActionLabels.complete);
+  const submitLabel = jsonForScript(initActionLabels.accept);
+  const labelsTableJson = jsonForScript(LABELS);
+  const actionOverridesJson = jsonForScript({
+    accept: trimmedOrNull(opts.actions?.accept?.label),
+    start: trimmedOrNull(opts.actions?.start?.label),
+    complete: trimmedOrNull(opts.actions?.complete?.label),
+    back: trimmedOrNull(opts.actions?.back?.label)
+  });
+  const initLangJson = jsonForScript(opts.language ?? "");
+  const initDirection = directionFor(opts.language);
+  const rtlLocalesJson = jsonForScript(RTL_LOCALES);
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta name="color-scheme" content="${colorScheme}"/>
@@ -262,8 +287,8 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 .deepdots-popup-header{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;flex:0 0 auto}
 /* Neutraliza la regla \`.deepdots-popup h2\` del CSS del survey (uppercase, centrado y
    margin-bottom 40px), pensada para los enunciados y no para el t\xEDtulo de la cabecera. */
-#dd-title{margin:0;font-family:var(--deepdots-font,'Montserrat',inherit);font-size:17px;font-weight:600;line-height:1.3;color:${textPrimary};text-transform:none;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-#dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px;flex:0 0 auto;margin-left:auto}
+#dd-title{margin:0;font-family:var(--deepdots-font,'Montserrat',inherit);font-size:17px;font-weight:600;line-height:1.3;color:${textPrimary};text-transform:none;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px;flex:0 0 auto;margin-inline-start:auto}
 /* Progreso alineado con la cabecera: sin padding horizontal propio, lo marca la tarjeta.
    El vertical es el mismo arriba y abajo, y del mismo valor que el padding de la tarjeta. */
 .deepdots-progress{display:none;flex-direction:column;gap:8px;width:100%;flex:0 0 auto;padding:16px 0;box-sizing:border-box}
@@ -320,10 +345,10 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 ${customCss}
 </style>
 </head><body>
-<div class="${popupClass}" id="dd-popup">
+<div class="${popupClass}" id="dd-popup" dir="${initDirection}">
   <div class="deepdots-popup-header">
     <h2 id="dd-title" class="deepdots-popup-title" hidden></h2>
-    <button type="button" id="dd-close" aria-label="Close popup">
+    <button type="button" id="dd-close" aria-label="${initLabels.closeAria}">
       <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>
@@ -332,23 +357,23 @@ ${customCss}
   <div class="deepdots-progress" id="dd-progress">
     <div class="deepdots-progress-head">
       <span id="dd-progress-label"><span id="dd-progress-current"></span><span id="dd-progress-total"></span></span>
-      <span id="dd-progress-followup">Follow-up</span>
+      <span id="dd-progress-followup">${initLabels.followUp}</span>
     </div>
     <div class="deepdots-progress-track"><div id="dd-progress-bar"></div></div>
   </div>
   <div class="deepdots-popup-container-content" id="dd-content">
     <div class="deepdots-popup-main" id="dd-main">
       <div id="dd-form-wrapper">
-        <div class="mf-spinner" id="dd-spinner" role="status" aria-label="Loading survey"><div class="mf-spinner-circle"></div></div>
+        <div class="mf-spinner" id="dd-spinner" role="status" aria-label="${initLabels.loadingAria}"><div class="mf-spinner-circle"></div></div>
         <div id="mf"></div>
       </div>
       <div class="deepdots-error-hint" id="dd-error" role="alert" aria-live="polite"></div>
     </div>
     <div class="deepdots-popup-footer" id="dd-footer">
-      <button type="button" class="dd-nav-btn" id="dd-submit">Send</button>
-      <button type="button" class="dd-nav-btn" id="dd-back">Back</button>
-      <button type="button" class="dd-nav-btn" id="dd-complete">Complete survey</button>
-      <button type="button" class="dd-nav-btn" id="dd-start">Start survey</button>
+      <button type="button" class="dd-nav-btn" id="dd-submit"></button>
+      <button type="button" class="dd-nav-btn" id="dd-back"></button>
+      <button type="button" class="dd-nav-btn" id="dd-complete"></button>
+      <button type="button" class="dd-nav-btn" id="dd-start"></button>
     </div>
   </div>
 </div>
@@ -377,6 +402,32 @@ ${customCss}
   var progressTotal=document.getElementById('dd-progress-total');
   var progressFollowUp=document.getElementById('dd-progress-followup');
   var progressBar=document.getElementById('dd-progress-bar');
+  var closeEl=document.getElementById('dd-close');
+
+  // --- i18n del chrome -------------------------------------------------------------------
+  // La tabla completa viaja embebida porque el idioma del survey (\`formData.lang[0]\`) solo se
+  // conoce ya dentro del WebView. \`ddResolveLocale\` es el espejo del \`resolveLocale\` de TS
+  // (paridad cubierta por test).
+  var DD_LABELS=${labelsTableJson};
+  var DD_ACTION_OVERRIDES=${actionOverridesJson};
+  ${RESOLVE_LOCALE_JS}
+  var DD_LABELS_ACTIVE=DD_LABELS[ddResolveLocale(${initLangJson})];
+  var DD_RTL=${rtlLocalesJson};
+  function ddIsRtl(lang){ return DD_RTL.indexOf(ddResolveLocale(lang))!==-1; }
+  function ddApplyLabels(lang){
+    var next=DD_LABELS[ddResolveLocale(lang)];
+    if(!next) return;
+    DD_LABELS_ACTIVE=next;
+    // El survey ya se ha volteado a s\xED mismo: el chrome tiene que acompa\xF1arlo.
+    popup.setAttribute('dir', ddIsRtl(lang) ? 'rtl' : 'ltr');
+    backBtn.textContent=DD_ACTION_OVERRIDES.back||next.back;
+    startBtn.textContent=DD_ACTION_OVERRIDES.start||next.start;
+    completeBtn.textContent=DD_ACTION_OVERRIDES.complete||next.complete;
+    submitBtn.textContent=DD_ACTION_OVERRIDES.accept||next.accept;
+    if(closeEl){ closeEl.setAttribute('aria-label',next.closeAria); }
+    if(spinner){ spinner.setAttribute('aria-label',next.loadingAria); }
+    progressFollowUp.textContent=next.followUp;
+  }
 
   function setTitle(t){
     if(!t) return;
@@ -417,8 +468,8 @@ ${customCss}
       progressCurrent.textContent=Math.round(pct)+'%';
       progressTotal.textContent='';
     } else {
-      progressCurrent.textContent='Question '+label;
-      progressTotal.textContent=' of '+total;
+      progressCurrent.textContent=DD_LABELS_ACTIVE.question+' '+label;
+      progressTotal.textContent=' '+DD_LABELS_ACTIVE.of+' '+total;
     }
     progressFollowUp.style.display=p&&p.followup?'inline-block':'none';
   }
@@ -428,7 +479,7 @@ ${customCss}
   completeBtn.textContent=${completeLabel};
   submitBtn.textContent=${submitLabel};
 
-  document.getElementById('dd-close').onclick=function(){ emitJSON('popup_close'); };
+  closeEl.onclick=function(){ emitJSON('popup_close'); };
   backBtn.onclick=function(){ if(window.DeepdotsForm && window.DeepdotsForm.back){ window.DeepdotsForm.back(); } };
   startBtn.onclick=function(){
     if(window.DeepdotsForm && window.DeepdotsForm.startForm){
@@ -523,6 +574,14 @@ ${customCss}
         // fallback es un literal gen\xE9rico que ignora style.successMessage.
         addSuccessScreen:false,
         onLoadedEvent:function(args){
+          // Idioma del survey: manda sobre el del init para que el chrome no se quede en
+          // ingl\xE9s delante de un survey traducido.
+          var langs=args && args.formData ? args.formData.lang : null;
+          if(langs && langs.length){
+            for(var li=0;li<langs.length;li++){
+              if(typeof langs[li]==='string' && langs[li].trim()){ ddApplyLabels(langs[li]); break; }
+            }
+          }
           var s=args && args.formData ? args.formData.style : null;
           if(s && !stylesInjected){
             stylesInjected=true;
@@ -549,8 +608,10 @@ ${customCss}
               if(s.logoSize==='small'){ logoImg.style.maxHeight='30px'; }
               else if(s.logoSize==='medium'){ logoImg.style.maxHeight='50px'; }
               else if(s.logoSize==='large'){ logoImg.style.maxHeight='70px'; }
-              if(s.logoPosition==='left'){ logoImg.style.margin='12px 16px 0 0'; logoImg.style.marginLeft='0'; }
-              else if(s.logoPosition==='right'){ logoImg.style.margin='12px 0 0 16px'; logoImg.style.marginLeft='auto'; }
+              // M\xE1rgenes l\xF3gicos: con un survey RTL el popup va con dir="rtl" y el logo
+              // tiene que acompa\xF1ar al chrome. En LTR el resultado es el mismo de antes.
+              if(s.logoPosition==='left'){ logoImg.style.margin='12px 0 0 0'; logoImg.style.setProperty('margin-inline-start','0'); logoImg.style.setProperty('margin-inline-end','16px'); }
+              else if(s.logoPosition==='right'){ logoImg.style.margin='12px 0 0 0'; logoImg.style.setProperty('margin-inline-start','auto'); logoImg.style.setProperty('margin-inline-end','0'); }
               else if(s.logoPosition==='center'){ logoImg.style.margin='12px auto 0 auto'; }
               // Encima de la barra de progreso, como hermano del header (espejo de ui/logo.ts en
               // web). Fuera de #dd-main, as\xED el logo no se va con el scroll del formulario.
@@ -576,12 +637,12 @@ ${customCss}
             setLoading(false);
             if(error.toLowerCase().indexOf('no response')!==-1){
               // La p\xE1gina no ha cambiado: el estado de navegaci\xF3n se queda como estaba.
-              errorHint.textContent='Please answer the required question to continue.';
+              errorHint.textContent=DD_LABELS_ACTIVE.errorRequired;
               errorHint.style.display='block';
               updateNavButtons();
               return;
             }
-            errorHint.textContent='An error occurred while submitting. Please try again or close the popup.';
+            errorHint.textContent=DD_LABELS_ACTIVE.errorSubmit;
             errorHint.style.display='block';
             return;
           }
@@ -653,7 +714,8 @@ var ReactNativePopupRenderer = class {
       chrome: renderChrome,
       title: options?.title,
       showProgressBar: options?.showProgressBar,
-      surveyCss: options?.surveyCss
+      surveyCss: options?.surveyCss,
+      language: options?.language
     });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
@@ -749,7 +811,7 @@ var BrowserPopupRenderer = class {
     if (!this.container) return;
     this.visible = true;
     const container = this.container;
-    void import("./renderPopup-M6MKTDEH.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-HHQMAW3G.mjs").then(({ renderPopup }) => {
       renderPopup(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId, options);
     });
   }
@@ -1501,6 +1563,75 @@ var CrashReporter = class {
   }
 };
 
+// src/core/popup-state-store.ts
+var POPUP_STATE_STORAGE_KEY = "deepdots.popups.state";
+var MAX_TRACKED_POPUP_ENTRIES = 200;
+function emptyState() {
+  return { lastShown: {}, progress: {} };
+}
+function isValidTimestamp(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function capEntries(entries, timestampOf) {
+  if (entries.length <= MAX_TRACKED_POPUP_ENTRIES) return entries;
+  return [...entries].sort((a, b) => timestampOf(b[1]) - timestampOf(a[1])).slice(0, MAX_TRACKED_POPUP_ENTRIES);
+}
+function readPopupState(storage) {
+  let raw = null;
+  try {
+    raw = storage.getItem(POPUP_STATE_STORAGE_KEY);
+  } catch {
+    return emptyState();
+  }
+  if (!raw) return emptyState();
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return emptyState();
+  }
+  if (typeof parsed !== "object" || parsed === null) return emptyState();
+  const source = parsed;
+  const state = emptyState();
+  if (typeof source.lastShown === "object" && source.lastShown !== null) {
+    const valid = Object.entries(source.lastShown).filter((entry) => isValidTimestamp(entry[1]));
+    capEntries(valid, (timestamp) => timestamp).forEach(([popupId, timestamp]) => {
+      state.lastShown[popupId] = timestamp;
+    });
+  }
+  if (typeof source.progress === "object" && source.progress !== null) {
+    const valid = Object.entries(source.progress).filter((entry) => {
+      const value = entry[1];
+      if (typeof value !== "object" || value === null) return false;
+      const candidate = value;
+      return POPUP_TRIGGER_CONDITION_STATUSES.includes(candidate.status) && isValidTimestamp(candidate.timestamp);
+    });
+    capEntries(valid, (entry) => entry.timestamp).forEach(([surveyId, entry]) => {
+      state.progress[surveyId] = { status: entry.status, timestamp: entry.timestamp };
+    });
+  }
+  return state;
+}
+function writePopupState(storage, state) {
+  const capped = emptyState();
+  capEntries(Object.entries(state.lastShown), (timestamp) => timestamp).forEach(([popupId, timestamp]) => {
+    capped.lastShown[popupId] = timestamp;
+  });
+  capEntries(Object.entries(state.progress), (entry) => entry.timestamp).forEach(([surveyId, entry]) => {
+    capped.progress[surveyId] = entry;
+  });
+  try {
+    storage.setItem(POPUP_STATE_STORAGE_KEY, JSON.stringify(capped));
+  } catch {
+  }
+}
+function clearPopupState(storage) {
+  try {
+    storage.removeItem(POPUP_STATE_STORAGE_KEY);
+  } catch {
+  }
+}
+
 // src/analytics/messaging.ts
 var MESSAGE_CHANNELS = ["push", "in_app"];
 function buildMessageParams(stage, o) {
@@ -1588,6 +1719,10 @@ var DeepdotsPopups = class {
     this.popupDefinitions = [];
     this.popupsLoaded = false;
     this.pendingAutoLaunch = false;
+    // Estado que alimenta las reglas de redisplay. Copia de trabajo en memoria; la fuente
+    // duradera es el storage (`popup-state-store`), rehidratada en `init()` — sin eso, una
+    // recarga reiniciaba el cooldown y el popup volvía a salir. `answeredSurveys` se deriva
+    // de las entradas COMPLETED de `surveyProgress` (los dos los escribe `markSurveyAnswered`).
     this.answeredSurveys = /* @__PURE__ */ new Set();
     this.surveyProgress = /* @__PURE__ */ new Map();
     this.lastShown = /* @__PURE__ */ new Map();
@@ -1663,6 +1798,7 @@ var DeepdotsPopups = class {
     };
     const storage = config.storage ?? createDefaultStorage();
     this.storage = storage;
+    this.loadPopupState(storage);
     this.tracking = new TrackingManager({
       storage,
       clientUserId: this.config.userId,
@@ -1930,6 +2066,10 @@ var DeepdotsPopups = class {
     }) : null;
     this.analytics?.resetUserScope();
     this.messageGuard.reset();
+    this.lastShown.clear();
+    this.surveyProgress.clear();
+    this.answeredSurveys.clear();
+    clearPopupState(storage);
     this.log("tracking \xB7 user_change \xB7 user_id:", this.tracking.getUserId());
     this.openSession();
   }
@@ -2101,6 +2241,7 @@ var DeepdotsPopups = class {
     this.log("Showing popup (definition)", def);
     this.surveyToPopupId.set(def.surveyId, def.id);
     this.lastShown.set(def.id, Date.now());
+    this.persistPopupState();
     this.renderPopup(def.surveyId, def.productId, def.actions, def.style, def.title);
     this.emitEvent("popup_shown", def.surveyId, { popupId: def.id });
   }
@@ -2459,13 +2600,13 @@ var DeepdotsPopups = class {
         miniService,
         analyticsFeedbackSessionId,
         this.renderChrome,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
       );
       return;
     }
     if (!this.popupContainer) return;
     const container = this.popupContainer;
-    void import("./renderPopup-M6MKTDEH.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-HHQMAW3G.mjs").then(({ renderPopup }) => {
       renderPopup(
         container,
         surveyId,
@@ -2479,7 +2620,7 @@ var DeepdotsPopups = class {
         sessionId,
         miniService,
         analyticsFeedbackSessionId,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
       );
     });
   }
@@ -2580,6 +2721,29 @@ var DeepdotsPopups = class {
       return;
     }
     this.surveyProgress.set(surveyId, { status, timestamp: Date.now() });
+    this.persistPopupState();
+  }
+  /**
+   * Rehidrata el estado de redisplay desde el storage. `answeredSurveys` se reconstruye
+   * desde las entradas COMPLETED: es exactamente lo que persiste `markSurveyAnswered`.
+   */
+  loadPopupState(storage) {
+    const state = readPopupState(storage);
+    Object.entries(state.lastShown).forEach(([popupId, timestamp]) => {
+      this.lastShown.set(popupId, timestamp);
+    });
+    Object.entries(state.progress).forEach(([surveyId, entry]) => {
+      this.surveyProgress.set(surveyId, { status: entry.status, timestamp: entry.timestamp });
+      if (entry.status === "COMPLETED") this.answeredSurveys.add(surveyId);
+    });
+  }
+  /** Vuelca el estado de redisplay al storage. Sin storage (o bloqueado) degrada a memoria. */
+  persistPopupState() {
+    if (!this.storage) return;
+    writePopupState(this.storage, {
+      lastShown: Object.fromEntries(this.lastShown),
+      progress: Object.fromEntries(this.surveyProgress)
+    });
   }
   isPopupDefinition(value) {
     if (typeof value !== "object" || value === null) return false;
@@ -2693,12 +2857,15 @@ export {
   CrashReporter,
   DeepdotsPopups,
   InMemoryStorage,
+  LABELS,
   MAX_TRACKED_MESSAGES,
   MESSAGE_CHANNELS,
   MessageGuard,
   NoopPopupRenderer,
   POPUP_TRIGGER_CONDITION_STATUSES,
+  RTL_LOCALES,
   ReactNativePopupRenderer,
+  SUPPORTED_LANGUAGES,
   buildAnalyticsFeedbackBody,
   buildMessageParams,
   buildSurveyHtml,
@@ -2706,7 +2873,12 @@ export {
   crashRecordToParams,
   createDefaultRenderer,
   createFeedbackSink,
+  directionFor,
+  getLabels,
+  isRtlLanguage,
   mmkvStorage,
+  resolveActionLabels,
+  resolveLocale,
   setupReactNative
 };
 //# sourceMappingURL=index.mjs.map