@useinsider/guido 2.1.0-beta.bcfc012 → 2.1.0-beta.bd5d1ea

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,7 +12,7 @@ var t = function() {
   n,
   !1,
   null,
-  "16abb398"
+  "a26d7792"
 );
 const v = s.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,65 +1,64 @@
-import { defineComponent as z, defineAsyncComponent as M, ref as K, computed as _, watch as V, onMounted as j, onUnmounted as q } from "vue";
-import { provideGuidoActions as J } from "../composables/useGuidoActions.js";
-import { usePartner as Q } from "../composables/usePartner.js";
-import { useStripo as X } from "../composables/useStripo.js";
-import { useTimerClone as Y } from "../composables/useTimerClone.js";
-import { migrate as P } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as A } from "../enums/defaults.js";
-import Z from "./organisms/base/Toaster.vue.js";
-import $ from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import ee from "./organisms/header/HeaderWrapper.vue.js";
-import oe from "./organisms/LoadingWrapper.vue.js";
-import te from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import ne from "./organisms/unsubscribe/UnsubscribeWrapper.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 re } from "../services/stripoApi.js";
-import { useConfigStore as se } from "../stores/config.js";
-import { useDynamicContentStore as ce } from "../stores/dynamic-content.js";
-import { useEditorStore as ae } from "../stores/editor.js";
-import { usePreviewStore as ie } from "../stores/preview.js";
+import { useConfigStore as ce } from "../stores/config.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 { useUnsubscribeStore as de } from "../stores/unsubscribe.js";
-const Le = /* @__PURE__ */ z({
+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(N, { expose: W, emit: t }) {
-    const u = N, I = M(
+  setup(W, { expose: I, emit: t }) {
+    const v = W, O = _(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), O = M(
+    ), G = _(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), p = K(), a = ce(), v = de(), r = se();
-    r.init(u.config);
-    const i = ae(), G = ie(), s = _(() => i.hasChanges), { isTestPartner: H } = Q(), y = () => {
+    ), 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 = p.value) == null ? void 0 : e.handleSave(!0);
+      return (e = h.value) == null ? void 0 : e.handleSave(!0);
     }, {
       templateId: d,
-      userId: h,
-      partnerName: f,
-      productType: b,
-      username: S,
+      userId: b,
+      partnerName: S,
+      username: g,
       template: o,
       editor: n
-    } = r, c = (o == null ? void 0 : o.html) || "", g = (o == null ? void 0 : o.css) || "", m = (o == null ? void 0 : o.preselectedDynamicContent) || [], w = (n == null ? void 0 : n.savedModulesFolderName) || A.SAVED_MODULES, D = (n == null ? void 0 : n.defaultModulesFolderName) || A.DEFAULT_MODULES;
-    i.templateId = d;
-    const { initPlugin: E } = X({
+    } = 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: h,
-      username: S,
-      partnerName: f,
-      productType: b,
-      preselectedDynamicContentList: m,
+      userId: b,
+      username: g,
+      partnerName: S,
       savedModulesFolderName: w,
-      defaultModulesFolderName: D,
+      defaultModulesFolderName: E
+    }, C = {
+      preselectedDynamicContentList: l,
       onReady: () => {
         console.debug("guido:ready"), t("ready");
       }
-    }), { getDefaultTemplate: C } = re(), { cloneTimersOnSave: T, hasTimerBlocks: k } = Y(), x = _(() => {
+    }, { 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);
     });
-    J({
+    Q({
       onBack: () => {
         console.debug("guido:back"), t("back");
       },
@@ -67,55 +66,56 @@ const Le = /* @__PURE__ */ z({
         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 F = (e) => {
-      console.debug("dynamic-content:close", e), a.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, U = () => {
+    const L = (e) => {
+      console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    }, M = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    V(() => s.value, () => {
-      t("on-change", s.value);
+    j(() => c.value, () => {
+      t("on-change", c.value);
     });
-    const l = (e) => {
-      const L = e, { attribute: B, position: R } = L.detail;
-      console.debug("dynamic-content:open", L.detail), t("dynamic-content:open", B, R);
+    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 {
-        v.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
+        y.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
         let e = {
-          html: c && await P(c),
-          css: g
+          html: a && await A(a),
+          css: D
         };
-        e.html || (e = await C(), e.html = await P(e.html)), k(e.html) && (e.html = await T(e.html)), await E(e), a.selectedDynamicContentList = m;
+        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", l);
-    }), q(() => {
-      document.removeEventListener("dynamic-content:open", l);
+      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();
-    }), W({
+      s.reset();
+    }), I({
       dynamicContent: {
-        insert: F,
-        close: U
+        insert: L,
+        close: M
       },
-      hasChanges: s,
-      saveSilent: y
-    }), { __sfc: !0, PreviewContainer: I, OnboardingWrapper: O, headerWrapperRef: p, dynamicContentStore: a, unsubscribeStore: v, props: u, configStore: r, editorStore: i, previewStore: G, hasChanges: s, isTestPartner: H, saveSilent: y, templateId: d, userId: h, partnerName: f, productType: b, username: S, templateConfig: o, editorConfig: n, html: c, css: g, preselectedDynamicContentList: m, savedModulesFolderName: w, defaultModulesFolderName: D, emit: t, initPlugin: E, getDefaultTemplate: C, cloneTimersOnSave: T, hasTimerBlocks: k, noHeader: x, insertDynamicContent: F, closeDynamicContent: U, handleDynamicContentOpen: l, Toaster: Z, FilterSelectionDrawer: $, HeaderWrapper: ee, LoadingWrapper: oe, SaveAsTemplateDrawer: te, UnsubscribeWrapper: ne };
+      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 {
-  Le as default
+  Me as default
 };

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

@@ -1,10 +1,10 @@
-import e from "./Toaster.vue2.js";
+import n from "./Toaster.vue2.js";
 import s from "../../../_virtual/_plugin-vue2_normalizer.js";
 var r = function() {
-  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 } });
+  var o = this, e = o._self._c, t = o._self._setupProxy;
+  return e(t.InToasts, { ref: "toastRef", 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(
-  e,
+  n,
   r,
   a,
   !1,

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

@@ -1,15 +1,18 @@
-import { defineComponent as n, computed as e } from "vue";
-import { useToasterStore as i } from "../../../stores/toaster.js";
-import { InToasts as c } from "@useinsider/design-system-vue";
-const f = /* @__PURE__ */ n({
+import { defineComponent as a, ref as c, computed as i, onBeforeUnmount as u } from "vue";
+import { useToasterStore as f } from "../../../stores/toaster.js";
+import { InToasts as m } from "@useinsider/design-system-vue";
+const d = /* @__PURE__ */ a({
   __name: "Toaster",
-  setup(s) {
-    const t = i(), o = e(() => t.actionButton ? [{ text: t.actionButton.text }] : []);
-    return { __sfc: !0, store: t, actionButtonsConfig: o, handleActionClick: () => {
+  setup(p) {
+    const t = f(), o = c(null), r = i(() => t.actionButton ? [{ text: t.actionButton.text }] : []), s = () => {
       t.actionButton && t.actionButton.onClick(), t.hideToaster();
-    }, InToasts: c };
+    };
+    return u(() => {
+      var e, n;
+      t.$reset(), (n = (e = o.value) == null ? void 0 : e.$el) == null || n.remove();
+    }), { __sfc: !0, store: t, toastRef: o, actionButtonsConfig: r, handleActionClick: s, InToasts: m };
   }
 });
 export {
-  f as default
+  d as default
 };

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

@@ -1,16 +1,16 @@
-import i from "./EmailSizeIndicator.vue2.js";
+import s from "./EmailSizeIndicator.vue2.js";
 /* empty css                        */
 import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
 var o = function() {
-  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();
+  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();
 }, a = [], n = /* @__PURE__ */ r(
-  i,
+  s,
   o,
   a,
   !1,
   null,
-  "913a3417"
+  "079d2bf7"
 );
 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 { InTooltip as v, InProgress as f } from "@useinsider/design-system-vue";
+import { InTooltipV2 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, InTooltip: 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, InTooltipV2: v };
   }
 });
 export {

package/dist/components/organisms/header/EditorActions.vue.js

@@ -1,23 +1,21 @@
-import r from "./EditorActions.vue2.js";
+import l from "./EditorActions.vue2.js";
 /* empty css                   */
-import d from "../../../_virtual/_plugin-vue2_normalizer.js";
-var u = function() {
+import r from "../../../_virtual/_plugin-vue2_normalizer.js";
+var d = function() {
   var s, i, n, a;
   var e = this, o = e._self._c, t = e._self._setupProxy;
-  return o("div", { staticClass: "d-f editor-actions" }, [t.isVersionHistoryButtonVisible ? o(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : e._e(), o(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = (s = t.config) == null ? void 0 : s.features) != null && i.saveAsTemplate ? o(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : e._e(), (a = (n = t.config) == null ? void 0 : n.features) != null && a.testMessage ? o(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.testEmailClick } }) : e._e(), t.editorStore.isPreviewModeOpen ? e._e() : o(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(l) {
+  return o("div", { staticClass: "d-f editor-actions" }, [t.isVersionHistoryButtonVisible ? o(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : e._e(), o(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = (s = t.config) == null ? void 0 : s.features) != null && i.saveAsTemplate ? o(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : e._e(), (a = (n = t.config) == null ? void 0 : n.features) != null && a.testMessage ? o(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.testEmailClick } }) : e._e(), t.editorStore.isPreviewModeOpen ? e._e() : o(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(_) {
     return t.handleSave(!1);
-  } } }), t.isMigrationModalVisible ? o(t.MigrationConfirmModal, { on: { close: function(l) {
-    t.isMigrationModalVisible = !1;
-  }, confirm: t.handleMigrationConfirm } }) : e._e()], 1);
-}, p = [], c = /* @__PURE__ */ d(
-  r,
+  } } })], 1);
+}, u = [], p = /* @__PURE__ */ r(
+  l,
+  d,
   u,
-  p,
   !1,
   null,
-  "92b1be6c"
+  "17dd4d8b"
 );
-const v = c.exports;
+const v = p.exports;
 export {
   v as default
 };

package/dist/components/organisms/header/EditorActions.vue2.js

@@ -1,51 +1,41 @@
-import { defineComponent as T, ref as l, computed as m } from "vue";
-import { useConfig as w } from "../../../composables/useConfig.js";
-import { useExport as C } from "../../../composables/useExport.js";
-import { useTestEmailClick as O } from "../../../composables/useGuidoActions.js";
-import { useSave as A } from "../../../composables/useSave.js";
-import { useTranslations as b } from "../../../composables/useTranslations.js";
-import { useVersionHistoryApi as k } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as B } from "../../../stores/editor.js";
-import { useTemplateStore as j } from "../../../stores/template.js";
-import { getTooltipOptions as D } from "../../../utils/tooltipUtils.js";
-import { InButtonV2 as I } from "@useinsider/design-system-vue";
-import P from "./MigrationConfirmModal.vue.js";
-const Y = /* @__PURE__ */ T({
+import { defineComponent as g, ref as u, computed as f } from "vue";
+import { useConfig as E } from "../../../composables/useConfig.js";
+import { useExport as h } from "../../../composables/useExport.js";
+import { useTestEmailClick as w } from "../../../composables/useGuidoActions.js";
+import { useSave as x } from "../../../composables/useSave.js";
+import { useTranslations as T } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as O } from "../../../composables/useVersionHistoryApi.js";
+import { useEditorStore as A } from "../../../stores/editor.js";
+import { getTooltipOptions as C } from "../../../utils/tooltipUtils.js";
+import { InButtonV2 as k } from "@useinsider/design-system-vue";
+const J = /* @__PURE__ */ g({
   __name: "EditorActions",
-  setup(q, { expose: H }) {
-    const { config: u } = w(), { exportHtml: c } = C(), { save: p } = A(), { openVersionHistory: f, closeVersionHistory: v } = k(), t = B(), d = j(), s = b(), r = l(!1), i = l(!1), n = l(!1), S = O(), y = m(() => Object.values(d.migrations).some((o) => o > 0)), V = () => {
-      if (t.isVersionHistoryOpen) {
-        v();
+  setup(B, { expose: v }) {
+    const { config: n } = E(), { exportHtml: a } = h(), { save: l } = x(), { openVersionHistory: p, closeVersionHistory: c } = O(), o = A(), s = T(), r = u(!1), i = u(!1), d = w(), y = () => {
+      if (o.isVersionHistoryOpen) {
+        c();
         return;
       }
-      f();
-    }, h = async () => {
-      r.value = !0, await c(), r.value = !1;
-    }, _ = () => {
-      t.isSaveAsTemplateDrawerOpen = !0;
-    }, x = m(() => t.isVersionHistoryOpen ? s("newsletter.close-version-history") : s("newsletter.version-history")), E = m(
+      p();
+    }, H = async () => {
+      r.value = !0, await a(), r.value = !1;
+    }, V = () => {
+      o.isSaveAsTemplateDrawerOpen = !0;
+    }, S = f(() => o.isVersionHistoryOpen ? s("newsletter.close-version-history") : s("newsletter.version-history")), _ = f(
       () => {
-        var o, e;
-        return ((e = (o = u.value) == null ? void 0 : o.features) == null ? void 0 : e.versionHistory) && !t.isPreviewModeOpen;
+        var t, e;
+        return ((e = (t = n.value) == null ? void 0 : t.features) == null ? void 0 : e.versionHistory) && !o.isPreviewModeOpen;
       }
-    ), a = async (o) => {
-      i.value = !0, t.loadingStatus = !0;
-      const e = await p(o);
-      return i.value = !1, (o || !e) && (t.loadingStatus = !1), e;
-    }, g = (o) => {
-      if (!o && y.value) {
-        n.value = !0;
-        return;
-      }
-      a(o);
-    }, M = () => {
-      n.value = !1, a(!1);
+    ), m = async (t) => {
+      i.value = !0, o.loadingStatus = !0;
+      const e = await l(t);
+      return i.value = !1, (t || !e) && (o.loadingStatus = !1), e;
     };
-    return H({
-      handleSave: g
-    }), { __sfc: !0, config: u, exportHtml: c, save: p, openVersionHistory: f, closeVersionHistory: v, editorStore: t, templateStore: d, trans: s, isExporting: r, isSaving: i, isMigrationModalVisible: n, testEmailClick: S, hasMigrations: y, handleVersionHistory: V, handleExport: h, handleSaveAs: _, versionHistoryTooltipText: x, isVersionHistoryButtonVisible: E, executeSave: a, handleSave: g, handleMigrationConfirm: M, getTooltipOptions: D, InButtonV2: I, MigrationConfirmModal: P };
+    return v({
+      handleSave: m
+    }), { __sfc: !0, config: n, exportHtml: a, save: l, openVersionHistory: p, closeVersionHistory: c, editorStore: o, trans: s, isExporting: r, isSaving: i, testEmailClick: d, handleVersionHistory: y, handleExport: H, handleSaveAs: V, versionHistoryTooltipText: S, isVersionHistoryButtonVisible: _, handleSave: m, getTooltipOptions: C, InButtonV2: k };
   }
 });
 export {
-  Y as default
+  J as default
 };

package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue.js

@@ -16,7 +16,7 @@ var o = function() {
   i,
   !1,
   null,
-  "a86fc486"
+  "df672485"
 );
 const _ = c.exports;
 export {

package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue2.js

@@ -1,15 +1,15 @@
-import { defineComponent as f, ref as y, computed as n, watch as T } from "vue";
-import g from "../../wrappers/WpDrawer.vue.js";
-import { useToaster as S } from "../../../composables/useToaster.js";
-import { useTranslations as v } from "../../../composables/useTranslations.js";
-import { ToasterTypeOptions as B } from "../../../enums/toaster.js";
+import { defineComponent as g, ref as y, computed as n, watch as S } from "vue";
+import T from "../../wrappers/WpDrawer.vue.js";
+import { useToaster as v } from "../../../composables/useToaster.js";
+import { useTranslations as B } from "../../../composables/useTranslations.js";
+import { ToasterTypeOptions as C } from "../../../enums/toaster.js";
 import { useUnsubscribeStore as w } from "../../../stores/unsubscribe.js";
-import { InContainer as C } from "@useinsider/design-system-vue";
-import h from "./UnsubscribeBreadcrumb.vue.js";
-const E = /* @__PURE__ */ f({
+import { InContainer as h } from "@useinsider/design-system-vue";
+import U from "./UnsubscribeBreadcrumb.vue.js";
+const F = /* @__PURE__ */ g({
   __name: "UnsubscribePageSelection",
-  setup(_) {
-    const s = v(), e = w(), { showToaster: a } = S(), o = y(!1), c = n(() => e.isActiveTypeLastInCollection ? o.value ? s("unsubscription-preference.applying-changes") : s("statistics.apply") : s("products.select-and-continue")), i = n(() => e.pageSelectionUpdateStatus && e.isActiveTypeFirstInCollection ? s("products.cancel") : s("newsletter.back")), p = n(() => ({
+  setup(P) {
+    const s = B(), e = w(), { showToaster: a } = v(), o = y(!1), c = n(() => e.isActiveTypeLastInCollection ? o.value ? s("unsubscription-preference.applying-changes") : s("statistics.apply") : s("products.select-and-continue")), i = n(() => e.pageSelectionUpdateStatus && e.isActiveTypeFirstInCollection ? s("products.cancel") : s("newsletter.back")), u = n(() => ({
       primaryButton: {
         styling: "solid",
         type: "primary",
@@ -23,28 +23,28 @@ const E = /* @__PURE__ */ f({
         labelText: i.value,
         disabledStatus: o.value
       }
-    })), u = (t) => e.getSelectedTemplateByActiveType === t ? "bor-w-3 bor-s-s bor-c-7" : "bor-w-1 bor-s-s bor-c-6", r = (t) => {
+    })), p = (t) => e.getSelectedTemplateByActiveType === t ? "bor-w-3 bor-s-s bor-c-7" : "bor-w-1 bor-s-s bor-c-6", r = (t) => {
       e.pageSelectionDrawerStatus = !1, t && setTimeout(() => {
         t();
       }, 500);
-    }, m = () => {
+    }, d = () => {
       if (e.isActiveTypeFirstInCollection) {
         r(), e.pageSelectionUpdateStatus || (e.typeSelectionDrawerStatus = !0);
         return;
       }
       e.setPreviousType();
-    }, d = () => {
+    }, m = () => {
       if (e.isActiveTypeLastInCollection) {
         o.value = !0;
-        const t = e.selectedCollectionType, l = e.getSelectedTemplatesByCollection(t);
-        e.addUnsubscribePages(l), document.dispatchEvent(new CustomEvent("unsubscribe:select", {
+        const t = e.selectedCollectionType, l = e.getSelectedTemplatesByCollection(t), f = e.getSelectedUnsubscribePagesByCollection(t);
+        e.removeUnsubscribePages(f), e.addUnsubscribePages(l), document.dispatchEvent(new CustomEvent("unsubscribe:select", {
           detail: {
             collectionType: t,
             selectedPages: l
           }
         })), r(() => {
           o.value = !1, a({
-            type: B.Success,
+            type: C.Success,
             message: s("global-unsubscribe.pages-were-attached")
           });
         });
@@ -54,11 +54,11 @@ const E = /* @__PURE__ */ f({
     }, b = (t) => {
       e.setSelectedTemplate(t);
     };
-    return T(() => e.pageSelectionDrawerStatus, (t) => {
+    return S(() => e.pageSelectionDrawerStatus, (t) => {
       t && e.pageSelectionUpdateStatus && e.fetchTemplates();
-    }), { __sfc: !0, trans: s, unsubscribeStore: e, showToaster: a, isApplying: o, getPrimaryButtonText: c, getCancelOrBackButtonText: i, footerButtonGroupOptions: p, getBorderClass: u, closeModal: r, handleBack: m, handleSave: d, selectTemplate: b, WpDrawer: g, InContainer: C, UnsubscribeBreadcrumb: h };
+    }), { __sfc: !0, trans: s, unsubscribeStore: e, showToaster: a, isApplying: o, getPrimaryButtonText: c, getCancelOrBackButtonText: i, footerButtonGroupOptions: u, getBorderClass: p, closeModal: r, handleBack: d, handleSave: m, selectTemplate: b, WpDrawer: T, InContainer: h, UnsubscribeBreadcrumb: U };
   }
 });
 export {
-  E as default
+  F as default
 };

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
 };