@useinsider/guido 3.20.1 → 3.21.0-beta.0df5409

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

@@ -1,30 +1,30 @@
-var _ = Object.defineProperty;
-var p = (o, e, t) => e in o ? _(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var a = (o, e, t) => p(o, typeof e != "symbol" ? e + "" : e, t);
-import { UEAttr as L, ModificationDescription as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as A } from "../../../common-control.js";
+var N = Object.defineProperty;
+var O = (o, e, t) => e in o ? N(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var c = (o, e, t) => O(o, typeof e != "symbol" ? e + "" : e, t);
+import { UEAttr as A, ModificationDescription as S } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as f } from "../../../common-control.js";
 import "../../constants/selectors.js";
-import { LAYOUT_OPTIONS as O, DEFAULT_MOBILE_ROW_SPACING as d, DEFAULT_MOBILE_COLUMN_SPACING as m, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as g } from "../../constants/layout.js";
-import { RecommendationConfigService as u } from "../../services/configService.js";
-import { useRecommendationExtensionStore as f } from "../../store/recommendation.js";
-import { isPartnerManagedBlock as S, getCurrentLayout as C, getBlockElement as T, getCardComposition as U, regenerateProductRowsWithStyles as I } from "./utils.js";
-const y = "recommendation-layout-orientation-control", s = {
+import { LAYOUT_OPTIONS as T, DEFAULT_MOBILE_ROW_SPACING as g, DEFAULT_MOBILE_COLUMN_SPACING as C, DEFAULT_ROW_SPACING as _, DEFAULT_COLUMN_SPACING as h } from "../../constants/layout.js";
+import { RecommendationConfigService as l } from "../../services/configService.js";
+import { useRecommendationExtensionStore as U } from "../../store/recommendation.js";
+import { isPartnerManagedBlock as I, getCurrentLayout as L, getBlockElement as y, getCardComposition as E, regenerateProductRowsWithStyles as R } from "./utils.js";
+const b = "recommendation-layout-orientation-control", u = {
   LAYOUT: "layout"
-}, n = {
+}, i = {
   LAYOUT: "data-layout",
   COLUMN_SPACING: "data-column-spacing",
   ROW_SPACING: "data-row-spacing",
   MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
   MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-class F extends A {
+class W extends f {
   constructor() {
     super(...arguments);
-    a(this, "store", f());
-    a(this, "isChangingLayout", !1);
+    c(this, "store", U());
+    c(this, "isChangingLayout", !1);
   }
   getId() {
-    return y;
+    return b;
   }
   getTemplate() {
     return `
@@ -32,8 +32,8 @@ class F extends A {
                 ${this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Layout Orientation") }),
       this._GuRadioButton({
-        name: s.LAYOUT,
-        buttons: O
+        name: u.LAYOUT,
+        buttons: T
       })
     ])}
             </div>
@@ -51,15 +51,15 @@ class F extends A {
    */
   _syncDisabledState() {
     this.api.setUIEAttribute(
-      s.LAYOUT,
-      L.RADIO_BUTTONS.disabled,
-      S(this.currentNode)
+      u.LAYOUT,
+      A.RADIO_BUTTONS.disabled,
+      I(this.currentNode)
     );
   }
   _setFormValues() {
-    const r = u.getConfig(this.currentNode).layout || C(this.currentNode);
+    const n = l.getConfig(this.currentNode).layout || L(this.currentNode);
     this.api.updateValues({
-      [s.LAYOUT]: r
+      [u.LAYOUT]: n
     });
   }
   /**
@@ -67,53 +67,51 @@ class F extends A {
    * Updates node config, data attribute and regenerates product rows
    */
   _onLayoutChange(t) {
-    if (this.isChangingLayout || !this.currentNode || (u.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
+    if (this.isChangingLayout || !this.currentNode || (l.getConfig(this.currentNode).layout || L(this.currentNode)) === t)
       return;
-    const c = T(this.currentNode);
-    if (c) {
+    const r = y(this.currentNode);
+    if (r) {
       this.isChangingLayout = !0;
       try {
-        const h = U(this.currentNode, this.store.filterList);
-        u.updateConfig(
-          this.api,
-          this.currentNode,
-          {
-            layout: t,
-            columnSpacing: g,
-            rowSpacing: l,
-            mobileColumnSpacing: m,
-            mobileRowSpacing: d
-          },
-          `Changed layout to ${t}`
-        ), this.store.patchCurrentBlockConfig({ orientation: t });
-        const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, g.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, m.toString()).setAttribute(n.MOBILE_ROW_SPACING, d.toString());
-        t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.apply(new N(`Update layout to ${t}`)), this._regenerateProductRows(t, h);
+        const p = E(this.currentNode, this.store.filterList), m = {
+          layout: t,
+          columnSpacing: h,
+          rowSpacing: _,
+          mobileColumnSpacing: C,
+          mobileRowSpacing: g
+        }, s = this.api.getDocumentModifier();
+        l.stageConfig(s, this.currentNode, m), this.store.patchCurrentBlockConfig({ orientation: t });
+        const a = s.modifyHtml(r).setAttribute(i.LAYOUT, t).setAttribute(i.COLUMN_SPACING, h.toString()).setAttribute(i.ROW_SPACING, _.toString()).setAttribute(i.MOBILE_COLUMN_SPACING, C.toString()).setAttribute(i.MOBILE_ROW_SPACING, g.toString());
+        t === "list" ? (a.setClass("es-m-p0"), a.setClass("ins-recommendation-list-layout")) : (a.removeClass("es-m-p0"), a.removeClass("ins-recommendation-list-layout")), this._regenerateProductRows(s, t, p, m), s.apply(new S(`Changed layout to ${t}`));
       } finally {
         this.isChangingLayout = !1;
       }
     }
   }
   /**
-   * Regenerates product rows based on the selected layout
-   * Uses unified style-preserving regeneration to maintain user customizations
+   * Stages the product rows for the selected layout into the caller's batch,
+   * with the user's styles preserved.
    * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
    * @param composition - The preserved card composition, incl. customAttr:* entries
+   * @param configOverrides - The config staged in the same batch (spacing defaults)
    */
-  _regenerateProductRows(t, r) {
-    this.currentNode && I({
+  _regenerateProductRows(t, n, d, r) {
+    this.currentNode && R({
       currentNode: this.currentNode,
-      documentModifier: this.api.getDocumentModifier(),
-      layout: t,
-      composition: r
+      documentModifier: t,
+      layout: n,
+      composition: d,
+      configOverrides: r,
+      stageOnly: !0
     });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(s.LAYOUT, (t) => {
+    this.api.onValueChanged(u.LAYOUT, (t) => {
       this._onLayoutChange(t);
     });
   }
 }
 export {
-  y as LAYOUT_ORIENTATION_CONTROL_ID,
-  F as LayoutOrientationControl
+  b as LAYOUT_ORIENTATION_CONTROL_ID,
+  W as LayoutOrientationControl
 };

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

@@ -1,21 +1,21 @@
-var s = Object.defineProperty;
-var r = (o, t, e) => t in o ? s(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var a = (o, t, e) => r(o, typeof t != "symbol" ? t + "" : t, e);
-import { UEAttr as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as c } from "../../../common-control.js";
-import { RecommendationConfigService as i } from "../../services/configService.js";
-import { useRecommendationExtensionStore as g } from "../../store/recommendation.js";
-const m = "recommendation-locale-control", n = {
+var a = Object.defineProperty;
+var s = (o, t, e) => t in o ? a(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var i = (o, t, e) => s(o, typeof t != "symbol" ? t + "" : t, e);
+import { UEAttr as r } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationConfigService as m } from "../../services/configService.js";
+import { useRecommendationExtensionStore as c } from "../../store/recommendation.js";
+const g = "recommendation-locale-control", n = {
   LOCALE: "language"
 };
-class E extends c {
+class C extends l {
   constructor() {
     super(...arguments);
     // Store is used ONLY for API-fetched data (language options), not for config
-    a(this, "store", g());
+    i(this, "store", c());
   }
   getId() {
-    return m;
+    return g;
   }
   getTemplate() {
     return `
@@ -38,7 +38,7 @@ class E extends c {
     super.onTemplateNodeUpdated(e), this._setFormValues();
   }
   _setFormValues() {
-    const e = i.getConfig(this.currentNode);
+    const e = m.getConfig(this.currentNode);
     this.api.updateValues({
       [n.LOCALE]: e.language
     });
@@ -46,17 +46,12 @@ class E extends c {
   _initializeSelectItems() {
     this.api.setUIEAttribute(
       n.LOCALE,
-      l.SELECTPICKER.items,
+      r.SELECTPICKER.items,
       this.store.getLanguages
     );
   }
   _onLocaleChange(e) {
-    !this.currentNode || i.getConfig(this.currentNode).language === e || (i.updateConfig(
-      this.api,
-      this.currentNode,
-      { language: e },
-      `Changed language to ${e}`
-    ), this.store.patchCurrentBlockConfig({ language: e }));
+    this.currentNode && this.store.recommendationConfigs.language !== e && this.store.patchCurrentBlockConfig({ language: e });
   }
   _listenToFormUpdates() {
     this.api.onValueChanged(n.LOCALE, (e) => {
@@ -65,6 +60,6 @@ class E extends c {
   }
 }
 export {
-  m as LOCALE_CONTROL_ID,
-  E as LocaleControl
+  g as LOCALE_CONTROL_ID,
+  C as LocaleControl
 };

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

@@ -1,23 +1,23 @@
-var m = Object.defineProperty;
-var p = (i, o, e) => o in i ? m(i, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[o] = e;
-var d = (i, o, e) => p(i, typeof o != "symbol" ? o + "" : o, e);
-import { UEAttr as u, ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var p = Object.defineProperty;
+var h = (o, n, e) => n in o ? p(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
+var d = (o, n, e) => h(o, typeof n != "symbol" ? n + "" : n, e);
+import { UEAttr as l, ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as f } from "../../../common-control.js";
 import { ATTR_PRODUCT_PRICE as _, ATTR_PRODUCT_OLD_PRICE as I } from "../../constants/selectors.js";
-import { RecommendationConfigService as n } from "../../services/configService.js";
-import { useRecommendationExtensionStore as T } from "../../store/recommendation.js";
-import { getBlockElement as l, regenerateProductRowsWithStyles as g } from "./utils.js";
+import { RecommendationConfigService as a } from "../../services/configService.js";
+import { useRecommendationExtensionStore as g } from "../../store/recommendation.js";
+import { getBlockElement as m, regenerateProductRowsWithStyles as T } from "./utils.js";
 const E = "recommendation-price-placement-control", N = "hide-price", r = {
   ORIENTATION: "priceOrientation",
   HIDE_IF_SAME: "priceHideIfSameAsDiscounted"
 }, A = [
   { icon: "vertical-orientation", value: "vertical" },
   { icon: "horizontal-orientation", value: "horizontal" }
-], C = (i) => i ? "vertical" : "horizontal";
-class P extends f {
+], C = (o) => o ? "vertical" : "horizontal";
+class y extends f {
   constructor() {
     super(...arguments);
-    d(this, "store", T());
+    d(this, "store", g());
   }
   getId() {
     return E;
@@ -40,11 +40,11 @@ class P extends f {
         `;
   }
   onRender() {
-    const e = n.getConfig(this.currentNode);
+    const e = a.getConfig(this.currentNode);
     this._initializeHideToggle(e), this._setFormValues(e), this._updateOrientationDisabled(), this._listenToFormUpdates();
   }
   onTemplateNodeUpdated(e) {
-    super.onTemplateNodeUpdated(e), this._setFormValues(n.getConfig(this.currentNode)), this._updateOrientationDisabled();
+    super.onTemplateNodeUpdated(e), this._setFormValues(a.getConfig(this.currentNode)), this._updateOrientationDisabled();
   }
   _setFormValues(e) {
     this.api.updateValues({
@@ -55,7 +55,7 @@ class P extends f {
   _initializeHideToggle(e) {
     this.api.setUIEAttribute(
       r.HIDE_IF_SAME,
-      u.SELECTPICKER.items,
+      l.SELECTPICKER.items,
       e.priceHideIfSameAsDiscounted
     );
   }
@@ -67,56 +67,60 @@ class P extends f {
    * the merged "Product Prices" entry (the price row) governs.
    */
   _updateOrientationDisabled() {
-    const e = l(this.currentNode);
+    const e = m(this.currentNode);
     if (!e || !("querySelectorAll" in e))
       return;
-    const s = Array.from(
+    const i = Array.from(
       e.querySelectorAll(".recommendation-attribute-row[data-attribute-type]")
-    ).some((a) => {
-      const c = a.getAttribute("data-attribute-type");
-      return (c === _ || c === I) && a.getAttribute("data-visibility") === "0";
+    ).some((c) => {
+      const s = c.getAttribute("data-attribute-type");
+      return (s === _ || s === I) && c.getAttribute("data-visibility") === "0";
     });
     this.api.setUIEAttribute(
       r.ORIENTATION,
-      u.RADIO_BUTTONS.disabled,
-      s ? "true" : "false"
+      l.RADIO_BUTTONS.disabled,
+      i ? "true" : "false"
     );
   }
   _onOrientationChange(e) {
     if (!this.currentNode)
       return;
     const t = e === "vertical";
-    n.getConfig(this.currentNode).priceMovedToNextLine !== t && (n.updateConfig(
-      this.api,
-      this.currentNode,
-      { priceMovedToNextLine: t },
-      `${t ? "Stacked" : "Inlined"} recommendation prices`
-    ), this.store.patchCurrentBlockConfig({ priceMovedToNextLine: t }), this._regenerate());
+    if (a.getConfig(this.currentNode).priceMovedToNextLine === t)
+      return;
+    const c = { priceMovedToNextLine: t }, s = this.api.getDocumentModifier();
+    a.stageConfig(s, this.currentNode, c), this.store.patchCurrentBlockConfig({ priceMovedToNextLine: t }), this._regenerate(s, c), s.apply(
+      new u(`${t ? "Stacked" : "Inlined"} recommendation prices`)
+    );
   }
   _onHideIfSameChange(e) {
-    !this.currentNode || n.getConfig(this.currentNode).priceHideIfSameAsDiscounted === e || (n.updateConfig(
-      this.api,
+    if (!this.currentNode || a.getConfig(this.currentNode).priceHideIfSameAsDiscounted === e)
+      return;
+    const i = this.api.getDocumentModifier();
+    a.stageConfig(
+      i,
       this.currentNode,
-      { priceHideIfSameAsDiscounted: e },
-      `${e ? "Enabled" : "Disabled"} hide-if-same price`
-    ), this.store.patchCurrentBlockConfig({ priceHideIfSameAsDiscounted: e }), this._stampHideIfSameAttr(e));
+      { priceHideIfSameAsDiscounted: e }
+    ), this.store.patchCurrentBlockConfig({ priceHideIfSameAsDiscounted: e }), this._stampHideIfSameAttr(i, e), i.apply(new u(`${e ? "Enabled" : "Disabled"} hide-if-same price`));
   }
   /**
    * Mirrors the hide-if-same flag onto the durable `hide-price` block attribute
    * read by email-service at send time.
    */
-  _stampHideIfSameAttr(e) {
-    const t = l(this.currentNode);
-    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N, String(e)).apply(new h("Update hide-if-same price flag"));
+  _stampHideIfSameAttr(e, t) {
+    const i = m(this.currentNode);
+    i && e.modifyHtml(i).setAttribute(N, String(t));
   }
   /**
-   * Rebuilds the product rows so the renderer re-reads the inline/stacked
-   * layout flag from the store. Used by the orientation change only.
+   * Stages the rebuilt product rows into the caller's batch so the renderer
+   * reads the inline/stacked flag being written. Used by the orientation change only.
    */
-  _regenerate() {
-    this.currentNode && g({
+  _regenerate(e, t) {
+    this.currentNode && T({
       currentNode: this.currentNode,
-      documentModifier: this.api.getDocumentModifier()
+      documentModifier: e,
+      configOverrides: t,
+      stageOnly: !0
     });
   }
   _listenToFormUpdates() {
@@ -129,5 +133,5 @@ class P extends f {
 }
 export {
   E as PRICE_PLACEMENT_CONTROL_ID,
-  P as PricePlacementControl
+  y as PricePlacementControl
 };

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

@@ -1,28 +1,28 @@
 var s = Object.defineProperty;
-var u = (e, o, t) => o in e ? s(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
-var i = (e, o, t) => u(e, typeof o != "symbol" ? o + "" : o, t);
+var i = (e, o, t) => o in e ? s(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
+var r = (e, o, t) => i(e, typeof o != "symbol" ? o + "" : o, t);
 import { CommonControl as a } from "../../../common-control.js";
 import "../../constants/selectors.js";
-import { MAX_PRODUCT_COUNT as c } from "../../constants/layout.js";
-import { RecommendationConfigService as n } from "../../services/configService.js";
-import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
-const C = "recommendation-product-count-control", r = {
+import { MAX_PRODUCT_COUNT as m } from "../../constants/layout.js";
+import { RecommendationConfigService as u } from "../../services/configService.js";
+import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
+const d = "recommendation-product-count-control", n = {
   PRODUCT_COUNT: "size"
 };
 class U extends a {
   constructor() {
     super(...arguments);
-    i(this, "store", d());
+    r(this, "store", C());
   }
   getId() {
-    return C;
+    return d;
   }
   getTemplate() {
     return `
             <div class="product-count-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Number of Products") }),
-      this._GuCounter({ name: r.PRODUCT_COUNT, maxValue: c })
+      this._GuCounter({ name: n.PRODUCT_COUNT, maxValue: m })
     ])}
             </div>
         `;
@@ -34,26 +34,21 @@ class U extends a {
     super.onTemplateNodeUpdated(t), this._setFormValues();
   }
   _setFormValues() {
-    const t = n.getConfig(this.currentNode);
+    const t = u.getConfig(this.currentNode);
     this.api.updateValues({
-      [r.PRODUCT_COUNT]: t.size
+      [n.PRODUCT_COUNT]: t.size
     });
   }
   _onProductCountChange(t) {
-    !this.currentNode || n.getConfig(this.currentNode).size === t || (n.updateConfig(
-      this.api,
-      this.currentNode,
-      { size: t },
-      `Changed product count to ${t}`
-    ), this.store.patchCurrentBlockConfig({ size: t }));
+    this.currentNode && this.store.recommendationConfigs.size !== t && this.store.patchCurrentBlockConfig({ size: t });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(r.PRODUCT_COUNT, (t) => {
+    this.api.onValueChanged(n.PRODUCT_COUNT, (t) => {
       this._onProductCountChange(t.toString());
     });
   }
 }
 export {
-  C as PRODUCT_COUNT_CONTROL_ID,
+  d as PRODUCT_COUNT_CONTROL_ID,
   U as ProductCountControl
 };