@useinsider/guido 1.4.4-beta.db9794f → 1.4.4-beta.dc62a4d

package/dist/components/Guido.vue.js

@@ -12,7 +12,7 @@ var t = function() {
   n,
   !1,
   null,
-  "e2f12ef7"
+  "7f89e9ff"
 );
 const u = s.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,24 +1,23 @@
-import { defineComponent as z, defineAsyncComponent as L, ref as K, computed as W, watch as j, onMounted as q, onUnmounted as J } from "vue";
-import { provideGuidoActions as Q } from "../composables/useGuidoActions.js";
-import { usePartner as V } from "../composables/usePartner.js";
-import { useStripo as X } from "../composables/useStripo.js";
-import { useTimerClone as Y } from "../composables/useTimerClone.js";
-import { migrate as _ } from "../config/migrator/index.js";
-import { DefaultUsername as Z, DefaultMessageType as $, DefaultGuidoConfig as ee } from "../enums/defaults.js";
-import oe from "./organisms/base/Toaster.vue.js";
-import te from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import ne from "./organisms/header/HeaderWrapper.vue.js";
-import re from "./organisms/LoadingWrapper.vue.js";
-import ie 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 { useConfigStore as ce } from "../stores/config.js";
-import { useDynamicContentStore as me } from "../stores/dynamic-content.js";
-import { useEditorStore as de } from "../stores/editor.js";
-import { usePreviewStore as le } from "../stores/preview.js";
-import { useUnsubscribeStore as ue } from "../stores/unsubscribe.js";
-import pe from "../node_modules/lodash-es/merge.js";
-const Ae = /* @__PURE__ */ z({
+import { defineComponent as M, defineAsyncComponent as I, ref as O, computed as U, watch as z, onMounted as K, onUnmounted as j } from "vue";
+import { provideGuidoActions as q } from "../composables/useGuidoActions.js";
+import { usePartner as J } from "../composables/usePartner.js";
+import { useStripo as Q } from "../composables/useStripo.js";
+import { migrate as L } from "../config/migrator/index.js";
+import { DefaultUsername as V, DefaultMessageType as X, DefaultGuidoConfig as Y } 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 { useStripoApi as re } from "../services/stripoApi.js";
+import { useConfigStore as ie } from "../stores/config.js";
+import { useDynamicContentStore as ae } from "../stores/dynamic-content.js";
+import { useEditorStore as se } from "../stores/editor.js";
+import { usePreviewStore as ce } from "../stores/preview.js";
+import { useUnsubscribeStore as de } from "../stores/unsubscribe.js";
+import me from "../node_modules/lodash-es/merge.js";
+const Ue = /* @__PURE__ */ M({
   __name: "Guido",
   props: {
     templateId: null,
@@ -30,52 +29,54 @@ const Ae = /* @__PURE__ */ z({
     html: null,
     css: null,
     guidoConfig: null,
-    templateConfig: null
+    templateConfig: null,
+    onSaveBefore: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(A, { expose: N, emit: o }) {
-    const u = A, F = L(
+  setup(W, { expose: _, emit: o }) {
+    const i = W, A = I(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), H = L(
+    ), B = I(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), p = K(), i = me(), g = ue(), f = ce(), s = de(), O = le(), n = W(() => s.hasChanges), { getPartnerName: y, getProductType: v, isTestPartner: R } = V(), h = () => {
+    ), p = O(), a = ae(), g = de(), f = ie(), s = se(), N = ce(), n = U(() => s.hasChanges), { getPartnerName: y, getProductType: v, isTestPartner: F } = J(), b = () => {
       var e;
       return (e = p.value) == null ? void 0 : e.handleSave(!0);
     }, {
-      templateId: a,
-      userId: b,
-      guidoConfig: C,
+      templateId: c,
+      userId: C,
+      guidoConfig: S,
       templateConfig: t,
       html: r = "",
-      css: S = "",
-      partnerName: c = y(),
+      css: h = "",
+      partnerName: d = y(),
       productType: m = v(),
-      messageType: w = $,
-      username: D = Z
-    } = u, d = (t == null ? void 0 : t.preselectedDynamicContentList) || [];
-    s.templateId = a, window.GuidoConfig = pe(ee, C), window.GuidoConfig.partner = {
-      partnerName: c,
+      messageType: w = X,
+      username: D = V
+    } = i, l = (t == null ? void 0 : t.preselectedDynamicContentList) || [];
+    s.templateId = c, window.GuidoConfig = me(Y, S), window.GuidoConfig.partner = {
+      partnerName: d,
       productType: m,
       messageType: w
     }, f.templateConfig = t;
-    const { initPlugin: T } = X({
-      emailId: a,
-      userId: b,
+    const { initPlugin: E } = Q({
+      emailId: c,
+      userId: C,
       username: D,
-      partnerName: c,
+      partnerName: d,
       productType: m,
-      preselectedDynamicContentList: d,
+      preselectedDynamicContentList: l,
       onReady: () => {
         console.debug("guido:ready"), o("ready");
       }
-    }), { getDefaultTemplate: E } = ae(), { cloneTimersOnSave: k, hasTimerBlocks: P } = Y(), x = W(() => {
+    }), { getDefaultTemplate: T } = re(), H = U(() => {
       var e;
       return !((e = window.GuidoConfig) != null && e.useHeader);
     });
-    Q({
+    q({
       onBack: () => {
         console.debug("guido:back"), o("back");
       },
+      onSaveBefore: i.onSaveBefore ?? (async () => (console.debug("guido:save:before"), !0)),
       onSaveStart: () => {
         console.debug("guido:save:start"), o("save:start");
       },
@@ -86,50 +87,50 @@ const Ae = /* @__PURE__ */ z({
         console.debug("guido:test-email:click"), o("test-email:click");
       }
     });
-    const G = (e) => {
-      console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, I = () => {
+    const P = (e) => {
+      console.debug("dynamic-content:close", e), a.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    }, k = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    j(() => n.value, () => {
+    z(() => n.value, () => {
       o("on-change", n.value);
     });
-    const l = (e) => {
-      const U = e, { attribute: B, position: M } = U.detail;
-      console.debug("dynamic-content:open", U.detail), o("dynamic-content:open", B, M);
+    const u = (e) => {
+      const G = e, { attribute: R, position: x } = G.detail;
+      console.debug("dynamic-content:open", G.detail), o("dynamic-content:open", R, x);
     };
-    return q(async () => {
+    return K(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
         g.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
         let e = {
-          html: r && await _(r),
-          css: S,
+          html: r && await L(r),
+          css: h,
           forceRecreate: !0
           // TODO: It should be false for old templates. We will communicate with Stripo
         };
-        e.html || (e = await E(), e.html = await _(e.html)), P(e.html) && (e.html = await k(e.html)), await T(e), i.selectedDynamicContentList = d;
+        e.html || (e = await T(), e.html = await L(e.html)), await E(e), a.selectedDynamicContentList = l;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
-      document.addEventListener("dynamic-content:open", l);
-    }), J(() => {
-      document.removeEventListener("dynamic-content:open", l);
+      document.addEventListener("dynamic-content:open", u);
+    }), j(() => {
+      document.removeEventListener("dynamic-content:open", u);
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-    }), N({
+    }), _({
       dynamicContent: {
-        insert: G,
-        close: I
+        insert: P,
+        close: k
       },
       hasChanges: n,
-      saveSilent: h
-    }), { __sfc: !0, PreviewContainer: F, OnboardingWrapper: H, headerWrapperRef: p, dynamicContentStore: i, unsubscribeStore: g, props: u, configStore: f, editorStore: s, previewStore: O, hasChanges: n, getPartnerName: y, getProductType: v, isTestPartner: R, saveSilent: h, templateId: a, userId: b, guidoConfig: C, templateConfig: t, html: r, css: S, partnerName: c, productType: m, messageType: w, username: D, preselectedDynamicContentList: d, emit: o, initPlugin: T, getDefaultTemplate: E, cloneTimersOnSave: k, hasTimerBlocks: P, noHeader: x, insertDynamicContent: G, closeDynamicContent: I, handleDynamicContentOpen: l, Toaster: oe, FilterSelectionDrawer: te, HeaderWrapper: ne, LoadingWrapper: re, SaveAsTemplateDrawer: ie, UnsubscribeWrapper: se };
+      saveSilent: b
+    }), { __sfc: !0, PreviewContainer: A, OnboardingWrapper: B, headerWrapperRef: p, dynamicContentStore: a, unsubscribeStore: g, props: i, configStore: f, editorStore: s, previewStore: N, hasChanges: n, getPartnerName: y, getProductType: v, isTestPartner: F, saveSilent: b, templateId: c, userId: C, guidoConfig: S, templateConfig: t, html: r, css: h, partnerName: d, productType: m, messageType: w, username: D, preselectedDynamicContentList: l, emit: o, initPlugin: E, getDefaultTemplate: T, noHeader: H, insertDynamicContent: P, closeDynamicContent: k, handleDynamicContentOpen: u, Toaster: Z, FilterSelectionDrawer: $, HeaderWrapper: ee, LoadingWrapper: oe, SaveAsTemplateDrawer: te, UnsubscribeWrapper: ne };
   }
 });
 export {
-  Ae as default
+  Ue as default
 };

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

@@ -1,36 +1,39 @@
-import { defineComponent as H, ref as m, computed as _ } from "vue";
-import { useConfig as h } from "../../../composables/useConfig.js";
+import { defineComponent as H, ref as f, computed as _ } from "vue";
+import { useConfig as x } from "../../../composables/useConfig.js";
 import { useExport as V } from "../../../composables/useExport.js";
-import { useTestEmailClick as x } from "../../../composables/useGuidoActions.js";
-import { useSave as E } from "../../../composables/useSave.js";
-import { useTranslations as T } from "../../../composables/useTranslations.js";
-import { useVersionHistoryApi as w } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as C } from "../../../stores/editor.js";
-import { getTooltipOptions as O } from "../../../utils/tooltipUtils.js";
-import { InButtonV2 as A } from "@useinsider/design-system-vue";
-const J = /* @__PURE__ */ H({
+import { useSaveBefore as w, useTestEmailClick as E } from "../../../composables/useGuidoActions.js";
+import { useSave as T } from "../../../composables/useSave.js";
+import { useTranslations as C } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as O } from "../../../composables/useVersionHistoryApi.js";
+import { useEditorStore as b } from "../../../stores/editor.js";
+import { getTooltipOptions as A } from "../../../utils/tooltipUtils.js";
+import { InButtonV2 as B } from "@useinsider/design-system-vue";
+const L = /* @__PURE__ */ H({
   __name: "RightSlot",
-  setup(k, { expose: c }) {
-    const { config: u } = h(), { exportHtml: r } = V(), { save: n } = E(), { openVersionHistory: i, closeVersionHistory: a } = w(), o = C(), t = T(), e = m(!1), s = m(!1), f = x(), v = () => {
-      if (o.isVersionHistoryOpen) {
+  setup(k, { expose: p }) {
+    const { config: m } = x(), { exportHtml: r } = V(), { save: n } = T(), { openVersionHistory: i, closeVersionHistory: a } = O(), e = b(), t = C(), s = f(!1), o = f(!1), l = w(), d = E(), v = () => {
+      if (e.isVersionHistoryOpen) {
         a();
         return;
       }
       i();
-    }, d = async () => {
-      e.value = !0, await r(), e.value = !1;
-    }, y = () => {
-      o.isSaveAsTemplateDrawerOpen = !0;
-    }, S = _(() => o.isVersionHistoryOpen ? t("newsletter.close-version-history") : t("newsletter.version-history")), l = async (p) => {
-      s.value = !0, o.loadingStatus = !0;
-      const g = await n(p);
-      return s.value = !1, p && (o.loadingStatus = !1), g;
+    }, y = async () => {
+      s.value = !0, await r(), s.value = !1;
+    }, g = () => {
+      e.isSaveAsTemplateDrawerOpen = !0;
+    }, S = _(() => e.isVersionHistoryOpen ? t("newsletter.close-version-history") : t("newsletter.version-history")), c = async (u) => {
+      if (o.value = !0, e.loadingStatus = !0, !await l()) {
+        console.debug("guido:save:before - cancelled by external validation"), o.value = !1, e.loadingStatus = !1;
+        return;
+      }
+      const h = await n(u);
+      return o.value = !1, u && (e.loadingStatus = !1), h;
     };
-    return c({
-      handleSave: l
-    }), { __sfc: !0, config: u, exportHtml: r, save: n, openVersionHistory: i, closeVersionHistory: a, editorStore: o, trans: t, isExporting: e, isSaving: s, testEmailClick: f, handleVersionHistory: v, handleExport: d, handleSaveAs: y, versionHistoryTooltipText: S, handleSave: l, getTooltipOptions: O, InButtonV2: A };
+    return p({
+      handleSave: c
+    }), { __sfc: !0, config: m, exportHtml: r, save: n, openVersionHistory: i, closeVersionHistory: a, editorStore: e, trans: t, isExporting: s, isSaving: o, saveBefore: l, testEmailClick: d, handleVersionHistory: v, handleExport: y, handleSaveAs: g, versionHistoryTooltipText: S, handleSave: c, getTooltipOptions: A, InButtonV2: B };
   }
 });
 export {
-  J as default
+  L as default
 };

package/dist/composables/useActionsApi.js

@@ -1,7 +1,7 @@
-import { useToaster as w } from "./useToaster.js";
-const S = () => {
-  const { handleError: l } = w(), s = (t = {}) => new Promise((e, i) => {
-    const n = { ...{
+import { useToaster as g } from "./useToaster.js";
+const A = () => {
+  const { handleError: l } = g(), n = (t = {}) => new Promise((e, a) => {
+    const i = { ...{
       minimize: !0,
       utmEntity: {
         utmSource: "",
@@ -21,28 +21,28 @@ const S = () => {
       resetDataSavedFlag: !1,
       disableLineHeightsReplace: !0
     }, ...t }, m = {
-      callback: (o, p, d, c, u) => {
-        o ? i(o) : e({
-          html: p,
-          ampHtml: d,
-          ampErrors: c,
-          displayConditions: u
+      callback: (s, c, p, u, d) => {
+        s ? a(s) : e({
+          html: c,
+          ampHtml: p,
+          ampErrors: u,
+          displayConditions: d
         });
       },
-      ...n
+      ...i
     };
     window.StripoEditorApi.actionsApi.compileEmail(m);
   });
   return {
-    getCompiledEmail: s,
+    getCompiledEmail: n,
     getTemplateData: () => new Promise((t) => {
-      const e = ({ html: i, css: a, width: n, height: r, utmParams: m, syncModulesIds: o }) => t({
-        html: i,
-        css: a,
-        width: n,
+      const e = ({ html: a, css: o, width: i, height: r, utmParams: m, syncModulesIds: s }) => t({
+        html: a,
+        css: o,
+        width: i,
         height: r,
         utmParams: m,
-        syncModulesIds: o
+        syncModulesIds: s
       });
       window.StripoEditorApi.actionsApi.getTemplateData(e);
     }),
@@ -53,15 +53,15 @@ const S = () => {
       try {
         const {
           html: e,
-          displayConditions: i,
-          ampHtml: a = "",
-          ampErrors: n = []
-        } = await s({ minimize: !1, resetDataSavedFlag: !1, ...t });
+          displayConditions: a,
+          ampHtml: o = "",
+          ampErrors: i = []
+        } = await n({ minimize: !1, resetDataSavedFlag: !1, ...t });
         return {
           html: e,
-          ampHtml: a,
-          ampErrors: n,
-          displayConditions: i
+          ampHtml: o,
+          ampErrors: i,
+          displayConditions: a
         };
       } catch (e) {
         return l(e, "Error loading preview"), {
@@ -71,26 +71,9 @@ const S = () => {
           displayConditions: []
         };
       }
-    },
-    updateTimerInClonedTemplate: () => new Promise((t) => {
-      var e, i;
-      if (typeof ((i = (e = window.StripoEditorApi) == null ? void 0 : e.actionsApi) == null ? void 0 : i.updateTimerInClonedTemplate) != "function") {
-        t(null);
-        return;
-      }
-      try {
-        window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((a, n) => {
-          a ? (l(a, "Failed to update timer in cloned template"), t(null)) : t(n || null);
-        });
-      } catch (a) {
-        l(a, "Failed to call updateTimerInClonedTemplate"), t(null);
-      }
-    }),
-    updateHtmlAndCss: (t, e) => {
-      window.StripoEditorApi.actionsApi.updateHtmlAndCss(t, e);
     }
   };
 };
 export {
-  S as useActionsApi
+  A as useActionsApi
 };

package/dist/composables/useGuidoActions.js

@@ -1,9 +1,9 @@
-import { provideValue as o, useInjectedValue as t } from "./useProvideInject.js";
-const r = Symbol.for("guido.back"), n = Symbol.for("guido.save.start"), c = Symbol.for("guido.save.complete"), a = Symbol.for("guido.test.email.click"), i = (e) => {
-  o(r, e.onBack), o(n, e.onSaveStart), o(c, e.onSaveComplete), o(a, e.onTestEmailClick);
-}, u = () => {
+import { provideValue as o, useInjectedValue as r } from "./useProvideInject.js";
+const t = Symbol.for("guido.back"), n = Symbol.for("guido.save.before"), a = Symbol.for("guido.save.start"), c = Symbol.for("guido.save.complete"), s = Symbol.for("guido.test.email.click"), u = (e) => {
+  o(t, e.onBack), o(n, e.onSaveBefore), o(a, e.onSaveStart), o(c, e.onSaveComplete), o(s, e.onTestEmailClick);
+}, d = () => {
   try {
-    return t(r);
+    return r(t);
   } catch {
     throw new Error(
       "useBack: No back handler provided. Make sure Guido component is in the component tree."
@@ -11,23 +11,31 @@ const r = Symbol.for("guido.back"), n = Symbol.for("guido.save.start"), c = Symb
   }
 }, l = () => {
   try {
-    return t(n);
+    return r(n);
+  } catch {
+    throw new Error(
+      "useSaveBefore: No save before handler provided. Make sure Guido component is in the component tree."
+    );
+  }
+}, m = () => {
+  try {
+    return r(a);
   } catch {
     throw new Error(
       "useSaveStart: No save start handler provided. Make sure Guido component is in the component tree."
     );
   }
-}, d = () => {
+}, p = () => {
   try {
-    return t(c);
+    return r(c);
   } catch {
     throw new Error(
       "useSaveComplete: No save complete handler provided. Make sure Guido component is in the component tree."
     );
   }
-}, m = () => {
+}, v = () => {
   try {
-    return t(a);
+    return r(s);
   } catch {
     throw new Error(
       "useTestEmailClick: No test email click handler provided. Make sure Guido component is in the component tree."
@@ -35,13 +43,15 @@ const r = Symbol.for("guido.back"), n = Symbol.for("guido.save.start"), c = Symb
   }
 };
 export {
-  r as BACK_KEY,
+  t as BACK_KEY,
+  n as SAVE_BEFORE_KEY,
   c as SAVE_COMPLETE_KEY,
-  n as SAVE_START_KEY,
-  a as TEST_EMAIL_CLICK_KEY,
-  i as provideGuidoActions,
-  u as useBack,
-  d as useSaveComplete,
-  l as useSaveStart,
-  m as useTestEmailClick
+  a as SAVE_START_KEY,
+  s as TEST_EMAIL_CLICK_KEY,
+  u as provideGuidoActions,
+  d as useBack,
+  l as useSaveBefore,
+  p as useSaveComplete,
+  m as useSaveStart,
+  v as useTestEmailClick
 };

package/dist/composables/useStripo.js

@@ -1,19 +1,19 @@
-import { useActionsApi as b } from "./useActionsApi.js";
-import { useBlocksConfig as k } from "./useBlocksConfig.js";
-import { useConfig as T } from "./useConfig.js";
+import { useActionsApi as w } from "./useActionsApi.js";
+import { useBlocksConfig as b } from "./useBlocksConfig.js";
+import { useConfig as k } from "./useConfig.js";
 import { useCustomInterfaceAppearance as V } from "./useCustomInterfaceAppearance.js";
 import { useStripoEventHandler as _ } from "./useStripoEventHandler.js";
 import { useToaster as B } from "./useToaster.js";
-import { displayConditions as A } from "../enums/displayConditions.js";
-import { useStripoApi as F } from "../services/stripoApi.js";
-import v from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as I } from "../stores/editor.js";
-import { dynamicContentToMergeTags as M } from "../utils/genericUtil.js";
-import U from "../package.json.js";
-const N = (c) => {
-  const { config: l } = T(), { handleError: u } = B(), { getToken: f, getCustomFonts: y } = F(), { handleEvent: S } = _(), { getStripoBlocksConfig: C } = k(), E = async (i, r = []) => {
+import { displayConditions as T } from "../enums/displayConditions.js";
+import { useStripoApi as A } from "../services/stripoApi.js";
+import F from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as M } from "../stores/editor.js";
+import { dynamicContentToMergeTags as U } from "../utils/genericUtil.js";
+import v from "../package.json.js";
+const J = (c) => {
+  const { config: u } = k(), { handleError: l } = B(), { getToken: f, getCustomFonts: y } = A(), { handleEvent: S } = _(), { getStripoBlocksConfig: C } = b(), E = async (i, r = []) => {
     var m, g;
-    const e = I(), { html: n, css: p, forceRecreate: a } = i, { baseBlocks: t, extensions: d } = await C();
+    const t = M(), { html: n, css: p, forceRecreate: a } = i, { baseBlocks: e, extensions: d } = await C();
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
@@ -30,10 +30,10 @@ const N = (c) => {
         customAppearanceMergetags: !0,
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: v,
-        conditionsEnabled: ((m = l.features) == null ? void 0 : m.displayConditions) ?? !0,
-        customConditionsEnabled: ((g = l.features) == null ? void 0 : g.displayConditions) ?? !0,
-        conditionCategories: A,
+        customViewStyles: F,
+        conditionsEnabled: ((m = u.features) == null ? void 0 : m.displayConditions) ?? !0,
+        customConditionsEnabled: ((g = u.features) == null ? void 0 : g.displayConditions) ?? !0,
+        conditionCategories: T,
         enableXSSSecurity: !0,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
@@ -41,7 +41,7 @@ const N = (c) => {
         displayTitle: !1,
         displayUTM: !1,
         selectElementAfterDrop: !0,
-        ...t ? { baseBlocks: t } : {},
+        ...e ? { baseBlocks: e } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
@@ -49,7 +49,7 @@ const N = (c) => {
         },
         mergeTags: [
           {
-            entries: M(c.preselectedDynamicContentList)
+            entries: U(c.preselectedDynamicContentList)
           }
         ],
         async onTokenRefreshRequest(o) {
@@ -57,30 +57,30 @@ const N = (c) => {
             const s = await f();
             o(s);
           } catch (s) {
-            u(s, "Failed to refresh token");
+            l(s, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: o } = V(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: w } = b();
-            o(), s(), w(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
-              e.hasChanges = !1;
+            const { importCss: o } = V(), { activateCustomViewStyles: s } = w();
+            o(), s(), c.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
+              t.hasChanges = !1;
             }, 1e3);
           } catch (o) {
-            u(o, "Failed to load custom interface appearance");
+            l(o, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(o) {
-          e.isCodeEditorOpen = o;
+          t.isCodeEditorOpen = o;
         },
         onEditorVisualModeChanged(o) {
-          e.editorVisualMode = o.toLowerCase();
+          t.editorVisualMode = o.toLowerCase();
         },
         onVersionHistoryVisibilityChanged(o) {
-          e.isVersionHistoryOpen = o;
+          t.isVersionHistoryOpen = o;
         },
         onDataChanged() {
-          e.hasChanges = !0;
+          t.hasChanges = !0;
         },
         onEvent: S,
         ignoreClickOutsideSelectors: [
@@ -91,18 +91,18 @@ const N = (c) => {
         extensions: d
       }
     );
-  }, h = (i) => new Promise((r, e) => {
+  }, h = (i) => new Promise((r, t) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
       i(), r();
       return;
     }
-    const n = U.guido, a = `https://email-static.useinsider.com/guido/${(d = n == null ? void 0 : n.stripo) == null ? void 0 : d.version}/UIEditor.js`, t = document.createElement("script");
-    t.id = "UiEditorScript", t.type = "module", t.src = a, t.onload = () => {
+    const n = v.guido, a = `https://email-static.useinsider.com/guido/${(d = n == null ? void 0 : n.stripo) == null ? void 0 : d.version}/UIEditor.js`, e = document.createElement("script");
+    e.id = "UiEditorScript", e.type = "module", e.src = a, e.onload = () => {
       i(), r();
-    }, t.onerror = () => {
-      e(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
-    }, document.body.appendChild(t);
+    }, e.onerror = () => {
+      t(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
+    }, document.body.appendChild(e);
   });
   return { initPlugin: async (i) => {
     await h(async () => {
@@ -112,5 +112,5 @@ const N = (c) => {
   } };
 };
 export {
-  N as useStripo
+  J as useStripo
 };

package/dist/extensions/Blocks/Unsubscribe/extension.js

@@ -1,21 +1,21 @@
 import { ExtensionBuilder as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { UnsubscribeBlock as i } from "./block.js";
 import { UnsubscribeControl as t } from "./control.js";
-import { PreviewUIElement as o } from "./elements/preview.js";
-import { UnsubscribeIconsRegistry as r } from "./iconsRegistry.js";
-import { SettingsPanel as s } from "./settingsPanel.js";
+import { PreviewUIElement as s } from "./elements/preview.js";
+import { UnsubscribeIconsRegistry as o } from "./iconsRegistry.js";
+import { SettingsPanel as r } from "./settingsPanel.js";
 import n from "./styles.css.js";
-import { UnsubscribeTagRegistry as l } from "./tagRegistry.js";
-const f = new e().addBlock(i).withSettingsPanelRegistry(s).addControl(t).addUiElement(o).addStyles(n).withLocalization({
+import { UnsubscribeTagRegistry as c } from "./tagRegistry.js";
+const g = new e().addBlock(i).withSettingsPanelRegistry(r).addControl(t).addUiElement(s).addStyles(n).withLocalization({
   en: {
-    "Unsubscribe Block": "Unsubscribe Block",
-    "Unsubscribe Block Description": "Add an unsubscribe link to your email",
+    "Unsubscribe Block": "Unsubscribe",
+    "Unsubscribe Block Description": "Unsubscribe lets you add an Unsubscribe Link to direct users to opt out of receiving your messages.",
     "Select Template": "Select Template",
     "Unsubscribe Template": "Unsubscribe Template",
     Showing: "Showing",
     of: "of"
   }
-}).withUiElementTagRegistry(l).withIconsRegistry(r).build();
+}).withUiElementTagRegistry(c).withIconsRegistry(o).build();
 export {
-  f as default
+  g as default
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-e2f12ef7]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-e2f12ef7]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-e2f12ef7]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-7f89e9ff]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-7f89e9ff]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-7f89e9ff]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/src/components/Guido.vue.d.ts

@@ -11,6 +11,7 @@ type __VLS_Props = {
     css?: string;
     guidoConfig: GuidoConfig;
     templateConfig?: TemplateConfig;
+    onSaveBefore?: () => Promise<boolean>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
     dynamicContent: {

package/dist/src/composables/useActionsApi.d.ts

@@ -5,6 +5,4 @@ export declare const useActionsApi: () => {
     getTemplateData: () => Promise<TemplateData>;
     activateCustomViewStyles: (isActive?: boolean) => void;
     getPreviewData: (options?: CompileEmailOptions) => Promise<CompiledEmailResult>;
-    updateTimerInClonedTemplate: () => Promise<string | null>;
-    updateHtmlAndCss: (html: string, css: string) => void;
 };

package/dist/src/composables/useGuidoActions.d.ts

@@ -1,10 +1,12 @@
 import type { SavedTemplateDetails } from '@@/Types/stripo';
 import type { InjectionKey } from 'vue';
 export type BackHandler = () => void;
+export type SaveBeforeHandler = () => Promise<boolean>;
 export type SaveStartHandler = () => void;
 export type SaveCompleteHandler = (template: Omit<SavedTemplateDetails, 'forceRecreate'>) => void;
 export type TestEmailClickHandler = () => void;
 export declare const BACK_KEY: InjectionKey<BackHandler>;
+export declare const SAVE_BEFORE_KEY: InjectionKey<SaveBeforeHandler>;
 export declare const SAVE_START_KEY: InjectionKey<SaveStartHandler>;
 export declare const SAVE_COMPLETE_KEY: InjectionKey<SaveCompleteHandler>;
 export declare const TEST_EMAIL_CLICK_KEY: InjectionKey<TestEmailClickHandler>;
@@ -13,6 +15,7 @@ export declare const TEST_EMAIL_CLICK_KEY: InjectionKey<TestEmailClickHandler>;
  */
 export declare const provideGuidoActions: (actions: {
     onBack: BackHandler;
+    onSaveBefore: SaveBeforeHandler;
     onSaveStart: SaveStartHandler;
     onSaveComplete: SaveCompleteHandler;
     onTestEmailClick: TestEmailClickHandler;
@@ -21,6 +24,7 @@ export declare const provideGuidoActions: (actions: {
  * Provides individual Guido action handlers
  */
 export declare const provideBackHandler: (handler: BackHandler) => void;
+export declare const provideSaveBeforeHandler: (handler: SaveBeforeHandler) => void;
 export declare const provideSaveStartHandler: (handler: SaveStartHandler) => void;
 export declare const provideSaveCompleteHandler: (handler: SaveCompleteHandler) => void;
 /**
@@ -28,6 +32,11 @@ export declare const provideSaveCompleteHandler: (handler: SaveCompleteHandler)
  * @returns Back navigation function
  */
 export declare const useBack: () => BackHandler;
+/**
+ * Hook to use the save before handler
+ * @returns Save before function that returns Promise<boolean>
+ */
+export declare const useSaveBefore: () => SaveBeforeHandler;
 /**
  * Hook to use the save start handler
  * @returns Save start function
@@ -49,6 +58,7 @@ export declare const useTestEmailClick: () => TestEmailClickHandler;
  */
 export declare const useGuidoActions: () => {
     back: BackHandler;
+    saveBefore: SaveBeforeHandler;
     saveStart: SaveStartHandler;
     saveComplete: SaveCompleteHandler;
     testEmailClick: TestEmailClickHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.4.4-beta.db9794f",
+  "version": "1.4.4-beta.dc62a4d",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",

package/dist/composables/useTimerClone.js

@@ -1,53 +0,0 @@
-import { useActionsApi as f } from "./useActionsApi.js";
-import { useHttp as w } from "./useHttp.js";
-import { useToaster as H } from "./useToaster.js";
-import { useStripoApi as y } from "../services/stripoApi.js";
-const O = () => {
-  const { handleError: c } = H(), { getToken: u } = y(), { post: d } = w(), { updateHtmlAndCss: l } = f(), s = (t) => /esd-timer-id="(\d+)"/.test(t), i = async (t, e) => {
-    try {
-      return (await d(
-        "https://plugins.stripo.email/api/v1/timers/clone",
-        { html: t },
-        {
-          headers: {
-            "ES-PLUGIN-AUTH": `Bearer ${e}`,
-            "Content-Type": "application/json"
-          }
-        }
-      )).data.html;
-    } catch (r) {
-      return c(r, "Failed to clone timer IDs"), null;
-    }
-  };
-  return {
-    hasTimerBlocks: s,
-    cloneTimersInHtml: i,
-    cloneTimersOnSave: async (t) => {
-      if (!s(t))
-        return t;
-      const e = await u();
-      return e && await i(t, e) || t;
-    },
-    updateTimersOnLoad: async (t) => {
-      var e, r, o, m;
-      try {
-        const n = (r = (e = window.UIEditor) == null ? void 0 : e.getHtml) == null ? void 0 : r.call(e);
-        if (!n || !s(n))
-          return;
-        const p = await t();
-        if (!p)
-          return;
-        const a = await i(n, p);
-        if (!a || a === n)
-          return;
-        const T = ((m = (o = window.UIEditor) == null ? void 0 : o.getCss) == null ? void 0 : m.call(o)) || "";
-        l(a, T);
-      } catch (n) {
-        c(n, "Failed to update timer blocks");
-      }
-    }
-  };
-};
-export {
-  O as useTimerClone
-};

package/dist/src/composables/useTimerClone.d.ts

@@ -1,6 +0,0 @@
-export declare const useTimerClone: () => {
-    hasTimerBlocks: (html: string) => boolean;
-    cloneTimersInHtml: (html: string, authToken: string) => Promise<string | null>;
-    cloneTimersOnSave: (html: string) => Promise<string>;
-    updateTimersOnLoad: (getTokenFn: () => Promise<string>) => Promise<void>;
-};