@useinsider/guido 1.0.3-beta.185718d → 1.0.3-beta.18f9e49

package/README.md

@@ -52,6 +52,7 @@ npm install @useinsider/guido
       ref="guidoEditor"
       :template-id="templateId"
       :user-id="userId"
+      :migration-date="migrationDate"
       :guido-config="guidoConfig"
       :html="initialHtml"
       :css="initialCss"
@@ -74,16 +75,19 @@ export default {
     return {
       templateId: 'template-123',
       userId: 'user-456',
+      migrationDate: 1699488000,
       initialHtml: '<p>Initial HTML content</p>',
       initialCss: 'p { color: #333; }',
       guidoConfig: {
         translationsPath: 'window.trans.en',
         htmlCompilerRules: [],
         ignoreDefaultHtmlCompilerRules: false,
+        backButtonLabel?: "Back to Design",
         features: {
           dynamicContent: true,
           saveAsTemplate: true,
-          versionHistory: true
+          versionHistory: true,
+          testMessage: true
         }
       },
       dynamicContentModalVisible: false
@@ -145,6 +149,7 @@ export default {
 | `templateId` | `string` | ✅ | - | Unique identifier for the email template |
 | `userId` | `string` | ✅ | - | Unique identifier for the user |
 | `guidoConfig` | `GuidoConfig` | ✅ | - | Configuration object for the editor |
+| `migrationDate` | `number` | ✅ | - | Stripo migration date in Unix timestamp (seconds). Retrieved from backend `/partner-settings` endpoint as `migrationDate`. Used for onboarding process |
 | `partnerName` | `string` | ⚪ | From URL host | Partner identifier |
 | `productType` | `string` | ⚪ | From URL path | Product type identifier |
 | `username` | `string` | ⚪ | `'Guido User'` | Display name for the user |
@@ -161,6 +166,8 @@ export default {
 | `save:complete` | `Omit<Template, 'forceRecreate'>` | Fired when template is successfully saved |
 | `on-change` | void | It Fires once for managing leave modal etc. |
 | `ready` | void | Fired when the editor is ready and template is loaded |
+| `onboarding-finished` | void | Fired when the onboarding popup is dismissed or completed, allowing parent applications to track onboarding state |
+| `test-email:click` | - | Fired when user clicks the test email button in the header |
 
 ### Guido Exposed Methods
 ```typescript
@@ -190,6 +197,7 @@ interface GuidoConfig {
     dynamicContent: boolean;
     saveAsTemplate: boolean;
     versionHistory: boolean;
+    testMessage: boolean;
   };
   blocks?: {
     excludeDefaults?: GuidoBlockType[];
@@ -281,7 +289,8 @@ const guidoConfig = {
   features: {
     dynamicContent: true,
     saveAsTemplate: true,
-    versionHistory: true
+    versionHistory: true,
+    testMessage: true
   },
   blocks: {
     excludeDefaults: ['button-block', 'image-block', 'video-block']
@@ -304,7 +313,8 @@ const guidoConfig = {
   features: {
     dynamicContent: true,
     saveAsTemplate: true,
-    versionHistory: true
+    versionHistory: true,
+    testMessage: true
   },
   blocks: {
     includeCustoms: ['coupon-block', 'recommendation-block']
@@ -327,8 +337,9 @@ const guidoConfig = {
   features: {
     dynamicContent: true,
     saveAsTemplate: true,
-    versionHistory: true
-  }
+    versionHistory: true,
+    testMessage: true
+  },
   // No blocks config
 };
 ```
@@ -440,7 +451,8 @@ const guidoConfig = {
   features: {
     dynamicContent: true,
     saveAsTemplate: true,
-    versionHistory: false  // Disable version history
+    versionHistory: false,  // Disable version history
+    testMessage: true
   },
   htmlCompilerRules: [
     {
@@ -473,7 +485,8 @@ const guidoConfig = {
   features: {
     dynamicContent: true,
     saveAsTemplate: true,
-    versionHistory: true
+    versionHistory: true,
+    testMessage: true
   },
   ignoreDefaultHtmlCompilerRules: true, // Skip all default rules
   htmlCompilerRules: [

package/dist/components/Guido.vue.js

@@ -1,18 +1,22 @@
-import a from "./Guido.vue2.js";
+import t from "./Guido.vue2.js";
 /* empty css           */
-import i from "../_virtual/_plugin-vue2_normalizer.js";
-var t = function() {
-  var o = this, r = o._self._c, e = o._self._setupProxy;
-  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
-}, s = [], d = /* @__PURE__ */ i(
-  a,
+import a from "../_virtual/_plugin-vue2_normalizer.js";
+var n = function() {
+  var i = this, r = i._self._c, e = i._self._setupProxy;
+  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef", on: { "test-email:click": function(o) {
+    return e.emit("test-email:click");
+  } } }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : i._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? i._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(o) {
+    return e.emit("onboarding:finished");
+  } } }), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
+}, s = [], d = /* @__PURE__ */ a(
   t,
+  n,
   s,
   !1,
   null,
-  "e8d51dec"
+  "486a715d"
 );
-const l = d.exports;
+const u = d.exports;
 export {
-  l as default
+  u as default
 };

package/dist/components/Guido.vue2.js

@@ -14,9 +14,9 @@ import { useStripoApi as oe } from "../services/stripoApi.js";
 import { useConfigStore as te } from "../stores/config.js";
 import { useDynamicContentStore as ne } from "../stores/dynamic-content.js";
 import { useEditorStore as re } from "../stores/editor.js";
-import { usePreviewStore as ae } from "../stores/preview.js";
-import { useUnsubscribeStore as se } from "../stores/unsubscribe.js";
-import ie from "../node_modules/lodash-es/merge.js";
+import { usePreviewStore as ie } from "../stores/preview.js";
+import { useUnsubscribeStore as ae } from "../stores/unsubscribe.js";
+import se from "../node_modules/lodash-es/merge.js";
 const Ge = /* @__PURE__ */ R({
   __name: "Guido",
   props: {
@@ -31,39 +31,39 @@ const Ge = /* @__PURE__ */ R({
     guidoConfig: null,
     templateConfig: null
   },
-  emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready"],
-  setup(_, { expose: L, emit: t }) {
-    const u = _, k = I(
+  emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
+  setup(_, { expose: k, emit: t }) {
+    const l = _, L = I(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
     ), A = I(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), l = x(), a = ne(), p = se(), g = te(), s = re(), N = ae(), n = U(() => s.hasChanges), { getPartnerName: f, getProductType: y, isTestPartner: F } = O(), v = () => {
+    ), u = x(), i = ne(), p = ae(), g = te(), a = re(), N = ie(), n = U(() => a.hasChanges), { getPartnerName: f, getProductType: y, isTestPartner: F } = O(), v = () => {
       var e;
-      return (e = l.value) == null ? void 0 : e.handleSave(!0);
+      return (e = u.value) == null ? void 0 : e.handleSave(!0);
     }, {
-      templateId: i,
+      templateId: s,
       userId: b,
       guidoConfig: C,
       templateConfig: o,
       html: r = "",
       css: h = "",
       partnerName: c = f(),
-      productType: m = y(),
+      productType: d = y(),
       messageType: S = J,
       username: w = q
-    } = u, d = (o == null ? void 0 : o.preselectedDynamicContentList) || [];
-    s.templateId = i, window.GuidoConfig = ie(Q, C), window.GuidoConfig.partner = {
+    } = l, m = (o == null ? void 0 : o.preselectedDynamicContentList) || [];
+    a.templateId = s, window.GuidoConfig = se(Q, C), window.GuidoConfig.partner = {
       partnerName: c,
-      productType: m,
+      productType: d,
       messageType: S
     }, g.templateConfig = o;
     const { initPlugin: D } = j({
-      emailId: i,
+      emailId: s,
       userId: b,
       username: w,
       partnerName: c,
-      productType: m,
-      preselectedDynamicContentList: d,
+      productType: d,
+      preselectedDynamicContentList: m,
       onReady: () => {
         console.debug("guido:ready"), t("ready");
       }
@@ -83,7 +83,7 @@ const Ge = /* @__PURE__ */ R({
       }
     });
     const E = (e) => {
-      console.debug("dynamic-content:close", e), a.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+      console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
     }, P = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
@@ -99,7 +99,7 @@ const Ge = /* @__PURE__ */ R({
           forceRecreate: !0
           // TODO: It should be false for old templates. We will communicate with Stripo
         };
-        e.html || (e = await T(), e.html = await W(e.html)), await D(e), a.selectedDynamicContentList = d;
+        e.html || (e = await T(), e.html = await W(e.html)), await D(e), i.selectedDynamicContentList = m;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
@@ -113,14 +113,14 @@ const Ge = /* @__PURE__ */ R({
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-    }), L({
+    }), k({
       dynamicContent: {
         insert: E,
         close: P
       },
       hasChanges: n,
       saveSilent: v
-    }), { __sfc: !0, PreviewContainer: k, OnboardingWrapper: A, headerWrapperRef: l, dynamicContentStore: a, unsubscribeStore: p, props: u, configStore: g, editorStore: s, previewStore: N, hasChanges: n, getPartnerName: f, getProductType: y, isTestPartner: F, saveSilent: v, templateId: i, userId: b, guidoConfig: C, templateConfig: o, html: r, css: h, partnerName: c, productType: m, messageType: S, username: w, preselectedDynamicContentList: d, emit: t, initPlugin: D, getDefaultTemplate: T, noHeader: H, insertDynamicContent: E, closeDynamicContent: P, Toaster: V, FilterSelectionDrawer: X, HeaderWrapper: Y, LoadingWrapper: Z, SaveAsTemplateDrawer: $, UnsubscribeWrapper: ee };
+    }), { __sfc: !0, PreviewContainer: L, OnboardingWrapper: A, headerWrapperRef: u, dynamicContentStore: i, unsubscribeStore: p, props: l, configStore: g, editorStore: a, previewStore: N, hasChanges: n, getPartnerName: f, getProductType: y, isTestPartner: F, saveSilent: v, templateId: s, userId: b, guidoConfig: C, templateConfig: o, html: r, css: h, partnerName: c, productType: d, messageType: S, username: w, preselectedDynamicContentList: m, emit: t, initPlugin: D, getDefaultTemplate: T, noHeader: H, insertDynamicContent: E, closeDynamicContent: P, Toaster: V, FilterSelectionDrawer: X, HeaderWrapper: Y, LoadingWrapper: Z, SaveAsTemplateDrawer: $, UnsubscribeWrapper: ee };
   }
 });
 export {

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

@@ -1,17 +1,19 @@
 import o from "./HeaderWrapper.vue2.js";
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
+import n from "../../../_virtual/_plugin-vue2_normalizer.js";
+var s = function() {
   var t = this, r = t._self._c, e = t._self._setupProxy;
-  return r(e.InContainer, { attrs: { border: "bor-w-0 bor-b-w-1 bor-s-s bor-c-6", "border-radius": "bor-r-0" } }, [r("div", { staticClass: "w-1 d-f a-i-c j-c-s-b p-3" }, [r(e.LeftSlot), r(e.MiddleSlot), r(e.RightSlot, { ref: "rightSlotRef" })], 1)]);
-}, a = [], _ = /* @__PURE__ */ s(
+  return r(e.InContainer, { attrs: { border: "bor-w-0 bor-b-w-1 bor-s-s bor-c-6", "border-radius": "bor-r-0" } }, [r("div", { staticClass: "w-1 d-f a-i-c j-c-s-b p-3" }, [r(e.LeftSlot), r(e.MiddleSlot), r(e.RightSlot, { ref: "rightSlotRef", on: { "test-email:click": function(c) {
+    return e.emit("test-email:click");
+  } } })], 1)]);
+}, i = [], a = /* @__PURE__ */ n(
   o,
-  n,
-  a,
+  s,
+  i,
   !1,
   null,
   null
 );
-const c = _.exports;
+const d = a.exports;
 export {
-  c as default
+  d as default
 };

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

@@ -1,20 +1,21 @@
-import { defineComponent as n, ref as m } from "vue";
+import { defineComponent as i, ref as n } from "vue";
 import { InContainer as a } from "@useinsider/design-system-vue";
-import f from "./LeftSlot.vue.js";
-import p from "./MiddleSlot.vue.js";
-import i from "./RightSlot.vue.js";
-const c = /* @__PURE__ */ n({
+import l from "./LeftSlot.vue.js";
+import f from "./MiddleSlot.vue.js";
+import p from "./RightSlot.vue.js";
+const h = /* @__PURE__ */ i({
   __name: "HeaderWrapper",
-  setup(l, { expose: r }) {
-    const e = m(null);
-    return r({
-      handleSave: (t) => {
-        var o;
-        return (o = e.value) == null ? void 0 : o.handleSave(t);
+  emits: ["test-email:click"],
+  setup(s, { expose: o, emit: r }) {
+    const e = n(null);
+    return o({
+      handleSave: (m) => {
+        var t;
+        return (t = e.value) == null ? void 0 : t.handleSave(m);
       }
-    }), { __sfc: !0, rightSlotRef: e, InContainer: a, LeftSlot: f, MiddleSlot: p, RightSlot: i };
+    }), { __sfc: !0, rightSlotRef: e, emit: r, InContainer: a, LeftSlot: l, MiddleSlot: f, RightSlot: p };
   }
 });
 export {
-  c as default
+  h as default
 };

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

@@ -10,7 +10,7 @@ var n = function() {
   a,
   !1,
   null,
-  "244e7935"
+  "0502bceb"
 );
 const p = i.exports;
 export {

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

@@ -1,29 +1,29 @@
 import { defineComponent as c, computed as a } from "vue";
-import { useBack as m } from "../../../composables/useGuidoActions.js";
-import { usePartner as u } from "../../../composables/usePartner.js";
-import { usePreviewMode as p } from "../../../composables/usePreviewMode.js";
-import { useTranslations as f } from "../../../composables/useTranslations.js";
+import { useConfig as m } from "../../../composables/useConfig.js";
+import { useBack as u } from "../../../composables/useGuidoActions.js";
+import { usePreviewMode as f } from "../../../composables/usePreviewMode.js";
+import { useTranslations as p } from "../../../composables/useTranslations.js";
 import { useVersionHistoryApi as d } from "../../../composables/useVersionHistoryApi.js";
 import { useEditorStore as l } from "../../../stores/editor.js";
 import { InButtonV2 as k } from "@useinsider/design-system-vue";
-import b from "./version-history/RestoreButton.vue.js";
-const h = /* @__PURE__ */ c({
+import B from "./version-history/RestoreButton.vue.js";
+const P = /* @__PURE__ */ c({
   __name: "LeftSlot",
-  setup(_) {
-    const e = l(), r = m(), { closeVersionHistory: t } = d(), { closePreviewMode: i } = p(), { isUnsubscribePages: s } = u(), o = f(), n = a(() => e.isVersionHistoryOpen || e.isPreviewModeOpen ? o("email-editor.back-to-editor") : s() ? o("email-editor.back-to-unsubscribe-pages") : o("email-editor.back-to-design"));
-    return { __sfc: !0, editorStore: e, handleBack: r, closeVersionHistory: t, closePreviewMode: i, isUnsubscribePages: s, trans: o, backButtonLabel: n, handleBackClick: () => {
-      if (e.isVersionHistoryOpen) {
-        t();
+  setup(b) {
+    const o = l(), r = u(), { closeVersionHistory: i } = d(), { closePreviewMode: n } = f(), e = p(), { config: t } = m(), s = a(() => o.isVersionHistoryOpen || o.isPreviewModeOpen ? e("email-editor.back-to-editor") : t.backButtonLabel ? t.backButtonLabel : e("email-editor.back-to-design"));
+    return { __sfc: !0, editorStore: o, handleBack: r, closeVersionHistory: i, closePreviewMode: n, trans: e, config: t, backButtonLabel: s, handleBackClick: () => {
+      if (o.isVersionHistoryOpen) {
+        i();
         return;
       }
-      if (e.isPreviewModeOpen) {
-        i();
+      if (o.isPreviewModeOpen) {
+        n();
         return;
       }
       r();
-    }, InButtonV2: k, RestoreButton: b };
+    }, InButtonV2: k, RestoreButton: B };
   }
 });
 export {
-  h as default
+  P as default
 };

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

@@ -1,20 +1,22 @@
-import n from "./RightSlot.vue2.js";
-import a from "../../../_virtual/_plugin-vue2_normalizer.js";
-var l = function() {
-  var o, i;
+import l from "./RightSlot.vue2.js";
+import r from "../../../_virtual/_plugin-vue2_normalizer.js";
+var u = function() {
+  var o, i, n;
   var s = this, e = s._self._c, t = s._self._setupProxy;
-  return e("div", { staticClass: "d-f" }, [(o = t.config.features) != null && o.versionHistory ? e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : s._e(), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = t.config.features) != null && i.saveAsTemplate ? e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : s._e(), t.isUnsubscribePages() ? s._e() : e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button"), "tooltip-text": t.trans("newsletter.test-email") } }), e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(p) {
+  return e("div", { staticClass: "d-f" }, [(o = t.config.features) != null && o.versionHistory ? e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : s._e(), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = t.config.features) != null && i.saveAsTemplate ? e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : s._e(), (n = t.config.features) != null && n.testMessage ? e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button"), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: function(a) {
+    return t.emit("test-email:click");
+  } } }) : s._e(), e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(a) {
     return t.handleSave(!1);
   } } })], 1);
-}, r = [], u = /* @__PURE__ */ a(
-  n,
+}, d = [], p = /* @__PURE__ */ r(
   l,
-  r,
+  u,
+  d,
   !1,
   null,
   null
 );
-const g = u.exports;
+const f = p.exports;
 export {
-  g as default
+  f as default
 };

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

@@ -1,18 +1,18 @@
-import { defineComponent as H, ref as l, computed as _ } from "vue";
+import { defineComponent as H, ref as p, computed as _ } from "vue";
 import { useConfig as h } from "../../../composables/useConfig.js";
 import { useExport as V } from "../../../composables/useExport.js";
-import { usePartner as x } from "../../../composables/usePartner.js";
-import { useSave as w } from "../../../composables/useSave.js";
-import { useTranslations as T } from "../../../composables/useTranslations.js";
-import { useVersionHistoryApi as E } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as O } from "../../../stores/editor.js";
-import { getTooltipOptions as A } from "../../../utils/tooltipUtils.js";
-import { InButtonV2 as b } from "@useinsider/design-system-vue";
+import { useSave as x } from "../../../composables/useSave.js";
+import { useTranslations as w } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as T } from "../../../composables/useVersionHistoryApi.js";
+import { useEditorStore as E } from "../../../stores/editor.js";
+import { getTooltipOptions as O } from "../../../utils/tooltipUtils.js";
+import { InButtonV2 as A } from "@useinsider/design-system-vue";
 const F = /* @__PURE__ */ H({
   __name: "RightSlot",
-  setup(C, { expose: m }) {
-    const { config: u } = h(), { exportHtml: r } = V(), { save: n } = w(), { openVersionHistory: i, closeVersionHistory: a } = E(), { isUnsubscribePages: c } = x(), o = O(), t = T(), e = l(!1), s = l(!1), f = () => {
-      if (o.isVersionHistoryOpen) {
+  emits: ["test-email:click"],
+  setup(C, { expose: m, emit: c }) {
+    const { config: u } = h(), { exportHtml: r } = V(), { save: n } = x(), { openVersionHistory: i, closeVersionHistory: a } = T(), t = E(), o = w(), e = p(!1), s = p(!1), f = () => {
+      if (t.isVersionHistoryOpen) {
         a();
         return;
       }
@@ -20,15 +20,15 @@ const F = /* @__PURE__ */ H({
     }, v = async () => {
       e.value = !0, await r(), e.value = !1;
     }, d = () => {
-      o.isSaveAsTemplateDrawerOpen = !0;
-    }, y = _(() => o.isVersionHistoryOpen ? t("newsletter.close-version-history") : t("newsletter.version-history")), p = async (S) => {
-      s.value = !0, o.loadingStatus = !0;
+      t.isSaveAsTemplateDrawerOpen = !0;
+    }, y = _(() => t.isVersionHistoryOpen ? o("newsletter.close-version-history") : o("newsletter.version-history")), l = async (S) => {
+      s.value = !0, t.loadingStatus = !0;
       const g = await n(S);
-      return s.value = !1, o.loadingStatus = !1, g;
+      return s.value = !1, t.loadingStatus = !1, g;
     };
     return m({
-      handleSave: p
-    }), { __sfc: !0, config: u, exportHtml: r, save: n, openVersionHistory: i, closeVersionHistory: a, isUnsubscribePages: c, editorStore: o, trans: t, isExporting: e, isSaving: s, handleVersionHistory: f, handleExport: v, handleSaveAs: d, versionHistoryTooltipText: y, handleSave: p, getTooltipOptions: A, InButtonV2: b };
+      handleSave: l
+    }), { __sfc: !0, config: u, exportHtml: r, save: n, openVersionHistory: i, closeVersionHistory: a, editorStore: t, trans: o, isExporting: e, isSaving: s, emit: c, handleVersionHistory: f, handleExport: v, handleSaveAs: d, versionHistoryTooltipText: y, handleSave: l, getTooltipOptions: O, InButtonV2: A };
   }
 });
 export {

package/dist/components/organisms/onboarding/NewVersionPopup.vue.js

@@ -1,17 +1,17 @@
-import s from "./NewVersionPopup.vue2.js";
+import t from "./NewVersionPopup.vue2.js";
 import n from "../../../_virtual/_plugin-vue2_normalizer.js";
-var r = function() {
-  var e = this, t = e._self._c, o = e._self._setupProxy;
-  return o.isVisible ? t(o.WpModal, { attrs: { id: "guido__new-version-popup", "close-on-outside-click": !1, "footer-button-options": o.footerButtonOptions, title: o.trans("email-editor.onboarding-title") }, on: { close: o.handleClose, "primary-action": o.handleDiscoverNow, "secondary-action": o.handleRemindLater } }, [t("div", { staticClass: "d-f f-d-c" }, [t("img", { staticClass: "w-1 h-1 d-b p-e-n mb-5", attrs: { src: o.onboardingImageSvg } }), t("p", { staticClass: "f-s-2 f-w-400", domProps: { innerHTML: e._s(o.trans("email-editor.onboarding-description")) } })])]) : e._e();
-}, i = [], a = /* @__PURE__ */ n(
-  s,
-  r,
+var i = function() {
+  var e = this, s = e._self._c, o = e._self._setupProxy;
+  return o.isVisible ? s(o.WpModal, { attrs: { id: "guido__new-version-popup", size: "medium", "close-on-outside-click": !1, "footer-button-options": o.footerButtonOptions, title: o.popupTitle }, on: { close: o.handleClose, "primary-action": o.handleDiscoverNow, "secondary-action": o.handleRemindLater } }, [s("div", { staticClass: "d-f f-d-c" }, [s("img", { staticClass: "w-1 h-1 d-b p-e-n mb-5", attrs: { src: o.onboardingImageSvg } }), s("p", { staticClass: "f-s-2 f-w-400", domProps: { innerHTML: e._s(o.popupDescription) } })])]) : e._e();
+}, r = [], a = /* @__PURE__ */ n(
+  t,
   i,
+  r,
   !1,
   null,
   null
 );
-const p = a.exports;
+const _ = a.exports;
 export {
-  p as default
+  _ as default
 };

package/dist/components/organisms/onboarding/NewVersionPopup.vue2.js

@@ -1,30 +1,43 @@
-import { defineComponent as s, ref as r } from "vue";
-import a from "../../wrappers/WpModal.vue.js";
-import { useTranslations as i } from "../../../composables/useTranslations.js";
-import l from "../../../static/assets/onboarding-img.svg.js";
-import { useOnboardingStore as m } from "../../../stores/onboarding.js";
-const w = /* @__PURE__ */ s({
+import { defineComponent as g, ref as b, computed as o } from "vue";
+import v from "../../wrappers/WpModal.vue.js";
+import { useConfig as D } from "../../../composables/useConfig.js";
+import { useTranslations as h } from "../../../composables/useTranslations.js";
+import { ACADEMY_LINK as l } from "../../../enums/onboarding.js";
+import y from "../../../static/assets/onboarding-img.svg.js";
+import { useOnboardingStore as _ } from "../../../stores/onboarding.js";
+import { isAfterDate as C, formatShortDate as L } from "../../../utils/dateUtil.js";
+const I = /* @__PURE__ */ g({
   __name: "NewVersionPopup",
-  setup(p) {
-    const n = i(), e = m(), o = r(!0), t = r({
+  emits: ["onboarding-finished"],
+  setup(w, { emit: a }) {
+    const e = h(), t = _(), s = b(!0), { config: p } = D(), i = o(() => p.migrationDate), n = o(() => C(i.value || 0)), d = o(() => L(
+      i.value
+    )), m = o(() => n.value ? e("email-editor.onboarding-popup-sunsetted-title") : e("email-editor.onboarding-title")), c = o(() => n.value ? e("email-editor.onboarding-popup-sunsetted-description", {
+      sunsetDate: d.value,
+      academyLink: l
+    }) : e("email-editor.onboarding-description", {
+      academyLink: l
+    })), u = o(() => n.value ? e("products.cancel") : e("products.remind-me-later")), f = o(() => ({
       primaryButton: {
         type: "primary",
-        labelText: n("left-menu.discover-now")
+        labelText: e("left-menu.discover-now")
       },
       secondaryButton: {
         type: "subtle-primary",
-        labelText: n("products.remind-me-later")
+        labelText: u.value
       }
-    });
-    return { __sfc: !0, trans: n, onboardingStore: e, isVisible: o, footerButtonOptions: t, handleDiscoverNow: () => {
-      e.onDiscoverNowClicked(), o.value = !1;
+    })), r = () => {
+      s.value = !1, a("onboarding-finished");
+    };
+    return { __sfc: !0, emit: a, trans: e, onboardingStore: t, isVisible: s, config: p, migrationDate: i, isAfterMigrationDate: n, formattedSunsetDate: d, popupTitle: m, popupDescription: c, secondaryButtonLabel: u, footerButtonOptions: f, closePopup: r, handleDiscoverNow: () => {
+      t.onDiscoverNowClicked(), r();
     }, handleRemindLater: () => {
-      e.onRemindMeLater(), o.value = !1;
+      t.onRemindMeLater(), r();
     }, handleClose: () => {
-      e.onNewVersionPopupClose(), o.value = !1;
-    }, WpModal: a, onboardingImageSvg: l };
+      t.onNewVersionPopupClose(), r();
+    }, WpModal: v, onboardingImageSvg: y };
   }
 });
 export {
-  w as default
+  I as default
 };

package/dist/components/organisms/onboarding/OnboardingWrapper.vue.js

@@ -1,19 +1,21 @@
-import o from "./OnboardingWrapper.vue2.js";
-import _ from "../../../_virtual/_plugin-vue2_normalizer.js";
+import t from "./OnboardingWrapper.vue2.js";
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
 var s = function() {
-  var n = this, e = n._self._c, t = n._self._setupProxy;
-  return e("div", n._l(t.visibleOnboardings, function(r) {
-    return e(r.component, { key: r.type, tag: "component" });
+  var n = this, e = n._self._c, r = n._self._setupProxy;
+  return e("div", n._l(r.visibleOnboardings, function(o) {
+    return e(o.component, { key: o.type, tag: "component", on: { "onboarding-finished": function(p) {
+      return r.emit("onboarding-finished");
+    } } });
   }), 1);
-}, a = [], p = /* @__PURE__ */ _(
-  o,
+}, _ = [], a = /* @__PURE__ */ i(
+  t,
   s,
-  a,
+  _,
   !1,
   null,
   null
 );
-const m = p.exports;
+const d = a.exports;
 export {
-  m as default
+  d as default
 };