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

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

@@ -1,15 +1,14 @@
 var f = Object.defineProperty;
-var T = (a, n, t) => n in a ? f(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
-var l = (a, n, t) => T(a, typeof n != "symbol" ? n + "" : n, t);
-import { UEAttr as d, EditorStatePropertyType as b, PreviewDeviceMode as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as P } from "../../../common-control.js";
+var T = (c, a, t) => a in c ? f(c, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[a] = t;
+var h = (c, a, t) => T(c, typeof a != "symbol" ? a + "" : a, t);
+import { UEAttr as _, EditorStatePropertyType as g, PreviewDeviceMode as y, ModificationDescription as O } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as N } from "../../../common-control.js";
 import "../../constants/selectors.js";
-import { MAX_PRODUCTS_PER_ROW as C, MAX_MOBILE_PRODUCTS_PER_ROW as D, DEFAULT_MOBILE_CARDS_IN_ROW as _ } from "../../constants/layout.js";
-import { RecommendationConfigService as s } from "../../services/configService.js";
-import { useRecommendationExtensionStore as M } from "../../store/recommendation.js";
-import { setMobileLayoutOptOut as m, ensureMobileCssRulesExist as L } from "../mobileLayout/cssRules.js";
-import { isPartnerManagedBlock as y, getCurrentLayout as w, getBlockElement as U, adjustProductsToSize as I, regenerateProductRowsWithStyles as g, regenerateMobileProductRows as E } from "./utils.js";
-import { useDebounceFn as A } from "../../../../../node_modules/@vueuse/shared/index.js";
+import { MAX_PRODUCTS_PER_ROW as b, MAX_MOBILE_PRODUCTS_PER_ROW as M, DEFAULT_MOBILE_CARDS_IN_ROW as R } from "../../constants/layout.js";
+import { RecommendationConfigService as r } from "../../services/configService.js";
+import { useRecommendationExtensionStore as P } from "../../store/recommendation.js";
+import { ensureMobileCssRulesExist as C, stageMobileLayoutOptOut as D } from "../mobileLayout/cssRules.js";
+import { isPartnerManagedBlock as w, getCurrentLayout as U, adjustProductsToSize as L, regenerateProductRowsWithStyles as I, regenerateMobileProductRows as E, getBlockElement as A } from "./utils.js";
 const B = "recommendation-product-layout-control", e = {
   // "Products in One Row" — shown when toggle is OFF
   PRODUCT_IN_ROW: "cardsInRow",
@@ -24,16 +23,13 @@ const B = "recommendation-product-layout-control", e = {
   MOBILE_LAYOUT_TOGGLE: "mobileLayoutEnabled",
   MOBILE_LAYOUT_LABEL: "mobileLayoutLabel"
 };
-class F extends P {
+class K extends N {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching and regeneration
-    l(this, "store", M());
-    l(this, "storeUnsubscription", () => {
+    h(this, "store", P());
+    h(this, "storeUnsubscription", () => {
     });
-    l(this, "_debouncedRegenerateProductRows", A(() => {
-      this._regenerateProductRows();
-    }, 500));
   }
   getId() {
     return B;
@@ -46,19 +42,19 @@ class F extends P {
         text: this.api.translate("Products in One Row"),
         name: e.PRODUCT_IN_ROW_LABEL
       }),
-      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: C }),
+      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: b }),
       this._GuLabel({
         text: this.api.translate("Products in One Row on Desktop"),
         name: e.PRODUCT_IN_ROW_DESKTOP_LABEL
       }),
-      this._GuCounter({ name: e.PRODUCT_IN_ROW_DESKTOP, maxValue: C }),
+      this._GuCounter({ name: e.PRODUCT_IN_ROW_DESKTOP, maxValue: b }),
       this._GuLabel({
         text: this.api.translate("Products in One Row on Mobile"),
         name: e.MOBILE_CARDS_IN_ROW_LABEL
       }),
       this._GuCounter({
         name: e.MOBILE_CARDS_IN_ROW,
-        maxValue: D
+        maxValue: M
       }),
       this._GuLabel({
         text: this.api.translate("Mobile Layout Optimization"),
@@ -86,14 +82,14 @@ class F extends P {
    * these inputs there. Disabling coexists with the visibility logic above.
    */
   _syncDisabledState() {
-    const t = y(this.currentNode);
-    this.api.setUIEAttribute(e.PRODUCT_IN_ROW, d.COUNTER.disabled, t), this.api.setUIEAttribute(e.PRODUCT_IN_ROW_DESKTOP, d.COUNTER.disabled, t), this.api.setUIEAttribute(e.MOBILE_CARDS_IN_ROW, d.COUNTER.disabled, t), this.api.setUIEAttribute(e.MOBILE_LAYOUT_TOGGLE, d.SWITCHER.disabled, t);
+    const t = w(this.currentNode);
+    this.api.setUIEAttribute(e.PRODUCT_IN_ROW, _.COUNTER.disabled, t), this.api.setUIEAttribute(e.PRODUCT_IN_ROW_DESKTOP, _.COUNTER.disabled, t), this.api.setUIEAttribute(e.MOBILE_CARDS_IN_ROW, _.COUNTER.disabled, t), this.api.setUIEAttribute(e.MOBILE_LAYOUT_TOGGLE, _.SWITCHER.disabled, t);
   }
   onDestroy() {
     this.storeUnsubscription();
   }
   _setFormValues() {
-    const t = s.getConfig(this.currentNode);
+    const t = r.getConfig(this.currentNode);
     this.api.updateValues({
       [e.PRODUCT_IN_ROW]: t.cardsInRow,
       [e.PRODUCT_IN_ROW_DESKTOP]: t.cardsInRow,
@@ -105,7 +101,7 @@ class F extends P {
    * Returns true when the editor preview is in mobile mode.
    */
   _isMobilePreview() {
-    return this.api.getEditorState()[b.previewDeviceMode] === N.MOBILE;
+    return this.api.getEditorState()[g.previewDeviceMode] === y.MOBILE;
   }
   /**
    * Updates counter visibility based on layout, mobileLayoutEnabled, and editor preview mode.
@@ -120,22 +116,22 @@ class F extends P {
    */
   _updateProductsInRowVisibility() {
     var p;
-    const t = s.getConfig(this.currentNode), i = (t.layout || w(this.currentNode)) === "grid", { mobileLayoutEnabled: r } = t, u = this._isMobilePreview();
+    const t = r.getConfig(this.currentNode), i = (t.layout || U(this.currentNode)) === "grid", { mobileLayoutEnabled: o } = t, n = this._isMobilePreview();
     this.api.setVisibility(e.MOBILE_LAYOUT_TOGGLE, i), this.api.setVisibility(e.MOBILE_LAYOUT_LABEL, i);
-    const c = i && !r, h = i && r && !u, R = i && r && u;
-    this.api.setVisibility(e.PRODUCT_IN_ROW, c), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, c), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP, h), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP_LABEL, h), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, R), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, R);
-    const O = (p = this.getContainer()) == null ? void 0 : p.querySelector("[data-product-layout-control]");
-    O && (O.style.display = i ? "" : "none");
+    const d = i && !o, l = i && o && !n, u = i && o && n;
+    this.api.setVisibility(e.PRODUCT_IN_ROW, d), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, d), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP, l), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP_LABEL, l), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, u), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, u);
+    const m = (p = this.getContainer()) == null ? void 0 : p.querySelector("[data-product-layout-control]");
+    m && (m.style.display = i ? "" : "none");
   }
   /**
    * Initializes the mobile layout toggle using the same pattern as shuffle.ts.
    * Sets the initial UI attribute value from the node config.
    */
   _initializeMobileLayoutToggle() {
-    const t = s.getConfig(this.currentNode);
+    const t = r.getConfig(this.currentNode);
     this.api.setUIEAttribute(
       e.MOBILE_LAYOUT_TOGGLE,
-      d.SELECTPICKER.items,
+      _.SELECTPICKER.items,
       t.mobileLayoutEnabled
     );
   }
