@magicfeedback/popup-sdk 1.6.0 → 1.7.0

package/dist/react-native.mjs

@@ -1,4 +1,7 @@
 import {
+  LABELS,
+  RESOLVE_LOCALE_JS,
+  RTL_LOCALES,
   STORAGE_KEYS,
   TrackingManager,
   __require,
@@ -6,10 +9,13 @@ import {
   buildFontFamilyValue,
   buildSurveyIdentity,
   createDefaultStorage,
+  directionFor,
+  getLabels,
+  resolveActionLabels,
   sdkWarn,
   setLogger,
   style_default
-} from "./chunk-Z3LLJMSH.mjs";
+} from "./chunk-WNIUIOKF.mjs";
 
 // src/react-native/index.tsx
 import { createContext, useContext, useEffect, useRef, useState } from "react";
@@ -217,9 +223,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);
@@ -251,10 +261,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}"/>
@@ -267,8 +289,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}
@@ -325,10 +347,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>
@@ -337,23 +359,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>
@@ -382,6 +404,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;
@@ -422,8 +470,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';
   }
@@ -433,7 +481,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){
@@ -528,6 +576,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;
@@ -554,8 +610,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.
@@ -581,12 +639,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;
           }
@@ -658,7 +716,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 });
@@ -754,7 +813,7 @@ var BrowserPopupRenderer = class {
     if (!this.container) return;
     this.visible = true;
     const container = this.container;
-    void import("./renderPopup-SELXQ3UE.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-EWGKG53W.mjs").then(({ renderPopup }) => {
       renderPopup(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId, options);
     });
   }
@@ -2464,13 +2523,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-SELXQ3UE.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-EWGKG53W.mjs").then(({ renderPopup }) => {
       renderPopup(
         container,
         surveyId,
@@ -2484,7 +2543,7 @@ var DeepdotsPopups = class {
         sessionId,
         miniService,
         analyticsFeedbackSessionId,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
       );
     });
   }