@useinsider/guido 2.1.0-beta.1d0cd94 → 2.1.0-beta.3129837

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -0,0 +1,147 @@
+import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
+function m(o, n, c, e) {
+  const s = `{{${o}_${n}_${c}}}`, t = `{{${o}_${n}_currency}}`;
+  return e === "before" ? `${t} ${s}` : `${s} ${t}`;
+}
+function b(o, n, c, e, s) {
+  switch (n) {
+    case "productImage": {
+      const t = o.querySelector("img");
+      t && t.setAttribute("src", `{{${c}_${e}_img}}`);
+      const r = o.querySelector("a");
+      r && r.setAttribute("href", `{{${c}_${e}_url}}`);
+      break;
+    }
+    case "productName": {
+      const t = o.querySelector("p");
+      if (t) {
+        const r = t.querySelector("strong") || t;
+        r.textContent = `{{${c}_${e}_name}}`;
+      }
+      break;
+    }
+    case "productPrice": {
+      const t = o.querySelector("p");
+      if (t) {
+        const r = t.querySelector("strong") || t;
+        r.textContent = m(c, e, "price", s);
+      }
+      break;
+    }
+    case "productOldPrice": {
+      const t = o.querySelector("p");
+      if (t) {
+        const r = t.querySelector("strong") || t;
+        r.textContent = m(
+          c,
+          e,
+          "original_price",
+          s
+        ), t.setAttribute("product-attr", "discount");
+      }
+      break;
+    }
+    case "productButton": {
+      const t = o.querySelector("a");
+      t && t.setAttribute("href", `{{${c}_${e}_url}}`);
+      break;
+    }
+    case "productOmnibusPrice": {
+      const t = o.querySelector(".omnibus-price-value");
+      if (t) {
+        t.textContent = `{{${c}_${e}_omnibus_price}}`;
+        const r = t.closest("p");
+        r && (r.setAttribute("product-attr", "omnibus_price"), r.setAttribute("composition", "true"));
+      }
+      break;
+    }
+    case "productOmnibusDiscount": {
+      const t = o.querySelector(".omnibus-discount-value");
+      if (t) {
+        t.textContent = `{{${c}_${e}_omnibus_discount}}`;
+        const r = t.closest("p");
+        r && (r.setAttribute("product-attr", "omnibus_discount"), r.setAttribute("composition", "true"));
+      }
+      break;
+    }
+  }
+}
+function $(o, n, c) {
+  o.querySelectorAll(".recommendation-product-row").forEach((s, t) => {
+    s.querySelectorAll("[data-attribute-type]").forEach((u) => {
+      const l = u.getAttribute("data-attribute-type") || "", a = u.querySelectorAll(".attribute-cell");
+      a.length > 0 ? a.forEach((i) => {
+        b(i, l, n, t, c);
+      }) : b(u, l, n, t, c);
+    });
+  });
+}
+function h(o, n, c) {
+  const e = o.querySelectorAll(".recommendation-product-row");
+  if (!e.length)
+    return;
+  const [s] = e, t = s.querySelector("[data-attribute-type]"), r = t ? t.querySelectorAll(".attribute-cell").length : 1;
+  e.forEach((u, l) => {
+    u.querySelectorAll("[data-attribute-type]").forEach((i) => {
+      const f = i.getAttribute("data-attribute-type") || "";
+      i.querySelectorAll(".attribute-cell").forEach((y, d) => {
+        const A = l * r + d;
+        b(y, f, n, A, c);
+      });
+    });
+  });
+}
+function S(o, n) {
+  const c = o.getAttribute("data-layout") || "grid", e = o.getAttribute("currency-alignment") || "after";
+  c === "list" ? $(o, n, e) : h(o, n, e);
+}
+function q(o, n, c) {
+  let e = o;
+  if ((n.getAttribute("data-layout") || "grid") === "list") {
+    const t = n.querySelectorAll(".recommendation-product-row");
+    Array.from(t).reverse().forEach((u, l) => {
+      const a = t.length - 1 - l, i = u.outerHTML, p = `${`{% if ins_reco_total_product_kind_${c} > ${a} %}`}${i}{% endif %}`;
+      e = e.replace(i, p);
+    });
+  } else {
+    const t = n.querySelectorAll(".recommendation-product-row");
+    if (!t.length)
+      return e;
+    const [r] = t, u = r.querySelector("[data-attribute-type]"), l = u ? u.querySelectorAll(".attribute-cell").length : 1, a = [];
+    t.forEach((i, f) => {
+      const p = i.querySelector(".product-card-wrapper") || i;
+      a.push({
+        element: p,
+        productThreshold: f * l
+      });
+    }), a.reverse().forEach(({ element: i, productThreshold: f }) => {
+      const p = i.outerHTML, d = `${`{% if ins_reco_total_product_kind_${c} > ${f} %}`}${p}{% endif %}`;
+      e = e.replace(p, d);
+    });
+  }
+  return e;
+}
+function g(o, n) {
+  const c = o.match(/<!DOCTYPE[^>]*>/i);
+  return (c ? `${c[0]}
+` : "") + n.documentElement.outerHTML;
+}
+function E(o) {
+  const n = o.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), c = new DOMParser().parseFromString(n, "text/html"), e = c.querySelectorAll(".ins-recommendation-v3-block-v2");
+  if (!e.length)
+    return o;
+  const { buildCampaignUrl: s } = _();
+  e.forEach((r) => {
+    const u = r.getAttribute("recommendation-id");
+    u && (s(u), S(r, u));
+  });
+  let t = g(n, c);
+  return e.forEach((r) => {
+    const u = r.getAttribute("recommendation-id");
+    u && (t = q(t, r, u));
+  }), t.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+}
+export {
+  m as formatPriceVariable,
+  E as prepareRecommendationBlocks
+};

