@useinsider/guido 2.1.0-beta.37311dd → 2.1.0-beta.37f9328

package/README.md

@@ -1,6 +1,8 @@
 <p align="center">
   <a href="https://www.youtube.com/shorts/Y0RwBeMezL4" target="_blank" rel="noopener noreferrer">
-    <img width="180" src="./public/guido.png" alt="Guido logo">
+    <img width="180" 
+      src="https://web-image.useinsider.com/guido/defaultImageLibrary/iUH0liTK0d2YDsVB5LDN1770169173.jpg"  
+      alt="Guido logo">
   </a>
 </p>
 
@@ -172,11 +174,48 @@ const config: GuidoConfigInput = {
 | `dynamic-content:open` | `DynamicContent \| null` | User wants to insert dynamic content |
 | `back` | - | Back button clicked |
 | `save:start` | - | Save process started |
-| `save:complete` | `Template` | Save completed successfully |
+| `save:complete` | `SavedTemplateDetails` | Save completed successfully (includes `metadata`) |
 | `on-change` | - | Template was modified |
 | `test-email:click` | - | Test email button clicked |
 | `onboarding-finished` | - | Onboarding popup dismissed |
 
+### `save:complete` Payload
+
+The `save:complete` event emits a `SavedTemplateDetails` object containing the compiled template data along with editor `metadata`:
+
+```typescript
+interface SavedTemplateDetails {
+  dynamicContentList: DynamicContent[];
+  compiledHtml: string;
+  rawHtml: string;
+  css: string;
+  ampHtml: string;
+  ampErrors: string[];
+  modules: number[];
+  recommendation: {
+    campaignUrls: Record<string, string>;
+    configs: Record<string, string>;
+  };
+  unsubscribe: {
+    status: boolean;
+    config: number[];
+  };
+  metadata: Metadata;
+}
+
+interface Metadata {
+  emailId: string;
+  partnerName?: string;
+  productType?: number;
+  userId: string;
+  username?: string;
+  savedModulesFolderName?: string;
+  defaultModulesFolderName?: string;
+}
+```
+
+> ⚠️ **Important:** The `metadata` object in the `save:complete` payload must be passed directly into your `templateConfig` / `stripoConfig` object while saving. This ensures the email-service receives the correct version of sync modules features
+
 ---
 
 ## Exposed Methods

package/dist/components/Guido.vue.js

@@ -12,9 +12,9 @@ var t = function() {
   n,
   !1,
   null,
-  "f3f58806"
+  "a26d7792"
 );
-const u = s.exports;
+const v = s.exports;
 export {
-  u as default
+  v as default
 };

package/dist/components/Guido.vue2.js

@@ -1,66 +1,64 @@
-import { defineComponent as V, defineAsyncComponent as P, ref as A, computed as N, watch as j, onMounted as J, onUnmounted as Q } from "vue";
-import { provideGuidoActions as X } from "../composables/useGuidoActions.js";
-import { usePartner as Y } from "../composables/usePartner.js";
-import { useStripo as Z } from "../composables/useStripo.js";
-import { useTimerClone as $ } from "../composables/useTimerClone.js";
-import { migrate as W } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as I } from "../enums/defaults.js";
-import ee from "./organisms/base/Toaster.vue.js";
-import oe from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import te from "./organisms/header/HeaderWrapper.vue.js";
-import ne from "./organisms/LoadingWrapper.vue.js";
-import re from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import { defineComponent as K, defineAsyncComponent as _, ref as V, computed as P, watch as j, onMounted as q, onUnmounted as J } from "vue";
+import { provideGuidoActions as Q } from "../composables/useGuidoActions.js";
+import { usePartner as X } from "../composables/usePartner.js";
+import { useStripo as Y } from "../composables/useStripo.js";
+import { useTimerClone as Z } from "../composables/useTimerClone.js";
+import { migrate as A } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as N } from "../enums/defaults.js";
+import $ from "./organisms/base/Toaster.vue.js";
+import ee from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import oe from "./organisms/header/HeaderWrapper.vue.js";
+import te from "./organisms/LoadingWrapper.vue.js";
+import ne from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
 import se from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as ae } from "../services/stripoApi.js";
+import { useStripoApi as re } from "../services/stripoApi.js";
 import { useConfigStore as ce } from "../stores/config.js";
