@useinsider/guido 2.1.0-beta.497ad9c → 2.1.0-beta.4adc9e7

package/dist/@types/config/schemas.js

@@ -1,5 +1,5 @@
 import { ModuleFolderDefaults as b } from "../../enums/defaults.js";
-import { object as o, number as p, optional as e, string as t, pipe as u, picklist as n, custom as S, boolean as a, array as c, minLength as d, literal as r, variant as k } from "../../node_modules/valibot/dist/index.js";
+import { object as o, number as p, optional as e, string as t, pipe as u, picklist as n, minLength as d, custom as S, boolean as a, array as c, literal as r, variant as k } from "../../node_modules/valibot/dist/index.js";
 const m = {
   /** Promotional/marketing emails */
   PROMOTIONAL: 1,

package/dist/components/organisms/extensions/recommendation/FilterItem.vue.js

@@ -1,28 +1,26 @@
 import r from "./FilterItem.vue2.js";
 /* empty css                */
-import i from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var l = function() {
+import l from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
   var a = this, e = a._self._c, t = a._self._setupProxy;
-  return e("div", { staticClass: "d-f f-d-c w-1 gap-16" }, [e("div", { staticClass: "d-f a-i-c j-c-s-b pt-4", class: { "bor-t-s-s bor-t-w-1 bor-t-c-50": a.index === 0 } }, [e("p", [a._v(" " + a._s(t.trans("newsletter.filter")) + " " + a._s(a.index + 1) + " ")]), e(t.InButtonV2, { attrs: { id: "guido__delete-filter-group-button", "left-icon": "line-delete", styling: "text", type: "danger", "label-text-status": !1 }, on: { click: function(s) {
+  return e("div", { staticClass: "d-f f-d-c w-1 gap-16", attrs: { "data-filter-group": a.filter.filterGroup, "data-filter-number": a.filter.filterNumber } }, [e("div", { staticClass: "d-f a-i-c j-c-s-b pt-4", class: { "bor-t-s-s bor-t-w-1 bor-t-c-50": a.index === 0 } }, [e("p", [a._v(" " + a._s(t.trans("newsletter.filter")) + " " + a._s(a.index + 1) + " ")]), e(t.InButtonV2, { attrs: { id: "guido__delete-filter-group-button", "left-icon": "line-delete", styling: "text", type: "danger", "label-text-status": !1 }, on: { click: function(s) {
     return t.emit("delete-filter", t.props.filter);
-  } } })], 1), e("div", { staticClass: "w-1 d-f a-i-s j-c-s-b gap-16" }, [e(t.InSelect, { staticClass: "w-2", attrs: { "disabled-status": "", "search-status": "", "button-status": !1, "label-text": t.trans("action-builder.filter-type"), options: t.filterTypeOptions, value: [t.filterTypeOptions[0]] } }), e(t.InSelect, { staticClass: "w-2", attrs: { id: "filter-item-input--attribute-type", "search-status": "", "static-position": "bottom right", "button-status": !1, "label-text": t.trans("condition.attribute"), options: t.store.getFilterList, value: [t.selectedAttributeType] }, on: { select: function(s) {
-    return t.updateFilter({ text: "attribute", value: s.value });
-  } } })], 1), e("div", { staticClass: "w-1 d-f a-i-s j-c-s-b gap-16" }, [e(t.InSelect, { staticClass: "w-2", attrs: { "button-status": !1, "label-text": t.trans("condition.operator"), options: t.getOperatorOptions(t.selectedAttributeType.type), value: [t.selectedOperatorType] }, on: { select: function(s) {
+  } } })], 1), e("div", { staticClass: "w-1 d-f a-i-s j-c-s-b gap-16" }, [e(t.InSelect, { staticClass: "w-2", attrs: { "disabled-status": "", "search-status": "", "button-status": !1, "label-text": t.trans("action-builder.filter-type"), options: t.filterTypeOptions, value: [t.filterTypeOptions[0]] } }), e(t.InSelect, { staticClass: "w-2", attrs: { id: "filter-item-input--attribute-type", "search-status": "", "static-position": "bottom right", "button-status": !1, "label-text": t.trans("condition.attribute"), options: t.store.getFilterList, state: t.getFieldState("attribute"), value: [t.selectedAttributeType] }, on: { select: t.handleAttributeChange } })], 1), e("div", { staticClass: "w-1 d-f a-i-s j-c-s-b gap-16" }, [t.isBooleanAttribute ? e(t.InSelect, { staticClass: "w-2", attrs: { "button-status": !1, "label-text": t.trans("condition.operator"), options: t.booleanValueOptions, state: t.getFieldState("value"), value: [t.selectedBooleanValue] }, on: { select: t.handleBooleanValueChange } }) : [e(t.InSelect, { staticClass: "w-2", attrs: { "button-status": !1, "label-text": t.trans("condition.operator"), options: t.getOperatorOptions(t.selectedAttributeType.type), state: t.getFieldState("operator"), value: [t.selectedOperatorType] }, on: { select: function(s) {
     return t.updateFilter({ text: "operator", value: s.value });
-  } } }), e(t.InBasicTextInput, { staticClass: "w-2", attrs: { id: "filter-item-input--value", name: "imageUrl", type: "text", "character-counter-status": !1, "label-text": t.trans("condition.value"), "max-character-length": 25, "placeholder-text": t.trans("condition.enter-value-placeholder"), "tooltip-status": !1, value: decodeURIComponent(t.props.filter.value) }, on: { input: function(s) {
+  } } }), e(t.InBasicTextInput, { staticClass: "w-2", attrs: { id: "filter-item-input--value", name: "imageUrl", "character-counter-status": !1, "label-text": t.trans("condition.value"), "max-character-length": 25, "placeholder-text": t.trans("condition.enter-value-placeholder"), "state-message": t.valueErrorMessage, states: t.getFieldState("value"), "tooltip-status": !1, type: t.valueInputType, value: decodeURIComponent(t.props.filter.value) }, on: { input: function(s) {
     t.updateFilter({ text: "value", value: encodeURIComponent(s) });
-  } } })], 1), t.props.hasLogicAdapter ? e("div", { staticClass: "w-1 d-f a-i-c j-c-c p-r bor-b-s-s bor-b-w-1 bor-b-c-50 mt-4" }, [e(t.LogicAdapter, { staticClass: "p-a", attrs: { logic: t.props.filter.innerGroupOperator }, on: { change: function(s) {
+  } } })]], 2), t.props.hasLogicAdapter ? e("div", { staticClass: "w-1 d-f a-i-c j-c-c p-r bor-b-s-s bor-b-w-1 bor-b-c-50 mt-4" }, [e(t.LogicAdapter, { staticClass: "p-a", attrs: { logic: t.props.filter.innerGroupOperator }, on: { change: function(s) {
     return t.updateFilter({ text: "innerGroupOperator", value: s });
   } } })], 1) : a._e()]);
-}, n = [], o = /* @__PURE__ */ i(
+}, o = [], n = /* @__PURE__ */ l(
   r,
-  l,
-  n,
+  i,
+  o,
   !1,
   null,
-  "6562e38c"
+  "3b53a736"
 );
-const f = o.exports;
+const f = n.exports;
 export {
   f as default
 };

package/dist/components/organisms/extensions/recommendation/FilterItem.vue2.js

@@ -1,38 +1,69 @@
-import { defineComponent as f, computed as i } from "vue";
-import { useTranslations as v } from "../../../../composables/useTranslations.js";
-import { getOperatorOptions as a } from "../../../../enums/extensions/recommendationBlock.js";
-import { useRecommendationExtensionStore as x } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
-import { InButtonV2 as y, InSelect as F, InBasicTextInput as T } from "@useinsider/design-system-vue";
-import _ from "./LogicAdapter.vue.js";
-import { useDebounceFn as b } from "../../../../node_modules/@vueuse/shared/index.js";
-const h = /* @__PURE__ */ f({
+import { defineComponent as _, computed as l } from "vue";
+import { useTranslations as C } from "../../../../composables/useTranslations.js";
+import { getOperatorOptions as p } from "../../../../enums/extensions/recommendationBlock.js";
+import { useRecommendationExtensionStore as V } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
+import { getInvalidFilterFields as A } from "../../../../extensions/Blocks/Recommendation/validation/filterSchema.js";
+import { InButtonV2 as L, InSelect as O, InBasicTextInput as S } from "@useinsider/design-system-vue";
+import E from "./LogicAdapter.vue.js";
+import { useDebounceFn as N } from "../../../../node_modules/@vueuse/shared/index.js";
+const K = /* @__PURE__ */ _({
   __name: "FilterItem",
   props: {
     filter: null,
     index: null,
-    hasLogicAdapter: { type: Boolean }
+    hasLogicAdapter: { type: Boolean },
+    submitted: { type: Boolean }
   },
   emits: ["delete-filter"],
-  setup(p, { emit: u }) {
-    const e = p, n = v(), r = x(), m = [
+  setup(f, { emit: v }) {
+    const t = f, n = C(), a = V(), y = [
       {
         text: n("email-editor.standard-filter"),
         value: "standardFilter"
       }
-    ], s = i(() => e.filter.attribute || ""), l = i(() => r.getFilterList.find((t) => t.value === s.value) || { text: "", value: "", type: "" }), c = i(() => {
-      var t;
-      return a((t = l.value) == null ? void 0 : t.type).find((o) => o.value === e.filter.operator);
-    }), d = b((t) => {
-      console.debug("updateFilter: ", t);
-      const o = {
-        ...e.filter,
-        [t.text]: t.value
-      };
-      r.updateFilter(o);
+    ], i = [
+      { text: "True", value: "true" },
+      { text: "False", value: "false" }
+    ], d = l(() => t.filter.attribute || ""), r = l(() => a.getFilterList.find((e) => e.value === d.value) || { text: "", value: "", type: "" }), F = l(
+      () => {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.type) === "Boolean";
+      }
+    ), b = l(() => {
+      var e;
+      return p((e = r.value) == null ? void 0 : e.type).find((o) => o.value === t.filter.operator);
+    }), g = l(
+      () => i.find((e) => e.value === t.filter.value) || i[0]
+    ), u = l(() => t.submitted ? A(t.filter) : /* @__PURE__ */ new Set()), h = (e) => u.value.has(e) ? "error" : "default", B = l(
+      () => u.value.has("value") ? n("action-builder.filter-empty-value-error") : ""
+    ), c = l(
+      () => {
+        var e;
+        return ((e = r.value) == null ? void 0 : e.type) === "Number";
+      }
+    ), x = l(() => c.value ? "number" : "text"), T = N((e) => {
+      a.updateFilter({
+        ...t.filter,
+        [e.text]: e.value
+      });
     }, 500);
-    return { __sfc: !0, trans: n, store: r, props: e, filterTypeOptions: m, attributeType: s, selectedAttributeType: l, selectedOperatorType: c, emit: u, updateFilter: d, getOperatorOptions: a, InBasicTextInput: T, InSelect: F, InButtonV2: y, LogicAdapter: _ };
+    return { __sfc: !0, trans: n, store: a, props: t, filterTypeOptions: y, booleanValueOptions: i, attributeType: d, selectedAttributeType: r, isBooleanAttribute: F, selectedOperatorType: b, selectedBooleanValue: g, emit: v, invalidFields: u, getFieldState: h, valueErrorMessage: B, isNumericAttribute: c, valueInputType: x, updateFilter: T, handleAttributeChange: (e) => {
+      const o = a.getFilterList.find((I) => I.value === e.value), m = (o == null ? void 0 : o.type) === "Boolean", [s] = p(o == null ? void 0 : o.type);
+      a.updateFilter({
+        ...t.filter,
+        attribute: e.value,
+        operator: m ? "=" : (s == null ? void 0 : s.value) ?? "",
+        value: m ? "true" : ""
+      });
+    }, handleBooleanValueChange: (e) => {
+      a.updateFilter({
+        ...t.filter,
+        operator: "=",
+        value: e.value
+      });
+    }, getOperatorOptions: p, InBasicTextInput: S, InSelect: O, InButtonV2: L, LogicAdapter: E };
   }
 });
 export {
-  h as default
+  K as default
 };

package/dist/components/organisms/extensions/recommendation/FilterSelectionDrawer.vue.js

@@ -1,11 +1,11 @@
 import o from "./FilterSelectionDrawer.vue2.js";
 import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var l = function() {
+var i = function() {
   var e = this, r = e._self._c, t = e._self._setupProxy;
-  return r(t.WpDrawer, { attrs: { id: "recommendation-filter-drawer", "title-text": "Filter Selection", "footer-button-group-options": t.footerButtonGroupOptions, status: t.store.filterSelectionDrawerStatus }, on: { cancelOrBackButtonEvent: t.closeModal, onCloseEvent: t.closeModal, primaryButtonEvent: t.applyFilter } }, [r(t.Filters)], 1);
+  return r(t.WpDrawer, { attrs: { id: "recommendation-filter-drawer", "description-status": "", "description-text": t.trans("email-editor.filter-description"), "footer-button-group-options": t.footerButtonGroupOptions, status: t.store.filterSelectionDrawerStatus, "title-text": t.trans("email-editor.add-filters") }, on: { cancelOrBackButtonEvent: t.cancelModal, onCloseEvent: t.cancelModal, primaryButtonEvent: t.applyFilter } }, [t.store.filterSelectionDrawerStatus ? r(t.Filters, { ref: "filtersRef", attrs: { submitted: t.submitted } }) : e._e()], 1);
 }, s = [], a = /* @__PURE__ */ n(
   o,
-  l,
+  i,
   s,
   !1,
   null,

package/dist/components/organisms/extensions/recommendation/FilterSelectionDrawer.vue2.js

@@ -1,38 +1,51 @@
-import { defineComponent as n, ref as a, computed as l } from "vue";
-import i from "../../../wrappers/WpDrawer.vue.js";
-import { useTranslations as c } from "../../../../composables/useTranslations.js";
-import { useRecommendationExtensionStore as p } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
-import u from "./Filters.vue.js";
-const v = /* @__PURE__ */ n({
+import { defineComponent as d, ref as a, watch as y, computed as g, nextTick as v } from "vue";
+import b from "../../../wrappers/WpDrawer.vue.js";
+import { useTranslations as w } from "../../../../composables/useTranslations.js";
+import { useRecommendationExtensionStore as F } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
+import { isFilterValid as _ } from "../../../../extensions/Blocks/Recommendation/validation/filterSchema.js";
+import h from "./Filters.vue.js";
+const I = /* @__PURE__ */ d({
   __name: "FilterSelectionDrawer",
-  setup(f) {
-    const r = c(), t = p(), e = a(!1), s = l(() => ({
+  setup(S) {
+    const r = w(), e = F(), t = a(!1), o = a(!1), c = a();
+    y(() => e.filterSelectionDrawerStatus, (n) => {
+      n && (o.value = !1);
+    });
+    const f = g(() => ({
       primaryButton: {
         styling: "solid",
         type: "primary",
         labelText: r(
-          e.value ? "unsubscription-preference.selecting-type" : "products.select-and-continue"
+          t.value ? "unsubscription-preference.selecting-type" : "products.select-and-continue"
         ),
-        loadingStatus: e.value,
-        disabledStatus: !1
+        loadingStatus: t.value
       },
       cancelOrBackButton: {
         styling: "ghost",
         type: "secondary",
         labelText: r("products.cancel"),
-        disabledStatus: e.value
+        disabledStatus: t.value
       }
-    })), o = () => {
-      t.closeFilterDrawer();
-    };
-    return { __sfc: !0, trans: r, store: t, isApplying: e, footerButtonGroupOptions: s, closeModal: o, applyFilter: () => {
-      e.value = !0, t.patchCurrentBlockConfig(
-        { filters: t.recommendationConfigs.filters },
+    }));
+    return { __sfc: !0, trans: r, store: e, isApplying: t, submitted: o, filtersRef: c, footerButtonGroupOptions: f, cancelModal: () => {
+      e.cancelFilterDrawer();
+    }, applyFilter: async () => {
+      var u;
+      o.value = !0;
+      const { filters: n } = e.recommendationConfigs, i = n.find((l) => !_(l));
+      if (i) {
+        (u = c.value) == null || u.switchToGroup(i.filterGroup), await v();
+        const { filterGroup: l, filterNumber: p } = i, m = `[data-filter-group="${l}"][data-filter-number="${p}"]`, s = document.querySelector(m);
+        s == null || s.scrollIntoView({ behavior: "smooth", block: "center" });
+        return;
+      }
+      t.value = !0, e.patchCurrentBlockConfig(
+        { filters: e.recommendationConfigs.filters },
         { triggerRefetch: !0 }
-      ), o(), e.value = !1;
-    }, WpDrawer: i, Filters: u };
+      ), e.closeFilterDrawer(), t.value = !1;
+    }, WpDrawer: b, Filters: h };
   }
 });
 export {
-  v as default
+  I as default
 };

package/dist/components/organisms/extensions/recommendation/Filters.vue.js

@@ -1,20 +1,20 @@
 import s from "./Filters.vue2.js";
 /* empty css             */
-import a from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
-  var i = this, e = i._self._c, t = i._self._setupProxy;
-  return e("div", { staticClass: "d-f f-d-c gap-16" }, [e("div", { staticClass: "d-f a-i-c j-c-s-b gap-16" }, [e(t.InSegments, { staticClass: "f-g-1 w-1", attrs: { id: "guido__filter-group-segments", "segment-list": t.filterGroupList, selected: t.selectedFilterGroup, "with-icon": !1 }, on: { click: t.changeFilterGroup } }), e(t.InButtonV2, { staticClass: "w-20-s f-g-1", attrs: { id: "guido__add-filter-group-button", "left-icon": "line-plus-netural", type: "secondary", "disabled-status": t.isMaxFilterGroupCount, "label-text": t.trans("smart-recommender.add-filter-group"), "tooltip-text": t.isMaxFilterGroupCount ? t.trans("email-editor.add-filter-tooltip") : "" }, on: { click: t.handleAddFilterGroup } })], 1), e("div", { staticClass: "d-f a-i-c j-c-s-b gap-16" }, [e("div", { staticClass: "d-f a-i-c" }, [t.selectedFilterGroup > 1 ? e(t.LogicAdapter, { staticClass: "mr-2" }) : i._e(), e("p", [i._v(" " + i._s(t.trans("email-editor.filter-group")) + " " + i._s(t.selectedFilterGroup) + " ")])], 1), t.hasRemoveFilterButton ? e(t.InButtonV2, { attrs: { id: "guido__delete-filter-group-button", "left-icon": "line-delete", styling: "text", type: "danger", "label-text-status": !1 }, on: { click: t.handleDeleteFilterGroup } }) : i._e()], 1), e("div", { staticClass: "d-f a-i-c j-c-s-b f-d-c" }, i._l(t.selectedFilterGroupFilters, function(l, r) {
-    return e(t.FilterItem, { key: r, attrs: { filter: l, "has-logic-adapter": t.hasLogicAdapter && r !== t.selectedFilterGroupFilters.length - 1, index: r }, on: { "delete-filter": t.handleDeleteFilter } });
-  }), 1), e("div", { staticClass: "d-f a-i-c j-c-c mt-3" }, [e(t.InButtonV2, { staticClass: "w-11-s", attrs: { id: "filter-group--add-filter-button", "left-icon": "line-plus-netural", type: "subtle-primary", "label-text": t.trans("smart-recommender.add-filter-condition") }, on: { click: t.handleAddFilter } })], 1)]);
-}, d = [], n = /* @__PURE__ */ a(
+import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
+  var r = this, e = r._self._c, t = r._self._setupProxy;
+  return e("div", { staticClass: "d-f f-d-c gap-16" }, [e("div", { staticClass: "d-f a-i-c j-c-s-b gap-16" }, [e(t.InSegments, { staticClass: "f-g-1 w-1", attrs: { id: "guido__filter-group-segments", "segment-list": t.filterGroupList, selected: t.selectedFilterGroup, "with-icon": !1 }, on: { click: t.switchToGroup } }), e(t.InButtonV2, { staticClass: "w-20-s f-g-1", attrs: { id: "guido__add-filter-group-button", "left-icon": "line-plus-netural", type: "secondary", "disabled-status": t.isMaxFilterGroupCount, "label-text": t.trans("smart-recommender.add-filter-group"), "tooltip-options": t.getTooltipOptions("add-filter-group-tooltip"), "tooltip-text": t.isMaxFilterGroupCount ? t.trans("email-editor.add-filter-group-tooltip") : "" }, on: { click: t.handleAddFilterGroup } })], 1), e("div", { staticClass: "d-f a-i-c j-c-s-b gap-16" }, [e("div", { staticClass: "d-f a-i-c" }, [t.selectedFilterGroup > 1 ? e(t.LogicAdapter, { staticClass: "mr-2", attrs: { logic: t.outerGroupOperator }, on: { change: t.handleOuterGroupOperatorChange } }) : r._e(), e("p", [r._v(" " + r._s(t.trans("email-editor.filter-group")) + " " + r._s(t.selectedFilterGroup) + " ")])], 1), t.hasRemoveFilterButton ? e(t.InButtonV2, { attrs: { id: "guido__delete-filter-group-button", "left-icon": "line-delete", styling: "text", type: "danger", "label-text-status": !1 }, on: { click: t.handleDeleteFilterGroup } }) : r._e()], 1), e("div", { staticClass: "d-f a-i-c j-c-s-b f-d-c" }, r._l(t.selectedFilterGroupFilters, function(l, i) {
+    return e(t.FilterItem, { key: i, attrs: { filter: l, "has-logic-adapter": t.hasLogicAdapter && i !== t.selectedFilterGroupFilters.length - 1, index: i, submitted: r.submitted }, on: { "delete-filter": t.handleDeleteFilter } });
+  }), 1), e("div", { staticClass: "d-f a-i-c j-c-c mt-3" }, [e(t.InButtonV2, { staticClass: "w-11-s", attrs: { id: "filter-group--add-filter-button", "left-icon": "line-plus-netural", type: "subtle-primary", "disabled-status": t.isMaxFilterPerGroupCount, "label-text": t.trans("smart-recommender.add-filter-condition"), "tooltip-text": t.isMaxFilterPerGroupCount ? t.trans("email-editor.add-filter-tooltip") : "" }, on: { click: t.handleAddFilter } })], 1)]);
+}, d = [], n = /* @__PURE__ */ o(
   s,
-  o,
+  a,
   d,
   !1,
   null,
-  "1ccb6d4a"
+  "c5dee797"
 );
-const _ = n.exports;
+const g = n.exports;
 export {
-  _ as default
+  g as default
 };

package/dist/components/organisms/extensions/recommendation/Filters.vue2.js

@@ -1,44 +1,54 @@
-import { defineComponent as m, computed as o, ref as h } from "vue";
-import { useTranslations as G } from "../../../../composables/useTranslations.js";
+import { defineComponent as h, computed as l, ref as O, watch as v } from "vue";
+import { useTranslations as f } from "../../../../composables/useTranslations.js";
 import { useRecommendationExtensionStore as g } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
-import { InButtonV2 as v, InSegments as f } from "@useinsider/design-system-vue";
-import _ from "./FilterItem.vue.js";
+import { getTooltipOptions as R } from "../../../../utils/tooltipUtils.js";
+import { InButtonV2 as T, InSegments as U } from "@useinsider/design-system-vue";
+import E from "./FilterItem.vue.js";
 import A from "./LogicAdapter.vue.js";
-const E = /* @__PURE__ */ m({
+const y = /* @__PURE__ */ h({
   __name: "Filters",
-  setup(R) {
-    const i = G(), l = g(), u = o(() => l.getFilterGroupCount), t = o(() => Array.from({ length: u.value }, (e, a) => ({
-      text: (a + 1).toString(),
-      value: a + 1
-    }))), r = h(1), s = (e) => {
+  props: {
+    submitted: { type: Boolean }
+  },
+  setup(C, { expose: a }) {
+    const i = f(), t = g(), u = l(() => t.getUniqueFilterGroups.map((e) => ({
+      text: e.toString(),
+      value: e
+    }))), r = O(1);
+    v(u, (e) => {
+      if (!e.length)
+        return;
+      e.some((G) => G.value === r.value) || (r.value = e[0].value);
+    });
+    const s = (e) => {
       r.value = e;
-    }, d = () => {
-      const e = t.value.length + 1;
-      console.debug("handleAddFilterGroup", e), t.value.push({
-        text: e.toString(),
-        value: e
-      }), l.addFilterGroup(e);
-    }, p = o(() => t.value.length >= 3), n = o(() => l.getSelectedFilterGroup(r.value)), c = o(() => n.value.length > 1), F = o(() => t.value.length > 1);
-    return { __sfc: !0, MAX_FILTER_GROUP_COUNT: 3, trans: i, store: l, filterGroupCount: u, filterGroupList: t, selectedFilterGroup: r, changeFilterGroup: s, handleAddFilterGroup: d, isMaxFilterGroupCount: p, selectedFilterGroupFilters: n, hasLogicAdapter: c, hasRemoveFilterButton: F, handleAddFilter: () => {
-      l.addFilter({
-        type: "standardFilter",
-        attribute: "",
-        operatorReplace: "",
-        operator: "",
-        innerGroupOperator: "*",
-        outerGroupOperator: "*",
-        filterNumber: n.value.length + 1,
-        filterGroup: r.value,
-        isValid: !1,
-        value: ""
-      }), console.debug("handleAddFilter");
+    };
+    a({ switchToGroup: s });
+    const p = () => {
+      const e = t.getUniqueFilterGroups, o = e.length > 0 ? Math.max(...e) + 1 : 1;
+      t.addFilterGroup(o), r.value = o;
+    }, c = l(() => u.value.length >= 3), n = l(() => t.getSelectedFilterGroup(r.value)), d = l(() => n.value.length >= 10), F = l(() => n.value.length > 1), _ = l(() => u.value.length > 1), m = l(() => {
+      var o;
+      return ((o = n.value[0]) == null ? void 0 : o.outerGroupOperator) || "*";
+    });
+    return { __sfc: !0, MAX_FILTER_GROUP_COUNT: 3, MAX_FILTER_PER_GROUP_COUNT: 10, trans: i, store: t, filterGroupList: u, selectedFilterGroup: r, switchToGroup: s, handleAddFilterGroup: p, isMaxFilterGroupCount: c, selectedFilterGroupFilters: n, isMaxFilterPerGroupCount: d, hasLogicAdapter: F, hasRemoveFilterButton: _, outerGroupOperator: m, handleOuterGroupOperatorChange: (e) => {
+      n.value.forEach((o) => {
+        t.updateFilter({ ...o, outerGroupOperator: e });
+      });
+    }, handleAddFilter: () => {
+      t.addFilter(
+        t.createDefaultFilter(
+          r.value,
+          n.value.length + 1
+        )
+      );
     }, handleDeleteFilter: (e) => {
-      console.debug("handleDeleteFilter: ", e), l.deleteFilter(e);
+      t.deleteFilter(e);
     }, handleDeleteFilterGroup: () => {
-      t.value.length !== 1 && (console.debug("handleDeleteFilterGroup"), t.value.splice(r.value - 1, 1), r.value > 1 && r.value--);
-    }, InSegments: f, InButtonV2: v, FilterItem: _, LogicAdapter: A };
+      u.value.length <= 1 || t.deleteFilterGroup(r.value);
+    }, getTooltipOptions: R, InSegments: U, InButtonV2: T, FilterItem: E, LogicAdapter: A };
   }
 });
 export {
-  E as default
+  y as default
 };

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

@@ -1,8 +1,8 @@
-var d = Object.defineProperty;
-var m = (c, s, t) => s in c ? d(c, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[s] = t;
-var n = (c, s, t) => m(c, typeof s != "symbol" ? s + "" : s, t);
-import { CommonControl as h } from "../../../common-control.js";
-import { RecommendationConfigService as f } from "../../services/configService.js";
+var m = Object.defineProperty;
+var h = (c, s, t) => s in c ? m(c, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[s] = t;
+var n = (c, s, t) => h(c, typeof s != "symbol" ? s + "" : s, t);
+import { CommonControl as f } from "../../../common-control.js";
+import { RecommendationConfigService as l } from "../../services/configService.js";
 import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
 import { AlgorithmControl as p } from "./algorithm.js";
 import { ALGORITHM_CONTROL_ID as W } from "./algorithm.js";
@@ -10,17 +10,17 @@ import { CurrencyControl as g } from "./currency.js";
 import { CURRENCY_CONTROL_ID as H } from "./currency.js";
 import { FiltersControl as R } from "./filters.js";
 import { FILTERS_CONTROL_ID as j } from "./filters.js";
-import { LocaleControl as y } from "./locale.js";
+import { LocaleControl as N } from "./locale.js";
 import { LOCALE_CONTROL_ID as K } from "./locale.js";
-import { ProductLayoutControl as _ } from "./productLayout.js";
+import { ProductLayoutControl as y } from "./productLayout.js";
 import { PRODUCT_LAYOUT_CONTROL_ID as J } from "./productLayout.js";
-import { ShuffleControl as N } from "./shuffle.js";
+import { ShuffleControl as _ } from "./shuffle.js";
 import { SHUFFLE_CONTROL_ID as X } from "./shuffle.js";
-import { regenerateProductRowsWithStyles as b, getBlockElement as P, updateProductContentInPlace as I } from "./utils.js";
-import { formatProductPrice as tt, getCardComposition as et, getCurrentLayout as ot, reapplySpacing as rt, regenerateMobileProductRows as nt, regenerateProductRows as it, setCurrencyAttributes as st, updatePricesInPlace as ct, updateSingleProductContent as at } from "./utils.js";
-import { useDebounceFn as l } from "../../../../../node_modules/@vueuse/shared/index.js";
+import { regenerateProductRowsWithStyles as b, getBlockElement as I, updateProductContentInPlace as P } from "./utils.js";
+import { formatProductPrice as tt, getCardComposition as et, getCurrentLayout as ot, reapplySpacing as rt, regenerateMobileProductRows as it, regenerateProductRows as nt, setCurrencyAttributes as st, updatePricesInPlace as ct, updateSingleProductContent as at } from "./utils.js";
+import { useDebounceFn as u } from "../../../../../node_modules/@vueuse/shared/index.js";
 const T = "recommendation-id", S = "ui-elements-recommendation-block";
-class $ extends h {
+class z extends f {
   constructor() {
     super(...arguments);
     n(this, "store", C());
@@ -36,19 +36,19 @@ class $ extends h {
     /**
      * Debounced product fetch to prevent rapid API calls during config changes
      */
-    n(this, "_debouncedFetchProducts", l(() => {
+    n(this, "_debouncedFetchProducts", u(() => {
       this.store.fetchRecommendationProducts();
     }, 500));
     /**
      * Debounced regeneration when products arrive from API
      * Tries in-place update first to preserve styles, falls back to full regeneration
      */
-    n(this, "_debouncedRegenerateWithProducts", l(() => {
+    n(this, "_debouncedRegenerateWithProducts", u(() => {
       const t = this.store.recommendationProducts;
       if (!this.currentNode || !this.api)
         return;
       const e = this.api.getDocumentModifier();
-      I({
+      P({
         currentNode: this.currentNode,
         documentModifier: e,
         products: t
@@ -59,7 +59,7 @@ class $ extends h {
     return S;
   }
   getTemplate() {
-    return this.algorithmControl = new p(), this.localeControl = new y(), this.currencyControl = new g(), this.productLayoutControl = new _(), this.filtersControl = new R(), this.shuffleControl = new N(), `
+    return this.algorithmControl = new p(), this.localeControl = new N(), this.currencyControl = new g(), this.productLayoutControl = new y(), this.filtersControl = new R(), this.shuffleControl = new _(), `
             <div class="recommendation-controls-container">
                 ${this.algorithmControl.getTemplate()}
                 ${this.localeControl.getTemplate()}
@@ -95,19 +95,19 @@ class $ extends h {
     });
   }
   onTemplateNodeUpdated(t) {
-    var i;
+    var r;
     super.onTemplateNodeUpdated(t);
     const e = this._getRecommendationIdFromNode(t);
-    e !== null && e !== this.store.currentRecommendationId && this.store.setCurrentBlock(e), this._syncNodeConfigToStore(), e !== null && !((i = this.store.blockStates[e]) != null && i.isInitialized) && this._fetchBlockData(e), [
+    e !== null && e !== this.store.currentRecommendationId && this.store.setCurrentBlock(e), this._syncNodeConfigToStore(), e !== null && !((r = this.store.blockStates[e]) != null && r.isInitialized) && this._fetchBlockData(e), [
       this.algorithmControl,
       this.localeControl,
       this.currencyControl,
       this.productLayoutControl,
       this.filtersControl,
       this.shuffleControl
-    ].forEach((r) => {
+    ].forEach((i) => {
       var a;
-      r != null && r.api && (r.currentNode = t, (a = r.onTemplateNodeUpdated) == null || a.call(r, t));
+      i != null && i.api && (i.currentNode = t, (a = i.onTemplateNodeUpdated) == null || a.call(i, t));
     });
   }
   onDestroy() {
@@ -152,13 +152,17 @@ class $ extends h {
    * values are being prepared for the upcoming initial fetch.
    */
   _syncNodeConfigToStore() {
-    const t = f.getConfig(this.currentNode);
+    var r;
+    const t = l.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((r = this.store.blockStates[e]) == null ? void 0 : r.isInitialized);
     this.store.patchCurrentBlockConfig({
       strategy: t.strategy,
       language: t.language,
       size: t.size,
       productIds: t.productIds,
-      filters: t.filters,
+      // Only sync filters from node config during initial load.
+      // After initialization, the Pinia store is the source of truth
+      // for filters (edited via the filter drawer).
+      ...o ? {} : { filters: t.filters },
       shuffleProducts: t.shuffleProducts,
       currencySettings: {
         name: t.currency.code,
@@ -181,26 +185,26 @@ class $ extends h {
       this.store.fetchRecommendationFilters(),
       this.store.fetchRecommendationCreateData(),
       this.store.fetchRecommendationProducts()
-    ])).forEach((o, i) => {
+    ])).forEach((o, r) => {
       o.status === "rejected" && console.warn(`Recommendation block: ${[
         "fetchRecommendationFilters",
         "fetchRecommendationCreateData",
         "fetchRecommendationProducts"
-      ][i]} failed`, o.reason);
+      ][r]} failed`, o.reason);
     });
   }
   /**
    * Reads the recommendation-id attribute from the block element within the node
    */
   _getRecommendationIdFromNode(t) {
-    const e = P(t);
+    const e = I(t);
     if (!e || !("getAttribute" in e))
       return null;
     const o = e.getAttribute(T);
     if (!o)
       return null;
-    const i = parseInt(o);
-    return Number.isNaN(i) ? null : i;
+    const r = parseInt(o);
+    return Number.isNaN(r) ? null : r;
   }
   /**
    * Listen to store changes that require product refresh or regeneration.
@@ -213,12 +217,27 @@ class $ extends h {
     const { store: t } = this;
     let e = t.recommendationProducts, o = t.$state.configVersion;
     this.storeUnsubscription = t.$subscribe(() => {
-      const i = t.$state.configVersion;
-      i !== o && (o = i, this._debouncedFetchProducts());
-      const r = t.recommendationProducts, a = r !== e, u = Array.isArray(r) && r.length > 0;
-      a && u && (e = r, this._debouncedRegenerateWithProducts());
+      const r = t.$state.configVersion;
+      r !== o && (o = r, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
+      const i = t.recommendationProducts, a = i !== e, d = Array.isArray(i) && i.length > 0;
+      a && d && (e = i, this._debouncedRegenerateWithProducts());
     });
   }
+  /**
+   * Persists the current filter state from Pinia store to the Stripo node config.
+   * This ensures filters survive template save/reload cycles.
+   */
+  _persistFiltersToNodeConfig() {
+    if (!this.currentNode || !this.api)
+      return;
+    const { filters: t } = this.store.recommendationConfigs;
+    l.updateConfig(
+      this.api,
+      this.currentNode,
+      { filters: t },
+      "Update recommendation filters"
+    );
+  }
 }
 export {
   W as ALGORITHM_CONTROL_ID,
@@ -229,22 +248,22 @@ export {
   j as FILTERS_CONTROL_ID,
   R as FiltersControl,
   K as LOCALE_CONTROL_ID,
-  y as LocaleControl,
+  N as LocaleControl,
   J as PRODUCT_LAYOUT_CONTROL_ID,
-  _ as ProductLayoutControl,
-  $ as RecommendationBlockControl,
+  y as ProductLayoutControl,
+  z as RecommendationBlockControl,
   X as SHUFFLE_CONTROL_ID,
-  N as ShuffleControl,
+  _ as ShuffleControl,
   tt as formatProductPrice,
-  P as getBlockElement,
+  I as getBlockElement,
   et as getCardComposition,
   ot as getCurrentLayout,
   rt as reapplySpacing,
-  nt as regenerateMobileProductRows,
-  it as regenerateProductRows,
+  it as regenerateMobileProductRows,
+  nt as regenerateProductRows,
   b as regenerateProductRowsWithStyles,
   st as setCurrencyAttributes,
   ct as updatePricesInPlace,
-  I as updateProductContentInPlace,
+  P as updateProductContentInPlace,
   at as updateSingleProductContent
 };

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

@@ -1,14 +1,15 @@
-import { RecommendationFeedSourceMaps as d, PriceAttributes as S } from "../../../../enums/extensions/recommendationBlock.js";
-import { useRecommendationApi as p } from "../../../../services/recommendationApi.js";
-import { useConfigStore as b } from "../../../../stores/config.js";
-import { defineStore as I } from "pinia";
-import { DEFAULT_CARDS_IN_ROW as R } from "../constants/layout.js";
-import { getDefaultProducts as k } from "../templates/utils.js";
+import { RecommendationFeedSourceMaps as d, getOperatorOptions as S, PriceAttributes as p } from "../../../../enums/extensions/recommendationBlock.js";
+import { useRecommendationApi as b } from "../../../../services/recommendationApi.js";
+import { useConfigStore as I } from "../../../../stores/config.js";
+import { defineStore as R } from "pinia";
+import { DEFAULT_CARDS_IN_ROW as k } from "../constants/layout.js";
+import { getDefaultProducts as C } from "../templates/utils.js";
 import { generateCompleteFilterQuery as f } from "../utils/filterUtil.js";
-const m = p();
+import { isFilterValid as y } from "../validation/filterSchema.js";
+const m = b();
 function h() {
   return {
-    cardsInRow: R,
+    cardsInRow: k,
     currencySettings: {
       name: "USD",
       value: "USD",
@@ -32,17 +33,18 @@ function h() {
     size: "6"
   };
 }
-function C() {
+function G() {
   return {
     recommendationConfigs: h(),
     recommendationProducts: [],
     filterStatus: !1,
     filterSelectionDrawerStatus: !1,
     filterGroup: 1,
-    isInitialized: !1
+    isInitialized: !1,
+    filterSnapshot: null
   };
 }
-const y = () => ({
+const F = () => ({
   recommendationCampaignUrls: {},
   activePredictiveAlgorithms: [],
   languages: {},
@@ -51,8 +53,8 @@ const y = () => ({
   blockStates: {},
   currentRecommendationId: null,
   configVersion: 0
-}), A = I("guidoRecommendationExtension", {
-  state: () => y(),
+}), V = R("guidoRecommendationExtension", {
+  state: () => F(),
   getters: {
     // ====================================================================
     // Proxy Getters — Backward Compatible Access to Current Block State
@@ -94,9 +96,17 @@ const y = () => ({
     hasFilters() {
       return !!this.recommendationConfigs.filters.length;
     },
+    hasValidFilters() {
+      const { filters: t } = this.recommendationConfigs;
+      return t.length ? t.every((r) => r.isValid) : !1;
+    },
     getFilterGroupCount() {
       const { filters: t } = this.recommendationConfigs;
-      return t.length && t[t.length - 1].filterGroup || 0;
+      return t.length ? new Set(t.map((r) => r.filterGroup)).size : 0;
+    },
+    getUniqueFilterGroups() {
+      const { filters: t } = this.recommendationConfigs;
+      return [...new Set(t.map((r) => r.filterGroup))].sort((r, e) => r - e);
     },
     getActivePredictiveAlgorithms: (t) => {
       const r = [];
@@ -117,7 +127,7 @@ const y = () => ({
     })),
     getFilterList() {
       return Object.values(this.filterList).map((t) => {
-        const r = t.type === "defaultAttribute", e = S.includes(t.attributeName);
+        const r = t.type === "defaultAttribute", e = p.includes(t.attributeName);
         let n = r ? t.attributeName : `product_attributes.${t.attributeName}`;
         return n = e ? `${n}.${this.recommendationConfigs.currencySettings.value}` : n, {
           text: t.displayName,
@@ -141,7 +151,7 @@ const y = () => ({
     setCurrentBlock(t) {
       this.blockStates[t] || (this.blockStates = {
         ...this.blockStates,
-        [t]: C()
+        [t]: G()
       }), this.currentRecommendationId = t;
     },
     /**
@@ -181,33 +191,56 @@ const y = () => ({
       const { triggerRefetch: n = !0 } = r;
       n && this.configVersion++;
     },
+    /**
+     * Creates a filter with the first available attribute and operator pre-selected.
+     */
+    createDefaultFilter(t, r) {
+      const [e] = this.getFilterList, [n] = S(e == null ? void 0 : e.type);
+      return {
+        type: "standardFilter",
+        attribute: (e == null ? void 0 : e.value) ?? "",
+        operator: (n == null ? void 0 : n.value) ?? "",
+        innerGroupOperator: "*",
+        outerGroupOperator: "*",
+        filterNumber: r,
+        filterGroup: t,
+        isValid: !1,
+        value: ""
+      };
+    },
     /**
      * Opens the filter selection drawer for the current block.
-     * If no filters exist, initializes with a default empty filter
+     * Saves a snapshot of current filters for cancel/revert.
+     * If no filters exist, initializes with a default filter
      * so the user has a starting point for input.
      */
     openFilterDrawer() {
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
       const t = this.blockStates[this.currentRecommendationId];
-      t.recommendationConfigs.filters.length || (t.recommendationConfigs.filters = [{
-        type: "standardFilter",
-        attribute: "",
-        operatorReplace: "",
-        operator: "",
-        innerGroupOperator: "*",
-        outerGroupOperator: "*",
-        filterNumber: 1,
-        filterGroup: 1,
-        isValid: !1,
-        value: ""
-      }]), t.filterSelectionDrawerStatus = !0;
+      t.filterSnapshot = JSON.parse(
+        JSON.stringify(t.recommendationConfigs.filters)
+      ), t.recommendationConfigs.filters.length || (t.recommendationConfigs.filters = [this.createDefaultFilter(1, 1)]), t.filterSelectionDrawerStatus = !0;
     },
     /**
-     * Closes the filter selection drawer for the current block
+     * Closes the filter selection drawer for the current block.
+     * Called after successful apply — discards the snapshot.
      */
     closeFilterDrawer() {
-      this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId] || (this.blockStates[this.currentRecommendationId].filterSelectionDrawerStatus = !1);
+      if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
+        return;
+      const t = this.blockStates[this.currentRecommendationId];
+      t.filterSnapshot = null, t.filterSelectionDrawerStatus = !1;
+    },
+    /**
+     * Cancels the filter selection drawer and reverts filters
+     * to the snapshot taken when the drawer was opened.
+     */
+    cancelFilterDrawer() {
+      if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
+        return;
+      const t = this.blockStates[this.currentRecommendationId];
+      t.filterSnapshot !== null && (t.recommendationConfigs.filters = t.filterSnapshot, t.filterSnapshot = null), t.filterSelectionDrawerStatus = !1;
     },
     // ====================================================================
     // Shared Data Fetching (fetched once, used by all blocks)
@@ -234,18 +267,18 @@ const y = () => ({
     // Per-Block Filter Actions
     // ====================================================================
     addFilterGroup(t) {
-      this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId] || this.blockStates[this.currentRecommendationId].recommendationConfigs.filters.push({
-        type: "standardFilter",
-        attribute: "",
-        operatorReplace: "",
-        operator: "",
-        innerGroupOperator: "",
-        outerGroupOperator: "",
-        value: "",
-        filterNumber: 1,
-        isValid: !0,
-        filterGroup: t
-      });
+      this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId] || this.blockStates[this.currentRecommendationId].recommendationConfigs.filters.push(
+        this.createDefaultFilter(t, 1)
+      );
+    },
+    deleteFilterGroup(t) {
+      if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
+        return;
+      const r = this.blockStates[this.currentRecommendationId], e = r.recommendationConfigs.filters.filter((i) => i.filterGroup !== t), n = [...new Set(e.map((i) => i.filterGroup))].sort((i, o) => i - o), s = new Map(n.map((i, o) => [i, o + 1]));
+      r.recommendationConfigs.filters = e.map((i) => ({
+        ...i,
+        filterGroup: s.get(i.filterGroup) ?? i.filterGroup
+      }));
     },
     updateFilter(t) {
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
@@ -253,7 +286,10 @@ const y = () => ({
       const r = this.blockStates[this.currentRecommendationId], e = r.recommendationConfigs.filters.findIndex((n) => n.filterNumber === t.filterNumber && n.filterGroup === t.filterGroup);
       if (e !== -1) {
         const n = [...r.recommendationConfigs.filters];
-        n[e] = t, t.value.length && t.operator && t.attribute && t.innerGroupOperator && t.outerGroupOperator ? n[e].isValid = !0 : n[e].isValid = !1, r.recommendationConfigs.filters = n;
+        n[e] = {
+          ...t,
+          isValid: y(t)
+        }, r.recommendationConfigs.filters = n;
       }
     },
     deleteFilter(t) {
@@ -268,15 +304,15 @@ const y = () => ({
     addFilter(t) {
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
-      const r = this.blockStates[this.currentRecommendationId], e = [...r.recommendationConfigs.filters], o = e.filter(
-        (i) => i.filterGroup === t.filterGroup
-      ).length + 1, s = e.findLastIndex((i) => i.filterGroup === t.filterGroup);
-      s !== -1 ? e.splice(s + 1, 0, {
+      const r = this.blockStates[this.currentRecommendationId], e = [...r.recommendationConfigs.filters], s = e.filter(
+        (o) => o.filterGroup === t.filterGroup
+      ).length + 1, i = e.findLastIndex((o) => o.filterGroup === t.filterGroup);
+      i !== -1 ? e.splice(i + 1, 0, {
         ...t,
-        filterNumber: o
+        filterNumber: s
       }) : e.push({
         ...t,
-        filterNumber: o
+        filterNumber: s
       }), r.recommendationConfigs.filters = e;
     },
     generateFilterQuery() {
@@ -289,26 +325,26 @@ const y = () => ({
       var u;
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
-      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((l) => l.isValid), o = f(n), s = ((u = d.find((l) => l.key === e.strategy)) == null ? void 0 : u.path) || "", i = b(), c = {
+      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((l) => l.isValid), s = f(n), i = ((u = d.find((l) => l.key === e.strategy)) == null ? void 0 : u.path) || "", o = I(), c = {
         locale: e.language,
         currency: e.currencySettings.value,
-        partnerName: i.partnerName,
+        partnerName: o.partnerName,
         size: e.size,
         details: !0,
-        campaignId: i.variationId
+        campaignId: o.variationId
       };
-      e.strategy === "manualMerchandising" ? c.productId = e.productIds.join(",") : e.strategy === "similarViewed" && (c.productId = "{itemId}"), o && (c.filter = o), e.shuffleProducts && (c.shuffle = !0);
+      e.strategy === "manualMerchandising" ? c.productId = e.productIds.join(",") : e.strategy === "similarViewed" && (c.productId = "{itemId}"), s && (c.filter = s), e.shuffleProducts && (c.shuffle = !0);
       const g = parseInt(e.size) || 6;
       let a;
       try {
-        a = await m.fetchRecommendationProducts(s, c);
+        a = await m.fetchRecommendationProducts(i, c);
       } catch {
         a = [];
       }
-      this.blockStates[t] && (this.blockStates[t].recommendationProducts = a.length > 0 ? a : k(g));
+      this.blockStates[t] && (this.blockStates[t].recommendationProducts = a.length > 0 ? a : C(g));
     }
   }
 });
 export {
-  A as useRecommendationExtensionStore
+  V as useRecommendationExtensionStore
 };

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

@@ -1,22 +1,22 @@
 function l(t) {
   if (t.length === 0)
     return "";
-  const o = t.sort((r, e) => r.filterNumber - e.filterNumber), n = o.map((r) => `[${r.attribute}][${r.operatorReplace}][${r.value}]`), [i, ...p] = n;
-  let u = i;
-  for (let r = 0; r < p.length; r++) {
-    const e = o[r + 1].innerGroupOperator;
-    u += `${e}${p[r]}`;
+  const o = t.sort((r, e) => r.filterNumber - e.filterNumber), n = o.map((r) => `[${r.attribute}][${r.operator}][${r.value}]`), [p, ...i] = n;
+  let u = p;
+  for (let r = 0; r < i.length; r++) {
+    const e = o[r].innerGroupOperator;
+    u += `${e}${i[r]}`;
   }
   return `(${u})`;
 }
 function f(t) {
   if (!t || t.length === 0)
     return "";
-  const o = t.reduce((r, e) => (r[e.filterGroup] || (r[e.filterGroup] = []), r[e.filterGroup].push(e), r), {}), n = Object.keys(o).map(Number).sort((r, e) => r - e), i = n.map((r) => {
+  const o = t.reduce((r, e) => (r[e.filterGroup] || (r[e.filterGroup] = []), r[e.filterGroup].push(e), r), {}), n = Object.keys(o).map(Number).sort((r, e) => r - e), p = n.map((r) => {
     const e = o[r];
     return l(e);
-  }), [p, ...u] = i;
-  let s = p;
+  }), [i, ...u] = p;
+  let s = i;
   for (let r = 0; r < u.length; r++) {
     const e = n[r + 1], c = o[e][0].outerGroupOperator;
     s += `${c}${u[r]}`;

package/dist/extensions/Blocks/Recommendation/validation/filterSchema.js

@@ -0,0 +1,29 @@
+import { safeParse as o, object as p, boolean as l, number as i, pipe as c, minLength as f, string as m } from "../../../../node_modules/valibot/dist/index.js";
+const e = c(m(), f(1)), s = p({
+  type: e,
+  attribute: e,
+  operator: e,
+  innerGroupOperator: e,
+  outerGroupOperator: e,
+  value: e,
+  filterGroup: i(),
+  filterNumber: i(),
+  isValid: l()
+});
+function g(t) {
+  return o(s, t).success;
+}
+function S(t) {
+  const r = o(s, t);
+  return r.success ? /* @__PURE__ */ new Set() : new Set(
+    r.issues.flatMap((u) => {
+      var n;
+      return ((n = u.path) == null ? void 0 : n.map((a) => String(a.key))) ?? [];
+    })
+  );
+}
+export {
+  s as FilterSchema,
+  S as getInvalidFilterFields,
+  g as isFilterValid
+};

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-913a3417] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-17dd4d8b]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-16abb398]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-16abb398]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-16abb398]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-3b53a736],.gap-16[data-v-c5dee797]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-913a3417] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-17dd4d8b]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-16abb398]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-16abb398]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-16abb398]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/src/components/organisms/extensions/recommendation/FilterItem.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     filter: Filter;
     index: number;
     hasLogicAdapter?: boolean;
+    submitted: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
     "delete-filter": (filter: Filter) => void;

package/dist/src/components/organisms/extensions/recommendation/Filters.vue.d.ts

@@ -1,2 +1,16 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+type __VLS_Props = {
+    submitted: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
+    switchToGroup: (groupId: number) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts

@@ -76,4 +76,9 @@ export declare class RecommendationBlockControl extends CommonControl {
      * (e.g., fetchRecommendationCreateData setting preferred currency).
      */
     _listenStateUpdates(): void;
+    /**
+     * Persists the current filter state from Pinia store to the Stripo node config.
+     * This ensures filters survive template save/reload cycles.
+     */
+    private _persistFiltersToNodeConfig;
 }

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

@@ -31,6 +31,8 @@ interface PerBlockState {
     filterGroup: number;
     /** Whether initial API data (filters, algorithms, products) has been fetched for this block */
     isInitialized: boolean;
+    /** Snapshot of filters taken when the drawer opens, used to revert on cancel */
+    filterSnapshot: Filter[] | null;
 }
 interface StoreState {
     recommendationCampaignUrls: Record<string, string>;
@@ -125,7 +127,9 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
         configVersion: number;
     } & import("pinia").PiniaCustomStateProperties<StoreState>): number;
     hasFilters(): boolean;
+    hasValidFilters(): boolean;
     getFilterGroupCount(): number;
+    getUniqueFilterGroups(): number[];
     getActivePredictiveAlgorithms: (state: {
         recommendationCampaignUrls: Record<string, string>;
         activePredictiveAlgorithms: number[];
@@ -203,19 +207,31 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
     patchCurrentBlockConfig(updates: Partial<PerBlockConfigs>, options?: {
         triggerRefetch?: boolean;
     }): void;
+    /**
+     * Creates a filter with the first available attribute and operator pre-selected.
+     */
+    createDefaultFilter(filterGroup: number, filterNumber: number): Filter;
     /**
      * Opens the filter selection drawer for the current block.
-     * If no filters exist, initializes with a default empty filter
+     * Saves a snapshot of current filters for cancel/revert.
+     * If no filters exist, initializes with a default filter
      * so the user has a starting point for input.
      */
     openFilterDrawer(): void;
     /**
-     * Closes the filter selection drawer for the current block
+     * Closes the filter selection drawer for the current block.
+     * Called after successful apply — discards the snapshot.
      */
     closeFilterDrawer(): void;
+    /**
+     * Cancels the filter selection drawer and reverts filters
+     * to the snapshot taken when the drawer was opened.
+     */
+    cancelFilterDrawer(): void;
     fetchRecommendationCreateData(): Promise<void>;
     fetchRecommendationFilters(): Promise<void>;
     addFilterGroup(filterGroup: number): void;
+    deleteFilterGroup(groupId: number): void;
     updateFilter(updatedFilter: Filter): void;
     deleteFilter(filter: Filter): void;
     addFilter(filter: Filter): void;

package/dist/src/extensions/Blocks/Recommendation/validation/filterSchema.d.ts

@@ -0,0 +1,15 @@
+import type { Filter } from '@@/Types/recommendation';
+import * as v from 'valibot';
+export declare const FilterSchema: v.ObjectSchema<{
+    readonly type: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly attribute: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly operator: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly innerGroupOperator: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly outerGroupOperator: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly value: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly filterGroup: v.NumberSchema<undefined>;
+    readonly filterNumber: v.NumberSchema<undefined>;
+    readonly isValid: v.BooleanSchema<undefined>;
+}, undefined>;
+export declare function isFilterValid(filter: Filter): boolean;
+export declare function getInvalidFilterFields(filter: Filter): Set<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.1.0-beta.497ad9c",
+  "version": "2.1.0-beta.4adc9e7",
   "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",