@useinsider/guido 2.0.0-beta.e73ba15 → 2.0.0-beta.edc1f0a

package/dist/extensions/Blocks/Recommendation/controls/main/utils.js

@@ -1,112 +1,114 @@
 import { ModificationDescription as s } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CONTAINER_SELECTOR as y } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as S } from "../../store/recommendation.js";
-import { prepareProductRows as A } from "../../templates/index.js";
-import { DEFAULT_CARD_COMPOSITION as d, getDefaultProducts as b } from "../../templates/utils.js";
-const f = "ins-recommendation-v3-block-v2";
-function p(e) {
-  if (!e)
+import { CONTAINER_SELECTOR as S } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as A } from "../../store/recommendation.js";
+import { prepareProductRows as b } from "../../templates/index.js";
+import { hasGetStyle as d, isTdNode as C } from "../../utils/tagName.js";
+import { DEFAULT_CARD_COMPOSITION as f, getDefaultProducts as h } from "../../templates/utils.js";
+const m = "ins-recommendation-v3-block-v2";
+function p(r) {
+  if (!r)
     return null;
-  if ("getAttribute" in e) {
-    const t = e.getAttribute("class");
-    if (t && t.includes(f))
-      return e;
+  if ("getAttribute" in r) {
+    const t = r.getAttribute("class");
+    if (t && t.includes(m))
+      return r;
   }
-  return "querySelector" in e ? e.querySelector(`.${f}`) : null;
+  return "querySelector" in r ? r.querySelector(`.${m}`) : null;
 }
-function m(e) {
-  const t = p(e);
+function g(r) {
+  const t = p(r);
   return !t || !("getAttribute" in t) ? "vertical" : t.getAttribute("data-layout") === "horizontal" ? "horizontal" : "vertical";
 }
-function C(e) {
-  const t = p(e);
+function w(r) {
+  const t = p(r);
   if (!t || !("getAttribute" in t))
-    return d;
-  const r = t.getAttribute("data-card-composition");
-  return r ? r.split(",").filter(Boolean) : d;
+    return f;
+  const e = t.getAttribute("data-card-composition");
+  return e ? e.split(",").filter(Boolean) : f;
 }
-function R(e) {
-  const { currentNode: t, documentModifier: r, afterRegenerate: o } = e;
+function I(r) {
+  const { currentNode: t, documentModifier: e, afterRegenerate: o } = r;
   if (!t || !("querySelector" in t))
     return;
-  const a = t.querySelector(y);
+  const a = t.querySelector(S);
   if (!a)
     return;
-  const c = S(), i = c.recommendationProducts.length > 0 ? c.recommendationProducts : b(), { cardsInRow: l } = c.recommendationConfigs, n = C(t), u = m(t), g = A(i, u, {
+  const n = A(), c = n.recommendationProducts.length > 0 ? n.recommendationProducts : h(), { cardsInRow: l } = n.recommendationConfigs, i = w(t), u = g(t), y = b(c, u, {
     productsPerRow: l,
-    composition: n
+    composition: i
   });
-  r.modifyHtml(a).setInnerHtml(g).apply(new s("Updated product")), o == null || o();
+  e.modifyHtml(a).setInnerHtml(y).apply(new s("Updated product")), o == null || o();
 }
-function h(e, t, r, o) {
-  const c = `0 ${Math.floor(r / 2)}px`;
-  let i = !1;
+function E(r, t, e, o) {
+  const n = `0 ${Math.floor(e / 2)}px`;
+  let c = !1;
   return o === "vertical" ? Array.from(
-    e.querySelectorAll(".attribute-cell")
-  ).forEach((n) => {
-    t.modifyHtml(n).setStyle("padding", c), i = !0;
+    r.querySelectorAll(".attribute-cell")
+  ).forEach((i) => {
+    t.modifyHtml(i).setStyle("padding", n), c = !0;
   }) : Array.from(
-    e.querySelectorAll(".product-card-wrapper")
-  ).forEach((n) => {
-    "parentNode" in n && n.parentNode && typeof n.parentNode == "object" && "tagName" in n.parentNode && n.parentNode.tagName === "TD" && (t.modifyHtml(n.parentNode).setStyle("padding", c), i = !0);
-  }), i;
-}
-function E(e, t, r) {
-  const o = `${r}px`, a = Array.from(e.querySelectorAll(".spacer"));
-  let c = !1;
-  return a.forEach((i) => {
-    t.modifyHtml(i).setStyle("height", o), c = !0;
+    r.querySelectorAll(".product-card-wrapper")
+  ).forEach((i) => {
+    const u = "parentNode" in i ? i.parentNode : null;
+    u && C(u) && (t.modifyHtml(u).setStyle("padding", n), c = !0);
   }), c;
 }
-function P(e) {
-  const { currentNode: t, documentModifier: r } = e;
+function k(r, t, e) {
+  const o = `${e}px`, a = Array.from(r.querySelectorAll(".spacer"));
+  let n = !1;
+  return a.forEach((c) => {
+    t.modifyHtml(c).setStyle("height", o), n = !0;
+  }), n;
+}
+function v(r) {
+  const { currentNode: t, documentModifier: e } = r;
   if (!t)
     return;
   const o = p(t);
   if (!o || !("getAttribute" in o))
     return;
-  const a = o.getAttribute("data-column-spacing"), c = o.getAttribute("data-row-spacing"), i = m(t);
+  const a = o.getAttribute("data-column-spacing"), n = o.getAttribute("data-row-spacing"), c = g(t);
   let l = !1;
   if (a) {
-    const n = parseInt(a);
-    Number.isNaN(n) || (l = h(
+    const i = parseInt(a);
+    Number.isNaN(i) || (l = E(
       t,
-      r,
-      n,
-      i
+      e,
+      i,
+      c
     ));
   }
-  if (c) {
-    const n = parseInt(c);
-    if (!Number.isNaN(n)) {
-      const u = E(t, r, n);
+  if (n) {
+    const i = parseInt(n);
+    if (!Number.isNaN(i)) {
+      const u = k(t, e, i);
       l = l || u;
     }
   }
-  l && r.apply(new s("Reapply spacing after regeneration"));
+  l && e.apply(new s("Reapply spacing after regeneration"));
 }
-function H(e) {
-  if (!e)
+function x(r) {
+  if (!r)
     return null;
-  const t = e.querySelector(".product-card-segment"), r = e.querySelector(".product-card-wrapper");
+  const t = r.querySelector(".product-card-segment"), e = r.querySelector(".product-card-wrapper");
   let o = null;
-  return t && "getStyle" in t && (o = t.getStyle("background-color")), (!o || o === "transparent") && r && "getStyle" in r && (o = r.getStyle("background-color")), o;
+  return t && d(t) && (o = t.getStyle("background-color") ?? null), (!o || o === "transparent") && e && d(e) && (o = e.getStyle("background-color") ?? null), o;
 }
-function I(e) {
-  const { currentNode: t, documentModifier: r, bgColor: o, layout: a } = e;
+function O(r) {
+  const { currentNode: t, documentModifier: e, bgColor: o, layout: a } = r;
   if (!o || o === "transparent" || !t)
     return;
-  const c = a === "vertical" ? ".product-card-segment" : ".product-card-wrapper", i = Array.from(t.querySelectorAll(c));
-  i.length !== 0 && (i.forEach((l) => {
-    r.modifyHtml(l).setStyle("background-color", o);
-  }), r.apply(new s("Apply card background color")));
+  const n = a === "vertical" ? ".product-card-segment" : ".product-card-wrapper", c = Array.from(t.querySelectorAll(n));
+  c.length !== 0 && (c.forEach((l) => {
+    e.modifyHtml(l).setStyle("background-color", o);
+  }), e.apply(new s("Apply card background color")));
 }
 export {
-  I as applyCardBackgroundColor,
+  O as applyCardBackgroundColor,
   p as getBlockElement,
-  C as getCardComposition,
-  H as getCurrentCardBackgroundColor,
-  m as getCurrentLayout,
-  P as reapplySpacing,
-  R as regenerateProductRows
+  w as getCardComposition,
+  x as getCurrentCardBackgroundColor,
+  g as getCurrentLayout,
+  v as reapplySpacing,
+  I as regenerateProductRows
 };

package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textAfter.js

@@ -64,7 +64,7 @@ class b extends a {
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusDiscountTextAfter", (t) => {
-      this._onTextChange(t);
+      typeof t == "string" && this._onTextChange(t);
     });
   }
 }

package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textBefore.js

@@ -5,7 +5,7 @@ import { RecommendationControlId as d } from "../../constants/controlIds.js";
 import { CONTAINER_SELECTOR as T } from "../../constants/selectors.js";
 import { preserveTextStyles as f } from "../../utils/preserveTextStyles.js";
 const i = "data-text-before", u = "", p = ".omnibus-text-before";
-class B extends l {
+class g extends l {
   getId() {
     return d.OMNIBUS_DISCOUNT_TEXT_BEFORE;
   }
@@ -64,10 +64,10 @@ class B extends l {
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusDiscountTextBefore", (e) => {
-      this._onTextChange(e);
+      typeof e == "string" && this._onTextChange(e);
     });
   }
 }
 export {
-  B as OmnibusDiscountTextBeforeControl
+  g as OmnibusDiscountTextBeforeControl
 };

package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js

@@ -1,78 +1,67 @@
-var A = Object.defineProperty;
-var y = (n, i, t) => i in n ? A(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
-var p = (n, i, t) => y(n, typeof i != "symbol" ? i + "" : i, t);
-import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as b } from "../../../common-control.js";
-import { useRecommendationExtensionStore as P } from "../../store/recommendation.js";
-import { useDebounceFn as N } from "../../../../../node_modules/@vueuse/shared/index.js";
-const O = "recommendation-spacing-control", a = {
+var P = Object.defineProperty;
+var G = (o, i, t) => i in o ? P(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
+var l = (o, i, t) => G(o, typeof i != "symbol" ? i + "" : i, t);
+import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as I } from "../../../common-control.js";
+import { SPACING_STEP as N, MAX_SPACING as _, MIN_SPACING as f, DEFAULT_COLUMN_SPACING as c, DEFAULT_ROW_SPACING as b } from "../../constants/layout.js";
+import { useRecommendationExtensionStore as L } from "../../store/recommendation.js";
+import { safeGetStyle as d, safeGetParent as V } from "../../utils/tagName.js";
+import { getCurrentLayout as m } from "../main/utils.js";
+import { useDebounceFn as y } from "../../../../../node_modules/@vueuse/shared/index.js";
+const w = "recommendation-spacing-control", s = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
   ROW_SPACING: "rowSpacing"
-}, _ = {
+}, A = {
   COLUMN_SPACING: "data-column-spacing",
   ROW_SPACING: "data-row-spacing"
-}, s = {
-  COLUMN_SPACING: 10,
-  // 5px on each side = 10px total
-  ROW_SPACING: 20
-}, u = {
-  MIN_SPACING: 0,
-  MAX_SPACING: 50,
-  STEP: 5
 };
-function S(n, i) {
-  return !n || !("getStyle" in n) ? null : n.getStyle(i);
-}
-function I(n) {
-  return !n || !("parent" in n) || typeof n.parent != "function" ? null : n.parent();
-}
-function C(n, i) {
-  if (!n)
+function h(o, i) {
+  if (!o)
     return i;
-  const t = parseFloat(n);
+  const t = parseFloat(o);
   return Number.isNaN(t) ? i : t;
 }
-class w extends b {
+class q extends I {
   constructor() {
     super(...arguments);
-    p(this, "store", P());
-    p(this, "unsubscribeOrientation", null);
+    l(this, "store", L());
+    l(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    p(this, "_debouncedOnColumnSpacingChange", N((t) => {
+    l(this, "_debouncedOnColumnSpacingChange", y((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    p(this, "_debouncedOnRowSpacingChange", N((t) => {
+    l(this, "_debouncedOnRowSpacingChange", y((t) => {
       this._onRowSpacingChange(t);
     }, 300));
   }
   getId() {
-    return O;
+    return w;
   }
   getTemplate() {
     return `
             <div class="spacing-control-container">
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Column Spacing (px)", name: a.COLUMN_SPACING_LABEL }),
+      this._GuLabel({ text: "Column Spacing (px)", name: s.COLUMN_SPACING_LABEL }),
       this._GuCounter({
-        name: a.COLUMN_SPACING,
-        minValue: u.MIN_SPACING,
-        maxValue: u.MAX_SPACING,
-        step: u.STEP
+        name: s.COLUMN_SPACING,
+        minValue: f,
+        maxValue: _,
+        step: N
       }),
       this._GuLabel({ text: "Row Spacing (px)" }),
       this._GuCounter({
-        name: a.ROW_SPACING,
-        minValue: u.MIN_SPACING,
-        maxValue: u.MAX_SPACING,
-        step: u.STEP
+        name: s.ROW_SPACING,
+        minValue: f,
+        maxValue: _,
+        step: N
       })
     ])}
             </div>
@@ -84,14 +73,8 @@ class w extends b {
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateColumnSpacingVisibility();
   }
-  /**
-   * Gets the current layout orientation from the block's data attribute
-   */
-  _getCurrentLayout() {
-    if (!this.currentNode || !("querySelector" in this.currentNode))
-      return "vertical";
-    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    return !t || !("getAttribute" in t) ? "vertical" : t.getAttribute("data-layout") === "horizontal" ? "horizontal" : "vertical";
+  onDestroy() {
+    this.unsubscribeOrientation && (this.unsubscribeOrientation(), this.unsubscribeOrientation = null);
   }
   /**
    * Updates column spacing visibility based on layout orientation
@@ -99,17 +82,21 @@ class w extends b {
    * Reads from store first for reliability, falls back to DOM
    */
   _updateColumnSpacingVisibility() {
-    const r = (this.store.recommendationConfigs.orientation || this._getCurrentLayout()) === "vertical";
-    this.api.setVisibility(a.COLUMN_SPACING, r), this.api.setVisibility(a.COLUMN_SPACING_LABEL, r);
+    if (!this.api)
+      return;
+    const n = (this.store.recommendationConfigs.orientation || m(this.currentNode)) === "vertical";
+    this.api.setVisibility(s.COLUMN_SPACING, n), this.api.setVisibility(s.COLUMN_SPACING_LABEL, n);
   }
   /**
    * Reads spacing values from data attributes or returns defaults
    */
   _setFormValues() {
+    if (!this.api)
+      return;
     const t = this._getStoredColumnSpacing(), e = this._getStoredRowSpacing();
     this.api.updateValues({
-      [a.COLUMN_SPACING]: t,
-      [a.ROW_SPACING]: e
+      [s.COLUMN_SPACING]: t,
+      [s.ROW_SPACING]: e
     });
   }
   /**
@@ -120,28 +107,28 @@ class w extends b {
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return s.COLUMN_SPACING;
-    if (this._getCurrentLayout() === "vertical") {
-      const o = this.currentNode.querySelector(".recommendation-attribute-row"), f = o == null ? void 0 : o.querySelector("td"), g = S(f, "padding");
-      if (!g)
-        return s.COLUMN_SPACING;
-      const m = g.trim().split(/\s+/);
-      return m.length < 2 ? s.COLUMN_SPACING : C(m[1], s.COLUMN_SPACING / 2) * 2;
+      return c;
+    if (m(this.currentNode) === "vertical") {
+      const r = this.currentNode.querySelector(".recommendation-attribute-row"), O = r == null ? void 0 : r.querySelector("td"), S = d(O, "padding");
+      if (!S)
+        return c;
+      const C = S.trim().split(/\s+/);
+      return C.length < 2 ? c : h(C[1], c / 2) * 2;
     }
-    const e = this.currentNode.querySelector(".product-card-wrapper"), r = I(e), l = S(r, "padding");
-    if (!l)
-      return s.COLUMN_SPACING;
-    const c = l.trim().split(/\s+/);
-    return c.length < 2 ? s.COLUMN_SPACING : C(c[1], s.COLUMN_SPACING / 2) * 2;
+    const e = this.currentNode.querySelector(".product-card-wrapper"), n = V(e), u = d(n, "padding");
+    if (!u)
+      return c;
+    const a = u.trim().split(/\s+/);
+    return a.length < 2 ? c : h(a[1], c / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return s.ROW_SPACING;
-    const t = this.currentNode.querySelector(".spacer"), e = S(t, "height");
-    return C(e, s.ROW_SPACING);
+      return b;
+    const t = this.currentNode.querySelector(".spacer"), e = d(t, "height");
+    return h(e, b);
   }
   /**
    * Handles column spacing changes.
@@ -152,16 +139,16 @@ class w extends b {
     if (!this.currentNode)
       return;
     this._storeColumnSpacing(t);
-    const e = this._getCurrentLayout(), r = this.api.getDocumentModifier(), c = `0 ${t / 2}px`;
+    const e = m(this.currentNode), n = this.api.getDocumentModifier(), a = `0 ${t / 2}px`;
     e === "vertical" ? Array.from(
       this.currentNode.querySelectorAll(".attribute-cell")
-    ).forEach((o) => {
-      r.modifyHtml(o).setStyle("padding", c);
+    ).forEach((r) => {
+      n.modifyHtml(r).setStyle("padding", a);
     }) : Array.from(
       this.currentNode.querySelectorAll(".product-card-wrapper")
-    ).forEach((o) => {
-      "parent" in o && o.parent() && r.modifyHtml(o.parent()).setStyle("padding", c);
-    }), r.apply(new d(`Update column spacing to ${t}px`));
+    ).forEach((r) => {
+      "parent" in r && r.parent() && n.modifyHtml(r.parent()).setStyle("padding", a);
+    }), n.apply(new p(`Update column spacing to ${t}px`));
   }
   /**
    * Handles row spacing changes
@@ -176,10 +163,10 @@ class w extends b {
     );
     if (!e.length)
       return;
-    const r = this.api.getDocumentModifier(), l = `${t}px`;
-    e.forEach((c) => {
-      r.modifyHtml(c).setStyle("height", l);
-    }), r.apply(new d(`Update row spacing to ${t}px`));
+    const n = this.api.getDocumentModifier(), u = `${t}px`;
+    e.forEach((a) => {
+      n.modifyHtml(a).setStyle("height", u);
+    }), n.apply(new p(`Update row spacing to ${t}px`));
   }
   /**
    * Stores column spacing value in block data attribute
@@ -188,7 +175,7 @@ class w extends b {
     if (!this.currentNode)
       return;
     const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(_.COLUMN_SPACING, t.toString()).apply(new d("Store column spacing"));
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(A.COLUMN_SPACING, t.toString()).apply(new p("Store column spacing"));
   }
   /**
    * Stores row spacing value in block data attribute
@@ -197,13 +184,13 @@ class w extends b {
     if (!this.currentNode)
       return;
     const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(_.ROW_SPACING, t.toString()).apply(new d("Store row spacing"));
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(A.ROW_SPACING, t.toString()).apply(new p("Store row spacing"));
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(a.COLUMN_SPACING, (t) => {
+    this.api.onValueChanged(s.COLUMN_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
-    }), this.api.onValueChanged(a.ROW_SPACING, (t) => {
+    }), this.api.onValueChanged(s.ROW_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
     });
@@ -219,6 +206,6 @@ class w extends b {
   }
 }
 export {
-  O as SPACING_CONTROL_ID,
-  w as SpacingControl
+  w as SPACING_CONTROL_ID,
+  q as SpacingControl
 };

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

@@ -1,15 +1,19 @@
 const n = `/* Utils */
 .es-180w { width: 180px; }
 
-/* Recommendation Controls */
-.recommendation-controls-container > .container {
-    padding: 16px;
+/* Recommendation Controls - Main settings panel separators */
+.recommendation-controls-container > div {
+    border-bottom: 1px solid #e0e0e0;
 }
 
-.recommendation-controls-container > .container:first-child {
+.recommendation-controls-container > div:first-child {
     padding-top: 0;
 }
 
+.recommendation-controls-container > div:last-child {
+    border-bottom: none;
+}
+
 .container:has(.recommendation-controls-container) {
     padding: 0
 }

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

@@ -1,14 +1,14 @@
 import { RecommendationFeedSourceMaps as u, PriceAttributes as c } from "../../../../enums/extensions/recommendationBlock.js";
 import { useRecommendationApi as p } from "../../../../services/recommendationApi.js";
 import { useConfigStore as m } from "../../../../stores/config.js";
-import { defineStore as d } from "pinia";
-import { DEFAULT_CARDS_IN_ROW as f } from "../constants/layout.js";
+import { defineStore as f } from "pinia";
+import { DEFAULT_CARDS_IN_ROW as d } from "../constants/layout.js";
 import { generateCompleteFilterQuery as l } from "../utils/filterUtil.js";
-const n = p(), g = () => ({
+const s = p(), g = () => ({
   recommendationCampaignUrls: {},
   recommendationProducts: [],
   recommendationConfigs: {
-    cardsInRow: f,
+    cardsInRow: d,
     currencySettings: {
       name: "USD",
       value: "USD",
@@ -135,7 +135,7 @@ const n = p(), g = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), S = d("guidoRecommendationExtension", {
+}), S = f("guidoRecommendationExtension", {
   state: () => g(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,
@@ -179,13 +179,13 @@ const n = p(), g = () => ({
         activePredictiveAlgorithms: e,
         languages: t,
         currencies: r
-      } = await n.fetchRecommendationCreateData();
+      } = await s.fetchRecommendationCreateData();
       this.activePredictiveAlgorithms = e, this.languages = t;
       const [i] = r;
       this.recommendationConfigs.currencySettings.name = i.text, this.recommendationConfigs.currencySettings.value = i.value, this.currencyList = r, this.filterStatus = !!this.recommendationConfigs.filters.length;
     },
     async fetchRecommendationFilters() {
-      const e = await n.fetchRecommendationFilters();
+      const e = await s.fetchRecommendationFilters();
       this.filterList = e;
     },
     addFilterGroup(e) {
@@ -225,13 +225,15 @@ const n = p(), g = () => ({
       }
     },
     addFilter(e) {
-      const t = [...this.recommendationConfigs.filters], r = t.findLastIndex((i) => i.filterGroup === e.filterGroup);
-      r !== -1 ? t.splice(r + 1, 0, {
+      const t = [...this.recommendationConfigs.filters], i = t.filter(
+        (a) => a.filterGroup === e.filterGroup
+      ).length + 1, o = t.findLastIndex((a) => a.filterGroup === e.filterGroup);
+      o !== -1 ? t.splice(o + 1, 0, {
         ...e,
-        filterNumber: r + 2
+        filterNumber: i
       }) : t.push({
         ...e,
-        filterNumber: 1
+        filterNumber: i
       }), this.$patch({
         recommendationConfigs: {
           filters: t
@@ -242,11 +244,11 @@ const n = p(), g = () => ({
       return l(this.recommendationConfigs.filters);
     },
     async fetchRecommendationProducts() {
-      var s;
-      const e = this.recommendationConfigs.filters.filter((a) => a.isValid), t = l(e), r = ((s = u.find((a) => a.key === this.recommendationConfigs.strategy)) == null ? void 0 : s.path) || "", i = m(), o = await n.fetchRecommendationProducts(
+      var a;
+      const e = this.recommendationConfigs.filters.filter((n) => n.isValid), t = l(e), r = ((a = u.find((n) => n.key === this.recommendationConfigs.strategy)) == null ? void 0 : a.path) || "", i = m(), o = await s.fetchRecommendationProducts(
         r,
         {
-          // TODO: Here will be optimized and filled carefully
+          // Note: {itemId} and {campaignId} are template placeholders replaced at runtime
           locale: this.recommendationConfigs.language,
           currency: this.recommendationConfigs.currencySettings.value,
           partnerName: i.partnerName,

package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js

@@ -1,25 +1,36 @@
-function a(n) {
-  return "getInnerHTML" in n && typeof n.getInnerHTML == "function" ? n.getInnerHTML() : "innerHTML" in n ? n.innerHTML : "";
+function p(t) {
+  const r = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  };
+  return t.replace(/[&<>"']/g, (n) => r[n]);
 }
-function H(n, t) {
-  if (!n)
-    return t;
-  const r = a(n);
-  if (!r || r.trim() === "" || !/<(strong|em|u|s|b|i)\b/i.test(r))
-    return t;
-  const i = [], s = [];
-  let o = r.trim();
+function m(t) {
+  return "getInnerHTML" in t && typeof t.getInnerHTML == "function" ? t.getInnerHTML() : "innerHTML" in t ? t.innerHTML : "";
+}
+function T(t, r) {
+  const n = p(r);
+  if (!t)
+    return n;
+  const e = m(t);
+  if (!e || e.trim() === "" || !/<(strong|em|u|s|b|i)\b/i.test(e))
+    return n;
+  const i = [], o = [];
+  let c = e.trim();
   for (; ; ) {
-    const u = o.match(/^<(strong|em|u|s|b|i)(\s[^>]*)?>(.*)$/is);
+    const u = c.match(/^<(strong|em|u|s|b|i)(\s[^>]*)?>(.*)$/is);
     if (!u)
       break;
-    const [, e, f = "", g] = u, c = new RegExp(`</${e}>$`, "i");
-    if (!c.test(g))
+    const [, s, f = "", g] = u, a = new RegExp(`</${s}>$`, "i");
+    if (!a.test(g))
       break;
-    i.push(`<${e}${f}>`), s.unshift(`</${e}>`), o = g.replace(c, "").trim();
+    i.push(`<${s}${f}>`), o.unshift(`</${s}>`), c = g.replace(a, "").trim();
   }
-  return i.length > 0 ? i.join("") + t + s.join("") : t;
+  return i.length > 0 ? i.join("") + n + o.join("") : n;
 }
 export {
-  H as preserveTextStyles
+  T as preserveTextStyles
 };