@useinsider/guido 2.1.0-beta.ff1bc98 → 2.1.0-beta.ff9b498

package/dist/composables/useHtmlValidator.js

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

package/dist/composables/useRecommendation.js

@@ -1,60 +1,27 @@
-import { RecommendationFeedSourceMaps as g, URLS as p } from "../enums/extensions/recommendationBlock.js";
-import { MinDeviceViewport as R, DefaultPadding as b } from "../enums/recommendation.js";
-import { useRecommendationExtensionStore as l } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { generateCompleteFilterQuery as x } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
-import { useConfigStore as C } from "../stores/config.js";
-const N = () => ({
+import { MinDeviceViewport as r, DefaultPadding as c } from "../enums/recommendation.js";
+const m = () => ({
   calculateCardWidth: ({
-    mobileLeftPadding: i,
-    mobileRightPadding: n,
-    cardsInRow: o,
-    unresponsive: a
+    mobileLeftPadding: e,
+    mobileRightPadding: a,
+    cardsInRow: n,
+    unresponsive: i
   }) => {
-    const r = a ? o : 1, e = i + n + (r - 1) * b;
-    return (R - e) / r;
+    const t = i ? n : 1, o = e + a + (t - 1) * c;
+    return (r - o) / t;
   },
-  getRecommendationCampaignData: (i) => {
-    const n = l(), o = Number(i), a = n.blockStates[o];
-    if (!a)
-      return {
-        textTrimming: !1,
-        orientation: "vertical",
-        mobileLeftPadding: 0,
-        mobileRightPadding: 0,
-        cardsInRow: 2,
-        unresponsive: !1,
-        priceBeforeTextValue: "",
-        priceAfterTextValue: "",
-        discountBeforeTextValue: "",
-        discountAfterTextValue: ""
-      };
-    const { recommendationConfigs: r } = a, e = r.orientation === "grid" ? "vertical" : "horizontal";
-    return {
-      textTrimming: r.textTrimming,
-      orientation: e,
-      mobileLeftPadding: 0,
-      mobileRightPadding: 0,
-      cardsInRow: r.cardsInRow,
-      unresponsive: r.unresponsive,
-      priceBeforeTextValue: "",
-      priceAfterTextValue: "",
-      discountBeforeTextValue: "",
-      discountAfterTextValue: ""
-    };
-  },
-  buildCampaignUrl: (i) => {
-    var d;
-    const n = l(), o = C(), a = Number(i), r = n.blockStates[a];
-    if (!r)
-      return "";
-    const { recommendationConfigs: e } = r, u = ((d = g.find((s) => s.key === e.strategy)) == null ? void 0 : d.path) || "", t = new URLSearchParams();
-    t.set("locale", e.language), t.set("currency", e.currencySettings.value), t.set("partnerName", o.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", o.variationId), e.strategy === "manualMerchandising" ? t.set("productId", e.productIds.join(",")) : e.strategy === "similarViewed" && t.set("productId", "{itemId}");
-    const f = e.filters.filter((s) => s.isValid), c = x(f);
-    c && t.set("filter", c), e.shuffleProducts && t.set("shuffle", "true");
-    const m = `${p.RECOMMENDATION_API_URL}/v2/${u}?${t.toString()}`;
-    return n.recommendationCampaignUrls[i] = m, m;
-  }
+  getRecommendationCampaignData: (e) => (console.debug(e), {
+    textTrimming: !1,
+    orientation: "vertical",
+    mobileLeftPadding: 0,
+    mobileRightPadding: 0,
+    cardsInRow: 2,
+    unresponsive: !1,
+    priceBeforeTextValue: "",
+    priceAfterTextValue: "",
+    discountBeforeTextValue: "",
+    discountAfterTextValue: ""
+  })
 });
 export {
-  N as useRecommendation
+  m as useRecommendation
 };

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 u } from "./useConfig.js";
+import { useSaveStart as d, useSaveComplete as p } from "./useGuidoActions.js";
+import { useSyncModuleExtractor as f } from "./useSyncModuleExtractor.js";
+import { useStripoApi as v } from "../services/stripoApi.js";
+import { useTemplatePreparation as S } from "../utils/templatePreparation.js";
+import { useHtmlValidator as x } from "./useHtmlValidator.js";
+const E = () => {
+  const o = d(), s = p(), { validateHtml: i } = x(), { callbacks: a } = u(), { extractSyncModuleUnsubscribeData: r } = f(), { setSyncModuleUnsubscriptionPages: n } = v();
+  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 } = S(), t = await c();
+    if (!await i(t.compiledHtml, t.dynamicContentList, !0) || (e = a.value) != null && e.externalValidation && !await a.value.externalValidation(t))
+      return;
+    const m = r(t.rawHtml);
+    return await n(m), l || s(t), t;
   } };
 };
 export {
-  w as useSave
+  E 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 M } from "./useActionsApi.js";
+import { useBlocksConfig as A } from "./useBlocksConfig.js";
+import { useConfig as F } from "./useConfig.js";
+import { useCustomInterfaceAppearance as D } from "./useCustomInterfaceAppearance.js";
+import { useStripoEventHandler as I } from "./useStripoEventHandler.js";
+import { useToaster as U } from "./useToaster.js";
+import { displayConditions as P } from "../enums/displayConditions.js";
+import { useStripoApi as R } from "../services/stripoApi.js";
+import H from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as S } from "../stores/editor.js";
+import { dynamicContentToMergeTags as O } from "../utils/genericUtil.js";
+import q from "../package.json.js";
+const Z = (c) => {
+  const { features: l, template: C } = F(), { handleError: u } = U(), { getToken: E, getCustomFonts: h, getSyncModulesStatus: w } = R(), { handleEvent: b } = I(), { getStripoBlocksConfig: k } = A(), T = async (i, n = [], r = !1) => {
+    var g, f, y;
+    const e = S(), { html: p, css: a } = i, { baseBlocks: t, extensions: d } = await k(), m = ((g = l.value) == null ? void 0 : g.displayConditions) ?? !0, _ = ((f = l.value) == null ? void 0 : f.modulesDisabled) ?? !1, B = ((y = C.value) == null ? void 0 : y.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: c,
-        html: r,
-        css: p,
-        forceRecreate: T,
+        html: p,
+        css: a,
+        forceRecreate: B,
         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: H,
+        conditionsEnabled: m,
+        customConditionsEnabled: m,
+        conditionCategories: P,
         enableXSSSecurity: !0,
-        modulesDisabled: k,
+        modulesDisabled: _,
+        syncModulesEnabled: r,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
         displayHiddenPreheader: !1,
         displayTitle: !1,
         displayUTM: !1,
         selectElementAfterDrop: !0,
-        ...s ? { baseBlocks: s } : {},
+        ...t ? { baseBlocks: t } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
@@ -50,68 +51,71 @@ const W = (c) => {
         },
         mergeTags: [
           {
-            entries: R(c.preselectedDynamicContentList)
+            entries: O(c.preselectedDynamicContentList)
           }
         ],
-        async onTokenRefreshRequest(e) {
+        async onTokenRefreshRequest(o) {
           try {
-            const d = await C();
-            e(d);
-          } catch (d) {
-            u(d, "Failed to refresh token");
+            const s = await E();
+            o(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: o } = D(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: v } = M();
+            o(), s(), v(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+              e.hasChanges = !1;
             }, 1e3);
-          } catch (e) {
-            u(e, "Failed to load custom interface appearance");
+          } catch (o) {
+            u(o, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(e) {
-          o.isCodeEditorOpen = e;
+        onCodeEditorVisibilityChanged(o) {
+          e.isCodeEditorOpen = o;
         },
-        onEditorVisualModeChanged(e) {
-          o.editorVisualMode = e.toLowerCase();
+        onEditorVisualModeChanged(o) {
+          e.editorVisualMode = o.toLowerCase();
         },
-        onVersionHistoryVisibilityChanged(e) {
-          o.isVersionHistoryOpen = e;
+        onVersionHistoryVisibilityChanged(o) {
+          e.isVersionHistoryOpen = o;
         },
         onDataChanged() {
-          o.hasChanges = !0;
+          e.hasChanges = !0;
         },
-        onEvent: E,
+        onEvent: b,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
-        extensions: t
+        extensions: d
       }
     );
-  }, b = (i) => new Promise((n, o) => {
-    var a;
+  }, V = (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 = q.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, t = document.createElement("script");
+    t.id = "UiEditorScript", t.type = "module", t.src = a, t.onload = () => {
       i(), n();
     }, t.onerror = () => {
-      o(new Error(`Failed to load Stripo UIEditor script from S3: ${s}`));
+      r(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
     }, document.body.appendChild(t);
   });
   return { initPlugin: async (i) => {
-    await b(async () => {
-      const n = await S();
-      await w(i, n);
+    await V(async () => {
+      const n = S(), [r, e] = await Promise.all([
+        h(),
+        w()
+      ]);
+      n.syncModulesEnabled = e, await T(i, r, e);
     });
   } };
 };
 export {
-  W as useStripo
+  Z 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,33 @@
+import { UNSUBSCRIBE_SYNC_MODULE_TYPES as S } from "../enums/unsubscribe.js";
+import { DATA_ATTRIBUTES as a } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { useEditorStore as d } from "../stores/editor.js";
+const T = ".esd-synchronizable-module", m = '[esd-extension-block-id="unsubscribe-block"]', A = "esd-custom-block-id", M = () => {
+  const l = d();
+  return { extractSyncModuleUnsubscribeData: (p) => {
+    if (!l.syncModulesEnabled)
+      return [];
+    const E = new DOMParser().parseFromString(p, "text/html").querySelectorAll(T), e = [];
+    return E.forEach((r) => {
+      const s = r.getAttribute(A);
+      if (!s)
+        return;
+      r.querySelectorAll(m).forEach((o) => {
+        const n = o.getAttribute(a.PAGE_LIST), c = o.getAttribute(a.PAGE_TYPE);
+        if (!n || !c)
+          return;
+        const b = parseInt(c), u = S[b];
+        if (!u)
+          return;
+        const i = n.split(",").map((t) => parseInt(t.trim())).filter((t) => !Number.isNaN(t));
+        i.length !== 0 && e.push({
+          stripoModuleId: s,
+          unsubscriptionPreferencePages: i,
+          type: u
+        });
+      });
+    }), e;
+  } };
+};
+export {
+  M as useSyncModuleExtractor
+};