@useinsider/guido 1.0.3-beta.e0403cf → 1.0.3-beta.e32f324

package/dist/enums/unsubscribe.js

@@ -1,25 +1,26 @@
-import { useTranslations as e } from "../composables/useTranslations.js";
-const s = e(), R = {
+import { useTranslations as n } from "../composables/useTranslations.js";
+import { getEnvironmentPrefix as R } from "../utils/environmentUtil.js";
+const e = n(), I = {
   UNSUBSCRIBE_LINK_TYPE: 1,
   PREFERENCES_LINK_TYPE: 3
-}, S = {
+}, r = {
   UNSUBSCRIBE_LINK_REGEX: /{{ins-unsubscribe-link}}/g,
   DATA_OGSB_BUTTON_CSS_REGEX: "\\[data-ogsb\\]\\s*\\.es-button\\.es-button-[0-9]+\\s*\\{(?:[^\\}]*)\\}",
   GLOBAL_UNSUBSCRIBE_LINK_REGEX: /{{ins-global-unsubscribe-link}}/g,
   PREFERENCES_UNSUBSCRIBE_LINK_REGEX: /{{ins-preferences-unsubscribe-link}}/g
-}, N = {
-  UNSUBSCRIBE_URL: "https://mail.useinsider.com/user/v1/unsub",
-  PREFERENCES_URL: "https://mail.useinsider.com/user/v1/prefs"
-}, _ = {
+}, s = R(), _ = {
+  UNSUBSCRIBE_URL: `https://mail.${s}.com/user/v1/unsub`,
+  PREFERENCES_URL: `https://mail.${s}.com/user/v1/prefs`
+}, i = "iid", B = {
   name: "Global Unsubscribe",
   sendGridId: "G"
-}, I = "https://academy.useinsider.com/docs/global-unsubscribe-preference-center", r = "/email/unsubscribe-pages", E = {
+}, C = "https://academy.useinsider.com/docs/global-unsubscribe-preference-center", c = "/email/unsubscribe-pages", E = {
   GLOBAL_UNSUBSCRIBE: 1,
   GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE: 2,
   SUBSCRIPTION_PREFERENCE_CENTER: 3,
   SUBSCRIPTION_PREFERENCE_CONFIRMATION: 4,
   RESUBSCRIBE: 5
-}, i = {
+}, t = {
   [E.GLOBAL_UNSUBSCRIBE]: [
     E.GLOBAL_UNSUBSCRIBE,
     E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE,
@@ -29,26 +30,27 @@ const s = e(), R = {
     E.SUBSCRIPTION_PREFERENCE_CENTER,
     E.SUBSCRIPTION_PREFERENCE_CONFIRMATION
   ]
-}, B = {
-  [E.GLOBAL_UNSUBSCRIBE]: s("unsubscription-preference.type-global-unsubscribe"),
-  [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: s("unsubscription-preference.type-global-unsubscription-confirmation"),
-  [E.RESUBSCRIBE]: s("unsubscription-preference.type-resubscribe"),
-  [E.SUBSCRIPTION_PREFERENCE_CENTER]: s("unsubscription-preference.type-subscription-preferences-center"),
-  [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: s("unsubscription-preference.type-subscription-preferences-confirmation")
-}, C = {
+}, U = {
+  [E.GLOBAL_UNSUBSCRIBE]: e("unsubscription-preference.type-global-unsubscribe"),
+  [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: e("unsubscription-preference.type-global-unsubscription-confirmation"),
+  [E.RESUBSCRIBE]: e("unsubscription-preference.type-resubscribe"),
+  [E.SUBSCRIPTION_PREFERENCE_CENTER]: e("unsubscription-preference.type-subscription-preferences-center"),
+  [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: e("unsubscription-preference.type-subscription-preferences-confirmation")
+}, o = {
   default: "{{ins-unsubscribe-link}}",
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
 export {
-  I as ACADEMY_LINK,
-  _ as DEFAULT_UNSUBSCRIBE_GROUP,
-  S as LINK_REGEXES,
-  R as LINK_TYPES,
-  C as MERGE_TAGS,
+  C as ACADEMY_LINK,
+  B as DEFAULT_UNSUBSCRIBE_GROUP,
+  i as INSIDER_ID,
+  r as LINK_REGEXES,
+  I as LINK_TYPES,
+  o as MERGE_TAGS,
   E as PAGE_TYPES,
-  i as TYPE_COLLECTIONS,
-  B as TYPE_TRANSLATIONS,
-  r as UNSUBSCRIBE_PAGES_LINK,
-  N as URLS
+  t as TYPE_COLLECTIONS,
+  U as TYPE_TRANSLATIONS,
+  c as UNSUBSCRIBE_PAGES_LINK,
+  _ as URLS
 };

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

@@ -2,9 +2,9 @@ var d = Object.defineProperty;
 var l = (r, n, e) => n in r ? d(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
 var o = (r, n, e) => l(r, typeof n != "symbol" ? n + "" : n, e);
 import { useHttp as L } from "../../../composables/useHttp.js";
-import { DEFAULT_UNSUBSCRIBE_GROUP as u } from "../../../enums/unsubscribe.js";
+import { DEFAULT_UNSUBSCRIBE_GROUP as c } from "../../../enums/unsubscribe.js";
 import { Control as h, UIElementType as i, UEAttr as t, ModificationDescription as p } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const m = "ui-elements-checkbox", a = "select", { get: C } = L();
+const m = "ui-elements-checkbox", u = "select", { get: C } = L();
 class S extends h {
   constructor() {
     super(...arguments);
@@ -16,14 +16,15 @@ class S extends h {
     return m;
   }
   _setFormValues() {
-    if (this.currentNode && "getAttribute" in this.currentNode) {
+    if (this.selectedUnsubGroup = "", this.currentNode && "getAttribute" in this.currentNode) {
       const e = this.currentNode.getAttribute("id");
       if (e) {
-        const s = e === u.sendGridId ? e : Number(e);
-        s && (this.selectedUnsubGroup = s, this.api.updateValues({
-          [a]: this.selectedUnsubGroup
-        }));
+        const s = e === c.sendGridId ? e : Number(e);
+        s && (this.selectedUnsubGroup = s);
       }
+      this.api.updateValues({
+        [u]: this.selectedUnsubGroup
+      });
     }
   }
   _getLabel(e, s = `${Math.random()}`) {
@@ -54,7 +55,7 @@ class S extends h {
                     </${i.LABEL}>
 
                     <${i.SELECTPICKER}
-                        ${t.SELECTPICKER.name}="${a}"
+                        ${t.SELECTPICKER.name}="${u}"
                         ${t.SELECTPICKER.placeholder}="${this.api.translate("Select Unsubscribe Group")}">
                             ${this._getSelect()}
                     </${i.SELECTPICKER}>
@@ -66,21 +67,21 @@ class S extends h {
     this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute("id", e.toString()).apply(new p(`Updated text to ${e}`));
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(a, (e) => this._onSelectChange(e));
+    this.api.onValueChanged(u, (e) => this._onSelectChange(e));
   }
   onTemplateNodeUpdated(e) {
-    this.currentNode = e;
+    this.currentNode = e, this._setFormValues();
   }
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
   async onRender() {
     const e = await C(
       "/unsubscribe-groups/unsubscribe-list"
-    ), s = [u, ...e.data], E = s.map((c) => ({
-      [t.SELECT_ITEM.text]: c.name,
-      [t.SELECT_ITEM.value]: c.sendGridId
+    ), s = [c, ...e.data], E = s.map((a) => ({
+      [t.SELECT_ITEM.text]: a.name,
+      [t.SELECT_ITEM.value]: a.sendGridId
     }));
     this.unsubList = s, this.api.setUIEAttribute(
-      a,
+      u,
       t.SELECTPICKER.items,
       E
     ), this._setFormValues(), this._listenToFormUpdates();

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

@@ -2,10 +2,10 @@ var d = Object.defineProperty;
 var l = (r, n, t) => n in r ? d(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
 var o = (r, n, t) => l(r, typeof n != "symbol" ? n + "" : n, t);
 import { useHttp as L } from "../../../composables/useHttp.js";
-import { DEFAULT_UNSUBSCRIBE_GROUP as E } from "../../../enums/unsubscribe.js";
+import { DEFAULT_UNSUBSCRIBE_GROUP as c } from "../../../enums/unsubscribe.js";
 import { Control as p, UIElementType as i, UEAttr as e, ModificationDescription as h } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const m = "ui-elements-radio-button", a = "select", { get: $ } = L();
-class _ extends p {
+const m = "ui-elements-radio-button", u = "select", { get: $ } = L();
+class S extends p {
   constructor() {
     super(...arguments);
     o(this, "currentNode");
@@ -16,15 +16,16 @@ class _ extends p {
     return m;
   }
   _setFormValues() {
-    if (this.currentNode && "getAttribute" in this.currentNode) {
+    if (this.selectedUnsubGroup = "", this.currentNode && "getAttribute" in this.currentNode) {
       const t = this.currentNode.getAttribute("id");
       if (t) {
-        const s = t === E.sendGridId ? t : Number(t);
-        s && (this.selectedUnsubGroup = s, this.api.updateValues({
-          [a]: this.selectedUnsubGroup
-        }));
+        const s = t === c.sendGridId ? t : Number(t);
+        s && (this.selectedUnsubGroup = s);
       }
     }
+    this.api.updateValues({
+      [u]: this.selectedUnsubGroup
+    });
   }
   _getLabel(t, s = `${Math.random()}`) {
     return `
@@ -54,7 +55,7 @@ class _ extends p {
                     </${i.LABEL}>
 
                     <${i.SELECTPICKER}
-                        ${e.SELECTPICKER.name}="${a}"
+                        ${e.SELECTPICKER.name}="${u}"
                         ${e.SELECTPICKER.placeholder}="${this.api.translate("Select Unsubscribe Group")}">
                             ${this._getSelect()}
                     </${i.SELECTPICKER}>
@@ -66,27 +67,27 @@ class _ extends p {
     this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute("id", t.toString()).apply(new h(`Updated text to ${t}`));
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(a, (t) => this._onSelectChange(t));
+    this.api.onValueChanged(u, (t) => this._onSelectChange(t));
   }
   onTemplateNodeUpdated(t) {
-    this.currentNode = t;
+    this.currentNode = t, this._setFormValues();
   }
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
   async onRender() {
     const t = await $(
       "/unsubscribe-groups/unsubscribe-list"
-    ), s = [E, ...t.data], c = s.map((u) => ({
-      [e.SELECT_ITEM.text]: u.name,
-      [e.SELECT_ITEM.value]: u.sendGridId
+    ), s = [c, ...t.data], E = s.map((a) => ({
+      [e.SELECT_ITEM.text]: a.name,
+      [e.SELECT_ITEM.value]: a.sendGridId
     }));
     this.unsubList = s, this.api.setUIEAttribute(
-      a,
+      u,
       e.SELECTPICKER.items,
-      c
+      E
     ), this._setFormValues(), this._listenToFormUpdates();
   }
 }
 export {
   m as CONTROL_BLOCK_ID,
-  _ as RadioButtonControl
+  S as RadioButtonControl
 };

package/dist/extensions/Blocks/Recommendation/store/recommendation.js

@@ -133,7 +133,7 @@ const a = c(), d = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), G = p("recommendationExtension", {
+}), G = p("guidoRecommendationExtension", {
   state: () => d(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,

package/dist/extensions/DynamicContent/dynamic-content-modal.js

@@ -1,27 +1,33 @@
-var i = Object.defineProperty;
-var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
-class y {
+var d = Object.defineProperty;
+var m = (t, e, n) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var c = (t, e, n) => m(t, typeof e != "symbol" ? e + "" : e, n);
+class C {
   constructor() {
-    a(this, "selectedDynamicContent", null);
-    a(this, "dataSelectCallback", () => {
+    c(this, "selectedDynamicContent", null);
+    c(this, "dataSelectCallback", () => {
     });
+    c(this, "closeDynamicContentHandler", null);
   }
-  openMergeTagsLibrary(e, n) {
-    this.dataSelectCallback = n, this.selectedDynamicContent = e;
-    const s = new CustomEvent("dynamic-content:open", {
-      detail: {
-        attribute: e
-      }
+  /**
+   * Opens the merge tags library modal
+   * @param dynamicContent - Currently selected dynamic content (if any)
+   * @param onDataSelectCallback - Callback invoked when user selects a merge tag
+   * @param position - Optional position data to place the modal
+   */
+  openMergeTagsLibrary(e, n, l) {
+    this.closeDynamicContentHandler && (document.removeEventListener("dynamic-content:close", this.closeDynamicContentHandler), this.closeDynamicContentHandler = null), this.dataSelectCallback = n, this.selectedDynamicContent = e;
+    const o = {
+      attribute: e,
+      position: l
+    }, s = new CustomEvent("dynamic-content:open", {
+      detail: o
     });
-    document.dispatchEvent(s);
-    const o = (l) => {
-      const c = l.detail;
-      this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
-    };
-    document.addEventListener("dynamic-content:close", o);
+    document.dispatchEvent(s), this.closeDynamicContentHandler = (i) => {
+      const a = i.detail;
+      this.selectedDynamicContent = a, a.text && a.value && this.dataSelectCallback(a);
+    }, document.addEventListener("dynamic-content:close", this.closeDynamicContentHandler);
   }
 }
 export {
-  y as ExternalMergeTagsLibrary
+  C as ExternalMergeTagsLibrary
 };

package/dist/extensions/DynamicContent/dynamic-content.js

@@ -1,61 +1,156 @@
-var o = Object.defineProperty;
-var g = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var i = (n, t, e) => g(n, typeof t != "symbol" ? t + "" : t, e);
-import { dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
-import { UIElement as c, UIElementType as r, UEAttr as l, UIElementTagRegistry as d } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ExternalMergeTagsLibrary as T } from "./dynamic-content-modal.js";
-const a = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
-class p extends d {
-  registerUiElements(t) {
-    t[r.MERGETAGS] = a;
+var c = Object.defineProperty;
+var g = (o, s, t) => s in o ? c(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
+var r = (o, s, t) => g(o, typeof s != "symbol" ? s + "" : s, t);
+import { mergeTagToDynamicContent as d, dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
+import { UIElement as u, UIElementType as a, UEAttr as h, UIElementTagRegistry as T } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExternalMergeTagsLibrary as y } from "./dynamic-content-modal.js";
+const l = "external-dynamic-content-ui-element", C = "button-add-dynamic-content";
+class p extends T {
+  registerUiElements(s) {
+    s[a.MERGETAGS] = l;
   }
 }
-class C extends c {
+class b extends u {
   constructor() {
     super(...arguments);
-    i(this, "mergeTagsButton", null);
-    i(this, "listener", () => {
-    });
-    i(this, "mergeTagsLibrary", null);
-    i(this, "selectedDynamicContent", { value: "", text: "" });
+    r(this, "mergeTagsButton", null);
+    r(this, "mergeTagsLibrary", null);
+    r(this, "clickListener", null);
+    r(this, "lastClickedElement", null);
+    r(this, "lastClickedFrame", null);
+    r(this, "mousedownListener", null);
   }
   getId() {
-    return a;
+    return l;
   }
-  onRender(e) {
-    var s;
-    this.listener = this._onClick.bind(this), this.mergeTagsButton = e.querySelector("#guido__btn-add-dynamic-content"), (s = this.mergeTagsButton) == null || s.addEventListener("click", this.listener);
+  onRender(t) {
+    var e;
+    this.mergeTagsButton = t.querySelector("#guido__btn-add-dynamic-content"), this.clickListener = this._onClick.bind(this), (e = this.mergeTagsButton) == null || e.addEventListener("click", this.clickListener), this._setupCoordinateTracking();
   }
   onDestroy() {
-    var e;
-    (e = this.mergeTagsButton) == null || e.removeEventListener("click", this.listener);
+    var t;
+    this.clickListener && ((t = this.mergeTagsButton) == null || t.removeEventListener("click", this.clickListener)), this._cleanupCoordinateTracking(), this.mergeTagsButton = null, this.clickListener = null, this.lastClickedElement = null, this.lastClickedFrame = null;
   }
   _onClick() {
     this.openMergeTagLibrary();
   }
+  /**
+   * Called when Stripo detects merge tag interactions
+   * This is the key method that receives notifications about merge tag clicks
+   * @param name - Attribute name (e.g., 'mergeTag')
+   * @param value - MergeTag object with label, value, selStart, selEnd, etc.
+   */
+  onAttributeUpdated(t, e) {
+    if (t !== "mergeTag" || !(e != null && e.value))
+      return;
+    const n = d(e), i = this._getLastClickedPosition();
+    this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
+  }
   openMergeTagLibrary() {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new T()), this.mergeTagsLibrary.openMergeTagsLibrary(
-      this.selectedDynamicContent,
-      (e) => {
-        this.api.onValueChanged(m([e])[0]);
-      }
+    const t = this._getButtonPosition(), e = { value: "", text: "" };
+    this._openDynamicContentLibrary(e, t);
+  }
+  /**
+   * Opens the dynamic content library for external apps
+   * Dispatches event with dynamic content data and position
+   */
+  _openDynamicContentLibrary(t, e) {
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
+      t,
+      (n) => {
+        n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
+      },
+      e
     );
   }
+  /**
+   * Gets the button's position on the screen
+   * Used to position the modal or anything else near the button
+   */
+  _getButtonPosition() {
+    if (!this.mergeTagsButton)
+      return { x: 0, y: 0, width: 0, height: 0 };
+    const { x: t, y: e, width: n, height: i } = this.mergeTagsButton.getBoundingClientRect();
+    return { x: t, y: e, width: n, height: i };
+  }
+  /**
+   * Sets up coordinate tracking for merge tag clicks in the iframe
+   * Workaround from Stripo intercepting click events - tracks mousedown events instead
+   */
+  _setupCoordinateTracking() {
+    var e;
+    const t = this._getEditorFrame();
+    (e = t == null ? void 0 : t.contentWindow) != null && e.document && (this.mousedownListener = (n) => {
+      const i = this._findMergeTagElement(n.target);
+      i && (this.lastClickedElement = i, this.lastClickedFrame = t);
+    }, t.contentWindow.document.addEventListener("mousedown", this.mousedownListener));
+  }
+  /**
+   * Gets the editor iframe element
+   */
+  _getEditorFrame() {
+    var n;
+    const t = document.querySelector("ui-editor");
+    if (!(t != null && t.shadowRoot))
+      return null;
+    const e = t.shadowRoot.querySelector("iframe");
+    return (n = e == null ? void 0 : e.contentWindow) != null && n.document ? e : null;
+  }
+  /**
+   * Finds merge tag element in the element tree
+   */
+  _findMergeTagElement(t) {
+    return t.closest(".target, .esd-merge-tag");
+  }
+  /**
+   * Gets the position of the last clicked element, calculated on-demand
+   * This ensures we always use the correct element's position even with rapid clicks
+   */
+  _getLastClickedPosition() {
+    if (!(!this.lastClickedElement || !this.lastClickedFrame))
+      return this._calculateAbsolutePosition(this.lastClickedFrame, this.lastClickedElement);
+  }
+  /**
+   * Calculates absolute position of element relative to page
+   */
+  _calculateAbsolutePosition(t, e) {
+    const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+    return {
+      x: n.x + i.x,
+      y: n.y + i.y,
+      width: i.width,
+      height: i.height
+    };
+  }
+  /**
+   * Cleans up the coordinate tracking event listener
+   */
+  _cleanupCoordinateTracking() {
+    var e;
+    if (!this.mousedownListener)
+      return;
+    const t = this._getEditorFrame();
+    (e = t == null ? void 0 : t.contentWindow) != null && e.document && t.contentWindow.document.removeEventListener("mousedown", this.mousedownListener), this.mousedownListener = null;
+  }
+  /**
+   * Returns the HTML template for the "Add Dynamic Content" button
+   * This button is placed in the merge tags selector UI
+   */
   getTemplate() {
     return `
             <div>
-                <${r.BUTTON} 
+                <${a.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${l.BUTTON.name}="${y}">
-                        <${r.ICON} src="plus" class="icon icon-button color-primary">
-                        </${r.ICON}>
+                    ${h.BUTTON.name}="${C}">
+                        <${a.ICON} src="plus" class="icon icon-button color-primary">
+                        </${a.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
-                </${r.BUTTON}>
+                </${a.BUTTON}>
             </div>`;
   }
 }
 export {
   p as DynamicContentTagRegistry,
-  C as DynamicContentUiElementExtension
+  b as DynamicContentUiElementExtension
 };

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-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-3c910a93],.guido-editor__container[data-v-3c910a93]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-3c910a93]{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-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-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-23c413c9],.guido-editor__container[data-v-23c413c9]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-23c413c9]{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-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/src/@types/generic.d.ts

@@ -7,6 +7,7 @@ type Features = {
     saveAsTemplate?: boolean;
     versionHistory?: boolean;
     testMessage?: boolean;
+    displayConditions?: boolean;
 };
 type Partner = {
     partnerName: string;
@@ -37,15 +38,39 @@ export type TemplateConfig = {
     selectedUnsubscribePages?: number[];
     variationId?: string;
 };
-export type DynamicContent = {
+export type BaseDynamicContent = {
     value: string;
-    text: string;
     fallback?: string;
     format?: {
         key: string;
         value: string;
     };
 };
+export type DynamicContent = BaseDynamicContent & {
+    text: string;
+};
+export type MergeTag = BaseDynamicContent & {
+    label: string;
+    selStart?: number;
+    selEnd?: number;
+    hidden?: boolean;
+};
+export type PositionData = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+export type DynamicContentEvent = {
+    attribute: DynamicContent;
+    position?: PositionData;
+};
+export type MergeTagClickEvent = {
+    position: PositionData;
+    element: HTMLElement;
+    tagValue: string | null;
+    tagLabel: string | null;
+};
 export interface EmailHeader {
     senderName: string;
     subject: string;
@@ -61,10 +86,6 @@ export interface TooltipOptions {
     };
     preventXss?: boolean;
 }
-export type MergeTag = {
-    label: string;
-    value: string;
-};
 export type TextValueObject = {
     text: string;
     value: string;

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

@@ -1,4 +1,4 @@
-import type { DynamicContent, GuidoConfig, TemplateConfig } from '@@/Types/generic';
+import type { DynamicContent, GuidoConfig, PositionData, TemplateConfig } from '@@/Types/generic';
 import type { SavedTemplateDetails } from '@@/Types/stripo';
 type __VLS_Props = {
     templateId: string;
@@ -20,13 +20,14 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
     hasChanges: import("vue").ComputedRef<boolean>;
     saveSilent: () => Promise<SavedTemplateDetails | undefined> | undefined;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
-    "dynamic-content:open": (detail: DynamicContent | null) => void;
+    "dynamic-content:open": (detail: DynamicContent | null, position?: PositionData | undefined) => void;
     back: () => void;
     "save:start": () => void;
     "save:complete": (data: Omit<SavedTemplateDetails, "forceRecreate">) => void;
     "on-change": (hasChanges: boolean) => void;
     ready: () => void;
     "onboarding:finished": () => void;
+    "test-email:click": () => void;
 }, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -3,9 +3,11 @@ import type { InjectionKey } from 'vue';
 export type BackHandler = () => void;
 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_START_KEY: InjectionKey<SaveStartHandler>;
 export declare const SAVE_COMPLETE_KEY: InjectionKey<SaveCompleteHandler>;
+export declare const TEST_EMAIL_CLICK_KEY: InjectionKey<TestEmailClickHandler>;
 /**
  * Provides Guido action handlers to child components
  */
@@ -13,6 +15,7 @@ export declare const provideGuidoActions: (actions: {
     onBack: BackHandler;
     onSaveStart: SaveStartHandler;
     onSaveComplete: SaveCompleteHandler;
+    onTestEmailClick: TestEmailClickHandler;
 }) => void;
 /**
  * Provides individual Guido action handlers
@@ -35,6 +38,11 @@ export declare const useSaveStart: () => SaveStartHandler;
  * @returns Save complete function
  */
 export declare const useSaveComplete: () => SaveCompleteHandler;
+/**
+ * Hook to use the test email click handler
+ * @returns Test email click function
+ */
+export declare const useTestEmailClick: () => TestEmailClickHandler;
 /**
  * Convenience hook to get all Guido actions
  * @returns Object containing all action handlers
@@ -43,4 +51,5 @@ export declare const useGuidoActions: () => {
     back: BackHandler;
     saveStart: SaveStartHandler;
     saveComplete: SaveCompleteHandler;
+    testEmailClick: TestEmailClickHandler;
 };

package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts

@@ -34,7 +34,7 @@ interface StoreState {
     filterList: FiltersResponse;
     filterGroup: number;
 }
-export declare const useRecommendationExtensionStore: import("pinia").StoreDefinition<"recommendationExtension", StoreState, {
+export declare const useRecommendationExtensionStore: import("pinia").StoreDefinition<"guidoRecommendationExtension", StoreState, {
     hasFilters: (state: {
         recommendationCampaignUrls: Record<string, string>;
         recommendationConfigs: {

package/dist/src/extensions/DynamicContent/dynamic-content-modal.d.ts

@@ -1,6 +1,13 @@
-import type { DynamicContent } from '@@/Types/generic';
+import type { DynamicContent, PositionData } from '@@/Types/generic';
 export declare class ExternalMergeTagsLibrary {
     selectedDynamicContent: DynamicContent | null;
     dataSelectCallback: (data: DynamicContent) => void;
-    openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void): void;
+    private closeDynamicContentHandler;
+    /**
+     * Opens the merge tags library modal
+     * @param dynamicContent - Currently selected dynamic content (if any)
+     * @param onDataSelectCallback - Callback invoked when user selects a merge tag
+     * @param position - Optional position data to place the modal
+     */
+    openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void, position?: PositionData): void;
 }