-import { useDynamicContentStore as ie } from "../stores/dynamic-content.js";
-import { useEditorStore as de } from "../stores/editor.js";
+import { useDynamicContentStore as ae } from "../stores/dynamic-content.js";
+import { useEditorStore as ie } from "../stores/editor.js";
 import { usePreviewStore as me } from "../stores/preview.js";
-import { useToasterStore as le } from "../stores/toaster.js";
-import { useUnsubscribeStore as ue } from "../stores/unsubscribe.js";
-const Ae = /* @__PURE__ */ V({
+import { useUnsubscribeStore as de } from "../stores/unsubscribe.js";
+const Me = /* @__PURE__ */ K({
   __name: "Guido",
   props: {
     config: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(O, { expose: G, emit: t }) {
-    const p = O, H = P(
+  setup(W, { expose: I, emit: t }) {
+    const v = W, O = _(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), R = P(
+    ), G = _(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), v = A(), i = ie(), f = ue(), y = le(), r = ce();
-    r.init(p.config);
-    const d = de(), x = me(), s = N(() => d.hasChanges), { isTestPartner: B } = Y(), h = () => {
+    ), h = V(), i = ae(), y = de(), s = ce();
+    s.init(v.config);
+    const m = ie(), H = me(), c = P(() => m.hasChanges), { isTestPartner: x } = X(), f = () => {
       var e;
-      return (e = v.value) == null ? void 0 : e.handleSave(!0);
+      return (e = h.value) == null ? void 0 : e.handleSave(!0);
     }, {
-      templateId: m,
-      userId: S,
-      partnerName: b,
-      productType: g,
-      username: w,
+      templateId: d,
+      userId: b,
+      partnerName: S,
+      username: g,
       template: o,
       editor: n
-    } = r, a = (o == null ? void 0 : o.html) || "", D = (o == null ? void 0 : o.css) || "", l = (o == null ? void 0 : o.preselectedDynamicContent) || [], E = (n == null ? void 0 : n.savedModulesFolderName) || I.SAVED_MODULES, C = (n == null ? void 0 : n.defaultModulesFolderName) || I.DEFAULT_MODULES;
-    d.templateId = m;
-    const c = A(!1), { initPlugin: T } = Z({
-      emailId: m,
-      userId: S,
-      username: w,
-      partnerName: b,
-      productType: g,
+    } = s, a = (o == null ? void 0 : o.html) || "", D = (o == null ? void 0 : o.css) || "", l = (o == null ? void 0 : o.preselectedDynamicContent) || [], w = (n == null ? void 0 : n.savedModulesFolderName) || N.SAVED_MODULES, E = (n == null ? void 0 : n.defaultModulesFolderName) || N.DEFAULT_MODULES;
+    m.templateId = d;
+    const u = {
+      emailId: d,
+      userId: b,
+      username: g,
+      partnerName: S,
+      savedModulesFolderName: w,
+      defaultModulesFolderName: E
+    }, C = {
       preselectedDynamicContentList: l,
-      savedModulesFolderName: E,
-      defaultModulesFolderName: C,
       onReady: () => {
         console.debug("guido:ready"), t("ready");
       }
-    }), { getDefaultTemplate: _ } = ae(), { cloneTimersOnSave: k, hasTimerBlocks: F } = $(), q = N(() => {
+    }, { initPlugin: T } = Y(u, C), { getDefaultTemplate: k } = re(), { cloneTimersOnSave: F, hasTimerBlocks: U } = Z(), B = P(() => {
       var e;
-      return !((e = r.ui) != null && e.showHeader);
+      return !((e = s.ui) != null && e.showHeader);
     });
-    X({
+    Q({
       onBack: () => {
         console.debug("guido:back"), t("back");
       },
@@ -68,56 +66,56 @@ const Ae = /* @__PURE__ */ V({
         console.debug("guido:save:start"), t("save:start");
       },
       onSaveComplete: (e) => {
-        console.debug("guido:save:complete", e), t("save:complete", e);
+        const r = { ...e, metadata: u };
+        console.debug("guido:save:complete", r), t("save:complete", r);
       },
       onTestEmailClick: () => {
         console.debug("guido:test-email:click"), t("test-email:click");
       }
     });
-    const U = (e) => {
+    const L = (e) => {
       console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, L = () => {
+    }, M = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    j(() => s.value, () => {
-      t("on-change", s.value);
+    j(() => c.value, () => {
+      t("on-change", c.value);
     });
-    const u = (e) => {
-      const M = e, { attribute: z, position: K } = M.detail;
-      console.debug("dynamic-content:open", M.detail), t("dynamic-content:open", z, K);
+    const p = (e) => {
+      const r = e, { attribute: R, position: z } = r.detail;
+      console.debug("dynamic-content:open", r.detail), t("dynamic-content:open", R, z);
     };
-    return J(async () => {
+    return q(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
-        f.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
+        y.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
         let e = {
-          html: a && await W(a),
+          html: a && await A(a),
           css: D
         };
-        e.html || (e = await _(), e.html = await W(e.html)), F(e.html) && (e.html = await k(e.html)), await T(e), i.selectedDynamicContentList = l;
+        e.html || (e = await k(), e.html = await A(e.html)), U(e.html) && (e.html = await F(e.html)), await T(e), i.selectedDynamicContentList = l;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
-      document.addEventListener("dynamic-content:open", u), c.value = !0;
-    }), Q(() => {
-      var e;
-      c.value && (y.hideToaster(), (e = document.querySelector("#guido__toaster")) == null || e.remove()), c.value = !1, document.removeEventListener("dynamic-content:open", u);
+      document.addEventListener("dynamic-content:open", p);
+    }), J(() => {
+      document.removeEventListener("dynamic-content:open", p);
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-      r.reset();
-    }), G({
+      s.reset();
+    }), I({
       dynamicContent: {
-        insert: U,
-        close: L
+        insert: L,
+        close: M
       },
-      hasChanges: s,
-      saveSilent: h
-    }), { __sfc: !0, PreviewContainer: H, OnboardingWrapper: R, headerWrapperRef: v, dynamicContentStore: i, unsubscribeStore: f, toasterStore: y, props: p, configStore: r, editorStore: d, previewStore: x, hasChanges: s, isTestPartner: B, saveSilent: h, templateId: m, userId: S, partnerName: b, productType: g, username: w, templateConfig: o, editorConfig: n, html: a, css: D, preselectedDynamicContentList: l, savedModulesFolderName: E, defaultModulesFolderName: C, editorReady: c, emit: t, initPlugin: T, getDefaultTemplate: _, cloneTimersOnSave: k, hasTimerBlocks: F, noHeader: q, insertDynamicContent: U, closeDynamicContent: L, handleDynamicContentOpen: u, Toaster: ee, FilterSelectionDrawer: oe, HeaderWrapper: te, LoadingWrapper: ne, SaveAsTemplateDrawer: re, UnsubscribeWrapper: se };
+      hasChanges: c,
+      saveSilent: f
+    }), { __sfc: !0, PreviewContainer: O, OnboardingWrapper: G, headerWrapperRef: h, dynamicContentStore: i, unsubscribeStore: y, props: v, configStore: s, editorStore: m, previewStore: H, hasChanges: c, isTestPartner: x, saveSilent: f, templateId: d, userId: b, partnerName: S, username: g, templateConfig: o, editorConfig: n, html: a, css: D, preselectedDynamicContentList: l, savedModulesFolderName: w, defaultModulesFolderName: E, emit: t, metadata: u, options: C, initPlugin: T, getDefaultTemplate: k, cloneTimersOnSave: F, hasTimerBlocks: U, noHeader: B, insertDynamicContent: L, closeDynamicContent: M, handleDynamicContentOpen: p, Toaster: $, FilterSelectionDrawer: ee, HeaderWrapper: oe, LoadingWrapper: te, SaveAsTemplateDrawer: ne, UnsubscribeWrapper: se };
   }
 });
 export {
-  Ae as default
+  Me as default
 };

package/dist/components/organisms/base/Toaster.vue.js

@@ -1,17 +1,17 @@
-import n from "./Toaster.vue2.js";
+import e from "./Toaster.vue2.js";
 import s from "../../../_virtual/_plugin-vue2_normalizer.js";
 var r = function() {
-  var o = this, e = o._self._c, t = o._self._setupProxy;
-  return e(t.InToasts, { attrs: { id: "guido__toaster", "action-buttons-config": t.actionButtonsConfig, status: t.store.status, text: t.store.text, type: t.store.type }, on: { actionButtonClick0: t.handleActionClick } });
+  var o = this, n = o._self._c, t = o._self._setupProxy;
+  return n(t.InToasts, { attrs: { "action-buttons-config": t.actionButtonsConfig, status: t.store.status, text: t.store.text, type: t.store.type }, on: { actionButtonClick0: t.handleActionClick } });
 }, a = [], _ = /* @__PURE__ */ s(
-  n,
+  e,
   r,
   a,
   !1,
   null,
   null
 );
-const f = _.exports;
+const l = _.exports;
 export {
-  f as default
+  l as default
 };

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js

@@ -1,16 +1,16 @@
-import s from "./EmailSizeIndicator.vue2.js";
+import i from "./EmailSizeIndicator.vue2.js";
 /* empty css                        */
 import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
 var o = function() {
-  var e = this, i = e._self._c, t = e._self._setupProxy;
-  return t.previewStore.previewHtml ? i("div", { staticClass: "d-f a-i-c j-c-c" }, [i(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), i(t.InTooltipV2, { attrs: { id: "email-size-tooltip", "icon-status": "", "static-position": "bottom center", "dynamic-position": !1, text: t.trans("email-editor.preview-design-size-tooltip") } })], 1) : e._e();
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return e.previewStore.previewHtml ? s("div", { staticClass: "d-f a-i-c j-c-c" }, [s(e.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: e.htmlSize, "max-value": e.MAX_EMAIL_SIZE_IN_KB, type: e.progress.type, value: e.progress.value } }), s(e.InTooltip, { staticClass: "d-f ml-1", attrs: { id: "email-size-tooltip", align: "center", position: "bottom", text: e.trans("email-editor.preview-design-size-tooltip") } })], 1) : t._e();
 }, a = [], n = /* @__PURE__ */ r(
-  s,
+  i,
   o,
   a,
   !1,
   null,
-  "079d2bf7"
+  "913a3417"
 );
 const m = n.exports;
 export {

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent as c, ref as n, computed as l, watch as u } from "vue";
 import { useTranslations as p } from "../../../../composables/useTranslations.js";
 import { usePreviewStore as _ } from "../../../../stores/preview.js";
-import { InTooltipV2 as v, InProgress as f } from "@useinsider/design-system-vue";
+import { InTooltip as v, InProgress as f } from "@useinsider/design-system-vue";
 const S = /* @__PURE__ */ c({
   __name: "EmailSizeIndicator",
   setup(w) {
@@ -17,7 +17,7 @@ const S = /* @__PURE__ */ c({
     }, i = p();
     return u(() => t.previewHtml, () => {
       r();
-    }, { immediate: !0 }), { __sfc: !0, previewStore: t, MAX_EMAIL_SIZE_IN_KB: o, htmlKB: e, progress: s, htmlSize: a, calculateProgress: r, trans: i, InProgress: f, InTooltipV2: v };
+    }, { immediate: !0 }), { __sfc: !0, previewStore: t, MAX_EMAIL_SIZE_IN_KB: o, htmlKB: e, progress: s, htmlSize: a, calculateProgress: r, trans: i, InProgress: f, InTooltip: v };
   }
 });
 export {

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,27 @@
-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 P } from "./useStripoEventHandler.js";
+import { useToaster as U } from "./useToaster.js";
+import { localePatch as R } from "../config/i18n/index.js";
+import { displayConditions as H } from "../enums/displayConditions.js";
+import { useStripoApi as O } from "../services/stripoApi.js";
+import q from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as S } from "../stores/editor.js";
+import { dynamicContentToMergeTags as x } from "../utils/genericUtil.js";
+import L from "../package.json.js";
+const oe = (C, c) => {
+  const { features: l, template: E } = D(), { handleError: u } = U(), { getToken: h, getCustomFonts: w, getSyncModulesStatus: b } = O(), { handleEvent: k } = P(), { getStripoBlocksConfig: T } = F(), V = async (i, n = [], r = !1) => {
+    var f, g, y;
+    const e = S(), { html: m, css: a } = i, { baseBlocks: o, extensions: d } = await T(), p = ((f = l.value) == null ? void 0 : f.displayConditions) ?? !0, B = ((g = l.value) == null ? void 0 : g.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 +31,20 @@ const W = (c) => {
         customAppearanceMergetags: !0,
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: U,
-        conditionsEnabled: a,
-        customConditionsEnabled: a,
-        conditionCategories: I,
+        customViewStyles: q,
+        conditionsEnabled: p,
+        customConditionsEnabled: p,
+        conditionCategories: H,
         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 +52,72 @@ const W = (c) => {
         },
         mergeTags: [
           {
-            entries: R(c.preselectedDynamicContentList)
+            entries: x(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,
+        localePatch: R
       }
     );
-  }, 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 = L.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
+  oe 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
 };