@useinsider/guido 1.0.3-beta.e83334e → 1.0.3-beta.ea69f4a

package/README.md

@@ -600,9 +600,6 @@ Create a `.env` file with the following variables: (You can get env variables fr
 VITE_STRIPO_PLUGIN_ID=your_plugin_id
 VITE_STRIPO_SECRET_KEY=your_secret_key
 VITE_STRIPO_ROLE=your_role
-
-# Playwright Test Configuration (Optional - for local debugging only)
-HEADED=false  # Set to 'true' to run tests with visible browser
 ```
 
 ### Project Structure

package/dist/composables/useActionsApi.js

@@ -1,6 +1,6 @@
-import { useToaster as g } from "./useToaster.js";
+import { useToaster as w } from "./useToaster.js";
 const A = () => {
-  const { handleError: l } = g(), n = (t = {}) => new Promise((e, a) => {
+  const { handleError: l } = w(), s = (e = {}) => new Promise((t, a) => {
     const i = { ...{
       minimize: !0,
       utmEntity: {
@@ -20,13 +20,13 @@ const A = () => {
       forceAmp: !1,
       resetDataSavedFlag: !1,
       disableLineHeightsReplace: !0
-    }, ...t }, m = {
-      callback: (s, c, p, u, d) => {
-        s ? a(s) : e({
-          html: c,
-          ampHtml: p,
-          ampErrors: u,
-          displayConditions: d
+    }, ...e }, m = {
+      callback: (n, p, c, d, u) => {
+        n ? a(n) : t({
+          html: p,
+          ampHtml: c,
+          ampErrors: d,
+          displayConditions: u
         });
       },
       ...i
@@ -34,44 +34,53 @@ const A = () => {
     window.StripoEditorApi.actionsApi.compileEmail(m);
   });
   return {
-    getCompiledEmail: n,
-    getTemplateData: () => new Promise((t) => {
-      const e = ({ html: a, css: o, width: i, height: r, utmParams: m, syncModulesIds: s }) => t({
+    getCompiledEmail: s,
+    getTemplateData: () => new Promise((e) => {
+      const t = ({ html: a, css: o, width: i, height: r, utmParams: m, syncModulesIds: n }) => e({
         html: a,
         css: o,
         width: i,
         height: r,
         utmParams: m,
-        syncModulesIds: s
+        syncModulesIds: n
       });
-      window.StripoEditorApi.actionsApi.getTemplateData(e);
+      window.StripoEditorApi.actionsApi.getTemplateData(t);
     }),
-    activateCustomViewStyles: (t = !0) => {
-      window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
+    activateCustomViewStyles: (e = !0) => {
+      window.StripoEditorApi.actionsApi.activateCustomViewStyles(e);
     },
-    getPreviewData: async (t) => {
+    getPreviewData: async (e) => {
       try {
         const {
-          html: e,
+          html: t,
           displayConditions: a,
           ampHtml: o = "",
           ampErrors: i = []
-        } = await n({ minimize: !1, resetDataSavedFlag: !1, ...t });
+        } = await s({ minimize: !1, resetDataSavedFlag: !1, ...e });
         return {
-          html: e,
+          html: t,
           ampHtml: o,
           ampErrors: i,
           displayConditions: a
         };
-      } catch (e) {
-        return l(e, "Error loading preview"), {
+      } catch (t) {
+        return l(t, "Error loading preview"), {
           html: "",
           ampHtml: "",
           ampErrors: [],
           displayConditions: []
         };
       }
-    }
+    },
+    updateTimerInClonedTemplate: () => new Promise((e) => {
+      try {
+        window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((t, a) => {
+          t ? (l(t, "Failed to update timer in cloned template"), e(null)) : e(a || null);
+        });
+      } catch (t) {
+        l(t, "Failed to call updateTimerInClonedTemplate"), e(null);
+      }
+    })
   };
 };
 export {

package/dist/composables/useStripo.js

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

package/dist/composables/useTimerClone.js

@@ -0,0 +1,67 @@
+import { useToaster as I } from "./useToaster.js";
+const M = () => {
+  const { handleError: d } = I(), a = (n) => /esd-timer-id="(\d+)"/.test(n), c = async (n, s) => {
+    try {
+      console.debug("[TIMER CLONE] Calling Stripo API to clone timers...");
+      const e = await fetch("https://plugins.stripo.email/api/v1/timers/clone", {
+        method: "POST",
+        headers: {
+          "ES-PLUGIN-AUTH": `Bearer ${s}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ html: n })
+      });
+      if (console.debug("[TIMER CLONE] API response status:", e.status), !e.ok) {
+        const r = await e.text();
+        throw console.debug("[TIMER CLONE] API error:", r), new Error(`Stripo API error: ${e.status} ${e.statusText}`);
+      }
+      const t = await e.json();
+      return console.debug("[TIMER CLONE] Timers cloned successfully. Map:", t.timersMap), console.debug("[TIMER CLONE] Old HTML length:", n.length), console.debug("[TIMER CLONE] New HTML length:", t.html.length), t.html;
+    } catch (e) {
+      return console.debug("[TIMER CLONE] Error:", e), d(e, "Failed to clone timer IDs"), null;
+    }
+  };
+  return {
+    hasTimerBlocks: a,
+    cloneTimersInHtml: c,
+    updateTimersOnLoad: async (n) => {
+      var s, e, t, r, l, u;
+      try {
+        console.debug("[TIMER CLONE] Starting timer update on template load...");
+        const o = (e = (s = window.UIEditor) == null ? void 0 : s.getHtml) == null ? void 0 : e.call(s);
+        if (!o) {
+          console.debug("[TIMER CLONE] No HTML found, skipping timer update");
+          return;
+        }
+        const E = a(o);
+        if (console.debug("[TIMER CLONE] Has timer blocks?", E), !E)
+          return;
+        const T = o.match(/esd-timer-id="(\d+)"/g);
+        console.debug("[TIMER CLONE] Current timer IDs:", T), console.debug("[TIMER CLONE] Getting auth token...");
+        const p = await n();
+        if (!p) {
+          console.debug("[TIMER CLONE] No auth token available, skipping timer update");
+          return;
+        }
+        const i = await c(o, p);
+        if (!i) {
+          console.debug("[TIMER CLONE] API returned no updated HTML");
+          return;
+        }
+        if (i === o) {
+          console.debug("[TIMER CLONE] HTML unchanged, no update needed");
+          return;
+        }
+        const m = i.match(/esd-timer-id="(\d+)"/g);
+        console.debug("[TIMER CLONE] New timer IDs:", m);
+        const g = ((r = (t = window.UIEditor) == null ? void 0 : t.getCss) == null ? void 0 : r.call(t)) || "";
+        console.debug("[TIMER CLONE] Updating editor with new HTML..."), (u = (l = window.StripoEditorApi) == null ? void 0 : l.actionsApi) != null && u.updateHtmlAndCss ? (window.StripoEditorApi.actionsApi.updateHtmlAndCss(i, g), console.debug("[TIMER CLONE] ✅ Editor updated successfully!")) : console.debug("[TIMER CLONE] updateHtmlAndCss method not available");
+      } catch (o) {
+        console.debug("[TIMER CLONE] Error updating timers:", o), d(o, "Failed to update timer blocks");
+      }
+    }
+  };
+};
+export {
+  M as useTimerClone
+};