@@ -147,85 +143,91 @@ class F extends P {
   _onMobileLayoutToggleChange(t) {
     if (!this.currentNode)
       return;
-    const o = s.getConfig(this.currentNode);
-    if (o.mobileLayoutEnabled === t)
-      return;
-    const i = U(this.currentNode);
-    if (t) {
-      const r = o.previousMobileCardsInRow || _;
-      s.updateConfig(
-        this.api,
-        this.currentNode,
-        {
-          mobileLayoutEnabled: !0,
-          mobileCardsInRow: r
-        },
-        "Enabled mobile layout optimization"
-      ), this.store.patchCurrentBlockConfig(
-        {
-          mobileLayoutEnabled: !0,
-          mobileCardsInRow: r
-        },
-        { triggerRefetch: !1 }
-      ), i && m(this.api, i, !1), L(this.api);
-      const u = parseInt(o.size) || 6, c = I(this.store.recommendationProducts, u);
-      g({
-        currentNode: this.currentNode,
-        documentModifier: this.api.getDocumentModifier(),
-        products: c
-      });
-    } else {
-      const r = o.mobileCardsInRow;
-      s.updateConfig(
-        this.api,
-        this.currentNode,
-        {
-          mobileLayoutEnabled: !1,
-          previousMobileCardsInRow: r,
-          mobileCardsInRow: _
-        },
-        "Disabled mobile layout optimization"
-      ), this.store.patchCurrentBlockConfig(
-        {
+    const s = r.getConfig(this.currentNode);
+    if (s.mobileLayoutEnabled !== t) {
+      if (t) {
+        const o = { mobileLayoutEnabled: !0, mobileCardsInRow: s.previousMobileCardsInRow || R }, n = parseInt(s.size) || 6, d = L(this.store.recommendationProducts, n);
+        this._commitMobileLayoutToggle(
+          o,
+          !1,
+          "Enabled mobile layout optimization",
+          (u) => {
+            C(this.api, u), I({
+              currentNode: this.currentNode,
+              documentModifier: u,
+              products: d,
+              configOverrides: o,
+              stageOnly: !0
+            });
+          }
+        ) && this.store.patchCurrentBlockConfig(o, { triggerRefetch: !1 });
+      } else {
+        const i = {
           mobileLayoutEnabled: !1,
-          mobileCardsInRow: _
-        },
-        { triggerRefetch: !1 }
-      ), i && m(this.api, i, !0), E({
-        currentNode: this.currentNode,
-        documentModifier: this.api.getDocumentModifier()
-      });
+          // Snapshot current mobile cards value before resetting
+          previousMobileCardsInRow: s.mobileCardsInRow,
+          mobileCardsInRow: R
+        };
+        this._commitMobileLayoutToggle(
+          i,
+          !0,
+          "Disabled mobile layout optimization",
+          (n) => {
+            E({
+              currentNode: this.currentNode,
+              documentModifier: n,
+              configOverrides: i,
+              stageOnly: !0
+            });
+          }
+        ) && this.store.patchCurrentBlockConfig(
+          { mobileLayoutEnabled: !1, mobileCardsInRow: R },
+          { triggerRefetch: !1 }
+        );
+      }
+      this._setFormValues(), this._updateProductsInRowVisibility();
+    }
+  }
+  // One apply: a config/class mismatch between two applies makes the block's self-heal write its own entry.
+  // Reports false when nothing reached the node, so the caller keeps the store aligned with it.
+  _commitMobileLayoutToggle(t, s, i, o) {
+    if (!this.currentNode)
+      return !1;
+    const n = this.api.getDocumentModifier(), d = A(this.currentNode);
+    try {
+      return r.stageConfig(n, this.currentNode, t), d && D(n, d, s), o(n), n.apply(new O(i)), !0;
+    } catch (l) {
+      return console.warn("[recommendation] mobile layout toggle write failed", l), !1;
     }
-    this._setFormValues(), this._updateProductsInRowVisibility();
   }
   _onProductsInRowChange(t) {
-    !this.currentNode || s.getConfig(this.currentNode).cardsInRow === t || (s.updateConfig(
-      this.api,
-      this.currentNode,
-      { cardsInRow: t },
-      `Changed products per row to ${t}`
-    ), this.store.patchCurrentBlockConfig({ cardsInRow: t }, { triggerRefetch: !1 }), this._debouncedRegenerateProductRows());
+    if (!this.currentNode || r.getConfig(this.currentNode).cardsInRow === t)
+      return;
+    const i = { cardsInRow: t }, o = this.api.getDocumentModifier();
+    r.stageConfig(o, this.currentNode, i), this.store.patchCurrentBlockConfig({ cardsInRow: t }, { triggerRefetch: !1 }), this._regenerateProductRows(o, i), o.apply(new O(`Changed products per row to ${t}`));
   }
   _onMobileCardsInRowChange(t) {
-    !this.currentNode || s.getConfig(this.currentNode).mobileCardsInRow === t || (s.updateConfig(
-      this.api,
-      this.currentNode,
-      { mobileCardsInRow: t },
-      `Changed mobile products per row to ${t}`
-    ), L(this.api), this.store.patchCurrentBlockConfig(
+    if (!this.currentNode || r.getConfig(this.currentNode).mobileCardsInRow === t)
+      return;
+    const i = { mobileCardsInRow: t }, o = this.api.getDocumentModifier();
+    r.stageConfig(o, this.currentNode, i), C(this.api, o), this.store.patchCurrentBlockConfig(
       { mobileCardsInRow: t },
       { triggerRefetch: !1 }
     ), E({
       currentNode: this.currentNode,
-      documentModifier: this.api.getDocumentModifier()
-    }));
+      documentModifier: o,
+      configOverrides: i,
+      stageOnly: !0
+    }), o.apply(new O(`Changed mobile products per row to ${t}`));
   }
-  _regenerateProductRows() {
-    const t = s.getConfig(this.currentNode), o = parseInt(t.size) || 6, i = I(this.store.recommendationProducts, o);
-    g({
+  _regenerateProductRows(t, s) {
+    const i = r.getConfig(this.currentNode), o = parseInt(i.size) || 6, n = L(this.store.recommendationProducts, o);
+    I({
       currentNode: this.currentNode,
-      documentModifier: this.api.getDocumentModifier(),
-      products: i
+      documentModifier: t,
+      products: n,
+      configOverrides: s,
+      stageOnly: !0
     });
   }
   _listenToFormUpdates() {
@@ -246,8 +248,8 @@ class F extends P {
   _listenStateUpdates() {
     let t = this.store.recommendationConfigs.orientation;
     this.storeUnsubscription = this.store.$subscribe(() => {
-      const o = this.store.recommendationConfigs.orientation;
-      o !== t && (t = o, this._updateProductsInRowVisibility());
+      const s = this.store.recommendationConfigs.orientation;
+      s !== t && (t = s, this._updateProductsInRowVisibility());
     });
   }
   /**
@@ -257,14 +259,14 @@ class F extends P {
    */
   _listenEditorModeChanges() {
     this.api.onEditorStatePropUpdated(
-      b.previewDeviceMode,
+      g.previewDeviceMode,
       () => {
-        s.getConfig(this.currentNode).mobileLayoutEnabled && this._updateProductsInRowVisibility();
+        r.getConfig(this.currentNode).mobileLayoutEnabled && this._updateProductsInRowVisibility();
       }
     );
   }
 }
 export {
   B as PRODUCT_LAYOUT_CONTROL_ID,
-  F as ProductLayoutControl
+  K as ProductLayoutControl
 };

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

@@ -1,28 +1,28 @@
 var r = Object.defineProperty;
-var f = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var n = (o, t, e) => f(o, typeof t != "symbol" ? t + "" : t, e);
+var l = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var i = (o, t, e) => l(o, typeof t != "symbol" ? t + "" : t, e);
 import { UEAttr as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as l } from "../../../common-control.js";
-import { RecommendationConfigService as s } from "../../services/configService.js";
-import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
-const h = "recommendation-shuffle-control", i = {
+import { CommonControl as f } from "../../../common-control.js";
+import { RecommendationConfigService as n } from "../../services/configService.js";
+import { useRecommendationExtensionStore as a } from "../../store/recommendation.js";
+const d = "recommendation-shuffle-control", s = {
   SHUFFLE_PRODUCTS: "shuffleProducts"
 };
-class S extends l {
+class p extends f {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching
-    n(this, "store", d());
+    i(this, "store", a());
   }
   getId() {
-    return h;
+    return d;
   }
   getTemplate() {
     return `
             <div class="shuffle-control-container" style="border-bottom: 1px solid #e0e0e0;">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Shuffle Recommended Products") }),
-      this._GuToggle(i.SHUFFLE_PRODUCTS)
+      this._GuToggle(s.SHUFFLE_PRODUCTS)
     ])}
             </div>
         `;
@@ -34,34 +34,29 @@ class S extends l {
     super.onTemplateNodeUpdated(e), this._setFormValues();
   }
   _setFormValues() {
-    const e = s.getConfig(this.currentNode);
+    const e = n.getConfig(this.currentNode);
     this.api.updateValues({
-      [i.SHUFFLE_PRODUCTS]: e.shuffleProducts
+      [s.SHUFFLE_PRODUCTS]: e.shuffleProducts
     });
   }
   _initializeToggle() {
-    const e = s.getConfig(this.currentNode);
+    const e = n.getConfig(this.currentNode);
     this.api.setUIEAttribute(
-      i.SHUFFLE_PRODUCTS,
+      s.SHUFFLE_PRODUCTS,
       u.SELECTPICKER.items,
       e.shuffleProducts
     );
   }
   _onShuffleChange(e) {
-    !this.currentNode || s.getConfig(this.currentNode).shuffleProducts === e || (s.updateConfig(
-      this.api,
-      this.currentNode,
-      { shuffleProducts: e },
-      `${e ? "Enabled" : "Disabled"} product shuffle`
-    ), this.store.patchCurrentBlockConfig({ shuffleProducts: e }));
+    this.currentNode && this.store.recommendationConfigs.shuffleProducts !== e && this.store.patchCurrentBlockConfig({ shuffleProducts: e });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(i.SHUFFLE_PRODUCTS, (e) => {
+    this.api.onValueChanged(s.SHUFFLE_PRODUCTS, (e) => {
       this._onShuffleChange(!!e);
     });
   }
 }
 export {
-  h as SHUFFLE_CONTROL_ID,
-  S as ShuffleControl
+  d as SHUFFLE_CONTROL_ID,
+  p as ShuffleControl
 };