@useinsider/guido 3.8.1-beta.1a5be20 → 3.8.1-beta.34bf80d

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

@@ -1,6 +1,6 @@
-import r from "./DesktopPreview.vue2.js";
+import o from "./DesktopPreview.vue2.js";
 /* empty css                    */
-import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
+import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
 var a = function() {
   var s = this, e = s._self._c, t = s._self._setupProxy;
   return e("div", { staticClass: "desktop-preview-wrapper" }, [e("p", { staticClass: "f-s-1 f-w-600 l-h-1 t-t-u t-c-53 mb-6 l-s-5" }, [s._v(" " + s._s(t.trans("email-editor.desktop-preview")) + " ")]), e("div", { ref: "containerRef", staticClass: "desktop-preview d-f f-d-c o-h s-1" }, [e(t.DesktopBrowserHeader), e("div", { staticClass: "desktop-preview__content d-f f-g-1 o-h b-c-5 min-h-0" }, [e("div", { staticClass: "f-g-1 h-1 o-h b-c-4 min-w-0" }, [t.isContainerReady ? e("iframe", { staticClass: "desktop-preview__iframe d-b w-1 h-1 b-c-4 bor-s-n", attrs: { sandbox: `
@@ -8,16 +8,16 @@ var a = function() {
                         allow-popups
                         allow-forms
                         allow-scripts
-                        allow-popups-to-escape-sandbox`, srcdoc: t.previewStore.previewHtml } }) : s._e()])])], 1)]);
-}, i = [], p = /* @__PURE__ */ o(
-  r,
+                        allow-popups-to-escape-sandbox`, srcdoc: t.previewStore.previewHtml }, on: { load: t.onIframeLoad } }) : s._e()])])], 1)]);
+}, i = [], n = /* @__PURE__ */ r(
+  o,
   a,
   i,
   !1,
   null,
-  "988f8da6"
+  "06afaecb"
 );
-const _ = p.exports;
+const f = n.exports;
 export {
-  _ as default
+  f as default
 };

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

@@ -1,23 +1,26 @@
-import { defineComponent as f, ref as s, onMounted as c, onBeforeUnmount as m, nextTick as u } from "vue";
-import { useTranslations as p } from "../../../../composables/useTranslations.js";
-import { usePreviewStore as l } from "../../../../stores/preview.js";
-import _ from "./DesktopBrowserHeader.vue.js";
-const x = /* @__PURE__ */ f({
+import { defineComponent as u, ref as a, onMounted as p, onBeforeUnmount as l, nextTick as v } from "vue";
+import { usePreviewInteractionGuard as d } from "../../../../composables/usePreviewInteractionGuard.js";
+import { useTranslations as _ } from "../../../../composables/useTranslations.js";
+import { usePreviewStore as w } from "../../../../stores/preview.js";
+import I from "./DesktopBrowserHeader.vue.js";
+const C = /* @__PURE__ */ u({
   __name: "DesktopPreview",
-  setup(v) {
-    const a = p(), o = s(), n = s(!1), i = l();
+  setup(k) {
+    const i = _(), { blockPreviewInteractions: t } = d(), o = a(), n = a(!1), c = w();
     let e = null;
-    const t = () => {
+    const f = (m) => {
+      t(m.target);
+    }, r = () => {
       o.value && (e = new ResizeObserver(() => {
-      }), e.observe(o.value), u(() => {
+      }), e.observe(o.value), v(() => {
         n.value = !0;
       }));
-    }, r = () => {
+    }, s = () => {
       e == null || e.disconnect();
     };
-    return c(t), m(r), { __sfc: !0, trans: a, containerRef: o, isContainerReady: n, previewStore: i, resizeObserver: e, initIframe: t, cleanIframe: r, DesktopBrowserHeader: _ };
+    return p(r), l(s), { __sfc: !0, trans: i, blockPreviewInteractions: t, containerRef: o, isContainerReady: n, previewStore: c, resizeObserver: e, onIframeLoad: f, initIframe: r, cleanIframe: s, DesktopBrowserHeader: I };
   }
 });
 export {
-  x as default
+  C as default
 };

package/dist/components/organisms/email-preview/mobile-preview/ContentView.vue.js

@@ -1,20 +1,20 @@
 import e from "./ContentView.vue2.js";
 /* empty css                 */
 import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
+var c = function() {
   var t = this, s = t._self._c, a = t._self._setupProxy;
   return s("div", { staticClass: "w-1 h-1 b-c-4 d-f f-d-c" }, [s("div", { staticClass: "d-f j-c-s-b a-i-c p-2 h-6-s" }, [s("div", { staticClass: "d-f a-i-c cur-p", on: { click: function(l) {
     return t.$emit("back-to-inbox");
   } } }, [s(a.InIcons, { staticClass: "f-s-3 i-c-7", attrs: { name: "line-chevron-left" } }), s("span", { staticClass: "ml-2 f-s-1 f-w-400 l-h-1 t-c-7" }, [t._v(t._s(a.trans("newsletter.inbox")))])], 1), s("div", { staticClass: "d-f a-i-c" }, [s(a.InIcons, { staticClass: "i-c-52", attrs: { name: "line-chevron-down" } }), s(a.InIcons, { staticClass: "ml-1 i-c-52", attrs: { name: "line-chevron-up" } })], 1)]), s("div", { staticClass: "iframe-wrapper f-g-1 o-h" }, [s("iframe", { ref: "iframeRef", staticClass: "iframe-scaled d-b b-c-4 bor-s-n", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts allow-popups-to-escape-sandbox", srcdoc: a.previewStore.previewHtml }, on: { load: a.onLoad } })])]);
-}, i = [], r = /* @__PURE__ */ n(
+}, o = [], i = /* @__PURE__ */ n(
   e,
+  c,
   o,
-  i,
   !1,
   null,
-  "e0424e99"
+  "cbafc185"
 );
-const d = r.exports;
+const d = i.exports;
 export {
   d as default
 };

package/dist/components/organisms/email-preview/mobile-preview/ContentView.vue2.js

@@ -1,23 +1,24 @@
-import { defineComponent as m, ref as c } from "vue";
-import { useResponsivePreview as f } from "../../../../composables/useResponsivePreview.js";
-import { useTranslations as a } from "../../../../composables/useTranslations.js";
-import { usePreviewStore as p } from "../../../../stores/preview.js";
-import { InIcons as u } from "@useinsider/design-system-vue";
-const h = /* @__PURE__ */ m({
+import { defineComponent as m, ref as a } from "vue";
+import { usePreviewInteractionGuard as f } from "../../../../composables/usePreviewInteractionGuard.js";
+import { useResponsivePreview as p } from "../../../../composables/useResponsivePreview.js";
+import { useTranslations as u } from "../../../../composables/useTranslations.js";
+import { usePreviewStore as v } from "../../../../stores/preview.js";
+import { InIcons as P } from "@useinsider/design-system-vue";
+const g = /* @__PURE__ */ m({
   __name: "ContentView",
   emits: ["back-to-inbox"],
-  setup(v) {
-    const i = a(), t = p(), n = c(), { setupResponsivePreview: r } = f(), s = (o) => {
-      ["transform", "transform-origin", "height"].forEach((e) => {
-        o.documentElement.style.removeProperty(e);
+  setup(_) {
+    const c = u(), t = v(), r = a(), { setupResponsivePreview: n } = p(), { blockPreviewInteractions: s } = f(), i = (e) => {
+      ["transform", "transform-origin", "height"].forEach((o) => {
+        e.documentElement.style.removeProperty(o);
       });
     };
-    return { __sfc: !0, trans: i, previewStore: t, iframeRef: n, setupResponsivePreview: r, clearAMPTransforms: s, onLoad: () => {
-      const o = n.value, e = o == null ? void 0 : o.contentDocument;
-      e && (r(o), t.isAMPResponsive && s(e));
-    }, InIcons: u };
+    return { __sfc: !0, trans: c, previewStore: t, iframeRef: r, setupResponsivePreview: n, blockPreviewInteractions: s, clearAMPTransforms: i, onLoad: () => {
+      const e = r.value, o = e == null ? void 0 : e.contentDocument;
+      o && (n(e), s(e), t.isAMPResponsive && i(o));
+    }, InIcons: P };
   }
 });
 export {
-  h as default
+  g as default
 };

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

@@ -1,6 +1,6 @@
-import a from "./UnsubscribePageSelection.vue2.js";
+import n from "./UnsubscribePageSelection.vue2.js";
 /* empty css                              */
-import n from "../../../_virtual/_plugin-vue2_normalizer.js";
+import a from "../../../_virtual/_plugin-vue2_normalizer.js";
 var o = function() {
   var r = this, e = r._self._c, t = r._self._setupProxy;
   return e(t.WpDrawer, { attrs: { id: "unsubscribe-modal", "description-status": "", size: "large", "footer-button-group-options": t.footerButtonGroupOptions, status: t.unsubscribeStore.pageSelectionDrawerStatus, "title-text": t.trans("newsletter.select-a-template") }, on: { cancelOrBackButtonEvent: t.handleBack, onCloseEvent: t.handleClose, primaryButtonEvent: t.handleSave }, scopedSlots: r._u([{ key: "headerBottomSlot", fn: function() {
@@ -10,13 +10,13 @@ var o = function() {
       return t.selectTemplate(s.id);
     } } }, [e(t.InContainer, { staticClass: "template-container o-h", class: { selected: t.unsubscribeStore.getSelectedTemplateByActiveType === s.id }, attrs: { border: t.getBorderClass(s.id) } }, [e("div", { staticClass: "w-1 h-1 d-f j-c-c a-i-c" }, [e("img", { staticClass: "w-1 h-1 thumbnail o-h", attrs: { alt: s.name, src: s.thumbnail } })])]), e("div", { staticClass: "mt-1 f-s-1" }, [r._v(" " + r._s(s.name) + " ")])], 1);
   }), 0)]);
-}, i = [], c = /* @__PURE__ */ n(
-  a,
+}, i = [], c = /* @__PURE__ */ a(
+  n,
   o,
   i,
   !1,
   null,
-  "f6a8cb4c"
+  "669fe7cf"
 );
 const _ = c.exports;
 export {

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

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

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

@@ -2,15 +2,15 @@ import n from "./UnsubscribeTypeSelection.vue2.js";
 /* empty css                              */
 import o from "../../../_virtual/_plugin-vue2_normalizer.js";
 var i = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s(e.WpDrawer, { attrs: { id: "unsubscribe-modal", "description-status": "", "description-text": e.descriptionText, "footer-button-group-options": e.footerButtonGroupOptions, status: e.unsubscribeStore.typeSelectionDrawerStatus, "title-text": e.trans("unsubscription-preference.select-unsubscribe-page-title") }, on: { cancelOrBackButtonEvent: e.closeModal, onCloseEvent: e.closeModal, primaryButtonEvent: e.selectCollection } }, [s(e.InSegments, { staticClass: "w-1", attrs: { "with-icon": "", align: "vertical", disable: e.isSelecting, "segment-list": e.segmentList, selected: e.selectedCollection, "skeleton-sizing": { width: 495, height: 180 }, "skeleton-status": e.skeletonStatus }, on: { click: e.changeCollection } })], 1);
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s(t.WpDrawer, { attrs: { id: "unsubscribe-modal", "description-status": "", "description-text": t.descriptionText, "footer-button-group-options": t.footerButtonGroupOptions, status: t.unsubscribeStore.typeSelectionDrawerStatus, "title-text": t.trans("unsubscription-preference.select-unsubscribe-page-title") }, on: { cancelOrBackButtonEvent: t.closeModal, onCloseEvent: t.closeModal, primaryButtonEvent: t.selectCollection } }, [s(t.InSegments, { staticClass: "w-1", attrs: { "with-icon": "", align: "vertical", disable: t.isSelecting, "segment-list": t.segmentList, selected: t.selectedCollection, "skeleton-sizing": { width: 495, height: 180 }, "skeleton-status": t.skeletonStatus }, on: { click: t.changeCollection } })], 1);
 }, r = [], c = /* @__PURE__ */ o(
   n,
   i,
   r,
   !1,
   null,
-  "18e1220a"
+  "7a305bb2"
 );
 const _ = c.exports;
 export {

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

@@ -1,16 +1,16 @@
-import { defineComponent as v, ref as b, computed as f, watch as _ } from "vue";
+import { defineComponent as _, ref as b, computed as f, watch as v } from "vue";
 import U from "../../wrappers/WpDrawer.vue.js";
-import { useToaster as N } from "../../../composables/useToaster.js";
-import { useTranslations as w } from "../../../composables/useTranslations.js";
+import { useToaster as w } from "../../../composables/useToaster.js";
+import { useTranslations as N } from "../../../composables/useTranslations.js";
 import { ACADEMY_LINKS as D } from "../../../enums/academy.js";
-import { ToasterTypeOptions as P } from "../../../enums/toaster.js";
-import { PAGE_TYPES as l, getTypeTranslations as R, UNSUBSCRIBE_PAGES_LINK as G } from "../../../enums/unsubscribe.js";
-import { useUnsubscribeStore as I } from "../../../stores/unsubscribe.js";
+import { ToasterTypeOptions as I } from "../../../enums/toaster.js";
+import { PAGE_TYPES as l, getTypeTranslations as R, UNSUBSCRIBE_PAGES_LINK as P } from "../../../enums/unsubscribe.js";
+import { useUnsubscribeStore as G } from "../../../stores/unsubscribe.js";
 import { InSegments as L } from "@useinsider/design-system-vue";
-const W = /* @__PURE__ */ v({
+const W = /* @__PURE__ */ _({
   __name: "UnsubscribeTypeSelection",
-  setup(O) {
-    const t = w(), { showToaster: d } = N(), e = I(), n = b(!1), i = b(!0), o = b(l.GLOBAL_UNSUBSCRIBE), T = t(
+  setup(k) {
+    const t = N(), { showToaster: d } = w(), e = G(), n = b(!1), o = b(!0), r = b(l.GLOBAL_UNSUBSCRIBE), T = t(
       "unsubscription-preference.select-unsubscribe-page-description",
       { action: `<a href="${D.GLOBAL_UNSUBSCRIBE}" target="_blank">${t("ds-rules.visit-academy")}</a>` }
     ), y = f(() => [
@@ -31,7 +31,7 @@ const W = /* @__PURE__ */ v({
         disable: e.isSubscriptionPreferencesCenterDisabled,
         tooltipText: e.isSubscriptionPreferencesCenterDisabled ? t("unsubscription-preference.pref-center-added") : ""
       }
-    ]), S = f(
+    ]), g = f(
       () => e.isGlobalUnsubscribeDisabled && e.isSubscriptionPreferencesCenterDisabled
     ), C = f(() => ({
       primaryButton: {
@@ -41,8 +41,8 @@ const W = /* @__PURE__ */ v({
           n.value ? "unsubscription-preference.selecting-type" : "products.select-and-continue"
         ),
         loadingStatus: n.value,
-        disabledStatus: S.value,
-        skeletonStatus: i.value,
+        disabledStatus: g.value,
+        skeletonStatus: o.value,
         skeletonSizing: { width: 168, height: 40 }
       },
       cancelOrBackButton: {
@@ -50,59 +50,62 @@ const W = /* @__PURE__ */ v({
         type: "secondary",
         labelText: t("products.cancel"),
         disabledStatus: n.value,
-        skeletonStatus: i.value,
+        skeletonStatus: o.value,
         skeletonSizing: { width: 78, height: 40 }
       }
-    })), m = (s) => {
-      e.typeSelectionDrawerStatus = !1, document.dispatchEvent(new CustomEvent("unsubscribe:cancel")), s && setTimeout(() => {
+    })), S = (s) => {
+      e.typeSelectionDrawerStatus = !1, document.dispatchEvent(new CustomEvent("unsubscribe:cancel", {
+        detail: { blockId: e.pendingBlockId }
+      })), s && setTimeout(() => {
         s();
       }, 500);
     }, E = (s) => {
-      o.value = s;
-    }, g = () => {
-      const s = e.hasTemplatesByCollectionType, r = [];
-      if (Object.entries(s).forEach(([c, p]) => {
-        p || r.push(Number(c));
-      }), r.length === 0)
+      r.value = s;
+    }, m = () => {
+      const s = e.hasTemplatesByCollectionType, a = [];
+      if (Object.entries(s).forEach(([i, p]) => {
+        p || a.push(Number(i));
+      }), a.length === 0)
         return !0;
-      const B = R(), a = r.map((c) => B[c]);
+      const h = R(), c = a.map((i) => h[i]);
       let u = "";
-      if (r.length === 1)
+      if (a.length === 1)
         u = t("unsubscription-preference.create-page-to-continue", {
-          page: a[0]
+          page: c[0]
         });
-      else if (r.length === 2)
+      else if (a.length === 2)
         u = t("unsubscription-preference.create-pages-to-continue", {
-          page1: a[0],
-          page2: a[1]
+          page1: c[0],
+          page2: c[1]
         });
       else {
-        const c = a.pop() ?? "", p = a.join(", ");
+        const i = c.pop() ?? "", p = c.join(", ");
         u = t("unsubscription-preference.create-multiple-pages-to-continue", {
           pages: p,
-          lastPage: c
+          lastPage: i
         });
       }
       return d({
-        type: P.Warning,
+        type: I.Warning,
         message: u,
         actionButton: {
           text: "Go to Unsubscribe Pages",
           onClick: () => {
-            window.location.href = G;
+            const i = new URL(P, window.location.origin).href;
+            window.open(i, "_blank", "noopener");
           }
         }
       }), !1;
-    }, h = async () => {
-      if (n.value = !0, await e.fetchTemplates(), e.setCollection(o.value), !g()) {
-        n.value = !1, m();
+    }, B = async () => {
+      if (n.value = !0, await e.fetchTemplates(!0), e.setCollection(r.value), !m()) {
+        n.value = !1, S();
         return;
       }
       n.value = !1, e.typeSelectionDrawerStatus = !1, e.pageSelectionDrawerStatus = !0;
     };
-    return _(() => e.typeSelectionDrawerStatus, (s) => {
-      s && (i.value = !0, o.value = l.GLOBAL_UNSUBSCRIBE, e.isGlobalUnsubscribeDisabled && (o.value = e.isSubscriptionPreferencesCenterDisabled ? 0 : l.SUBSCRIPTION_PREFERENCE_CENTER), i.value = !1);
-    }), { __sfc: !0, trans: t, showToaster: d, unsubscribeStore: e, isSelecting: n, skeletonStatus: i, selectedCollection: o, descriptionText: T, segmentList: y, hasNoSelectableType: S, footerButtonGroupOptions: C, closeModal: m, changeCollection: E, validateTemplates: g, selectCollection: h, WpDrawer: U, InSegments: L };
+    return v(() => e.typeSelectionDrawerStatus, (s) => {
+      s && (o.value = !0, r.value = l.GLOBAL_UNSUBSCRIBE, e.isGlobalUnsubscribeDisabled && (r.value = e.isSubscriptionPreferencesCenterDisabled ? 0 : l.SUBSCRIPTION_PREFERENCE_CENTER), o.value = !1);
+    }), { __sfc: !0, trans: t, showToaster: d, unsubscribeStore: e, isSelecting: n, skeletonStatus: o, selectedCollection: r, descriptionText: T, segmentList: y, hasNoSelectableType: g, footerButtonGroupOptions: C, closeModal: S, changeCollection: E, validateTemplates: m, selectCollection: B, WpDrawer: U, InSegments: L };
   }
 });
 export {

package/dist/composables/usePreviewInteractionGuard.js

@@ -0,0 +1,17 @@
+const o = ["click", "auxclick", "submit"], c = (t) => {
+  t.preventDefault(), t.stopPropagation();
+}, a = () => ({ blockPreviewInteractions: (r) => {
+  try {
+    const e = r.contentDocument;
+    if (!e)
+      return;
+    o.forEach((n) => {
+      e.addEventListener(n, c, !0);
+    });
+  } catch (e) {
+    console.warn("[usePreviewInteractionGuard] Could not guard preview iframe:", e);
+  }
+} });
+export {
+  a as usePreviewInteractionGuard
+};

package/dist/composables/useSave.js

@@ -1,32 +1,32 @@
-import { useActionsApi as x } from "./useActionsApi.js";
+import { useActionsApi as H } from "./useActionsApi.js";
 import { useConfig as y } from "./useConfig.js";
-import { useSaveStart as w, useSaveComplete as H } from "./useGuidoActions.js";
+import { useSaveStart as w, useSaveComplete as k } from "./useGuidoActions.js";
 import { useSyncModuleExtractor as q } from "./useSyncModuleExtractor.js";
 import { useStripoApi as C } from "../services/stripoApi.js";
 import { useTemplatePreparation as E } from "../utils/templatePreparation.js";
-import { useHtmlValidator as k } from "./useHtmlValidator.js";
+import { useHtmlValidator as B } from "./useHtmlValidator.js";
 import { useCouponBlockValidator as L } from "./validators/useCouponBlockValidator.js";
 import { useLiquidValidator as P } from "./validators/useLiquidValidator.js";
-import { useUnsubscribeBlockValidator as B } from "./validators/useUnsubscribeBlockValidator.js";
-const J = () => {
-  const o = w(), s = H(), { validateHtml: r } = k(), { validateLiquidSyntax: n } = P(), { validateCouponBlockTags: l } = L(), { validateUnsubscribeBlockUniqueness: d } = B(), { callbacks: i, isFeatureEnabled: u } = y(), { extractSyncModuleData: c } = q(), { setSyncModuleUnsubscriptionPages: m } = C(), { editorSave: p } = x();
-  return { save: async (f = !1, v = !1) => {
+import { useUnsubscribeBlockValidator as U } from "./validators/useUnsubscribeBlockValidator.js";
+const K = () => {
+  const o = w(), s = k(), { validateHtml: r } = B(), { validateLiquidSyntax: l } = P(), { validateCouponBlockTags: n } = L(), { validateUnsubscribeBlockUniqueness: d, validateUnsubscribeBlockHasTemplate: c } = U(), { callbacks: i, isFeatureEnabled: u } = y(), { extractSyncModuleData: m } = q(), { setSyncModuleUnsubscriptionPages: p } = C(), { editorSave: v } = H();
+  return { save: async (f = !1, S = !1) => {
     var a;
     o();
-    const { prepareTemplateDetails: S } = E(), t = await S();
-    if (!l(t.compiledHtml) || !d(t.compiledHtml))
+    const { prepareTemplateDetails: V } = E(), t = await V();
+    if (!n(t.compiledHtml) || !d(t.compiledHtml) || !c(t.compiledHtml))
       return;
     if (u("liquidSyntax")) {
-      if (!await n(t.compiledHtml))
+      if (!await l(t.compiledHtml))
         return;
     } else if (!await r(t.compiledHtml, t.dynamicContentList, !0))
       return;
-    if ((a = i.value) != null && a.externalValidation && !await i.value.externalValidation(t) || !await p())
+    if ((a = i.value) != null && a.externalValidation && !await i.value.externalValidation(t) || !await v())
       return;
-    const { unsubscribePayload: V, stripoModules: b } = c(t.rawHtml);
-    return await m(V), t.modules = b, f || s({ ...t, silent: v }), t;
+    const { unsubscribePayload: b, stripoModules: x } = m(t.rawHtml);
+    return await p(b), t.modules = x, f || s({ ...t, silent: S }), t;
   } };
 };
 export {
-  J as useSave
+  K as useSave
 };

package/dist/composables/validators/useUnsubscribeBlockValidator.js

@@ -1,32 +1,41 @@
 import { ToasterTypeOptions as i } from "../../enums/toaster.js";
-import { PAGE_TYPES as n } from "../../enums/unsubscribe.js";
-import { UNSUBSCRIBE_BLOCK_SELECTOR as u, DATA_ATTRIBUTES as l } from "../../extensions/Blocks/Unsubscribe/utils/constants.js";
-import { useToaster as T } from "../useToaster.js";
+import { PAGE_TYPES as u } from "../../enums/unsubscribe.js";
+import { UNSUBSCRIBE_BLOCK_SELECTOR as l, DATA_ATTRIBUTES as a } from "../../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { useToaster as m } from "../useToaster.js";
 import { useTranslations as E } from "../useTranslations.js";
-const m = [
+const T = [
   {
-    pageType: n.GLOBAL_UNSUBSCRIBE,
+    pageType: u.GLOBAL_UNSUBSCRIBE,
     messageKey: "unsubscription-preference.duplicate-global-unsub"
   },
   {
-    pageType: n.SUBSCRIPTION_PREFERENCE_CENTER,
+    pageType: u.SUBSCRIPTION_PREFERENCE_CENTER,
     messageKey: "unsubscription-preference.duplicate-pref-center"
   }
-], g = "unsubscription-preference.duplicate-both", y = () => {
-  const { showToaster: o } = T(), a = E();
-  return { validateUnsubscribeBlockUniqueness: (c) => {
-    const p = new DOMParser().parseFromString(c, "text/html"), t = /* @__PURE__ */ new Map();
-    p.querySelectorAll(u).forEach((e) => {
-      const r = Number(e.getAttribute(l.PAGE_TYPE));
-      t.set(r, (t.get(r) ?? 0) + 1);
+], g = "unsubscription-preference.duplicate-both", b = "unsubscription-preference.select-page-to-continue", P = () => {
+  const { showToaster: c } = m(), p = E();
+  return { validateUnsubscribeBlockUniqueness: (n) => {
+    const o = new DOMParser().parseFromString(n, "text/html"), s = /* @__PURE__ */ new Map();
+    o.querySelectorAll(l).forEach((e) => {
+      const r = Number(e.getAttribute(a.PAGE_TYPE));
+      s.set(r, (s.get(r) ?? 0) + 1);
     });
-    const s = m.filter((e) => (t.get(e.pageType) ?? 0) > 1).map((e) => e.messageKey);
-    return s.length ? (o({
+    const t = T.filter((e) => (s.get(e.pageType) ?? 0) > 1).map((e) => e.messageKey);
+    return t.length ? (c({
       type: i.Alert,
-      message: a(s.length > 1 ? g : s[0])
+      message: p(t.length > 1 ? g : t[0])
+    }), !1) : !0;
+  }, validateUnsubscribeBlockHasTemplate: (n) => {
+    const o = new DOMParser().parseFromString(n, "text/html");
+    return Array.from(o.querySelectorAll(l)).some((t) => {
+      const e = t.getAttribute(a.PAGE_TYPE), r = t.getAttribute(a.PAGE_LIST);
+      return !e || !r;
+    }) ? (c({
+      type: i.Warning,
+      message: p(b)
     }), !1) : !0;
   } };
 };
 export {
-  y as useUnsubscribeBlockValidator
+  P as useUnsubscribeBlockValidator
 };

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

@@ -1,19 +1,20 @@
 var S = Object.defineProperty;
-var L = (c, o, e) => o in c ? S(c, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[o] = e;
-var a = (c, o, e) => L(c, typeof o != "symbol" ? o + "" : o, e);
-import { useToaster as f } from "../../../composables/useToaster.js";
+var f = (c, o, e) => o in c ? S(c, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[o] = e;
+var a = (c, o, e) => f(c, typeof o != "symbol" ? o + "" : o, e);
+import { useToaster as L } from "../../../composables/useToaster.js";
 import { ToasterTypeOptions as A } from "../../../enums/toaster.js";
 import { PAGE_TYPES as h } from "../../../enums/unsubscribe.js";
-import { useUnsubscribeStore as u } from "../../../stores/unsubscribe.js";
-import { Block as y, BlockCompositionType as T, ContextActionType as k, ModificationDescription as d, BlockType as I } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as v } from "./template.js";
+import { useEditorStore as y } from "../../../stores/editor.js";
+import { useUnsubscribeStore as l } from "../../../stores/unsubscribe.js";
+import { Block as T, BlockCompositionType as I, ContextActionType as B, ModificationDescription as d, BlockType as v } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as C } from "./template.js";
 import { UNSUBSCRIBE_BLOCK_SELECTOR as m, DATA_ATTRIBUTES as n, UNSUBSCRIBE_EVENTS as b } from "./utils/constants.js";
-import { parsePageList as B } from "./utils/utils.js";
-const C = "unsubscribe-block", E = 'a[data-unsubscribe-link="true"]', N = "{{ins-unsubscribe-link}}", U = "https://academy.insiderone.com/docs/adding-unsubscribe-pages-into-emails", R = "Removing the unsubscribe text leaves an empty block, but an active unsubscribe link is required. Undo your last action to restore the text, or delete the unsubscribe block entirely.", D = {
+import { parsePageList as _ } from "./utils/utils.js";
+const N = "unsubscribe-block", E = 'a[data-unsubscribe-link="true"]', U = "{{ins-unsubscribe-link}}", R = "https://academy.insiderone.com/docs/adding-unsubscribe-pages-into-emails", D = "Removing the unsubscribe text leaves an empty block, but an active unsubscribe link is required. Undo your last action to restore the text, or delete the unsubscribe block entirely.", w = {
   [h.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [h.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
-}, w = 3;
-class H extends y {
+}, P = 3;
+class W extends T {
   constructor() {
     super();
     a(this, "selectEventListener", null);
@@ -29,13 +30,13 @@ class H extends y {
     a(this, "guardAttemptsByBlockId", /* @__PURE__ */ new Map());
   }
   getId() {
-    return C;
+    return N;
   }
   getIcon() {
     return "unsubscribe-icon";
   }
   getBlockCompositionType() {
-    return T.BLOCK;
+    return I.BLOCK;
   }
   getName() {
     return this.api.translate("Unsubscribe Block");
@@ -44,15 +45,16 @@ class H extends y {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return v();
+    return C();
   }
   getContextActionsIds() {
-    return [k.MOVE, k.REMOVE];
+    return [B.MOVE, B.REMOVE];
   }
   onSelect(e) {
-    this.currentNode = e;
+    if (this.currentNode = e, y().isPreviewModeOpen)
+      return;
     const t = this._getOrAssignBlockId(e);
-    t && this.linkStateByBlockId.set(t, this._hasUnsubscribeLink(e)), this._setupSelectEventListener(), this._setupCancelEventListener(), !("getAttribute" in e && e.getAttribute("data-migration")) && (this._resetStoreState(), this._loadBlockState(e), this._checkExistingBlocks(), this._openDrawer());
+    t && this.linkStateByBlockId.set(t, this._hasUnsubscribeLink(e)), this._setupSelectEventListener(), this._setupCancelEventListener(t), !("getAttribute" in e && e.getAttribute("data-migration")) && (this._resetStoreState(), t && (l().pendingBlockId = t), this._loadBlockState(e), this._checkExistingBlocks(), this._openDrawer());
   }
   onCreated(e) {
     this._ensureLeadingTextGuard(e);
@@ -107,9 +109,9 @@ class H extends y {
     const g = this._getOrAssignBlockId(e);
     if (!g)
       return;
-    const _ = this.guardAttemptsByBlockId.get(g) ?? 0;
-    if (!(_ >= w)) {
-      this.guardAttemptsByBlockId.set(g, _ + 1);
+    const k = this.guardAttemptsByBlockId.get(g) ?? 0;
+    if (!(k >= P)) {
+      this.guardAttemptsByBlockId.set(g, k + 1);
       try {
         this.api.getDocumentModifier().modifyHtml(r).prepend(" ").apply(new d("Ensure unsubscribe link text guard"));
       } catch (p) {
@@ -154,8 +156,8 @@ class H extends y {
       const t = this.api.getDocumentRoot();
       t && "querySelectorAll" in t && t.querySelectorAll(m).forEach((r) => {
         if ("getAttribute" in r) {
-          const i = r.getAttribute(n.BLOCK_ID), l = i ? parseInt(i) : 0;
-          l > e && (e = l);
+          const i = r.getAttribute(n.BLOCK_ID), u = i ? parseInt(i) : 0;
+          u > e && (e = u);
         }
       });
     } catch {
@@ -164,14 +166,14 @@ class H extends y {
   }
   _warnLinkRemoved() {
     try {
-      const { showToaster: e } = f();
+      const { showToaster: e } = L();
       e({
         type: A.Warning,
-        message: this.api.translate(R),
+        message: this.api.translate(D),
         actionButton: {
           text: this.api.translate("Visit Academy"),
           onClick: () => {
-            window.open(U, "_blank", "noopener,noreferrer");
+            window.open(R, "_blank", "noopener,noreferrer");
           }
         }
       });
@@ -188,9 +190,10 @@ class H extends y {
   _removeSelectEventListener() {
     this.selectEventListener && (document.removeEventListener(b.SELECT, this.selectEventListener), this.selectEventListener = null);
   }
-  _setupCancelEventListener() {
-    this._removeCancelEventListener(), this.cancelEventListener = () => {
-      this._handleCancel();
+  _setupCancelEventListener(e) {
+    this._removeCancelEventListener(), this.cancelEventListener = (t) => {
+      const { detail: s } = t;
+      ((s == null ? void 0 : s.blockId) ?? null) === e && this._handleCancel();
     }, document.addEventListener(b.CANCEL, this.cancelEventListener);
   }
   _removeCancelEventListener() {
@@ -200,7 +203,7 @@ class H extends y {
     try {
       if (!this.currentNode)
         return;
-      this.api.getDocumentModifier().modifyHtml(this.currentNode).replaceWith(`<${I.EMPTY_CONTAINER}/>`).apply(new d("Removed unsubscribe block due to cancel"));
+      this.api.getDocumentModifier().modifyHtml(this.currentNode).replaceWith(`<${v.EMPTY_CONTAINER}/>`).apply(new d("Removed unsubscribe block due to cancel"));
     } catch (e) {
       console.warn("[UnsubscribeBlock] Failed to remove unsubscribe block:", e);
     }
@@ -218,19 +221,19 @@ class H extends y {
     this.api.getDocumentModifier().modifyHtml(s).setAttribute("href", r).apply(new d(`Updated unsubscribe link to ${r}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(n.PAGE_TYPE, e.toString()).setAttribute(n.PAGE_LIST, t).apply(new d("Updated unsubscribe block metadata"));
   }
   _getMergeTag(e) {
-    return D[e] ?? N;
+    return w[e] ?? U;
   }
   _openDrawer() {
     if (!(this.currentNode && this.currentNode.getAttribute("data-unsubscribe-page-type")))
       try {
-        const e = u();
+        const e = l();
         e.typeSelectionDrawerStatus = !0;
       } catch (e) {
         console.error("[UnsubscribeBlock] Failed to open drawer:", e);
       }
   }
   _checkExistingBlocks() {
-    const e = u();
+    const e = l();
     e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(m).forEach((s) => {
       if ("getAttribute" in s) {
         const r = s.getAttribute(n.PAGE_TYPE);
@@ -247,11 +250,11 @@ class H extends y {
     const t = e.getAttribute(n.PAGE_TYPE), s = e.getAttribute(n.PAGE_LIST);
     if (!t || !s)
       return;
-    const r = u(), i = Number(t), l = B(s);
-    await r.fetchTemplates(), r.setCollectionWithoutAutoSelection(i), r.loadSelectedTemplates(l);
+    const r = l(), i = Number(t), u = _(s);
+    await r.fetchTemplates(), r.setCollectionWithoutAutoSelection(i), r.loadSelectedTemplates(u);
   }
   _resetStoreState() {
-    u().$reset();
+    l().$reset();
   }
   _removeBlockTemplatesFromStore(e) {
     if (!("getAttribute" in e))
@@ -259,11 +262,11 @@ class H extends y {
     const t = e.getAttribute(n.PAGE_LIST);
     if (!t)
       return;
-    const s = u(), r = B(t);
+    const s = l(), r = _(t);
     s.removeUnsubscribePages(r);
   }
 }
 export {
-  C as UNSUBSCRIBE_BLOCK_ID,
-  H as UnsubscribeBlock
+  N as UNSUBSCRIBE_BLOCK_ID,
+  W as UnsubscribeBlock
 };

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

@@ -1,18 +1,19 @@
 var T = Object.defineProperty;
-var p = (o, s, e) => s in o ? T(o, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[s] = e;
-var c = (o, s, e) => p(o, typeof s != "symbol" ? s + "" : s, e);
+var p = (a, s, e) => s in a ? T(a, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[s] = e;
+var c = (a, s, e) => p(a, typeof s != "symbol" ? s + "" : s, e);
+import { useEditorStore as _ } from "../../../stores/editor.js";
 import { useUnsubscribeStore as l } from "../../../stores/unsubscribe.js";
-import { Control as _, UEAttr as i, UIElementType as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { Control as g, UEAttr as i, UIElementType as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { DATA_ATTRIBUTES as d } from "./utils/constants.js";
 import { parsePageList as h } from "./utils/utils.js";
-const g = "ui-elements-unsubscribe", r = {
+const v = "ui-elements-unsubscribe", r = {
   SELECT_BUTTON: "selectTemplateButton",
   PREV_BUTTON: "prevButton",
   NEXT_BUTTON: "nextButton",
   COUNTER_TEXT: "counterText",
   PREVIEW_IMAGE: "previewImage"
 };
-class B extends _ {
+class w extends g {
   constructor() {
     super(...arguments);
     c(this, "currentPreviewIndex", 0);
@@ -22,7 +23,7 @@ class B extends _ {
     c(this, "lastParsedAttribute");
   }
   getId() {
-    return g;
+    return v;
   }
   getTemplate() {
     return `
@@ -59,10 +60,12 @@ class B extends _ {
       this.api.onValueChanged(r.NEXT_BUTTON, () => this._onNextClick())
     );
   }
-  _onButtonClick() {
+  async _onButtonClick() {
     try {
+      if (_().isPreviewModeOpen)
+        return;
       const e = l();
-      this._reseedSelectionFromBlock(), e.activeType = e.getSelectedCollection[this.currentPreviewIndex], e.pageSelectionUpdateStatus = !0, e.pageSelectionDrawerStatus = !0;
+      await e.fetchTemplates(!0), this._reseedSelectionFromBlock(), e.activeType = e.getSelectedCollection[this.currentPreviewIndex], e.pageSelectionUpdateStatus = !0, e.pageSelectionDrawerStatus = !0;
     } catch (e) {
       console.error("[UnsubscribeControl] Failed to open drawer:", e);
     }
@@ -71,8 +74,8 @@ class B extends _ {
     const e = l();
     if (e.$reset(), !this.currentNode || !("getAttribute" in this.currentNode))
       return;
-    const t = this.currentNode.getAttribute(d.PAGE_TYPE), a = this.currentNode.getAttribute(d.PAGE_LIST);
-    !t || !a || (e.setCollectionWithoutAutoSelection(Number(t)), e.loadSelectedTemplates(h(a)));
+    const t = this.currentNode.getAttribute(d.PAGE_TYPE), o = this.currentNode.getAttribute(d.PAGE_LIST);
+    !t || !o || (e.setCollectionWithoutAutoSelection(Number(t)), e.loadSelectedTemplates(h(o)));
   }
   _onPrevClick() {
     this.currentPreviewIndex > 0 && (this.currentPreviewIndex--, this._updatePreview(), this._updateCounter());
@@ -100,8 +103,8 @@ class B extends _ {
       }
   }
   _updateCounter() {
-    const e = this.currentPreviewIndex + 1, t = this.totalTemplates, a = this.currentPreviewIndex === 0, u = this.currentPreviewIndex >= t - 1;
-    this.api.setUIEAttribute(r.PREV_BUTTON, i.BUTTON.disabled, a), this.api.setUIEAttribute(r.NEXT_BUTTON, i.BUTTON.disabled, u), this.api.setUIEAttribute(
+    const e = this.currentPreviewIndex + 1, t = this.totalTemplates, o = this.currentPreviewIndex === 0, u = this.currentPreviewIndex >= t - 1;
+    this.api.setUIEAttribute(r.PREV_BUTTON, i.BUTTON.disabled, o), this.api.setUIEAttribute(r.NEXT_BUTTON, i.BUTTON.disabled, u), this.api.setUIEAttribute(
       r.COUNTER_TEXT,
       i.LABEL.text,
       `${this.api.translate("Showing")} ${e} ${this.api.translate("of")} ${t}`
@@ -142,8 +145,8 @@ class B extends _ {
             </${n.LABEL}>
         `;
   }
-  _getIconButton(e, t, a) {
-    const u = a ? `${i.BUTTON.disabled}="true"` : "";
+  _getIconButton(e, t, o) {
+    const u = o ? `${i.BUTTON.disabled}="true"` : "";
     return `
             <${n.BUTTON}
                 id="${e}"
@@ -172,6 +175,6 @@ class B extends _ {
   }
 }
 export {
-  g as UNSUBSCRIBE_CONTROL_ID,
-  B as UnsubscribeControl
+  v as UNSUBSCRIBE_CONTROL_ID,
+  w as UnsubscribeControl
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-73199fa4] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.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}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.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}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-82128f7d]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-50dac6de]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-50dac6de]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-50dac6de]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-f6a8cb4c]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-f6a8cb4c]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-f6a8cb4c]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-f6a8cb4c]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-f6a8cb4c]{object-fit:cover;transform:scale(1)}[data-v-18e1220a] .guido__verion-history-view-option-selection-desktop svg,[data-v-18e1220a] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-18e1220a] .in-segments-wrapper__button_selected,[data-v-18e1220a] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-7419ae06] .vueperslides__bullets,[data-v-796d193b] .vueperslides__bullets{pointer-events:none!important}[data-v-796d193b] .vueperslides__parallax-wrapper{height:110px!important}[data-v-cadfc82d] .vueperslides__bullets{pointer-events:none!important}[data-v-cadfc82d] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-73199fa4] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.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}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.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}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-82128f7d]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-50dac6de]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-50dac6de]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-50dac6de]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-669fe7cf]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-669fe7cf]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-669fe7cf]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-669fe7cf]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-669fe7cf]{object-fit:cover;transform:scale(1)}[data-v-7a305bb2] .guido__verion-history-view-option-selection-desktop svg,[data-v-7a305bb2] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-7a305bb2] .in-segments-wrapper__button_selected,[data-v-7a305bb2] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-06afaecb]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-06afaecb]{min-height:504px}.iframe-wrapper[data-v-cbafc185]{width:258px}.iframe-scaled[data-v-cbafc185]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-7419ae06] .vueperslides__bullets,[data-v-796d193b] .vueperslides__bullets{pointer-events:none!important}[data-v-796d193b] .vueperslides__parallax-wrapper{height:110px!important}[data-v-cadfc82d] .vueperslides__bullets{pointer-events:none!important}[data-v-cadfc82d] .vueperslides__parallax-wrapper{height:110px!important}

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

@@ -0,0 +1,3 @@
+export declare const usePreviewInteractionGuard: () => {
+    blockPreviewInteractions: (iframe: HTMLIFrameElement) => void;
+};

package/dist/src/composables/validators/useUnsubscribeBlockValidator.d.ts

@@ -1,3 +1,4 @@
 export declare const useUnsubscribeBlockValidator: () => {
     validateUnsubscribeBlockUniqueness: (html: string) => boolean;
+    validateUnsubscribeBlockHasTemplate: (html: string) => boolean;
 };

package/dist/src/stores/unsubscribe.d.ts

@@ -10,6 +10,7 @@ interface StoreState {
     typeSelectionDrawerStatus: boolean;
     isGlobalUnsubscribeDisabled: boolean;
     isSubscriptionPreferencesCenterDisabled: boolean;
+    pendingBlockId: string | null;
 }
 export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guidoUnsubscribe", StoreState, {
     getSelectedCollection: (state: {
@@ -35,6 +36,7 @@ export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guido
         typeSelectionDrawerStatus: boolean;
         isGlobalUnsubscribeDisabled: boolean;
         isSubscriptionPreferencesCenterDisabled: boolean;
+        pendingBlockId: string | null;
     } & import("pinia").PiniaCustomStateProperties<StoreState>) => number[];
     getSelectedTemplateByActiveType: (state: {
         templates: {
@@ -59,6 +61,7 @@ export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guido
         typeSelectionDrawerStatus: boolean;
         isGlobalUnsubscribeDisabled: boolean;
         isSubscriptionPreferencesCenterDisabled: boolean;
+        pendingBlockId: string | null;
     } & import("pinia").PiniaCustomStateProperties<StoreState>) => number;
     getTemplatesByActiveType: (state: {
         templates: {
@@ -83,6 +86,7 @@ export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guido
         typeSelectionDrawerStatus: boolean;
         isGlobalUnsubscribeDisabled: boolean;
         isSubscriptionPreferencesCenterDisabled: boolean;
+        pendingBlockId: string | null;
     } & import("pinia").PiniaCustomStateProperties<StoreState>) => {
         id: number;
         name: string;
@@ -119,6 +123,7 @@ export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guido
         typeSelectionDrawerStatus: boolean;
         isGlobalUnsubscribeDisabled: boolean;
         isSubscriptionPreferencesCenterDisabled: boolean;
+        pendingBlockId: string | null;
     } & import("pinia").PiniaCustomStateProperties<StoreState>) => (id: number) => string;
     getSelectedUnsubscribePagesByCollection: (state: {
         templates: {
@@ -143,6 +148,7 @@ export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guido
         typeSelectionDrawerStatus: boolean;
         isGlobalUnsubscribeDisabled: boolean;
         isSubscriptionPreferencesCenterDisabled: boolean;
+        pendingBlockId: string | null;
     } & import("pinia").PiniaCustomStateProperties<StoreState>) => (collectionType: number) => number[];
     isActiveTypeFirstInCollection: (state: {
         templates: {
@@ -167,6 +173,7 @@ export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guido
         typeSelectionDrawerStatus: boolean;
         isGlobalUnsubscribeDisabled: boolean;
         isSubscriptionPreferencesCenterDisabled: boolean;
+        pendingBlockId: string | null;
     } & import("pinia").PiniaCustomStateProperties<StoreState>) => boolean;
     isActiveTypeLastInCollection: (state: {
         templates: {
@@ -191,6 +198,7 @@ export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guido
         typeSelectionDrawerStatus: boolean;
         isGlobalUnsubscribeDisabled: boolean;
         isSubscriptionPreferencesCenterDisabled: boolean;
+        pendingBlockId: string | null;
     } & import("pinia").PiniaCustomStateProperties<StoreState>) => boolean;
     hasTemplatesByCollectionType: (state: {
         templates: {
@@ -215,6 +223,7 @@ export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guido
         typeSelectionDrawerStatus: boolean;
         isGlobalUnsubscribeDisabled: boolean;
         isSubscriptionPreferencesCenterDisabled: boolean;
+        pendingBlockId: string | null;
     } & import("pinia").PiniaCustomStateProperties<StoreState>) => Record<number, boolean>;
     unsubscribePagesStatus: (state: {
         templates: {
@@ -239,10 +248,11 @@ export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guido
         typeSelectionDrawerStatus: boolean;
         isGlobalUnsubscribeDisabled: boolean;
         isSubscriptionPreferencesCenterDisabled: boolean;
+        pendingBlockId: string | null;
     } & import("pinia").PiniaCustomStateProperties<StoreState>) => boolean;
 }, {
     $reset(): void;
-    fetchTemplates(): Promise<void>;
+    fetchTemplates(force?: boolean): Promise<void>;
     setCollection(collectionType: number): void;
     setCollectionWithoutAutoSelection(collectionType: number): void;
     setSelectedTemplate(template: number): void;

package/dist/stores/unsubscribe.js

@@ -1,6 +1,6 @@
 import { TYPE_COLLECTIONS as i, PAGE_TYPES as p } from "../enums/unsubscribe.js";
 import { useUnsubscribeApi as d } from "../services/unsubscribeApi.js";
-import { defineStore as h } from "pinia";
+import { defineStore as u } from "pinia";
 let o = null;
 const r = () => ({
   templates: [],
@@ -12,8 +12,9 @@ const r = () => ({
   pageSelectionDrawerStatus: !1,
   typeSelectionDrawerStatus: !1,
   isGlobalUnsubscribeDisabled: !1,
-  isSubscriptionPreferencesCenterDisabled: !1
-}), b = h("guidoUnsubscribe", {
+  isSubscriptionPreferencesCenterDisabled: !1,
+  pendingBlockId: null
+}), b = u("guidoUnsubscribe", {
   state: () => r(),
   getters: {
     getSelectedCollection: (e) => i[e.selectedCollectionType],
@@ -62,10 +63,10 @@ const r = () => ({
         selectedUnsubscribePages: t
       });
     },
-    async fetchTemplates() {
-      this.templates.length || (o || (o = (async () => {
-        const { getUnsubscribePages: e } = d();
-        this.templates = await e();
+    async fetchTemplates(e = !1) {
+      !e && this.templates.length || ((e || !o) && (o = (async () => {
+        const { getUnsubscribePages: t } = d();
+        this.templates = await t();
       })().finally(() => {
         o = null;
       })), await o);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.8.1-beta.1a5be20",
+  "version": "3.8.1-beta.34bf80d",
   "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",