package/dist/extensions/Blocks/Items/controls/name/trimming.js

@@ -1,70 +1,70 @@
 var d = Object.defineProperty;
 var h = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var n = (i, t, e) => h(i, typeof t != "symbol" ? t + "" : t, e);
-import { ModificationDescription as a, UIElementType as l, UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var s = (i, t, e) => h(i, typeof t != "symbol" ? t + "" : t, e);
+import { ModificationDescription as n, UIElementType as a, UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as c } from "../../../common-control.js";
-import { ItemsBlockControlId as p } from "../../enums/controlEnums.js";
+import { ItemsBlockControlId as l } from "../../enums/controlEnums.js";
 import { SETTINGS_ENUMS as I } from "../../enums/settingsEnums.js";
 import { useItemsBlockStore as N } from "../../store/items-block.js";
-import { syncNameTrimmingFromAttributes as M } from "../../utils/syncAttributesFromConfigBlock.js";
-import { updateConfigBlockAttributes as u } from "../../utils/updateAttributes.js";
-const y = p.NAME_TRIMMING, o = {
+import { syncNameTrimmingFromAttributes as y } from "../../utils/syncAttributesFromConfigBlock.js";
+import { updateConfigBlockAttributes as M } from "../../utils/updateAttributes.js";
+const f = l.NAME_TRIMMING, r = {
   TRIMMING: "trimming"
 };
-class _ extends c {
+class R extends c {
   constructor() {
     super(...arguments);
-    n(this, "store", N());
+    s(this, "store", N());
   }
   getId() {
-    return y;
+    return f;
   }
   getTemplate() {
     return `
-            <div class="${p.NAME_TRIMMING}">
+            <div class="${l.NAME_TRIMMING}">
                 ${this._getTextTrimming()}
             </div>
         `;
   }
   onRender() {
-    this.api.updateValues({ [o.TRIMMING]: this.store.nameTrimming }), this.api.onValueChanged(o.TRIMMING, (e) => {
+    this.api.updateValues({ [r.TRIMMING]: this.store.nameTrimming }), this.api.onValueChanged(r.TRIMMING, (e) => {
       this._onTrimmingChange(e);
     });
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
-      () => M(this.currentNode),
+      () => y(this.currentNode),
       () => {
-        this.api.updateValues({ [o.TRIMMING]: this.store.nameTrimming });
+        this.api.updateValues({ [r.TRIMMING]: this.store.nameTrimming });
       }
-    );
+    ), this.store.nameTrimming && this._applyTrimmingStyles();
   }
   _onTrimmingChange(e) {
-    this.store.setNameTrimming(e), u(this.currentNode, this.api), this.api.updateValues({ [o.TRIMMING]: e }), this._applyTrimmingStyles(e);
+    this.store.setNameTrimming(e), M(this.currentNode, this.api), this.api.updateValues({ [r.TRIMMING]: e }), this._applyTrimmingStyles(e);
   }
   _applyTrimmingStyles(e) {
-    var s;
-    const r = (s = this.currentNode) == null ? void 0 : s.querySelector("p > a");
-    if (!r)
+    var m;
+    const o = (m = this.currentNode) == null ? void 0 : m.querySelector("p > a");
+    if (!o)
       return;
-    const T = e !== void 0 ? e : this.store.nameTrimming, m = this.store.orientation === I.ORIENTATION.VERTICAL;
-    T ? this.api.getDocumentModifier().modifyHtml(r).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", m ? "130px" : "520px").apply(new a("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(r).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").setStyle("max-width", m ? "130px" : "520px").apply(new a("Text Trimming Disabled"));
+    const p = e !== void 0 ? e : this.store.nameTrimming, T = this.store.orientation === I.ORIENTATION.VERTICAL;
+    p ? this.api.getDocumentModifier().modifyHtml(o).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", T ? "130px" : "550px").apply(new n("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(o).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").apply(new n("Text Trimming Disabled"));
   }
   _getTextTrimming() {
     return `
             <div class="container">
                 <div class="display-flex align-items-center justify-content-between">
-                    <${l.LABEL} 
+                    <${a.LABEL} 
                         ${g.LABEL.text}="${this.api.translate("Text Trimming")}"
                     >
-                    </${l.LABEL}>
-                    ${this._GuToggle(o.TRIMMING)}
+                    </${a.LABEL}>
+                    ${this._GuToggle(r.TRIMMING)}
                 </div>
             </div>
         `;
   }
 }
 export {
-  y as CONTROL_BLOCK_ID,
-  _ as NameTrimmingControl
+  f as CONTROL_BLOCK_ID,
+  R as NameTrimmingControl
 };

package/dist/extensions/Blocks/Items/controls/settingsControl.js

@@ -1,29 +1,29 @@
-var M = Object.defineProperty;
-var D = (h, p, e) => p in h ? M(h, p, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[p] = e;
-var b = (h, p, e) => D(h, typeof p != "symbol" ? p + "" : p, e);
-import { UEAttr as A, ModificationDescription as d } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as x } from "../../common-control.js";
-import { ItemsBlockId as l } from "../enums/controlEnums.js";
-import { productPairs as T, templateFirstLine as R } from "../enums/productEnums.js";
-import { ItemTypeOptions as P, OrientationOptions as L, ItemInCartOptions as N, SETTINGS_ENUMS as S, DefaultConfigValues as H } from "../enums/settingsEnums.js";
-import U from "../layouts/horizontal.html.js";
-import F from "../layouts/vertical.html.js";
-import { useItemsBlockStore as $ } from "../store/items-block.js";
-import { getDefaultTemplate as q } from "../template.js";
-import { syncCurrencySymbolFromAttributes as k, syncCurrencyLocationFromAttributes as w, syncFormattedPriceFromAttributes as B } from "../utils/syncAttributesFromConfigBlock.js";
+var P = Object.defineProperty;
+var M = (T, u, e) => u in T ? P(T, u, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[u] = e;
+var C = (T, u, e) => M(T, typeof u != "symbol" ? u + "" : u, e);
+import { UEAttr as b, ModificationDescription as d } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as D } from "../../common-control.js";
+import { ItemsBlockId as m } from "../enums/controlEnums.js";
+import { productPairs as p, templateFirstLine as A } from "../enums/productEnums.js";
+import { ItemTypeOptions as R, OrientationOptions as L, ItemInCartOptions as N, SETTINGS_ENUMS as S } from "../enums/settingsEnums.js";
+import x from "../layouts/horizontal.html.js";
+import H from "../layouts/vertical.html.js";
+import { useItemsBlockStore as U } from "../store/items-block.js";
+import { getDefaultTemplate as F } from "../template.js";
+import { syncCurrencySymbolFromAttributes as $, syncCurrencyLocationFromAttributes as k, syncFormattedPriceFromAttributes as q } from "../utils/syncAttributesFromConfigBlock.js";
 import { updateConfigBlockAttributes as f } from "../utils/updateAttributes.js";
-const G = "ui-elements-items-block", o = {
+const w = "ui-elements-items-block", o = {
   ITEMS_TYPE: "itemsType",
   ORIENTATION: "orientation",
   ITEM_IDS: "itemIds"
 };
-class te extends x {
+class Z extends D {
   constructor() {
     super(...arguments);
-    b(this, "store", $());
+    C(this, "store", U());
   }
   getId() {
-    return G;
+    return w;
   }
   getTemplate() {
     return `
@@ -44,7 +44,7 @@ class te extends x {
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
       () => {
-        k(this.currentNode), w(this.currentNode), B(this.currentNode);
+        $(this.currentNode), k(this.currentNode), q(this.currentNode);
       },
       () => {
         this.api.updateValues({
@@ -67,7 +67,7 @@ class te extends x {
         name: o.ITEMS_TYPE,
         className: "es-100",
         placeholder: "Select Item Type",
-        options: P
+        options: R
       })
     ])}
         `;
@@ -97,9 +97,7 @@ class te extends x {
         `;
   }
   _onOrientationChange(e) {
-    console.debug("Orientation changed to: ", e), this.store.setOrientation(e), this.api.updateValues({ [o.ORIENTATION]: e }), f(this.currentNode, this.api), this._reOrderTemplate(), setTimeout(() => {
-      this._recalculateTrimming();
-    }, 50);
+    console.debug("Orientation changed to: ", e), this.store.setOrientation(e), this.api.updateValues({ [o.ORIENTATION]: e }), f(this.currentNode, this.api), this._reOrderTemplate(), this._recalculateTrimming();
   }
   _onItemsTypeChange(e) {
     const i = S.ITEMS_TYPE[e], t = N[e], r = t == null ? void 0 : t[0];
@@ -111,8 +109,8 @@ class te extends x {
   _initializeSelectItems() {
     this.api.setUIEAttribute(
       o.ITEMS_TYPE,
-      A.SELECTPICKER.items,
-      P
+      b.SELECTPICKER.items,
+      R
     );
     const { itemsType: e, itemIds: i } = this.store;
     this.api.updateValues({
@@ -121,7 +119,7 @@ class te extends x {
     const t = N[e];
     this.api.setUIEAttribute(
       o.ITEM_IDS,
-      A.SELECTPICKER.items,
+      b.SELECTPICKER.items,
       t
     ), this.api.updateValues({
       [o.ITEM_IDS]: i
@@ -148,7 +146,7 @@ class te extends x {
       currencyLocation: n,
       formattedPrice: s
     } = this.store;
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(q({
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(F({
       orientation: e,
       itemsType: i,
       itemId: t,
@@ -160,22 +158,22 @@ class te extends x {
   _getTemplateData() {
     const { itemsType: e, itemIds: i, formattedPrice: t } = this.store, r = N[e].findIndex((s) => s.value === i), n = r > -1 ? r : 0;
     return {
-      imageSrc: T.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[n],
-      name: T.PAIRS_FOR_EXTENSION.name[e].DEFAULT[n],
-      price: t ? T.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE_FORMATTED : T.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE,
-      originalPrice: t ? T.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE_FORMATTED : T.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE,
-      quantity: T.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT,
-      button: T.PAIRS_FOR_EXTENSION.button[e].DEFAULT_LABEL
+      imageSrc: p.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[n],
+      name: p.PAIRS_FOR_EXTENSION.name[e].DEFAULT[n],
+      price: t ? p.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE_FORMATTED : p.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE,
+      originalPrice: t ? p.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE_FORMATTED : p.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE,
+      quantity: p.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT,
+      button: p.PAIRS_FOR_EXTENSION.button[e].DEFAULT_LABEL
     };
   }
   _updateImageSrc(e) {
     var t;
-    const i = (t = this.currentNode) == null ? void 0 : t.querySelector(`[esd-extension-block-id="${l.IMAGE}"] img`);
+    const i = (t = this.currentNode) == null ? void 0 : t.querySelector(`[esd-extension-block-id="${m.IMAGE}"] img`);
     i && this.api.getDocumentModifier().modifyHtml(i).setAttribute("src", e).apply(new d("Updated image src"));
   }
   _updateName(e) {
     var n;
-    const i = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${l.NAME}"]`);
+    const i = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${m.NAME}"]`);
     if (!i)
       return;
     const t = i.getInnerText().trim();
@@ -183,20 +181,20 @@ class te extends x {
     r = r.replace(t, e), this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(r).apply(new d("Updated name"));
   }
   _updatePrice(e) {
-    var g;
-    const i = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${l.PRICE}"]`);
+    var E;
+    const i = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${m.PRICE}"]`);
     if (!i)
       return;
     const t = this._getParagraphFromBlock(i);
     if (!t)
       return;
-    const r = t.getInnerHTML() || "", n = t.getInnerText() || "", { currencySymbol: s, currencyLocation: a } = this.store, c = (s == null ? void 0 : s.trim()) || "", m = this._removeCurrencySymbol(n, c), u = this._replacePriceNumber(m, e), I = this._buildPriceContent(u, c, a), _ = r.replace(n, I);
+    const r = t.getInnerHTML() || "", n = t.getInnerText() || "", { currencySymbol: s, currencyLocation: a } = this.store, l = (s == null ? void 0 : s.trim()) || "", c = this._removeCurrencySymbol(n, l), h = this._replacePriceNumber(c, e), I = this._buildPriceContent(h, l, a), _ = r.replace(n, I);
     this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(_).apply(new d("Updated price"));
   }
   _updateOriginalPrice(e) {
     var y;
     const i = (y = this.currentNode) == null ? void 0 : y.querySelector(
-      `[esd-extension-block-id="${l.ORIGINAL_PRICE}"]`
+      `[esd-extension-block-id="${m.ORIGINAL_PRICE}"]`
     );
     if (!i)
       return;
@@ -206,12 +204,12 @@ class te extends x {
     const r = t.querySelector("s");
     if (!r)
       return;
-    const n = r.getInnerHTML() || "", s = r.getInnerText() || "", { currencySymbol: a, currencyLocation: c } = this.store, m = (a == null ? void 0 : a.trim()) || "", u = this._removeCurrencySymbol(s, m), I = this._replacePriceNumber(u, e), _ = this._buildPriceContent(I, m, c), E = `<s>${n.replace(s, _)}</s>`;
-    this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(E).apply(new d("Updated original price"));
+    const n = r.getInnerHTML() || "", s = r.getInnerText() || "", { currencySymbol: a, currencyLocation: l } = this.store, c = (a == null ? void 0 : a.trim()) || "", h = this._removeCurrencySymbol(s, c), I = this._replacePriceNumber(h, e), _ = this._buildPriceContent(I, c, l), g = `<s>${n.replace(s, _)}</s>`;
+    this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(g).apply(new d("Updated original price"));
   }
   _updateQuantity(e) {
     var a;
-    const i = this.store.itemsType !== S.ITEMS_TYPE.BROWSED_ITEMS, t = (a = this.currentNode) == null ? void 0 : a.querySelector(`[esd-extension-block-id="${l.QUANTITY}"]`);
+    const i = this.store.itemsType !== S.ITEMS_TYPE.BROWSED_ITEMS, t = (a = this.currentNode) == null ? void 0 : a.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`);
     if (!t)
       return;
     const r = t.getStyle("display") === "none", n = t.getInnerText().trim();
@@ -223,17 +221,15 @@ class te extends x {
    * @description Reorders the template structure based on current orientation and visibility settings.
    */
   _reOrderTemplate() {
-    var I, _, g, E, y, O, C;
-    const e = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${l.IMAGE}"]`), i = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${l.NAME}"]`), t = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${l.PRICE}"]`), r = (E = this.currentNode) == null ? void 0 : E.querySelector(
-      `[esd-extension-block-id="${l.ORIGINAL_PRICE}"]`
-    ), n = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${l.QUANTITY}"]`), s = (O = this.currentNode) == null ? void 0 : O.querySelector(`[esd-extension-block-id="${l.BUTTON}"]`), a = (C = this.currentNode) == null ? void 0 : C.querySelector("esd-config-block");
+    var h, I, _, E, g, y, O;
+    const e = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${m.IMAGE}"]`), i = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${m.NAME}"]`), t = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${m.PRICE}"]`), r = (E = this.currentNode) == null ? void 0 : E.querySelector(
+      `[esd-extension-block-id="${m.ORIGINAL_PRICE}"]`
+    ), n = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`), s = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${m.BUTTON}"]`), a = (O = this.currentNode) == null ? void 0 : O.querySelector("esd-config-block");
     if (!e || !i || !t || !r || !n || !s || !a)
       return;
-    const { orientation: c } = this.store, m = c === S.ORIENTATION.VERTICAL;
-    let u = m ? F : U;
-    this.api.getDocumentModifier().modifyHtml(e.querySelector("img")).setAttribute("width", H.productImageWidth).apply(new d("Updated image width")), setTimeout(() => {
-      u = u.replace("{-{-TEMPLATE_FIRST_LINE-}-}", m ? R : "").replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", i.getOuterHTML()).replace("{-{-PRODUCT_PRICE-}-}", t.getOuterHTML()).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", s.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", a.getOuterHTML()), u = u.trim().replace(R, "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(u).apply(new d("Reordered template"));
-    }, 50);
+    const { orientation: l } = this.store;
+    let c = l === S.ORIENTATION.VERTICAL ? H : x;
+    c = c.replace("{-{-TEMPLATE_FIRST_LINE-}-}", A).replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", i.getOuterHTML()).replace("{-{-PRODUCT_PRICE-}-}", t.getOuterHTML()).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", s.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", a.getOuterHTML()), c = c.trim().replace(A, "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(c).apply(new d("Reordered template"));
   }
   _updateDataTypeAttributes(e) {
     if (!this.currentNode)
@@ -247,21 +243,21 @@ class te extends x {
   _updateDataNumberAttributes(e) {
     if (!this.currentNode)
       return;
-    const { itemsType: i } = this.store, t = N[i].findIndex((c) => c.value === e);
+    const { itemsType: i } = this.store, t = N[i].findIndex((l) => l.value === e);
     let r = "1";
     if (t >= 0)
       r = String(t + 1);
     else if (e) {
-      const c = e.match(/\((\d+)\)/);
-      if (c) {
-        const [, m] = c;
-        r = m;
+      const l = e.match(/\((\d+)\)/);
+      if (l) {
+        const [, c] = l;
+        r = c;
       }
     }
     const n = this.currentNode.closest(".ins-product-td"), s = this.api.getDocumentModifier();
-    n && s.modifyHtml(n).setAttribute("data-number", r), this.currentNode.querySelectorAll("[data-number]").forEach((c) => {
-      const m = c;
-      s.modifyHtml(m).setAttribute("data-number", r);
+    n && s.modifyHtml(n).setAttribute("data-number", r), this.currentNode.querySelectorAll("[data-number]").forEach((l) => {
+      const c = l;
+      s.modifyHtml(c).setAttribute("data-number", r);
     }), s.apply(new d("Updated data-number attribute"));
   }
   _reFillTemplate() {
@@ -269,17 +265,17 @@ class te extends x {
     this._updateImageSrc(e.imageSrc), this._updateName(e.name), this._updatePrice(e.price), this._updateOriginalPrice(e.originalPrice), this._updateQuantity(e.quantity);
   }
   _recalculateTrimming() {
-    var n;
-    if (!this.currentNode)
+    var r;
+    if (!this.store.nameTrimming || !this.currentNode)
       return;
-    const e = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${l.NAME}"]`);
+    const e = (r = this.currentNode) == null ? void 0 : r.querySelector(`[esd-extension-block-id="${m.NAME}"]`);
     if (!e)
       return;
-    const i = e.querySelector("p > a");
+    const i = e.querySelector("p");
     if (!i)
       return;
-    const t = this.store.orientation === S.ORIENTATION.VERTICAL, r = this.store.nameTrimming;
-    this.api.getDocumentModifier().modifyHtml(i).setStyle("overflow", "hidden").setStyle("white-space", r ? "nowrap" : "normal").setStyle("text-overflow", r ? "ellipsis" : "unset").setStyle("max-width", t ? "130px" : "520px").setStyle("width", t ? "130px" : "520px").apply(new d("Recalculated trimming after orientation change"));
+    const t = this.store.orientation === S.ORIENTATION.VERTICAL;
+    this.api.getDocumentModifier().modifyHtml(i).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", t ? "130px" : "100%").apply(new d("Recalculated trimming after orientation change"));
   }
   _getParagraphFromBlock(e) {
     return e.querySelector("p");
@@ -311,6 +307,6 @@ class te extends x {
   }
 }
 export {
-  G as CONTROL_BLOCK_ID,
-  te as ItemsBlockControl
+  w as CONTROL_BLOCK_ID,
+  Z as ItemsBlockControl
 };

package/dist/extensions/Blocks/Items/enums/settingsEnums.js

@@ -19,7 +19,7 @@ const e = {
   itemsType: e.ITEMS_TYPE.CART_ITEMS,
   cartItemsSelectControlValue: "{{Abandoned Cart Item (1) Url}}",
   cardOrientationControlValue: e.ORIENTATION.HORIZONTAL,
-  productNameTrimmingControlValue: "1",
+  productNameTrimmingControlValue: "0",
   productPriceHideDiscountControlValue: "0",
   productPriceFormattedControlValue: "1",
   productPriceCurrencySymbolControlValue: "USD",
@@ -34,8 +34,7 @@ const e = {
   productQuantityVisible: "1",
   productPriceVisible: "1",
   productOriginalPriceVisible: "1",
-  productButtonVisible: "1",
-  productImageWidth: "70"
+  productButtonVisible: "1"
 }, o = {
   [e.ITEMS_TYPE.CART_ITEMS]: [
     { text: "Abandoned Cart Item (1)", value: "{{Abandoned Cart Item (1) Url}}" },

package/dist/extensions/Blocks/Items/store/items-block.js

@@ -8,7 +8,7 @@ const n = (t) => t.replace(/Url\}/, "Image}"), o = (t) => t.replace(/Image\}/, "
     imageLink: n(t),
     buttonLink: o(t),
     orientation: e.cardOrientationControlValue,
-    nameTrimming: !0,
+    nameTrimming: !1,
     hideDiscount: !1,
     currencySymbol: "USD",
     currencyLocation: "0",

package/dist/extensions/Blocks/Items/template.js

@@ -1,17 +1,17 @@
 import { BlockType as l, BlockAttr as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ItemsBlockId as T } from "./enums/controlEnums.js";
+import { ItemsBlockId as d } from "./enums/controlEnums.js";
 import { productPairs as i, templateFirstLine as N } from "./enums/productEnums.js";
-import { ItemInCartOptions as f, SETTINGS_ENUMS as O, DefaultConfigValues as P } from "./enums/settingsEnums.js";
-import B from "./layouts/horizontal.html.js";
-import g from "./layouts/vertical.html.js";
-let [C] = i.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [A] = i.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [p] = i.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [I] = i.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [u] = i.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
-const h = (a, t) => `
+import { ItemInCartOptions as P, SETTINGS_ENUMS as O } from "./enums/settingsEnums.js";
+import f from "./layouts/horizontal.html.js";
+import B from "./layouts/vertical.html.js";
+let [R] = i.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [C] = i.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [I] = i.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [$] = i.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [u] = i.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
+const g = (a, t) => `
     <${l.BLOCK_IMAGE} 
-        ${_.BLOCK_IMAGE.src}="${C}"
-        ${_.BLOCK_IMAGE.alt}="${A}"
+        ${_.BLOCK_IMAGE.src}="${R}"
+        ${_.BLOCK_IMAGE.alt}="Product Image"
         ${_.BLOCK_IMAGE.href}="#!"
-        ${_.BLOCK_IMAGE.width}=${P.productImageWidth}
-        esd-extension-block-id="${T.IMAGE}"
+        ${_.BLOCK_IMAGE.width}="70"
+        esd-extension-block-id="${d.IMAGE}"
         data-slot-1
         product-attr="imageSrc"
         data-type="${a}" 
@@ -23,7 +23,7 @@ const h = (a, t) => `
         align="center" 
         class="es-p10" 
         data-type="${a}"
-        esd-extension-block-id="${T.NAME}"
+        esd-extension-block-id="${d.NAME}"
     >
         <p contenteditable="false">
             <a  
@@ -35,30 +35,24 @@ const h = (a, t) => `
                     line-height: inherit;
                     font-family: inherit;
                     color: inherit;
-                    display: block; 
-                    word-wrap:break-word; 
-                    white-space: nowrap;
-                    width: 520px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
                 "
                 product-attr="name"
                 data-slot-2
                 width="100%">
-                ${A}
+                ${C}
             </a>
         </p>
     </${l.BLOCK_TEXT}>
-`, S = (a, t, o, e, c) => {
-  let n = p;
+`, S = (a, t, n, e, c) => {
+  let o = I;
   if (e && e.trim()) {
-    const E = `&nbsp;${e.trim()}&nbsp;`;
-    n = (c || "0") === "1" ? `${p}${E}` : `${E}${p}`;
+    const T = `&nbsp;${e.trim()}&nbsp;`;
+    o = (c || "0") === "1" ? `${I}${T}` : `${T}${I}`;
   }
-  const r = c === "1" ? "after" : "before", d = `data-formated="${o ? "true" : "false"}"`, s = `data-curency="${r}"`;
+  const r = c === "1" ? "after" : "before", E = `data-formated="${n ? "true" : "false"}"`, s = `data-curency="${r}"`;
   return `
     <${l.BLOCK_TEXT} 
-        esd-extension-block-id="${T.PRICE}"
+        esd-extension-block-id="${d.PRICE}"
         class="items-block-price"
         width="100%" 
         align="center" 
@@ -69,25 +63,25 @@ const h = (a, t) => `
             data-slot-4
             data-type="${a}"
             data-number="${t}"
-            ${d}
+            ${E}
             ${s}
             ${e ? `data-currency_symbol="${e}"` : ""}
         >
-            ${n}
+            ${o}
         </p>
     </${l.BLOCK_TEXT}>
 `;
-}, L = (a, t, o, e, c) => {
-  let n = I;
+}, L = (a, t, n, e, c) => {
+  let o = $;
   if (e && e.trim()) {
-    const E = `&nbsp;${e.trim()}&nbsp;`;
-    n = (c || "0") === "1" ? `${I}${E}` : `${E}${I}`;
+    const T = `&nbsp;${e.trim()}&nbsp;`;
+    o = (c || "0") === "1" ? `${$}${T}` : `${T}${$}`;
   }
-  const r = c === "1" ? "after" : "before", d = `data-formated="${o ? "true" : "false"}"`, s = `data-curency="${r}"`;
+  const r = c === "1" ? "after" : "before", E = `data-formated="${n ? "true" : "false"}"`, s = `data-curency="${r}"`;
   return `
     <${l.BLOCK_TEXT} 
         class="items-block-price"
-        esd-extension-block-id="${T.ORIGINAL_PRICE}"
+        esd-extension-block-id="${d.ORIGINAL_PRICE}"
         width="100%" 
         align="center" 
     >
@@ -98,11 +92,11 @@ const h = (a, t) => `
             style="color: #cc0000"
             data-type="${a}"
             data-number="${t}"
-            ${d}
+            ${E}
             ${s}
             ${e ? `data-currency_symbol="${e}"` : ""}
         >
-            <s>${n}</s>
+            <s>${o}</s>
         </p>
     </${l.BLOCK_TEXT}>
 `;
@@ -111,7 +105,7 @@ const h = (a, t) => `
         width="100%" 
         align="center"
         class="es-p10" 
-        esd-extension-block-id="${T.QUANTITY}"
+        esd-extension-block-id="${d.QUANTITY}"
     >
         <p
             product-attr="quantity"
@@ -121,75 +115,75 @@ const h = (a, t) => `
             ${u}
         </p>
     </${l.BLOCK_TEXT}>
-`, U = (a, t) => `
+`, h = (a, t) => `
     <${l.BLOCK_BUTTON} 
         width="100%"
         class="ins-button" 
         name="buy-button" 
         caption="Buy" 
         align="center"
-        esd-extension-block-id="${T.BUTTON}"
+        esd-extension-block-id="${d.BUTTON}"
         product-attr="button"
         data-slot-6
         data-type="${a}"
         data-number="${t}"
     >Buy
     </${l.BLOCK_BUTTON}>
-`, D = () => `
+`, U = () => `
     <esd-config-block style="display: none;"></esd-config-block>
-`, R = (a, t, o, e, c, n, r, d) => {
-  const $ = `${`data-type="${t}" data-number="${o}"`} data-orientation="${e}"`;
+`, p = (a, t, n, e, c, o, r, E) => {
+  const A = `${`data-type="${t}" data-number="${n}"`} data-orientation="${e}"`;
   return a.replace(
     /<td([^>]*class="[^"]*ins-product-td[^"]*"[^>]*)>/,
-    `<td$1 ${$}>`
-  ).replace("{-{-TEMPLATE_FIRST_LINE-}-}", N).replace("{-{-PRODUCT_IMAGE-}-}", h(t, o)).replace("{-{-PRODUCT_NAME-}-}", F(t)).replace(
+    `<td$1 ${A}>`
+  ).replace("{-{-TEMPLATE_FIRST_LINE-}-}", N).replace("{-{-PRODUCT_IMAGE-}-}", g(t, n)).replace("{-{-PRODUCT_NAME-}-}", F(t)).replace(
     "{-{-PRODUCT_PRICE-}-}",
-    S(t, o, c, n, r)
+    S(t, n, c, o, r)
   ).replace(
     "{-{-PRODUCT_ORIGINAL_PRICE-}-}",
     L(
       t,
-      o,
-      c,
       n,
+      c,
+      o,
       r
     )
-  ).replace("{-{-PRODUCT_QUANTITY-}-}", b()).replace("{-{-PRODUCT_BUTTON-}-}", U(t, o)).replace("{-{-CONFIG_BLOCK-}-}", D());
+  ).replace("{-{-PRODUCT_QUANTITY-}-}", b()).replace("{-{-PRODUCT_BUTTON-}-}", h(t, n)).replace("{-{-CONFIG_BLOCK-}-}", U());
 };
-function G({
+function x({
   orientation: a,
   itemsType: t = O.ITEMS_TYPE.CART_ITEMS,
-  itemId: o,
+  itemId: n,
   currencySymbol: e,
   currencyLocation: c,
-  formattedPrice: n = !0
+  formattedPrice: o = !0
 }) {
-  const r = f[t].findIndex((s) => s.value === o);
-  let d = "1";
+  const r = P[t].findIndex((s) => s.value === n);
+  let E = "1";
   if (r >= 0)
-    d = String(r + 1);
-  else if (o) {
-    const s = o.match(/\((\d+)\)/);
-    s && s[1] && ([, d] = s);
+    E = String(r + 1);
+  else if (n) {
+    const s = n.match(/\((\d+)\)/);
+    s && s[1] && ([, E] = s);
   }
-  return C = i.PAIRS_FOR_EXTENSION.imageSrc[t].DEFAULT[r >= 0 ? r : 0], A = i.PAIRS_FOR_EXTENSION.name[t].DEFAULT[r >= 0 ? r : 0], p = n ? i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE, I = n ? i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE, u = i.PAIRS_FOR_EXTENSION.quantity[t].DEFAULT, a === O.ORIENTATION.VERTICAL ? R(
-    g,
+  return R = i.PAIRS_FOR_EXTENSION.imageSrc[t].DEFAULT[r >= 0 ? r : 0], C = i.PAIRS_FOR_EXTENSION.name[t].DEFAULT[r >= 0 ? r : 0], I = o ? i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE, $ = o ? i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE, u = i.PAIRS_FOR_EXTENSION.quantity[t].DEFAULT, a === O.ORIENTATION.VERTICAL ? p(
+    B,
     t,
-    d,
+    E,
     a,
-    n,
+    o,
     e,
     c
-  ) : R(
-    B,
+  ) : p(
+    f,
     t,
-    d,
+    E,
     a,
-    n,
+    o,
     e,
     c
   );
 }
 export {
-  G as getDefaultTemplate
+  x as getDefaultTemplate
 };

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

@@ -1,17 +1,17 @@
-var d = Object.defineProperty;
-var _ = (n, i, e) => i in n ? d(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
-var u = (n, i, e) => _(n, typeof i != "symbol" ? i + "" : i, e);
+var _ = Object.defineProperty;
+var S = (n, i, e) => i in n ? _(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
+var u = (n, i, e) => S(n, typeof i != "symbol" ? i + "" : i, e);
 import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
 import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.js";
-import { Block as h, BlockCompositionType as S, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as L } from "./template.js";
+import { Block as d, BlockCompositionType as L, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as h } from "./template.js";
 import { UNSUBSCRIBE_EVENTS as a, DATA_ATTRIBUTES as o } from "./utils/constants.js";
-import { parsePageList as p } from "./utils/utils.js";
-const g = "unsubscribe-block", v = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", B = "{{ins-unsubscribe-link}}", T = {
+import { parsePageList as m } from "./utils/utils.js";
+const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', T = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", B = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
-class R extends h {
+class D extends d {
   constructor() {
     super();
     u(this, "selectEventListener", null);
@@ -19,13 +19,13 @@ class R extends h {
     u(this, "currentNode");
   }
   getId() {
-    return g;
+    return v;
   }
   getIcon() {
     return "unsubscribe-icon";
   }
   getBlockCompositionType() {
-    return S.BLOCK;
+    return L.BLOCK;
   }
   getName() {
     return this.api.translate("Unsubscribe Block");
@@ -34,10 +34,13 @@ class R extends h {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return L();
+    return h();
+  }
+  onCreated(e) {
+    "getOuterHTML" in e && !e.getOuterHTML() || "getAttribute" in e && e.getAttribute("data-migration") || (this.currentNode = e, this._resetStoreState(), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
   }
   onSelect(e) {
-    this.currentNode = e, !("getAttribute" in e && e.getAttribute("data-migration")) && (this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
+    this.currentNode = e, this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener();
   }
   onDelete(e) {
     this._removeEventListeners(), this._removeBlockTemplatesFromStore(e), this._resetStoreState();
@@ -63,13 +66,7 @@ class R extends h {
     this.cancelEventListener && (document.removeEventListener(a.CANCEL, this.cancelEventListener), this.cancelEventListener = null);
   }
   _handleCancel() {
-    try {
-      if (!this.currentNode)
-        return;
-      this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
-    } catch (e) {
-      console.warn("[UnsubscribeBlock] Failed to remove unsubscribe block:", e);
-    }
+    this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
   }
   _removeEventListeners() {
     this._removeSelectEventListener(), this._removeCancelEventListener();
@@ -77,27 +74,26 @@ class R extends h {
   _updateBlock(e, s) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
-    const t = this.currentNode.querySelector(v);
+    const t = this.currentNode.querySelector(g);
     if (!t)
       return;
     const r = this._getMergeTag(e);
     this.api.getDocumentModifier().modifyHtml(t).setAttribute("href", r).apply(new b(`Updated unsubscribe link to ${r}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, s).apply(new b("Updated unsubscribe block metadata"));
   }
   _getMergeTag(e) {
-    return T[e] ?? B;
+    return B[e] ?? f;
   }
   _openDrawer() {
-    if (!(this.currentNode && this.currentNode.getAttribute("data-unsubscribe-page-type")))
-      try {
-        const e = c();
-        e.typeSelectionDrawerStatus = !0;
-      } catch (e) {
-        console.error("[UnsubscribeBlock] Failed to open drawer:", e);
-      }
+    try {
+      const e = c();
+      e.typeSelectionDrawerStatus = !0;
+    } catch (e) {
+      console.error("[UnsubscribeBlock] Failed to open drawer:", e);
+    }
   }
   _checkExistingBlocks() {
     const e = c();
-    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(f).forEach((t) => {
+    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(T).forEach((t) => {
       if ("getAttribute" in t) {
         const r = t.getAttribute(o.PAGE_TYPE);
         if (r) {
@@ -113,8 +109,8 @@ class R extends h {
     const s = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
     if (!s || !t)
       return;
-    const r = c(), l = Number(s), m = p(t);
-    r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(m);
+    const r = c(), l = Number(s), p = m(t);
+    r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(p);
   }
   _resetStoreState() {
     c().$reset();
@@ -125,11 +121,11 @@ class R extends h {
     const s = e.getAttribute(o.PAGE_LIST);
     if (!s)
       return;
-    const t = c(), r = p(s);
+    const t = c(), r = m(s);
     t.removeUnsubscribePages(r);
   }
 }
 export {
-  g as UNSUBSCRIBE_BLOCK_ID,
-  R as UnsubscribeBlock
+  v as UNSUBSCRIBE_BLOCK_ID,
+  D as UnsubscribeBlock
 };

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

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

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

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

package/dist/src/extensions/Blocks/Items/enums/settingsEnums.d.ts

@@ -40,7 +40,6 @@ export declare const DefaultConfigValues: {
     productPriceVisible: string;
     productOriginalPriceVisible: string;
     productButtonVisible: string;
-    productImageWidth: string;
 };
 export declare const ItemInCartOptions: {
     [x: string]: {

package/dist/src/extensions/Blocks/Unsubscribe/block.d.ts

@@ -1,4 +1,4 @@
-import type { ImmutableHtmlElementNode } from '@stripoinc/ui-editor-extensions';
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
 export declare const UNSUBSCRIBE_BLOCK_ID = "unsubscribe-block";
 export declare class UnsubscribeBlock extends Block {
@@ -12,8 +12,9 @@ export declare class UnsubscribeBlock extends Block {
     getName(): string;
     getDescription(): string;
     getTemplate(): string;
-    onSelect(node: ImmutableHtmlElementNode): void;
-    onDelete(node: ImmutableHtmlElementNode): void;
+    onCreated(node: ImmutableHtmlNode): void;
+    onSelect(node: ImmutableHtmlNode): undefined;
+    onDelete(node: ImmutableHtmlNode): undefined;
     onDestroy(): void;
     private _setupSelectEventListener;
     private _removeSelectEventListener;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.3-beta.e83334e",
+  "version": "1.0.3-beta.ea69f4a",
   "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",