@useinsider/guido 3.21.0 → 3.21.1-beta.18ab939

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

@@ -1,16 +1,16 @@
 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";
-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";
+var M = (d, n, t) => n in d ? f(d, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[n] = t;
+var l = (d, n, t) => M(d, typeof n != "symbol" ? n + "" : n, t);
+import { UEAttr as u, EditorStatePropertyType as O, PreviewDeviceMode as y } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as N } from "../../../common-control.js";
+import { RECOMMENDATION_ID_ATTR as D } from "../../constants/selectors.js";
+import { MAX_PRODUCTS_PER_ROW as L, MAX_MOBILE_PRODUCTS_PER_ROW as P, DEFAULT_MOBILE_CARDS_IN_ROW as h } 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 { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
+import { setMobileLayoutOptOut as C, ensureMobileCssRulesExist as g } from "../mobileLayout/cssRules.js";
+import { isPartnerManagedBlock as U, getBlockElement as m, getCurrentLayout as B, adjustProductsToSize as I, regenerateProductRowsWithStyles as E, regenerateMobileProductRows as T } from "./utils.js";
 import { useDebounceFn as A } from "../../../../../node_modules/@vueuse/shared/index.js";
-const B = "recommendation-product-layout-control", e = {
+const S = "recommendation-product-layout-control", e = {
   // "Products in One Row" — shown when toggle is OFF
   PRODUCT_IN_ROW: "cardsInRow",
   PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
@@ -24,19 +24,23 @@ const B = "recommendation-product-layout-control", e = {
   MOBILE_LAYOUT_TOGGLE: "mobileLayoutEnabled",
   MOBILE_LAYOUT_LABEL: "mobileLayoutLabel"
 };
-class F extends P {
+class $ extends N {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching and regeneration
-    l(this, "store", M());
+    l(this, "store", w());
     l(this, "storeUnsubscription", () => {
     });
+    // Stripo 2.81 serves the pre-toggle config from currentNode and early node updates until the toggle lands.
+    l(this, "pendingMobileLayoutEnabled", null);
+    // Stripo reuses this control across blocks, so the pending toggle is scoped to the block that set it.
+    l(this, "pendingMobileLayoutBlockId", null);
     l(this, "_debouncedRegenerateProductRows", A(() => {
       this._regenerateProductRows();
     }, 500));
   }
   getId() {
-    return B;
+    return S;
   }
   getTemplate() {
     return `
@@ -46,19 +50,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: L }),
       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: L }),
       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: P
       }),
       this._GuLabel({
         text: this.api.translate("Mobile Layout Optimization"),
@@ -78,7 +82,7 @@ class F extends P {
     this._initializeMobileLayoutToggle(), this._setFormValues(), this._updateProductsInRowVisibility(), this._syncDisabledState(), this._listenToFormUpdates(), this._listenStateUpdates(), this._listenEditorModeChanges();
   }
   onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility(), this._syncDisabledState();
+    super.onTemplateNodeUpdated(t), (this._getBlockId(t) !== this.pendingMobileLayoutBlockId || s.getConfig(t).mobileLayoutEnabled === this.pendingMobileLayoutEnabled) && (this.pendingMobileLayoutEnabled = null), this.pendingMobileLayoutEnabled === null && (this._setFormValues(), this._updateProductsInRowVisibility()), this._syncDisabledState();
   }
   /**
    * Products-per-row and mobile-layout restructure the block, which is
@@ -86,14 +90,17 @@ 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 = U(this.currentNode);
+    this.api.setUIEAttribute(e.PRODUCT_IN_ROW, u.COUNTER.disabled, t), this.api.setUIEAttribute(e.PRODUCT_IN_ROW_DESKTOP, u.COUNTER.disabled, t), this.api.setUIEAttribute(e.MOBILE_CARDS_IN_ROW, u.COUNTER.disabled, t), this.api.setUIEAttribute(e.MOBILE_LAYOUT_TOGGLE, u.SWITCHER.disabled, t);
   }
   onDestroy() {
     this.storeUnsubscription();
   }
-  _setFormValues() {
-    const t = s.getConfig(this.currentNode);
+  _getBlockId(t) {
+    const i = m(t);
+    return i && "getAttribute" in i ? i.getAttribute(D) ?? null : null;
+  }
+  _setFormValues(t = s.getConfig(this.currentNode)) {
     this.api.updateValues({
       [e.PRODUCT_IN_ROW]: t.cardsInRow,
       [e.PRODUCT_IN_ROW_DESKTOP]: t.cardsInRow,
@@ -105,7 +112,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()[O.previewDeviceMode] === y.MOBILE;
   }
   /**
    * Updates counter visibility based on layout, mobileLayoutEnabled, and editor preview mode.
@@ -118,14 +125,14 @@ class F extends P {
    * Only one row is visible at a time. This avoids setUIEAttribute on hidden
    * elements, which Stripo does not apply reliably.
    */
-  _updateProductsInRowVisibility() {
+  _updateProductsInRowVisibility(t = s.getConfig(this.currentNode)) {
     var p;
-    const t = s.getConfig(this.currentNode), i = (t.layout || w(this.currentNode)) === "grid", { mobileLayoutEnabled: r } = t, u = 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 o = (t.layout || B(this.currentNode)) === "grid", { mobileLayoutEnabled: r } = t, a = this._isMobilePreview();
+    this.api.setVisibility(e.MOBILE_LAYOUT_TOGGLE, o), this.api.setVisibility(e.MOBILE_LAYOUT_LABEL, o);
+    const c = o && !r, _ = o && r && !a, b = o && r && a;
+    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, _), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP_LABEL, _), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, b), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, b);
+    const R = (p = this.getContainer()) == null ? void 0 : p.querySelector("[data-product-layout-control]");
+    R && (R.style.display = o ? "" : "none");
   }
   /**
    * Initializes the mobile layout toggle using the same pattern as shuffle.ts.
@@ -135,7 +142,7 @@ class F extends P {
     const t = s.getConfig(this.currentNode);
     this.api.setUIEAttribute(
       e.MOBILE_LAYOUT_TOGGLE,
-      d.SELECTPICKER.items,
+      u.SELECTPICKER.items,
       t.mobileLayoutEnabled
     );
   }
@@ -147,56 +154,58 @@ class F extends P {
   _onMobileLayoutToggleChange(t) {
     if (!this.currentNode)
       return;
-    const o = s.getConfig(this.currentNode);
-    if (o.mobileLayoutEnabled === t)
+    const i = s.getConfig(this.currentNode);
+    if ((this.pendingMobileLayoutEnabled ?? i.mobileLayoutEnabled) === t)
       return;
-    const i = U(this.currentNode);
+    const o = m(this.currentNode);
+    let r;
     if (t) {
-      const r = o.previousMobileCardsInRow || _;
-      s.updateConfig(
+      const a = i.previousMobileCardsInRow || h;
+      r = s.updateConfig(
         this.api,
         this.currentNode,
         {
           mobileLayoutEnabled: !0,
-          mobileCardsInRow: r
+          mobileCardsInRow: a
         },
         "Enabled mobile layout optimization"
       ), this.store.patchCurrentBlockConfig(
         {
           mobileLayoutEnabled: !0,
-          mobileCardsInRow: r
+          mobileCardsInRow: a
         },
         { triggerRefetch: !1 }
-      ), i && m(this.api, i, !1), L(this.api);
-      const u = parseInt(o.size) || 6, c = I(this.store.recommendationProducts, u);
-      g({
+      ), o && C(this.api, o, !1), g(this.api);
+      const c = parseInt(i.size) || 6, _ = I(this.store.recommendationProducts, c);
+      E({
         currentNode: this.currentNode,
         documentModifier: this.api.getDocumentModifier(),
-        products: c
+        products: _
       });
     } else {
-      const r = o.mobileCardsInRow;
-      s.updateConfig(
+      const a = i.mobileCardsInRow;
+      r = s.updateConfig(
         this.api,
         this.currentNode,
         {
           mobileLayoutEnabled: !1,
-          previousMobileCardsInRow: r,
-          mobileCardsInRow: _
+          previousMobileCardsInRow: a,
+          mobileCardsInRow: h
         },
         "Disabled mobile layout optimization"
       ), this.store.patchCurrentBlockConfig(
         {
           mobileLayoutEnabled: !1,
-          mobileCardsInRow: _
+          mobileCardsInRow: h
         },
         { triggerRefetch: !1 }
-      ), i && m(this.api, i, !0), E({
+      ), o && C(this.api, o, !0), T({
         currentNode: this.currentNode,
-        documentModifier: this.api.getDocumentModifier()
+        documentModifier: this.api.getDocumentModifier(),
+        mobileLayoutEnabled: !1
       });
     }
-    this._setFormValues(), this._updateProductsInRowVisibility();
+    this.pendingMobileLayoutEnabled = t, this.pendingMobileLayoutBlockId = this._getBlockId(this.currentNode), this._setFormValues(r), this._updateProductsInRowVisibility(r);
   }
   _onProductsInRowChange(t) {
     !this.currentNode || s.getConfig(this.currentNode).cardsInRow === t || (s.updateConfig(
@@ -212,20 +221,20 @@ class F extends P {
       this.currentNode,
       { mobileCardsInRow: t },
       `Changed mobile products per row to ${t}`
-    ), L(this.api), this.store.patchCurrentBlockConfig(
+    ), g(this.api), this.store.patchCurrentBlockConfig(
       { mobileCardsInRow: t },
       { triggerRefetch: !1 }
-    ), E({
+    ), T({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier()
     }));
   }
   _regenerateProductRows() {
-    const t = s.getConfig(this.currentNode), o = parseInt(t.size) || 6, i = I(this.store.recommendationProducts, o);
-    g({
+    const t = s.getConfig(this.currentNode), i = parseInt(t.size) || 6, o = I(this.store.recommendationProducts, i);
+    E({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
-      products: i
+      products: o
     });
   }
   _listenToFormUpdates() {
@@ -246,8 +255,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 i = this.store.recommendationConfigs.orientation;
+      i !== t && (t = i, this._updateProductsInRowVisibility());
     });
   }
   /**
@@ -257,7 +266,7 @@ class F extends P {
    */
   _listenEditorModeChanges() {
     this.api.onEditorStatePropUpdated(
-      b.previewDeviceMode,
+      O.previewDeviceMode,
       () => {
         s.getConfig(this.currentNode).mobileLayoutEnabled && this._updateProductsInRowVisibility();
       }
@@ -265,6 +274,6 @@ class F extends P {
   }
 }
 export {
-  B as PRODUCT_LAYOUT_CONTROL_ID,
-  F as ProductLayoutControl
+  S as PRODUCT_LAYOUT_CONTROL_ID,
+  $ as ProductLayoutControl
 };