@useinsider/guido 2.1.0-beta.3b5e21d → 2.1.0-beta.3d5480e

package/dist/composables/useSave.js

@@ -1,17 +1,21 @@
-import { useConfig as l } from "./useConfig.js";
-import { useSaveStart as m, useSaveComplete as c } from "./useGuidoActions.js";
-import { useTemplatePreparation as d } from "../utils/templatePreparation.js";
-import { useHtmlValidator as p } from "./useHtmlValidator.js";
-const w = () => {
-  const i = m(), s = c(), { validateHtml: o } = p(), { callbacks: a } = l();
-  return { save: async (r = !1) => {
+import { useConfig as d } from "./useConfig.js";
+import { useSaveStart as p, useSaveComplete as f } from "./useGuidoActions.js";
+import { useSyncModuleExtractor as v } from "./useSyncModuleExtractor.js";
+import { useStripoApi as S } from "../services/stripoApi.js";
+import { useTemplatePreparation as x } from "../utils/templatePreparation.js";
+import { useHtmlValidator as V } from "./useHtmlValidator.js";
+const g = () => {
+  const o = p(), s = f(), { validateHtml: i } = V(), { callbacks: a } = d(), { extractSyncModuleData: r } = v(), { setSyncModuleUnsubscriptionPages: n } = S();
+  return { save: async (l = !1) => {
     var e;
-    i();
-    const { prepareTemplateDetails: n } = d(), t = await n();
-    if (await o(t.compiledHtml, t.dynamicContentList, !0) && !((e = a.value) != null && e.externalValidation && !await a.value.externalValidation(t)))
-      return r || s(t), t;
+    o();
+    const { prepareTemplateDetails: c } = x(), t = await c();
+    if (!await i(t.compiledHtml, t.dynamicContentList, !0) || (e = a.value) != null && e.externalValidation && !await a.value.externalValidation(t))
+      return;
+    const { unsubscribePayload: m, stripoModules: u } = r(t.rawHtml);
+    return await n(m), t.modules = u, l || s(t), t;
   } };
 };
 export {
-  w as useSave
+  g as useSave
 };

package/dist/composables/useStripo.js

@@ -1,26 +1,26 @@
-import { useActionsApi as _ } from "./useActionsApi.js";
-import { useBlocksConfig as B } from "./useBlocksConfig.js";
-import { useConfig as v } from "./useConfig.js";
-import { useCustomInterfaceAppearance as A } from "./useCustomInterfaceAppearance.js";
-import { useStripoEventHandler as F } from "./useStripoEventHandler.js";
-import { useToaster as D } from "./useToaster.js";
-import { displayConditions as I } from "../enums/displayConditions.js";
-import { useStripoApi as M } from "../services/stripoApi.js";
-import U from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as P } from "../stores/editor.js";
-import { dynamicContentToMergeTags as R } from "../utils/genericUtil.js";
-import H from "../package.json.js";
-const W = (c) => {
-  const { features: l, template: y } = v(), { handleError: u } = D(), { getToken: C, getCustomFonts: S } = M(), { handleEvent: E } = F(), { getStripoBlocksConfig: h } = B(), w = async (i, n = []) => {
-    var m, g, f;
-    const o = P(), { html: r, css: p } = i, { baseBlocks: s, extensions: t } = await h(), a = ((m = l.value) == null ? void 0 : m.displayConditions) ?? !0, k = ((g = l.value) == null ? void 0 : g.modulesDisabled) ?? !1, T = ((f = y.value) == null ? void 0 : f.forceRecreate) ?? !1;
+import { useActionsApi as A } from "./useActionsApi.js";
+import { useBlocksConfig as F } from "./useBlocksConfig.js";
+import { useConfig as D } from "./useConfig.js";
+import { useCustomInterfaceAppearance as I } from "./useCustomInterfaceAppearance.js";
+import { useStripoEventHandler as U } from "./useStripoEventHandler.js";
+import { useToaster as P } from "./useToaster.js";
+import { displayConditions as R } from "../enums/displayConditions.js";
+import { useStripoApi as H } from "../services/stripoApi.js";
+import O from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as S } from "../stores/editor.js";
+import { dynamicContentToMergeTags as q } from "../utils/genericUtil.js";
+import x from "../package.json.js";
+const ee = (C, c) => {
+  const { features: l, template: E } = D(), { handleError: u } = P(), { getToken: h, getCustomFonts: w, getSyncModulesStatus: b } = H(), { handleEvent: k } = U(), { getStripoBlocksConfig: T } = F(), V = async (i, n = [], r = !1) => {
+    var g, f, y;
+    const e = S(), { html: m, css: a } = i, { baseBlocks: o, extensions: d } = await T(), p = ((g = l.value) == null ? void 0 : g.displayConditions) ?? !0, B = ((f = l.value) == null ? void 0 : f.modulesDisabled) ?? !1, v = ((y = E.value) == null ? void 0 : y.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: c,
-        html: r,
-        css: p,
-        forceRecreate: T,
+        metadata: C,
+        html: m,
+        css: a,
+        forceRecreate: v,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -30,19 +30,20 @@ const W = (c) => {
         customAppearanceMergetags: !0,
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: U,
-        conditionsEnabled: a,
-        customConditionsEnabled: a,
-        conditionCategories: I,
+        customViewStyles: O,
+        conditionsEnabled: p,
+        customConditionsEnabled: p,
+        conditionCategories: R,
         enableXSSSecurity: !0,
-        modulesDisabled: k,
+        modulesDisabled: B,
+        syncModulesEnabled: r,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
         displayHiddenPreheader: !1,
         displayTitle: !1,
         displayUTM: !1,
         selectElementAfterDrop: !0,
-        ...s ? { baseBlocks: s } : {},
+        ...o ? { baseBlocks: o } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
@@ -50,68 +51,71 @@ const W = (c) => {
         },
         mergeTags: [
           {
-            entries: R(c.preselectedDynamicContentList)
+            entries: q(c.preselectedDynamicContentList)
           }
         ],
-        async onTokenRefreshRequest(e) {
+        async onTokenRefreshRequest(t) {
           try {
-            const d = await C();
-            e(d);
-          } catch (d) {
-            u(d, "Failed to refresh token");
+            const s = await h();
+            t(s);
+          } catch (s) {
+            u(s, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: e } = A(), { activateCustomViewStyles: d, updateTimerInClonedTemplate: V } = _();
-            e(), d(), V(), c.onReady(), o.isStripoInitialized = !0, o.loadingStatus = !1, setTimeout(() => {
-              o.hasChanges = !1;
+            const { importCss: t } = I(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: M } = A();
+            t(), s(), M(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+              e.hasChanges = !1;
             }, 1e3);
-          } catch (e) {
-            u(e, "Failed to load custom interface appearance");
+          } catch (t) {
+            u(t, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(e) {
-          o.isCodeEditorOpen = e;
+        onCodeEditorVisibilityChanged(t) {
+          e.isCodeEditorOpen = t;
         },
-        onEditorVisualModeChanged(e) {
-          o.editorVisualMode = e.toLowerCase();
+        onEditorVisualModeChanged(t) {
+          e.editorVisualMode = t.toLowerCase();
         },
-        onVersionHistoryVisibilityChanged(e) {
-          o.isVersionHistoryOpen = e;
+        onVersionHistoryVisibilityChanged(t) {
+          e.isVersionHistoryOpen = t;
         },
         onDataChanged() {
-          o.hasChanges = !0;
+          e.hasChanges = !0;
         },
-        onEvent: E,
+        onEvent: k,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
-        extensions: t
+        extensions: d
       }
     );
-  }, b = (i) => new Promise((n, o) => {
-    var a;
+  }, _ = (i) => new Promise((n, r) => {
+    var d;
     if (document.getElementById("UiEditorScript")) {
       i(), n();
       return;
     }
-    const r = H.guido, s = `https://email-static.useinsider.com/guido/${(a = r == null ? void 0 : r.stripo) == null ? void 0 : a.version}/UIEditor.js`, t = document.createElement("script");
-    t.id = "UiEditorScript", t.type = "module", t.src = s, t.onload = () => {
+    const e = x.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();
-    }, t.onerror = () => {
-      o(new Error(`Failed to load Stripo UIEditor script from S3: ${s}`));
-    }, document.body.appendChild(t);
+    }, o.onerror = () => {
+      r(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
+    }, document.body.appendChild(o);
   });
   return { initPlugin: async (i) => {
-    await b(async () => {
-      const n = await S();
-      await w(i, n);
+    await _(async () => {
+      const n = S(), [r, e] = await Promise.all([
+        w(),
+        b()
+      ]);
+      n.syncModulesEnabled = e, await V(i, r, e);
     });
   } };
 };
 export {
-  W as useStripo
+  ee as useStripo
 };

package/dist/composables/useStripoEventHandler.js

@@ -1,20 +1,35 @@
-import { useOnboardingStore as i } from "../stores/onboarding.js";
-const c = () => {
-  const e = {
-    block_dropped: ({ blockName: t }) => {
-      if (t === "BLOCK_TEXT") {
-        const n = i(), o = !n.shouldShowOnboarding("textBlockOnboarding"), r = n.isActive("textBlockOnboarding");
-        if (o || r)
+import { useStripoApi as i } from "../services/stripoApi.js";
+import { useEditorStore as u } from "../stores/editor.js";
+import { useOnboardingStore as l } from "../stores/onboarding.js";
+import { useUnsubscribeStore as b } from "../stores/unsubscribe.js";
+const v = () => {
+  const { updateSyncModule: d, getSyncModule: r } = i(), n = u(), s = b(), a = {
+    block_dropped: ({ blockName: e }) => {
+      if (e === "BLOCK_TEXT") {
+        const o = l(), t = !o.shouldShowOnboarding("textBlockOnboarding"), c = o.isActive("textBlockOnboarding");
+        if (t || c)
           return;
-        n.start("textBlockOnboarding");
+        o.start("textBlockOnboarding");
       }
+    },
+    module_saved: async (e) => {
+      n.syncModulesEnabled && (console.debug("[module_saved] Saved module data:", e), await d(e));
+    },
+    module_dropped: async (e) => {
+      if (!n.syncModulesEnabled)
+        return;
+      const { moduleId: o } = e, t = await r(o);
+      console.debug("[module_dropped] Sync module data:", t), t.unsubscriptionPreferencePages.length && await s.fetchTemplates();
+    },
+    module_updated: async (e) => {
+      n.syncModulesEnabled && (console.debug("[module_updated] Updated module data:", e), await d(e));
     }
   };
-  return { handleEvent: async (t, n) => {
-    const o = e[t];
-    o && await o(n);
+  return { handleEvent: async (e, o) => {
+    const t = a[e];
+    console.debug("Stripo Event: ", e, o), t && await t(o);
   } };
 };
 export {
-  c as useStripoEventHandler
+  v as useStripoEventHandler
 };

package/dist/composables/useSyncModuleExtractor.js

@@ -0,0 +1,45 @@
+import { UNSUBSCRIBE_SYNC_MODULE_TYPES as T } from "../enums/unsubscribe.js";
+import { DATA_ATTRIBUTES as p } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { useEditorStore as f } from "../stores/editor.js";
+const y = ".esd-synchronizable-module", A = '[esd-extension-block-id="unsubscribe-block"]', _ = "esd-custom-block-id", B = () => {
+  const d = f();
+  return { extractSyncModuleData: (E) => {
+    const S = {
+      unsubscribePayload: [],
+      stripoModules: []
+    };
+    if (!d.syncModulesEnabled)
+      return S;
+    const b = new DOMParser().parseFromString(E, "text/html").querySelectorAll(y), r = [], s = [];
+    return b.forEach((o) => {
+      const t = o.getAttribute(_);
+      if (!t)
+        return;
+      const n = o.querySelectorAll(A);
+      if (n.length === 0) {
+        s.push(Number(t));
+        return;
+      }
+      n.forEach((c) => {
+        const u = c.getAttribute(p.PAGE_LIST), i = c.getAttribute(p.PAGE_TYPE);
+        if (!u || !i)
+          return;
+        const m = parseInt(i), a = T[m];
+        if (!a)
+          return;
+        const l = u.split(",").map((e) => parseInt(e.trim())).filter((e) => !Number.isNaN(e));
+        l.length !== 0 && r.push({
+          stripoModuleId: t,
+          unsubscriptionPreferencePages: l,
+          type: a
+        });
+      });
+    }), {
+      unsubscribePayload: r,
+      stripoModules: s
+    };
+  } };
+};
+export {
+  B as useSyncModuleExtractor
+};

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,9 +1,9 @@
 import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
 function b(e, u, r, o) {
-  const s = `{{${e}_${u}_${r}}}`, t = `{{${e}_${u}_currency}}`;
-  return o === "before" ? `${t} ${s}` : `${s} ${t}`;
+  const n = `{{${e}_${u}_${r}}}`, t = `{{${e}_${u}_currency}}`;
+  return o === "before" ? `${t} ${n}` : `${n} ${t}`;
 }
-function p(e, u, r, o, s) {
+function p(e, u, r, o, n) {
   switch (u) {
     case "productImage": {
       const t = e.querySelector("img");
@@ -24,7 +24,7 @@ function p(e, u, r, o, s) {
       const t = e.querySelector("p");
       if (t) {
         const c = t.querySelector("strong") || t;
-        c.textContent = b(r, o, "price", s);
+        c.textContent = b(r, o, "price", n);
       }
       break;
     }
@@ -36,7 +36,7 @@ function p(e, u, r, o, s) {
           r,
           o,
           "original_price",
-          s
+          n
         ), t.setAttribute("product-attr", "discount");
       }
       break;
@@ -67,12 +67,12 @@ function p(e, u, r, o, s) {
   }
 }
 function $(e, u, r) {
-  e.querySelectorAll(".recommendation-product-row").forEach((s, t) => {
-    s.querySelectorAll("[data-attribute-type]").forEach((n) => {
-      const i = n.getAttribute("data-attribute-type") || "", a = n.querySelectorAll(".attribute-cell");
+  e.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
+    n.querySelectorAll("[data-attribute-type]").forEach((s) => {
+      const i = s.getAttribute("data-attribute-type") || "", a = s.querySelectorAll(".attribute-cell");
       a.length > 0 ? a.forEach((l) => {
         p(l, i, u, t, r);
-      }) : p(n, i, u, t, r);
+      }) : p(s, i, u, t, r);
     });
   });
 }
@@ -80,9 +80,9 @@ function S(e, u, r) {
   const o = e.querySelectorAll(".recommendation-product-row");
   if (!o.length)
     return;
-  const [s] = o, t = s.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  o.forEach((n, i) => {
-    n.querySelectorAll("[data-attribute-type]").forEach((l) => {
+  const [n] = o, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
+  o.forEach((s, i) => {
+    s.querySelectorAll("[data-attribute-type]").forEach((l) => {
       const f = l.getAttribute("data-attribute-type") || "";
       l.querySelectorAll(".attribute-cell").forEach((y, m) => {
         const A = i * c + m;
@@ -91,9 +91,14 @@ function S(e, u, r) {
     });
   });
 }
-function q(e, u) {
+function q(e, u, r) {
+  e.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
+    S(n, u, r);
+  });
+}
+function d(e, u) {
   const r = e.getAttribute("data-layout") || "grid", o = e.getAttribute("currency-alignment") || "after";
-  r === "list" ? $(e, u, o) : S(e, u, o);
+  r === "list" ? $(e, u, o) : q(e, u, o);
 }
 function h(e, u) {
   const r = e.match(/<!DOCTYPE[^>]*>/i);
@@ -104,10 +109,10 @@ function w(e) {
   const u = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(u, "text/html"), o = r.querySelectorAll(".ins-recommendation-v3-block-v2");
   if (!o.length)
     return e;
-  const { buildCampaignUrl: s } = _();
+  const { buildCampaignUrl: n } = _();
   return o.forEach((c) => {
-    const n = c.getAttribute("recommendation-id");
-    n && (s(n), q(c, n));
+    const s = c.getAttribute("recommendation-id");
+    s && (n(s), d(c, s));
   }), h(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {