@useinsider/guido 3.2.0-beta.f0d4ffd → 3.2.0-beta.f679fe4

package/dist/composables/useHtmlValidator.js

@@ -1,161 +1,126 @@
-import { useConfig as L } from "./useConfig.js";
-import { TemplateTypes as V } from "../enums/defaults.js";
-import { DISPLAY_CONDITIONS_REGEX as _, DISPLAY_CONDITIONS_EXCEPTIONS_REGEX as H, CampaignCouldNotBeSavedKey as P, CanNotMakeAnyChangesForRunningKey as G } from "../enums/html-validator.js";
-import { ToasterTypeOptions as c } from "../enums/toaster.js";
-import { itemsBlockDynamicVariables as M } from "../extensions/Blocks/Items/enums/productEnums.js";
-import { useRecommendationStore as $ } from "../stores/recommendation.js";
-import { base64EncodeWithSpecialChars as X } from "../utils/base64.js";
-import { useHttp as j } from "./useHttp.js";
-import { useToaster as q } from "./useToaster.js";
-import { useTranslations as z } from "./useTranslations.js";
-const K = /recommendation-id="(\d+)"/g;
-function U(a) {
-  return [...a.matchAll(K)].map((u) => u[1]);
+import { useConfig as I } from "./useConfig.js";
+import { TemplateTypes as B } from "../enums/defaults.js";
+import { CampaignCouldNotBeSavedKey as R, CanNotMakeAnyChangesForRunningKey as V } from "../enums/html-validator.js";
+import { ToasterTypeOptions as l } from "../enums/toaster.js";
+import { itemsBlockDynamicVariables as H } from "../extensions/Blocks/Items/enums/productEnums.js";
+import { useRecommendationStore as W } from "../stores/recommendation.js";
+import { base64EncodeWithSpecialChars as L } from "../utils/base64.js";
+import { useHttp as N } from "./useHttp.js";
+import { useToaster as O } from "./useToaster.js";
+import { useTranslations as D } from "./useTranslations.js";
+const M = /recommendation-id="(\d+)"/g;
+function _(o) {
+  return [...o.matchAll(M)].map((u) => u[1]);
 }
-function Y(a, u) {
-  return u.some((d) => a.startsWith(`${d}_`));
+function $(o, u) {
+  return u.some((d) => o.startsWith(`${d}_`));
 }
-const ce = () => {
-  var y, h;
-  const { showToaster: a } = q(), { post: u } = j(), { config: d } = L(), r = z(), g = $(), p = ((h = (y = d.value) == null ? void 0 : y.partner) == null ? void 0 : h.messageType) === V.transactional, b = async (e) => {
-    const t = await u(
+const ee = () => {
+  var g, v;
+  const { showToaster: o } = O(), { post: u } = N(), { config: d } = I(), r = D(), f = W(), p = ((v = (g = d.value) == null ? void 0 : g.partner) == null ? void 0 : v.messageType) === B.transactional, y = async (e) => {
+    const s = await u(
       "/newsletter/template-library/check-template-html-body",
-      { html: X(e) }
-    ), { status: n, message: l } = t.data;
-    return n || a({
-      type: c.Alert,
-      message: n === void 0 ? l : r("newsletter.invalid-url-link-for-toaster")
-    }), r(P), l === r(G) && a({
-      type: c.Alert,
+      { html: L(e) }
+    ), { status: n, message: c } = s.data;
+    return n || o({
+      type: l.Alert,
+      message: n === void 0 ? c : r("newsletter.invalid-url-link-for-toaster")
+    }), r(R), c === r(V) && o({
+      type: l.Alert,
       message: r("newsletter.already-in-progress")
     }), n;
-  }, w = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), S = (e) => ["if", "endif"].includes(e.toLowerCase()), E = (e, s) => {
-    const t = e.match(/({%(.*?)%})/g);
+  }, b = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), h = (e, t) => {
+    const s = e.match(/({%(.*?)%})/g);
     let n = !0;
-    return t !== null && !p && t.forEach((l) => {
-      const o = l.slice(2, -2).trim().match(/(".*?"|[^"\s]+)(?=\s*|\s*$)/g);
-      if (o && o.length > 0) {
-        const [i] = o;
-        w(i) && !s.includes(i) && (a({
-          type: c.Warning,
+    return s !== null && !p && s.forEach((c) => {
+      const a = c.slice(2, -2).trim().match(/(".*?"|[^"\s]+)(?=\s*|\s*$)/g);
+      if (a && a.length > 0) {
+        const [i] = a;
+        b(i) && !t.includes(i) && (o({
+          type: l.Warning,
           message: r("custom-fields.invalid-custom-fields")
         }), n = !1);
       }
     }), n;
-  }, A = async (e, s, t) => {
-    const n = t ? await b(e) : !0;
-    return E(e, s) && n;
-  }, I = (e) => e.length > 0 ? !0 : (a({
-    type: c.Warning,
+  }, C = async (e, t, s) => {
+    const n = s ? await y(e) : !0;
+    return h(e, t) && n;
+  }, w = (e) => e.length > 0 ? !0 : (o({
+    type: l.Warning,
     message: r("newsletter.html-content-is-empty")
   }), !1), k = (e) => {
-    const s = (e.match(/{/gm) || []).length, t = (e.match(/}/gm) || []).length;
-    return s > t && a({
-      type: c.Warning,
+    const t = (e.match(/{/gm) || []).length, s = (e.match(/}/gm) || []).length;
+    return t > s && o({
+      type: l.Warning,
       message: r("custom-fields.missing-closing-braces")
-    }), s < t && a({
-      type: c.Warning,
+    }), t < s && o({
+      type: l.Warning,
       message: r("custom-fields.missing-opening-braces")
-    }), s === t;
-  }, x = (e) => {
-    const s = e.match(/{{\s*(\w+\s+((\w+\|\w+)|(\w+)))\s*}}/gm) === null;
-    return s || a({
-      type: c.Warning,
+    }), t === s;
+  }, A = (e) => {
+    const t = e.match(/{{\s*(\w+\s+((\w+\|\w+)|(\w+)))\s*}}/gm) === null;
+    return t || o({
+      type: l.Warning,
       message: r("custom-fields.invalid-custom-fields")
-    }), s;
-  }, T = (e, s) => {
-    const t = e.match(/{{([a-zA-Z0-9_\s]*)}}/gm);
-    if (t && !p) {
-      const n = new Set(s.map((i) => i.toLowerCase())), l = U(e), o = [];
-      if (t.forEach((i) => {
+    }), t;
+  }, E = (e, t) => {
+    const s = e.match(/{{([a-zA-Z0-9_\s]*)}}/gm);
+    if (s && !p) {
+      const n = new Set(t.map((i) => i.toLowerCase())), c = _(e), a = [];
+      if (s.forEach((i) => {
         const m = i.slice(2, -2).trim().toLowerCase();
-        (!n.has(m) || m === "") && !Y(m, l) && o.push(m);
-      }), o.length > 0) {
+        (!n.has(m) || m === "") && !$(m, c) && a.push(m);
+      }), a.length > 0) {
         const i = `
                     <ul>
-                        ${o.map((m) => `<li>${m}</li>`).join("")}
+                        ${a.map((m) => `<li>${m}</li>`).join("")}
                     </ul>
                 `;
-        return a({
-          type: c.Alert,
+        return o({
+          type: l.Alert,
           message: r("custom-fields.invalid-custom-fields") + i
         }), !1;
       }
     }
     return !0;
-  }, F = (e) => {
-    const s = e.match(/{%(.*?)%}/g), t = [];
-    let n = !0;
-    if (s && s.forEach((l) => {
-      const o = l.match(_), i = l.match(H), m = (o == null ? void 0 : o.join("")) || "";
-      (!o || l !== m) && !i && (a({
-        type: c.Alert,
-        message: r("newsletter.display-conditions-invalid-syntax")
-      }), n = !1), o && o.forEach((f) => {
-        f.trim() === "=" && (a({
-          type: c.Alert,
-          message: r("custom-conditions.wrong-equality-operators")
-        }), n = !1);
-        const v = f.match(/^[a-zA-Z]*$/g);
-        v && v.forEach((C) => {
-          S(C) && t.push(C);
-        });
-      });
-    }), t.length) {
-      const l = t.filter((i) => i === "if"), o = t.filter((i) => i === "endif");
-      l.length !== o.length && (a({
-        type: c.Alert,
-        message: r("custom-conditions.missing-if-endif-tag")
-      }), n = !1);
-    }
-    return n;
-  }, W = (e) => {
-    const s = (e.match(/{% /gm) || []).length, t = (e.match(/ %}/gm) || []).length, n = s === t;
-    return n || a({
-      type: c.Warning,
-      message: r("custom-conditions.no-space-after-braces")
-    }), n;
-  }, N = (e) => (e.match(/({%(.*?)%})/g) || []).filter((t) => t.includes("if")).map((t) => (t.match(/{{.*}}/gm) || []).length).reduce((t, n) => t + n, 0) > 0 ? (a({
-    type: c.Warning,
-    message: r("custom-conditions.no-braces-inside-if-tag")
-  }), !1) : !0, O = () => g.recommendationConfigs && Object.values(g.recommendationConfigs).find((s) => s.filters.find((t) => t.value === "")) !== void 0 ? (a({
-    type: c.Alert,
+  }, F = () => f.recommendationConfigs && Object.values(f.recommendationConfigs).find((t) => t.filters.find((s) => s.value === "")) !== void 0 ? (o({
+    type: l.Alert,
     message: r("newsletter.fill-all-necessary-fields")
-  }), !1) : !0, B = (e) => {
-    const s = /src="[^"]*\.(svg|pst)"/gm;
-    return e.match(s) === null ? !0 : (a({
-      type: c.Alert,
+  }), !1) : !0, x = (e) => {
+    const t = /src="[^"]*\.(svg|pst)"/gm;
+    return e.match(t) === null ? !0 : (o({
+      type: l.Alert,
       message: r("newsletter.invalid-image-type")
     }), !1);
-  }, R = (e) => {
+  }, T = (e) => {
     const n = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".checkbox-block-v2");
-    return Array.from(n).find((o) => {
+    return Array.from(n).find((a) => {
       var i;
-      return !((i = o.id) != null && i.trim());
-    }) ? (a({
-      type: c.Alert,
+      return !((i = a.id) != null && i.trim());
+    }) ? (o({
+      type: l.Alert,
       message: r("unsubscribe-templates.select-checkbox-groups")
     }), !1) : !0;
-  }, D = (e) => {
+  }, S = (e) => {
     const n = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".radio-button-v2");
-    return Array.from(n).find((o) => {
+    return Array.from(n).find((a) => {
       var i;
-      return !((i = o.id) != null && i.trim());
-    }) ? (a({
-      type: c.Alert,
+      return !((i = a.id) != null && i.trim());
+    }) ? (o({
+      type: l.Alert,
       message: r("unsubscribe-templates.select-radio-button-groups")
     }), !1) : !0;
   };
-  return { validateHtml: async (e, s, t = !1) => {
-    var o, i;
+  return { validateHtml: async (e, t, s = !1) => {
+    var a, i;
     const n = [
-      ...s.map((m) => m.value),
-      ...M,
-      ...((i = (o = d.value) == null ? void 0 : o.template) == null ? void 0 : i.customFieldAttributes) ?? []
+      ...t.map((m) => m.value),
+      ...H,
+      ...((i = (a = d.value) == null ? void 0 : a.template) == null ? void 0 : i.customFieldAttributes) ?? []
     ];
-    return await A(e, n, t) && I(e) && k(e) && x(e) && T(e, n) && F(e) && W(e) && N(e) && O() && B(e) && R(e) && D(e);
+    return await C(e, n, s) && w(e) && k(e) && A(e) && E(e, n) && F() && x(e) && T(e) && S(e);
   } };
 };
 export {
-  ce as useHtmlValidator
+  ee as useHtmlValidator
 };

package/dist/composables/useRibbonOffset.js

@@ -0,0 +1,21 @@
+import { RIBBON_SELECTOR as r } from "../enums/onboarding.js";
+import { ref as f, onMounted as c, onBeforeUnmount as i } from "vue";
+const m = () => {
+  const o = f(0);
+  let e = null;
+  const n = () => {
+    const t = document.querySelector(r), s = (t == null ? void 0 : t.offsetHeight) ?? 0;
+    o.value !== s && (o.value = s);
+  }, u = (t) => `${t + o.value}px`;
+  return c(() => {
+    n(), e = new MutationObserver(n), e.observe(document.body, {
+      childList: !0,
+      subtree: !0
+    });
+  }), i(() => {
+    e == null || e.disconnect();
+  }), { ribbonOffset: o, getTopPosition: u };
+};
+export {
+  m as useRibbonOffset
+};

package/dist/composables/useSave.js

@@ -19,7 +19,7 @@ const F = () => {
       return;
     if ((i = a.value) != null && i.externalValidation && !await a.value.externalValidation(t))
       return;
-    c();
+    await c();
     const { unsubscribePayload: f, stripoModules: v } = d(t.rawHtml);
     return await u(f), t.modules = v, m || s(t), t;
   } };

package/dist/composables/useStripo.js

@@ -1,27 +1,28 @@
-import { useActionsApi as F } from "./useActionsApi.js";
-import { useBlocksConfig as D } from "./useBlocksConfig.js";
-import { useConfig as I } from "./useConfig.js";
-import { useCustomInterfaceAppearance as P } from "./useCustomInterfaceAppearance.js";
-import { useStripoEventHandler as U } from "./useStripoEventHandler.js";
-import { useToaster as R } from "./useToaster.js";
-import { localePatch as q } from "../config/i18n/index.js";
-import { displayConditions as x } from "../enums/displayConditions.js";
-import { useStripoApi as H } from "../services/stripoApi.js";
-import O from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as C } from "../stores/editor.js";
-import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
-import $ from "../package.json.js";
-const ie = (E, c) => {
-  const { features: l, template: h, isFeatureEnabled: u } = I(), { handleError: m } = R(), { getToken: b, getCustomFonts: w, getSyncModulesStatus: k } = H(), { handleEvent: T } = U(), { getStripoBlocksConfig: V } = D(), _ = async (i, n = [], r = !1) => {
-    var g, y, S;
-    const e = C(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await V(), f = ((g = l.value) == null ? void 0 : g.displayConditions) ?? !0, v = ((y = l.value) == null ? void 0 : y.modulesDisabled) ?? !1, M = ((S = h.value) == null ? void 0 : S.forceRecreate) ?? !1;
+import { useActionsApi as D } from "./useActionsApi.js";
+import { useBlocksConfig as I } from "./useBlocksConfig.js";
+import { useConfig as P } from "./useConfig.js";
+import { useCustomInterfaceAppearance as U } from "./useCustomInterfaceAppearance.js";
+import { useFullStoryBridge as R } from "./useFullStoryBridge.js";
+import { useStripoEventHandler as q } from "./useStripoEventHandler.js";
+import { useToaster as x } from "./useToaster.js";
+import { localePatch as H } from "../config/i18n/index.js";
+import { displayConditions as O } from "../enums/displayConditions.js";
+import { useStripoApi as j } from "../services/stripoApi.js";
+import L from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as y } from "../stores/editor.js";
+import { dynamicContentToMergeTags as $ } from "../utils/genericUtil.js";
+import z from "../package.json.js";
+const ae = (C, l) => {
+  const { features: c, template: E, isFeatureEnabled: u } = P(), { handleError: m } = x(), { getToken: h, getCustomFonts: w, getSyncModulesStatus: b } = j(), { handleEvent: k } = q(), { getStripoBlocksConfig: B } = I(), T = async (i, r = [], s = !1) => {
+    var f, g, S;
+    const e = y(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await B(), _ = ((f = c.value) == null ? void 0 : f.displayConditions) ?? !0, F = ((g = c.value) == null ? void 0 : g.modulesDisabled) ?? !1, v = ((S = E.value) == null ? void 0 : S.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: E,
+        metadata: C,
         html: p,
         css: a,
-        forceRecreate: M,
+        forceRecreate: v,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -31,45 +32,45 @@ const ie = (E, c) => {
         customAppearanceMergetags: !u("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: O,
-        conditionsEnabled: f,
-        customConditionsEnabled: f,
-        conditionCategories: x,
+        customViewStyles: L,
+        conditionsEnabled: _,
+        conditionCategories: O,
         enableXSSSecurity: !0,
-        modulesDisabled: v,
-        syncModulesEnabled: r,
+        modulesDisabled: F,
+        syncModulesEnabled: s,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
         displayHiddenPreheader: !1,
         displayTitle: !1,
         displayUTM: !1,
         selectElementAfterDrop: !0,
+        allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
         ...o ? { baseBlocks: o } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: n
+          customFonts: r
         },
         mergeTags: [
           {
-            entries: L(
-              c.preselectedDynamicContentList,
+            entries: $(
+              l.preselectedDynamicContentList,
               u("liquidSyntax")
             )
           }
         ],
         async onTokenRefreshRequest(t) {
           try {
-            const s = await b();
-            t(s);
-          } catch (s) {
-            m(s, "Failed to refresh token");
+            const n = await h();
+            t(n);
+          } catch (n) {
+            m(n, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = P(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: A } = F();
-            t(), s(), A(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+            const { importCss: t } = U(), { activateCustomViewStyles: n, updateTimerInClonedTemplate: M } = D(), { injectFullStory: A } = R();
+            t(), n(), A(), M(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
               e.hasChanges = !1;
             }, 1e3);
           } catch (t) {
@@ -88,39 +89,39 @@ const ie = (E, c) => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: T,
+        onEvent: k,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
         extensions: d,
-        localePatch: q
+        localePatch: H
       }
     );
-  }, B = (i) => new Promise((n, r) => {
+  }, V = (i) => new Promise((r, s) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
-      i(), n();
+      i(), r();
       return;
     }
-    const e = $.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
+    const e = z.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
     o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
-      i(), n();
+      i(), r();
     }, o.onerror = () => {
-      r(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
+      s(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
     }, document.body.appendChild(o);
   });
   return { initPlugin: async (i) => {
-    await B(async () => {
-      const n = C(), [r, e] = await Promise.all([
+    await V(async () => {
+      const r = y(), [s, e] = await Promise.all([
         w(),
-        k()
+        b()
       ]);
-      n.syncModulesEnabled = e, await _(i, r, e);
+      r.syncModulesEnabled = e, await T(i, s, e);
     });
   } };
 };
 export {
-  ie as useStripo
+  ae as useStripo
 };