package/dist/config/migrator/recommendationMigrator.js

@@ -1,8 +1,8 @@
 var h = Object.defineProperty;
 var T = (A, e, t) => e in A ? h(A, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : A[e] = t;
 var m = (A, e, t) => T(A, typeof e != "symbol" ? e + "" : e, t);
-import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/migrationTemplate.js";
-import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/templateUtils.js";
+import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/grid/migration.js";
+import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/utils.js";
 class w {
   constructor() {
     m(this, "parser");

package/dist/enums/recommendation.js

@@ -1,4 +1,4 @@
-const s = 20, e = 320, t = {
+const e = 20, s = 320, t = "vertical", m = {
   CART_ABANDONMENT: {
     ins_apr_img_1: "https://s3-eu-west-1.amazonaws.com/web-image.useinsider.com/email-assets/dummyImages/ins_apr_img_1.png",
     ins_apr_img_2: "https://s3-eu-west-1.amazonaws.com/web-image.useinsider.com/email-assets/dummyImages/ins_apr_img_2.png",
@@ -15,7 +15,7 @@ const s = 20, e = 320, t = {
   DISCOUNT: "discount",
   OMNIBUS_DISCOUNT: "omnibus_discount",
   OMNIBUS_PRICE: "omnibus_price"
-}, m = {
+}, _ = {
   IF: {
     discount: `{% if {${i.DISCOUNT}} != "0%" and {${i.DISCOUNT}} != "" %}`,
     omnibus_discount: `{% if {${i.DISCOUNT}} != "0%" and {${i.DISCOUNT}} != "" and {${i.OMNIBUS_DISCOUNT}} != "0%" and {${i.OMNIBUS_DISCOUNT}} != "" %}`,
@@ -23,17 +23,17 @@ const s = 20, e = 320, t = {
   },
   ELSE: "{% else %}",
   END_IF: "{% endif %}"
-}, _ = {
-  ID: /ins-recommendation-v3-campaign-id="(.*?)"/gi,
-  ATTRIBUTE_PARAGRAPH: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)">[\S\s]*?<\/p>/gm,
-  ATTRIBUTE_PARAGRAPH_START_TAG: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)">/gm,
+}, a = {
+  ID: /recommendation-id="(.*?)"/gi,
+  ATTRIBUTE_PARAGRAPH: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>[\S\s]*?<\/p>/gm,
+  ATTRIBUTE_PARAGRAPH_START_TAG: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>/gm,
   COMPOSITION: /composition="true"/gm,
   CUSTOM_FIELD: /{{[0-9]+_[0-8]_(discount|omnibus_discount|omnibus_price)}}/gm,
   CUSTOM_FIELD_INDEXES_PART: /{{[0-9]+_[0-8]_/gm,
   CUSTOM_FIELD_NAME_PART: /_(discount|omnibus_discount|omnibus_price)}}/gm
-}, a = {
-  PARAGRAPH_END_TAG: "</p>"
 }, n = {
+  PARAGRAPH_END_TAG: "</p>"
+}, o = {
   REGULAR_NAME_HEIGHT: ".ext-product-name.ins-vertical p { height:90px!important;",
   TRIMMED_NAME_HEIGHT: ".ext-product-name.ins-vertical p { height:18px!important;",
   ELLIPSIS: "text-overflow:ellipsis!important; white-space:nowrap!important;",
@@ -46,11 +46,12 @@ const s = 20, e = 320, t = {
 };
 export {
   i as ATTRIBUTES,
-  m as CONDITIONS,
-  n as CSS,
-  t as DUMMY_IMAGE_MAPPINGS,
-  s as DefaultPadding,
-  a as HTML,
-  e as MinDeviceViewport,
-  _ as REGEX
+  _ as CONDITIONS,
+  o as CSS,
+  m as DUMMY_IMAGE_MAPPINGS,
+  e as DefaultPadding,
+  n as HTML,
+  s as MinDeviceViewport,
+  a as REGEX,
+  t as VerticalOrientation
 };

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

@@ -1,50 +1,50 @@
-import { currencyLocationMaps as p } from "../../../../../enums/extensions/recommendationBlock.js";
-import { UEAttr as y, ModificationDescription as R } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as L } from "../../../common-control.js";
-import { ItemsBlockControlId as u } from "../../enums/controlEnums.js";
-import { getItemsBlockConfig as l, setItemsBlockConfig as N, escapeReplacement as I } from "../../utils/nodeConfigUtils.js";
-const T = u.PRICE_CURRENCY_LOCATION, i = {
+import { currencyLocationMaps as u } from "../../../../../enums/extensions/recommendationBlock.js";
+import { UEAttr as R, ModificationDescription as L } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as N } from "../../../common-control.js";
+import { ItemsBlockControlId as m } from "../../enums/controlEnums.js";
+import { getItemsBlockConfig as C, setItemsBlockConfig as I, escapeReplacement as T } from "../../utils/nodeConfigUtils.js";
+const E = m.PRICE_CURRENCY_LOCATION, c = {
   CURRENCY_LOCATION: "currencyLocation"
 };
-class $ extends L {
+class A extends N {
   getId() {
-    return T;
+    return E;
   }
   getTemplate() {
     return `
-            <div class="container ${u.PRICE_CURRENCY_LOCATION}">
+            <div class="container ${m.PRICE_CURRENCY_LOCATION}">
                 ${this._getCurrencyLocation()}
             </div>
         `;
   }
   onRender() {
-    const e = l(this.currentNode);
-    this.api.setUIEAttribute(i.CURRENCY_LOCATION, y.SELECTPICKER.items, p), this.api.updateValues({ [i.CURRENCY_LOCATION]: (e == null ? void 0 : e.priceCurrencyLocation) ?? "0" }), this.api.onValueChanged(i.CURRENCY_LOCATION, (t) => {
+    const e = C(this.currentNode);
+    this.api.setUIEAttribute(c.CURRENCY_LOCATION, R.SELECTPICKER.items, u), this.api.updateValues({ [c.CURRENCY_LOCATION]: (e == null ? void 0 : e.priceCurrencyLocation) ?? "0" }), this.api.onValueChanged(c.CURRENCY_LOCATION, (t) => {
       this._onCurrencyLocationChange(t);
     });
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const t = l(this.currentNode);
-      this.api.updateValues({ [i.CURRENCY_LOCATION]: (t == null ? void 0 : t.priceCurrencyLocation) ?? "0" });
+      const t = C(this.currentNode);
+      this.api.updateValues({ [c.CURRENCY_LOCATION]: (t == null ? void 0 : t.priceCurrencyLocation) ?? "0" });
     });
   }
   _onCurrencyLocationChange(e) {
-    if (console.debug("Currency location changed to: ", e), N(this.currentNode, this.api, { priceCurrencyLocation: e }), !this.currentNode)
+    if (console.debug("Currency location changed to: ", e), I(this.currentNode, this.api, { priceCurrencyLocation: e }), !this.currentNode)
       return;
     const t = this._getPriceBlocks();
     if (!t || t.length === 0)
       return;
-    const r = l(this.currentNode), n = e || "0", o = (r == null ? void 0 : r.priceCurrencySymbol) ?? "";
-    t.forEach((s) => {
-      const c = this._getParagraph(s);
-      if (!c)
+    const r = C(this.currentNode), n = e || "0", o = (r == null ? void 0 : r.priceCurrencySymbol) ?? "", i = this.api.getDocumentModifier();
+    t.forEach((a) => {
+      const s = this._getParagraph(a);
+      if (!s)
         return;
-      const m = c.getInnerHTML().trim() || "", a = c.getInnerText().trim() || "", C = (o == null ? void 0 : o.trim()) || "", h = this._removeCurrencySymbol(a, C), d = this._detectSymbolInText(a) || C, g = this._buildPriceContent(h, d, n), _ = m.replace(a, I(g));
-      this.api.getDocumentModifier().modifyHtml(c).setInnerHtml(_).apply(new R(
-        `Updated currency location to ${n === "1" ? "after" : "before"}`
-      ));
-    });
+      const h = s.getInnerHTML().trim() || "", l = s.getInnerText().trim() || "", p = (o == null ? void 0 : o.trim()) || "", d = this._removeCurrencySymbol(l, p), g = this._detectSymbolInText(l) || p, _ = this._buildPriceContent(d, g, n), y = h.replace(l, T(_));
+      i.modifyHtml(s).setInnerHtml(y);
+    }), i.apply(new L(
+      `Updated currency location to ${n === "1" ? "after" : "before"}`
+    ));
   }
   _getPriceBlocks() {
     var e, t;
@@ -65,8 +65,8 @@ class $ extends L {
     } else {
       const o = r.match(/([^0-9.,\s]+)/);
       if (o && o[1]) {
-        const s = o[1].trim(), c = new RegExp(`\\s*${this._escapeRegex(s)}\\s*`);
-        n = r.replace(c, "").trim();
+        const i = o[1].trim(), a = new RegExp(`\\s*${this._escapeRegex(i)}\\s*`);
+        n = r.replace(a, "").trim();
       }
     }
     return n;
@@ -83,15 +83,15 @@ class $ extends L {
             ${this._GuTwoColumns([
       this._GuLabel({ text: "Currency Location" }),
       this._GuSelect({
-        name: i.CURRENCY_LOCATION,
+        name: c.CURRENCY_LOCATION,
         placeholder: "",
-        options: p
+        options: u
       })
     ])}
         `;
   }
 }
 export {
-  T as CONTROL_BLOCK_ID,
-  $ as PriceCurrencyLocationControl
+  E as CONTROL_BLOCK_ID,
+  A as PriceCurrencyLocationControl
 };

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

@@ -1,14 +1,14 @@
-var b = Object.defineProperty;
-var R = (s, c, e) => c in s ? b(s, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[c] = e;
-var h = (s, c, e) => R(s, typeof c != "symbol" ? c + "" : c, e);
-import { ModificationDescription as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as B } from "../../../common-control.js";
+var R = Object.defineProperty;
+var N = (s, c, e) => c in s ? R(s, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[c] = e;
+var h = (s, c, e) => N(s, typeof c != "symbol" ? c + "" : c, e);
+import { ModificationDescription as B } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as E } from "../../../common-control.js";
 import { ItemsBlockControlId as y } from "../../enums/controlEnums.js";
-import { getItemsBlockConfig as m, setItemsBlockConfig as E, escapeReplacement as x } from "../../utils/nodeConfigUtils.js";
-const I = y.PRICE_CURRENCY_SYMBOL, p = {
+import { getItemsBlockConfig as p, setItemsBlockConfig as x, escapeReplacement as f } from "../../utils/nodeConfigUtils.js";
+const I = y.PRICE_CURRENCY_SYMBOL, u = {
   CURRENCY_SYMBOL: "currencySymbol"
 };
-class O extends B {
+class P extends E {
   constructor() {
     super(...arguments);
     h(this, "originalPriceContents", /* @__PURE__ */ new Map());
@@ -24,8 +24,8 @@ class O extends B {
         `;
   }
   onRender() {
-    const e = m(this.currentNode);
-    this.api.updateValues({ [p.CURRENCY_SYMBOL]: (e == null ? void 0 : e.priceCurrencySymbol) ?? "" }), this._storeOriginalContents(), this.api.onValueChanged(p.CURRENCY_SYMBOL, (t) => {
+    const e = p(this.currentNode);
+    this.api.updateValues({ [u.CURRENCY_SYMBOL]: (e == null ? void 0 : e.priceCurrencySymbol) ?? "" }), this._storeOriginalContents(), this.api.onValueChanged(u.CURRENCY_SYMBOL, (t) => {
       this._onCurrencySymbolChange(t);
     });
   }
@@ -34,42 +34,42 @@ class O extends B {
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const t = m(this.currentNode);
-      this.api.updateValues({ [p.CURRENCY_SYMBOL]: (t == null ? void 0 : t.priceCurrencySymbol) ?? "" }), this._storeOriginalContents();
+      const t = p(this.currentNode);
+      this.api.updateValues({ [u.CURRENCY_SYMBOL]: (t == null ? void 0 : t.priceCurrencySymbol) ?? "" }), this._storeOriginalContents();
     });
   }
   _onCurrencySymbolChange(e) {
-    var i;
+    var a;
     console.debug("Currency symbol changed to: ", e);
-    const t = m(this.currentNode), o = ((i = t == null ? void 0 : t.priceCurrencySymbol) == null ? void 0 : i.trim()) || "";
-    if (E(this.currentNode, this.api, { priceCurrencySymbol: e }), !this.currentNode)
+    const t = p(this.currentNode), o = ((a = t == null ? void 0 : t.priceCurrencySymbol) == null ? void 0 : a.trim()) || "";
+    if (x(this.currentNode, this.api, { priceCurrencySymbol: e }), !this.currentNode)
       return;
     const r = this._getPriceBlocks();
     if (!r || r.length === 0)
       return;
-    const n = (e == null ? void 0 : e.trim()) || "", l = (t == null ? void 0 : t.priceCurrencyLocation) ?? "0";
-    r.forEach((u) => {
-      const a = this._getParagraph(u);
-      if (!a)
+    const n = (e == null ? void 0 : e.trim()) || "", l = (t == null ? void 0 : t.priceCurrencyLocation) ?? "0", i = this.api.getDocumentModifier();
+    r.forEach((d) => {
+      const m = this._getParagraph(d);
+      if (!m)
         return;
-      const d = a.getInnerHTML().trim() || "", C = a.getInnerText().trim() || "", g = this._removeCurrencySymbol(C, o), _ = this._buildPriceContent(g, n, l), S = d.replace(C, x(_));
-      this.api.getDocumentModifier().modifyHtml(a).setInnerHtml(S).apply(new N(
-        `Updated currency symbol to ${n || "removed"}`
-      ));
-    });
+      const g = m.getInnerHTML().trim() || "", C = m.getInnerText().trim() || "", _ = this._removeCurrencySymbol(C, o), S = this._buildPriceContent(_, n, l), b = g.replace(C, f(S));
+      i.modifyHtml(m).setInnerHtml(b);
+    }), i.apply(new B(
+      `Updated currency symbol to ${n || "removed"}`
+    ));
   }
   _storeOriginalContents() {
     if (!this.currentNode)
       return;
-    const e = m(this.currentNode);
+    const e = p(this.currentNode);
     this.currentNode.querySelectorAll(
       ".items-block-price"
     ).forEach((o) => {
       var n;
       const r = o.querySelector("p");
       if (r && !this.originalPriceContents.has(r)) {
-        const l = r.getInnerText() || "", i = ((n = e == null ? void 0 : e.priceCurrencySymbol) == null ? void 0 : n.trim()) || "", u = this._removeCurrencySymbol(l, i);
-        this.originalPriceContents.set(r, u);
+        const l = r.getInnerText() || "", i = ((n = e == null ? void 0 : e.priceCurrencySymbol) == null ? void 0 : n.trim()) || "", a = this._removeCurrencySymbol(l, i);
+        this.originalPriceContents.set(r, a);
       }
     });
   }
@@ -106,7 +106,7 @@ class O extends B {
             ${this._GuTwoColumns([
       this._GuLabel({ text: "Currency Symbol" }),
       this._GuTextInput({
-        name: p.CURRENCY_SYMBOL,
+        name: u.CURRENCY_SYMBOL,
         placeholder: "Enter Currency Symbol",
         className: "es-180w"
       })
@@ -116,5 +116,5 @@ class O extends B {
 }
 export {
   I as CONTROL_BLOCK_ID,
-  O as PriceCurrencySymbolControl
+  P as PriceCurrencySymbolControl
 };

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

@@ -1,63 +1,65 @@
-import { ModificationDescription as A, UIElementType as P, UEAttr as C } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as L } from "../../../common-control.js";
-import { ItemsBlockControlId as p, ItemsBlockId as _ } from "../../enums/controlEnums.js";
+import { ModificationDescription as L, UIElementType as P, UEAttr as D } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as h } from "../../../common-control.js";
+import { ItemsBlockControlId as R, ItemsBlockId as _ } from "../../enums/controlEnums.js";
 import { productPairs as I } from "../../enums/productEnums.js";
-import { getItemsBlockConfig as d, setItemsBlockConfig as D, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
-const g = p.PRICE_FORMATTED_PRICE, s = {
+import { getItemsBlockConfig as d, setItemsBlockConfig as u, escapeReplacement as O } from "../../utils/nodeConfigUtils.js";
+const g = R.PRICE_FORMATTED_PRICE, s = {
   FORMATTED_PRICE: "formattedPrice"
 };
-class $ extends L {
+class k extends h {
   getId() {
     return g;
   }
   getTemplate() {
     return `
-            <div class="container ${p.PRICE_FORMATTED_PRICE}">
+            <div class="container ${R.PRICE_FORMATTED_PRICE}">
                 ${this._getFormattedPrice()}
             </div>
         `;
   }
   onRender() {
-    const e = d(this.currentNode);
-    this.api.updateValues({ [s.FORMATTED_PRICE]: (e == null ? void 0 : e.priceFormatted) ?? !0 }), this.api.onValueChanged(s.FORMATTED_PRICE, (t) => {
-      this._onFormattedPriceChange(t);
+    const t = d(this.currentNode);
+    this.api.updateValues({ [s.FORMATTED_PRICE]: (t == null ? void 0 : t.priceFormatted) ?? !0 }), this.api.onValueChanged(s.FORMATTED_PRICE, (e) => {
+      this._onFormattedPriceChange(e);
     });
   }
-  onTemplateNodeUpdated(e) {
-    super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const t = d(this.currentNode);
-      this.api.updateValues({ [s.FORMATTED_PRICE]: (t == null ? void 0 : t.priceFormatted) ?? !0 });
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(() => {
+      const e = d(this.currentNode);
+      this.api.updateValues({ [s.FORMATTED_PRICE]: (e == null ? void 0 : e.priceFormatted) ?? !0 });
     });
   }
-  _onFormattedPriceChange(e) {
-    if (console.debug("Formatted price changed to: ", e), D(this.currentNode, this.api, { priceFormatted: e }), !this.currentNode)
+  _onFormattedPriceChange(t) {
+    if (console.debug("Formatted price changed to: ", t), u(this.currentNode, this.api, { priceFormatted: t }), !this.currentNode)
       return;
-    const t = d(this.currentNode), n = (t == null ? void 0 : t.type) ?? "CART_ITEMS", i = (t == null ? void 0 : t.priceSinglePrice) ?? !1, r = I.PAIRS_FOR_EXTENSION.price[n], o = I.PAIRS_FOR_EXTENSION.originalPrice[n], [E, R] = e ? [
+    const e = d(this.currentNode), n = (e == null ? void 0 : e.type) ?? "CART_ITEMS", i = (e == null ? void 0 : e.priceSinglePrice) ?? !1, r = I.PAIRS_FOR_EXTENSION.price[n], c = I.PAIRS_FOR_EXTENSION.originalPrice[n], [p, m] = t ? [
       i ? r.DEFAULT_SINGLE_PRICE : r.DEFAULT_PRICE,
       i ? r.DEFAULT_SINGLE_PRICE_FORMATTED : r.DEFAULT_PRICE_FORMATTED
     ] : [
       i ? r.DEFAULT_SINGLE_PRICE_FORMATTED : r.DEFAULT_PRICE_FORMATTED,
       i ? r.DEFAULT_SINGLE_PRICE : r.DEFAULT_PRICE
-    ], l = i ? o.DEFAULT_SINGLE_PRICE : o.DEFAULT_PRICE, T = i ? o.DEFAULT_SINGLE_PRICE_FORMATTED : o.DEFAULT_PRICE_FORMATTED, [m, F] = e ? [l, T] : [T, l], c = this.currentNode.closest(".items-block");
-    ((c == null ? void 0 : c.querySelectorAll(
+    ], l = i ? c.DEFAULT_SINGLE_PRICE : c.DEFAULT_PRICE, T = i ? c.DEFAULT_SINGLE_PRICE_FORMATTED : c.DEFAULT_PRICE_FORMATTED, [F, A] = t ? [l, T] : [T, l], o = this.currentNode.closest(".items-block"), C = (o == null ? void 0 : o.querySelectorAll(
       `[esd-extension-block-id="${_.PRICE}"]`
-    )) || []).forEach((a) => {
-      this._updatePriceBlock(a, E, R, e, "price");
-    }), ((c == null ? void 0 : c.querySelectorAll(
+    )) || [], E = this.api.getDocumentModifier();
+    C.forEach((a) => {
+      this._updatePriceBlock(E, a, p, m);
+    }), ((o == null ? void 0 : o.querySelectorAll(
       `[esd-extension-block-id="${_.ORIGINAL_PRICE}"]`
     )) || []).forEach((a) => {
-      this._updatePriceBlock(a, m, F, e, "original price");
-    });
+      this._updatePriceBlock(E, a, F, A);
+    }), E.apply(new L(
+      `Updated price to ${t ? "formatted" : "unformatted"}`
+    ));
   }
-  _updatePriceBlock(e, t, n, i, r) {
-    const o = e.getInnerHTML().trim().replace(t, h(n)), E = `Updated ${r} to ${i ? "formatted" : "unformatted"}`;
-    this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(o).apply(new A(E));
+  _updatePriceBlock(t, e, n, i) {
+    const r = e.getInnerHTML().trim().replace(n, O(i));
+    t.modifyHtml(e).setInnerHtml(r);
   }
   _getFormattedPrice() {
     return `
             <div class="display-flex align-items-center justify-content-between">
                 <${P.LABEL}
-                    ${C.LABEL.text}="${this.api.translate("Formatted Price (e.g. $9.90)")}"
+                    ${D.LABEL.text}="${this.api.translate("Formatted Price (e.g. $9.90)")}"
                 >
                 </${P.LABEL}>
                 ${this._GuToggle(s.FORMATTED_PRICE)}
@@ -67,5 +69,5 @@ class $ extends L {
 }
 export {
   g as CONTROL_BLOCK_ID,
-  $ as PriceFormattedPriceControl
+  k as PriceFormattedPriceControl
 };

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

@@ -33,7 +33,6 @@ class C extends r {
   }
   _getHideDiscount() {
     return `
-
                 <div class="display-flex align-items-center justify-content-between">
                     <${o.LABEL} 
                         ${d.LABEL.text}="${this.api.translate("Hide if same as discounted ")}"

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

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