@useinsider/guido 3.2.0 → 3.2.1-beta.d58ee72

package/dist/composables/useActionsApi.js

@@ -89,11 +89,11 @@ const v = () => {
     updateHtmlAndCss: (t, e) => {
       window.StripoEditorApi.actionsApi.updateHtmlAndCss(t, e);
     },
-    editorSave: () => {
-      window.StripoEditorApi.actionsApi.save((t) => {
-        t && n(t, "Failed to save template");
+    editorSave: () => new Promise((t) => {
+      window.StripoEditorApi.actionsApi.save((e) => {
+        e && n(e, "Failed to save template"), t();
       });
-    }
+    })
   };
 };
 export {

package/dist/composables/useSave.js

@@ -19,7 +19,7 @@ const F = () => {
       return;
     if ((i = a.value) != null && i.externalValidation && !await a.value.externalValidation(t))
       return;
-    c();
+    await c();
     const { unsubscribePayload: f, stripoModules: v } = d(t.rawHtml);
     return await u(f), t.modules = v, m || s(t), t;
   } };

package/dist/config/compiler/recommendationCompilerRules.js

@@ -1,16 +1,16 @@
-import { useRecommendation as N } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as C, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as R, CONDITIONS as $, HTML as h } from "../../enums/recommendation.js";
+import { useRecommendation as C } from "../../composables/useRecommendation.js";
+import { DUMMY_IMAGE_MAPPINGS as h, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as A, CONDITIONS as g, HTML as N } from "../../enums/recommendation.js";
 import { prepareRecommendationBlocks as x } from "./utils/recommendationCompilerUtils.js";
 const w = [
   {
     id: "replace-images-with-variable-names",
     description: "Replacing dummy images with variable names in recommendation module",
     type: "custom",
-    processor: (i) => {
-      let e = i;
-      return Object.entries(C).forEach(([, p]) => {
-        Object.entries(p).forEach(([c, n]) => {
-          e = e.replaceAll(n, `{{${c}}}`);
+    processor: (c) => {
+      let e = c;
+      return Object.entries(h).forEach(([, l]) => {
+        Object.entries(l).forEach(([n, s]) => {
+          e = e.replaceAll(s, `{{${n}}}`);
         });
       }), e;
     },
@@ -29,21 +29,21 @@ const w = [
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
-    processor: (i) => {
-      const { calculateCardWidth: e, getRecommendationCampaignData: p } = N();
-      let c = i;
-      const n = c.match(T.ID);
-      if (n) {
+    processor: (c) => {
+      const { calculateCardWidth: e, getRecommendationCampaignData: l } = C();
+      let n = c;
+      const s = n.match(T.ID);
+      if (s) {
         const a = [];
-        if (n.forEach((s) => {
-          const d = /recommendation-id="(.*?)"/i.exec(s), _ = d ? d[1].trim() : "", A = p(_);
-          A.textTrimming && A.orientation === M && a.push(e(A));
+        if (s.forEach((i) => {
+          const d = /recommendation-id="(.*?)"/i.exec(i), _ = d ? d[1].trim() : "", R = l(_);
+          R.textTrimming && R.orientation === M && a.push(e(R));
         }), a.length) {
-          const s = `width:${Math.min(...a)}px!important;`;
-          c = c.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
+          const i = `width:${Math.min(...a)}px!important;`;
+          n = n.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
         }
       }
-      return c;
+      return n;
     },
     priority: 52
   },
@@ -51,34 +51,34 @@ const w = [
     id: "prepare-recommendations",
     description: "Replacing product data with template variables in recommendation blocks",
     type: "custom",
-    processor: (i) => x(i),
+    processor: (c) => x(c),
     priority: 48
   },
   {
     id: "add-discount-conditions",
     description: "Adding discount conditions to the recommendation block",
     type: "custom",
-    processor: (i) => {
-      let e = i;
-      const p = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: c } = N();
-      return p !== null && p.forEach((n) => {
-        const a = n.match(T.CUSTOM_FIELD);
+    processor: (c) => {
+      let e = c;
+      const l = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = C();
+      return l !== null && l.forEach((s) => {
+        const a = s.match(T.CUSTOM_FIELD);
         if (!a)
           return;
-        const [s] = a, d = s.match(T.CUSTOM_FIELD_INDEXES_PART), _ = s.match(T.CUSTOM_FIELD_NAME_PART), A = n.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
-        if (!d || !_ || !A)
+        const [i] = a, d = i.match(T.CUSTOM_FIELD_INDEXES_PART), _ = i.match(T.CUSTOM_FIELD_NAME_PART), R = s.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
+        if (!d || !_ || !R)
           return;
-        const [I] = d, [S] = _, [m] = A, o = S.substring(1, S.length - 2), r = m.match(T.COMPOSITION) !== null;
-        let t = s;
+        const [S] = d, [b] = _, [m] = R, o = b.substring(1, b.length - 2), r = m.match(T.COMPOSITION) !== null;
+        let t = i;
         if (r) {
-          const b = I.substring(2, I.length - 3), l = c(b);
-          o === R.OMNIBUS_PRICE && (l.priceBeforeTextValue && (t = `${l.priceBeforeTextValue}${t}`), l.priceAfterTextValue && (t = `${t}${l.priceAfterTextValue}`)), o === R.OMNIBUS_DISCOUNT && (l.discountBeforeTextValue && (t = `${l.discountBeforeTextValue}${t}`), l.discountAfterTextValue && (t = `${t}${l.discountAfterTextValue}`));
+          const I = S.substring(2, S.length - 3), p = n(I);
+          o === A.OMNIBUS_PRICE && (p.priceBeforeTextValue && (t = `${p.priceBeforeTextValue}${t}`), p.priceAfterTextValue && (t = `${t}${p.priceAfterTextValue}`)), o === A.OMNIBUS_DISCOUNT && (p.discountBeforeTextValue && (t = `${p.discountBeforeTextValue}${t}`), p.discountAfterTextValue && (t = `${t}${p.discountAfterTextValue}`));
         }
-        const u = I.substring(2);
+        const u = S.substring(2);
         let f = "";
-        o in $.IF && (f = $.IF[o].replaceAll(`{${R.DISCOUNT}}`, `${u}${R.DISCOUNT}`).replaceAll(`{${R.OMNIBUS_DISCOUNT}}`, `${u}${R.OMNIBUS_DISCOUNT}`).replaceAll(`{${R.OMNIBUS_PRICE}}`, `${u}${R.OMNIBUS_PRICE}`));
-        const g = `${m}${t}${h.PARAGRAPH_END_TAG}`, y = `${f}${r ? g : n}${$.ELSE}${m}${h.PARAGRAPH_END_TAG}${$.END_IF}`;
-        e = e.replace(n, y);
+        o in g.IF && (f = g.IF[o].replaceAll(`{${A.DISCOUNT}}`, `${u}${A.DISCOUNT}`).replaceAll(`{${A.OMNIBUS_DISCOUNT}}`, `${u}${A.OMNIBUS_DISCOUNT}`).replaceAll(`{${A.OMNIBUS_PRICE}}`, `${u}${A.OMNIBUS_PRICE}`));
+        const $ = `${m}${t}${N.PARAGRAPH_END_TAG}`, y = `${f}${r ? $ : s}${g.ELSE}${m}${N.PARAGRAPH_END_TAG}${g.END_IF}`;
+        e = e.replace(s, y);
       }), e;
     },
     priority: 53
@@ -95,19 +95,24 @@ const w = [
   {
     id: "strip-recommendation-editor-attributes",
     description: "Strip editor-only attributes from compiled recommendation output",
-    type: "regex",
-    // eslint-disable-next-line @stylistic/max-len
-    pattern: '\\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"',
-    replacement: "",
-    flags: "g",
+    type: "custom",
+    // Scoped to REC_START/REC_END markers so it cannot strip `product-attr`
+    // from Items block elements, which the items compiler rule depends on.
+    processor: (c) => {
+      const e = /\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"/g;
+      return c.replace(
+        /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
+        (l, n) => `<!--REC_START-->${n.replace(e, "")}<!--REC_END-->`
+      );
+    },
     priority: 55
   },
   {
     id: "strip-unused-recommendation-classes",
     description: "Remove CSS classes not referenced by any style rule from recommendation elements",
     type: "custom",
-    processor: (i) => {
-      let e = i.replace(
+    processor: (c) => {
+      let e = c.replace(
         / class="(?:product-card-segment|attribute-cell|recommendation-attribute-row|product-image|product-name|product-price|product-old-price|product-omnibus-price|product-omnibus-discount|product-button|recommendation-product-row|product-card-wrapper)"/g,
         ""
       );
@@ -119,8 +124,8 @@ const w = [
     id: "remove-empty-mobile-layout-artifacts",
     description: "Remove empty mobile container rows and unused mobile layout CSS",
     type: "custom",
-    processor: (i) => {
-      let e = i;
+    processor: (c) => {
+      let e = c;
       return e = e.replace(
         /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
         ""
@@ -129,9 +134,9 @@ const w = [
         ""
       ), e = e.replace(
         /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
-        (p, c) => {
-          const n = c.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
-          return n.every((d) => a.test(d)) ? "" : p;
+        (l, n) => {
+          const s = n.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
+          return s.every((d) => a.test(d)) ? "" : l;
         }
       )), e;
     },
@@ -141,38 +146,38 @@ const w = [
     id: "deduplicate-inline-styles",
     description: "Replace repeated inline styles with CSS class references within recommendation blocks",
     type: "custom",
-    processor: (i) => {
-      const e = i.replace(
+    processor: (c) => {
+      const e = c.replace(
         /<a\b[^>]*\bes-button\b[^>]*>/g,
         (o) => o.replace(
           /([;"]color:)([^;"]+)/g,
           (r, t, u) => u.includes("!important") ? r : `${t}${u} !important`
         )
-      ), p = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, c = / style="([^"]*)"/g, n = /* @__PURE__ */ new Map();
-      let a = p.exec(e);
+      ), l = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, n = / style="([^"]*)"/g, s = /* @__PURE__ */ new Map();
+      let a = l.exec(e);
       for (; a !== null; ) {
-        let o = c.exec(a[1]);
+        let o = n.exec(a[1]);
         for (; o !== null; ) {
           const [, r] = o;
-          n.set(r, (n.get(r) || 0) + 1), o = c.exec(a[1]);
+          s.set(r, (s.get(r) || 0) + 1), o = n.exec(a[1]);
         }
-        c.lastIndex = 0, a = p.exec(e);
+        n.lastIndex = 0, a = l.exec(e);
       }
-      const s = /* @__PURE__ */ new Map(), d = [];
+      const i = /* @__PURE__ */ new Map(), d = [];
       let _ = 0;
-      if (n.forEach((o, r) => {
+      if (s.forEach((o, r) => {
         if (o >= 6) {
           const t = `rc${_++}`;
-          s.set(r, t), d.push(`.${t}{${r}}`);
+          i.set(r, t), d.push(`.${t}{${r}}`);
         }
-      }), s.size === 0) {
+      }), i.size === 0) {
         let o = e;
         return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
       }
-      const A = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), I = (o, r) => `${o.slice(0, -1)} ${r}"`, S = /* @__PURE__ */ new Map();
-      s.forEach((o, r) => {
-        const t = A(r);
-        S.set(r, {
+      const R = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), S = (o, r) => `${o.slice(0, -1)} ${r}"`, b = /* @__PURE__ */ new Map();
+      i.forEach((o, r) => {
+        const t = R(r);
+        b.set(r, {
           caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
           caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
         });
@@ -182,14 +187,14 @@ const w = [
         /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
         (o, r) => {
           let t = r;
-          return s.forEach((u, f) => {
-            const g = S.get(f);
+          return i.forEach((u, f) => {
+            const $ = b.get(f);
             t = t.replace(
-              g.caseA,
-              (y, b, l) => I(b, u) + l
+              $.caseA,
+              (y, I, p) => S(I, u) + p
             ), t = t.replace(
-              g.caseB,
-              (y, b, l) => b + I(l, u)
+              $.caseB,
+              (y, I, p) => I + S(p, u)
             ), t = t.replaceAll(` style="${f}"`, ` class="${u}"`);
           }), t;
         }

package/dist/extensions/Blocks/Items/controls/price/singlePrice.js

@@ -1,75 +1,75 @@
-import { ModificationDescription as m, UIElementType as _, UEAttr as A } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as h } from "../../../common-control.js";
-import { ItemsBlockControlId as L, ItemsBlockId as R } from "../../enums/controlEnums.js";
-import { productPairs as T } from "../../enums/productEnums.js";
-import { getItemsBlockConfig as I, setItemsBlockConfig as u, escapeReplacement as N } from "../../utils/nodeConfigUtils.js";
-const D = L.PRICE_SINGLE_PRICE, l = {
+import { ModificationDescription as S, UIElementType as d, UEAttr as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as A } from "../../../common-control.js";
+import { ItemsBlockControlId as T, ItemsBlockId as p } from "../../enums/controlEnums.js";
+import { productPairs as R } from "../../enums/productEnums.js";
+import { getItemsBlockConfig as I, setItemsBlockConfig as N, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
+const u = T.PRICE_SINGLE_PRICE, l = {
   SINGLE_PRICE: "singlePrice"
 };
-class y extends h {
+class k extends A {
   getId() {
-    return D;
+    return u;
   }
   getTemplate() {
     return `
-            <div class="container ${L.PRICE_SINGLE_PRICE}">
+            <div class="container ${T.PRICE_SINGLE_PRICE}">
                 ${this._getSinglePrice()}
             </div>
         `;
   }
   onRender() {
     const e = I(this.currentNode);
-    this.api.updateValues({ [l.SINGLE_PRICE]: (e == null ? void 0 : e.priceSinglePrice) ?? !1 }), this.api.onValueChanged(l.SINGLE_PRICE, (t) => {
-      this._onSinglePriceChange(t);
+    this.api.updateValues({ [l.SINGLE_PRICE]: (e == null ? void 0 : e.priceSinglePrice) ?? !1 }), this.api.onValueChanged(l.SINGLE_PRICE, (i) => {
+      this._onSinglePriceChange(i);
     });
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const t = I(this.currentNode);
-      this.api.updateValues({ [l.SINGLE_PRICE]: (t == null ? void 0 : t.priceSinglePrice) ?? !1 });
+      const i = I(this.currentNode);
+      this.api.updateValues({ [l.SINGLE_PRICE]: (i == null ? void 0 : i.priceSinglePrice) ?? !1 });
     });
   }
   _onSinglePriceChange(e) {
-    if (console.debug("Single price changed to: ", e), u(this.currentNode, this.api, { priceSinglePrice: e }), !this.currentNode)
+    if (console.debug("Single price changed to: ", e), !this.currentNode)
       return;
-    const t = I(this.currentNode), o = (t == null ? void 0 : t.type) ?? "CART_ITEMS", r = (t == null ? void 0 : t.priceFormatted) ?? !1, i = T.PAIRS_FOR_EXTENSION.price[o], c = T.PAIRS_FOR_EXTENSION.originalPrice[o], [P, p] = e ? [
-      r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE,
-      r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE
+    const i = I(this.currentNode), c = (i == null ? void 0 : i.type) ?? "CART_ITEMS", r = (i == null ? void 0 : i.priceFormatted) ?? !1, t = R.PAIRS_FOR_EXTENSION.price[c], n = R.PAIRS_FOR_EXTENSION.originalPrice[c], [E, g] = e ? [
+      r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE,
+      r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE
     ] : [
-      r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE,
-      r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE
-    ], s = r ? c.DEFAULT_PRICE_FORMATTED : c.DEFAULT_PRICE, d = r ? c.DEFAULT_SINGLE_PRICE_FORMATTED : c.DEFAULT_SINGLE_PRICE, [g, C] = e ? [s, d] : [d, s], n = this.currentNode.closest(".items-block"), S = (n == null ? void 0 : n.querySelectorAll(
-      `[esd-extension-block-id="${R.PRICE}"]`
-    )) || [], E = this.api.getDocumentModifier();
-    S.forEach((a) => {
-      this._updatePriceBlock(E, a, P, p, e);
-    }), ((n == null ? void 0 : n.querySelectorAll(
-      `[esd-extension-block-id="${R.ORIGINAL_PRICE}"]`
+      r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE,
+      r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE
+    ], P = r ? n.DEFAULT_PRICE_FORMATTED : n.DEFAULT_PRICE, _ = r ? n.DEFAULT_SINGLE_PRICE_FORMATTED : n.DEFAULT_SINGLE_PRICE, [L, C] = e ? [P, _] : [_, P], s = this.api.getDocumentModifier();
+    N(this.currentNode, this.api, { priceSinglePrice: e }, s);
+    const o = this.currentNode.closest(".items-block");
+    ((o == null ? void 0 : o.querySelectorAll(
+      `[esd-extension-block-id="${p.PRICE}"]`
     )) || []).forEach((a) => {
-      this._updatePriceBlock(E, a, g, C, e);
-    }), E.apply(new m(
+      this._updatePriceBlock(s, a, E, g, e);
+    }), ((o == null ? void 0 : o.querySelectorAll(
+      `[esd-extension-block-id="${p.ORIGINAL_PRICE}"]`
+    )) || []).forEach((a) => {
+      this._updatePriceBlock(s, a, L, C, e);
+    }), s.apply(new S(
       `Updated price to ${e ? "single" : "total"} price`
     ));
   }
-  _updatePriceBlock(e, t, o, r, i) {
-    const c = t.getInnerHTML().trim().replace(o, N(r));
-    e.modifyHtml(t).setInnerHtml(c), t.querySelectorAll('[product-attr="price"], [product-attr="originalPrice"]').forEach((s) => {
-      e.modifyHtml(s).setAttribute("data-single_price", i ? "true" : "false");
-    });
+  _updatePriceBlock(e, i, c, r, t) {
+    const n = `data-single_price="${t ? "true" : "false"}"`, E = i.getInnerHTML().trim().replace(c, h(r)).replace(/data-single_price=(?:"[^"]*"|'[^']*')/g, n);
+    e.modifyHtml(i).setInnerHtml(E);
   }
   _getSinglePrice() {
     return `
             <div class="display-flex align-items-center justify-content-between">
-                <${_.LABEL}
-                    ${A.LABEL.text}="${this.api.translate("Show Single Product Price")}"
+                <${d.LABEL}
+                    ${m.LABEL.text}="${this.api.translate("Show Single Product Price")}"
                 >
-                </${_.LABEL}>
+                </${d.LABEL}>
                 ${this._GuToggle(l.SINGLE_PRICE)}
             </div>
         `;
   }
 }
 export {
-  D as CONTROL_BLOCK_ID,
-  y as PriceSinglePriceControl
+  u as CONTROL_BLOCK_ID,
+  k as PriceSinglePriceControl
 };

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

@@ -1,6 +1,6 @@
 import _ from "../../../../node_modules/lodash-es/flatMap.js";
-import a from "../../../../node_modules/lodash-es/range.js";
-const T = '<td align="center" class="ins-product-td items-block items-block-v2">', E = { PAIRS_FOR_EXTENSION: {
+import E from "../../../../node_modules/lodash-es/range.js";
+const T = '<td align="center" class="ins-product-td items-block items-block-v2">', a = { PAIRS_FOR_EXTENSION: {
   imageSrc: {
     CART_ITEMS: {
       ATTR: "ins_apr_img",
@@ -212,10 +212,10 @@ const T = '<td align="center" class="ins-product-td items-block items-block-v2">
   }
 } };
 function m(e, s = 8) {
-  return a(1, s + 1).map((i) => `${e}_${i}`);
+  return E(1, s + 1).map((i) => `${e}_${i}`);
 }
-function t() {
-  const { PAIRS_FOR_EXTENSION: e } = E, s = [];
+function r() {
+  const { PAIRS_FOR_EXTENSION: e } = a, s = [];
   return s.push(
     e.imageSrc.CART_ITEMS.ATTR,
     e.imageSrc.BROWSED_ITEMS.ATTR,
@@ -234,22 +234,34 @@ function t() {
   ), s.push(
     e.price.CART_ITEMS.PRICE,
     e.price.CART_ITEMS.PRICE_FORMATTED,
+    e.price.CART_ITEMS.SINGLE_PRICE,
+    e.price.CART_ITEMS.SINGLE_PRICE_FORMATTED,
     e.price.CART_ITEMS.CURRENCY,
     e.price.BROWSED_ITEMS.PRICE,
     e.price.BROWSED_ITEMS.PRICE_FORMATTED,
+    e.price.BROWSED_ITEMS.SINGLE_PRICE,
+    e.price.BROWSED_ITEMS.SINGLE_PRICE_FORMATTED,
     e.price.BROWSED_ITEMS.CURRENCY,
     e.price.PURCHASED_ITEMS.PRICE,
     e.price.PURCHASED_ITEMS.PRICE_FORMATTED,
+    e.price.PURCHASED_ITEMS.SINGLE_PRICE,
+    e.price.PURCHASED_ITEMS.SINGLE_PRICE_FORMATTED,
     e.price.PURCHASED_ITEMS.CURRENCY
   ), s.push(
     e.originalPrice.CART_ITEMS.PRICE,
     e.originalPrice.CART_ITEMS.PRICE_FORMATTED,
+    e.originalPrice.CART_ITEMS.SINGLE_PRICE,
+    e.originalPrice.CART_ITEMS.SINGLE_PRICE_FORMATTED,
     e.originalPrice.CART_ITEMS.CURRENCY,
     e.originalPrice.BROWSED_ITEMS.PRICE,
     e.originalPrice.BROWSED_ITEMS.PRICE_FORMATTED,
+    e.originalPrice.BROWSED_ITEMS.SINGLE_PRICE,
+    e.originalPrice.BROWSED_ITEMS.SINGLE_PRICE_FORMATTED,
     e.originalPrice.BROWSED_ITEMS.CURRENCY,
     e.originalPrice.PURCHASED_ITEMS.PRICE,
     e.originalPrice.PURCHASED_ITEMS.PRICE_FORMATTED,
+    e.originalPrice.PURCHASED_ITEMS.SINGLE_PRICE,
+    e.originalPrice.PURCHASED_ITEMS.SINGLE_PRICE_FORMATTED,
     e.originalPrice.PURCHASED_ITEMS.CURRENCY
   ), s.push(
     e.button.CART_ITEMS.HREF,
@@ -262,11 +274,11 @@ function t() {
   ), s;
 }
 const o = _(
-  t(),
+  r(),
   (e) => m(e)
 );
 export {
   o as itemsBlockDynamicVariables,
-  E as productPairs,
+  a as productPairs,
   T as templateFirstLine
 };

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

@@ -3,15 +3,15 @@ var h = (n, i, e) => i in n ? d(n, i, { enumerable: !0, configurable: !0, writab
 var u = (n, i, e) => h(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 _, 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 _, BlockCompositionType as S, BlockType as L, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as v } 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 v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", T = "{{ins-unsubscribe-link}}", B = {
+const g = "unsubscribe-block", T = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", B = "{{ins-unsubscribe-link}}", C = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
-class R extends _ {
+class I extends _ {
   constructor() {
     super();
     u(this, "selectEventListener", null);
@@ -19,7 +19,7 @@ class R extends _ {
     u(this, "currentNode");
   }
   getId() {
-    return v;
+    return g;
   }
   getIcon() {
     return "unsubscribe-icon";
@@ -34,7 +34,7 @@ class R extends _ {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return L();
+    return v();
   }
   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());
@@ -66,7 +66,7 @@ class R extends _ {
     try {
       if (!this.currentNode)
         return;
-      this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
+      this.api.getDocumentModifier().modifyHtml(this.currentNode).replaceWith(`<${L.EMPTY_CONTAINER}/>`).apply(new b("Removed unsubscribe block due to cancel"));
     } catch (e) {
       console.warn("[UnsubscribeBlock] Failed to remove unsubscribe block:", e);
     }
@@ -77,14 +77,14 @@ class R extends _ {
   _updateBlock(e, r) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
-    const s = this.currentNode.querySelector(g);
+    const s = this.currentNode.querySelector(T);
     if (!s)
       return;
     const t = this._getMergeTag(e);
     this.api.getDocumentModifier().modifyHtml(s).setAttribute("href", t).apply(new b(`Updated unsubscribe link to ${t}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, r).apply(new b("Updated unsubscribe block metadata"));
   }
   _getMergeTag(e) {
-    return B[e] ?? T;
+    return C[e] ?? B;
   }
   _openDrawer() {
     if (!(this.currentNode && this.currentNode.getAttribute("data-unsubscribe-page-type")))
@@ -130,6 +130,6 @@ class R extends _ {
   }
 }
 export {
-  v as UNSUBSCRIBE_BLOCK_ID,
-  R as UnsubscribeBlock
+  g as UNSUBSCRIBE_BLOCK_ID,
+  I as UnsubscribeBlock
 };

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

@@ -7,5 +7,5 @@ export declare const useActionsApi: () => {
     getPreviewData: (options?: CompileEmailOptions) => Promise<CompiledEmailResult>;
     updateTimerInClonedTemplate: () => Promise<string | null>;
     updateHtmlAndCss: (html: string, css: string) => void;
-    editorSave: () => void;
+    editorSave: () => Promise<void>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.0",
+  "version": "3.2.1-beta.d58ee72",
   "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",