@useinsider/guido 3.21.0-beta.0df5409 → 3.21.0-beta.23f347e

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

@@ -2,17 +2,17 @@ var at = Object.defineProperty;
 var ct = (_, g, t) => g in _ ? at(_, g, { enumerable: !0, configurable: !0, writable: !0, value: t }) : _[g] = t;
 var v = (_, g, t) => ct(_, typeof g != "symbol" ? g + "" : g, t);
 import { ACADEMY_LINKS as dt } from "../../../../../enums/academy.js";
-import { UIElementType as f, UEAttr as O, ModificationDescription as S } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { UIElementType as f, UEAttr as O, ModificationDescription as y } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as ut } from "../../../common-control.js";
 import { ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_NAME as mt, ATTR_PRODUCT_PRICE as p, ATTR_PRODUCT_OLD_PRICE as I, ATTR_PRODUCT_OMNIBUS_PRICE as ht, ATTR_PRODUCT_OMNIBUS_DISCOUNT as pt, ATTR_PRODUCT_BUTTON as F, ATTR_RECOMMENDATION_TITLE as $, ATTR_DATA_CARD_COMPOSITION as K, ATTR_DATA_CUSTOM_ATTRIBUTES as W, ATTR_CUSTOM_PREFIX as N, SELECTOR_ATTRIBUTE_ROW as E, SELECTOR_TITLE_CELL as z, ATTR_DATA_VISIBILITY as D, ATTR_DATA_ATTRIBUTE_TYPE as R, CSS_CLASS_ATTRIBUTE_ROW as G, CSS_CLASS_SPACER as _t, BUILT_IN_DEFAULT_ATTRIBUTES as gt } from "../../constants/selectors.js";
 import { DEFAULT_COMPOSITION as Y, DEFAULT_VISIBILITY as X } from "../../constants/defaultConfig.js";
-import { RecommendationConfigService as y } from "../../services/configService.js";
+import { RecommendationConfigService as T } from "../../services/configService.js";
 import { useRecommendationExtensionStore as ft } from "../../store/recommendation.js";
 import { ATTRIBUTE_CELL_CLASS as bt, gridElementRenderer as yt, DEFAULT_CELL_PADDING as Tt, buildFillerCell as Ct } from "../../templates/grid/elementRenderer.js";
 import { listElementRenderer as St } from "../../templates/list/elementRenderer.js";
 import { buildTitleRows as At, DEFAULT_TITLE_PARAGRAPH as It, DEFAULT_TITLE_TEXT as $t } from "../../templates/titleRows.js";
 import { resolveInlinePriceOrder as vt, toDisplayName as Nt, toDisplayableAttributeValue as Et, buildElementRenderer as J } from "../../templates/utils.js";
-import { normalizeCompositionKeys as Rt, normalizeCustomAttrValues as Lt, compositionKeyToProductAttr as k, resolveRowVisibilityKeys as Ot, filterToProductAttrValue as T, findAttributeRow as Dt, rewriteLegacyRowKeyHtml as Q, bareAttributeName as H, isDefaultProductAttr as Ht, productAttrToCompositionKey as M } from "../../utils/compositionKeys.js";
+import { normalizeCompositionKeys as Rt, normalizeCustomAttrValues as Lt, compositionKeyToProductAttr as k, resolveRowVisibilityKeys as Ot, filterToProductAttrValue as C, findAttributeRow as Dt, rewriteLegacyRowKeyHtml as Q, bareAttributeName as H, isDefaultProductAttr as Ht, productAttrToCompositionKey as M } from "../../utils/compositionKeys.js";
 import { getTableDisplayValue as Pt } from "../../utils/tagName.js";
 import { isPartnerManagedBlock as wt, regenerateProductRowsWithStyles as Bt, getMainContainerTbody as kt, getCurrentLayout as Mt } from "../main/utils.js";
 const Ut = "ui-elements-recommendation-card-composition", U = ".product-card-wrapper > tbody", Z = ".product-info-cell > table > tbody", tt = {
@@ -193,7 +193,7 @@ class se extends ut {
     const t = this.currentNode.getAttribute(K);
     if (t)
       return this._normalizeComposition(t.split(",").filter(Boolean));
-    const { composition: e } = y.getConfig(this.currentNode);
+    const { composition: e } = T.getConfig(this.currentNode);
     return e != null && e.length ? this._normalizeComposition([...e]) : [...Y];
   }
   /** Upgrades legacy bare-name custom keys to the canonical form. (SD-147101) */
@@ -222,7 +222,7 @@ class se extends ut {
     const t = Array.from(this.currentNode.querySelectorAll(E)), e = this._extractVisibilityFromRows(t);
     if (Object.keys(e).length > 0)
       return this._withTitlePresence(this._mergeWithDefaults(e));
-    const r = y.getConfig(this.currentNode).visibility;
+    const r = T.getConfig(this.currentNode).visibility;
     return this._withTitlePresence(this._mergeWithDefaults({ ...r }));
   }
   _withTitlePresence(t) {
@@ -282,7 +282,7 @@ class se extends ut {
       if (s && (u === p || u === I))
         return u === l.anchor ? this._createPriceGroupItemHtml(d++, l.originalFirst) : "";
       if (Ft.has(u)) {
-        const h = m.find((C) => C.key === u);
+        const h = m.find((S) => S.key === u);
         return this._createBuiltInItemHtml(h, d++);
       }
       if (u.startsWith(N)) {
@@ -397,13 +397,13 @@ class se extends ut {
     const i = /* @__PURE__ */ new Map();
     r.forEach((o) => i.set(o.attributeName, (i.get(o.attributeName) ?? 0) + 1));
     const s = new Set(e);
-    return s.delete(t), r.filter((o) => !s.has(T(o))).map((o) => ({
+    return s.delete(t), r.filter((o) => !s.has(C(o))).map((o) => ({
       text: this._toOptionLabel(
         o.displayName,
         o.type === "defaultAttribute",
         (i.get(o.attributeName) ?? 0) > 1
       ),
-      value: T(o)
+      value: C(o)
     }));
   }
   /**
@@ -536,8 +536,8 @@ class se extends ut {
       return;
     const r = e.querySelector("[data-composition-list]"), i = e.querySelector("#guido__btn-add-attribute");
     r && (this._setupDragAndDrop(r, t), this._setupDeleteHandler(r, t)), i && i.addEventListener("click", () => {
-      const s = new Set(this._readCustomAttributesFromNode()), o = this._getAddableFilters().find((n) => !s.has(T(n)));
-      o && this._onAddAttribute(T(o), o.displayName);
+      const s = new Set(this._readCustomAttributesFromNode()), o = this._getAddableFilters().find((n) => !s.has(C(n)));
+      o && this._onAddAttribute(C(o), o.displayName);
     }, { signal: t });
   }
   /**
@@ -620,8 +620,8 @@ class se extends ut {
   _onAddAttribute(t, e) {
     const r = M(t), i = this._readCompositionFromNode();
     i.push(r);
-    const s = [...this._readCustomAttributesFromNode(), t], o = this.api.getDocumentModifier();
-    this._injectCustomAttributeHtml(o, t, e, r, i), this._stageBothAttributes(o, i, s), o.apply(new S(`${this.api.translate("Add custom attribute")}: ${e}`)), this._renderOrderableItems(i, s), this._initializeCustomSelects(s), this._updateAddButtonState();
+    const s = [...this._readCustomAttributesFromNode(), t];
+    this._updateBothAttributes(i, s), this._injectCustomAttributeHtml(t, e, r, i), this._renderOrderableItems(i, s), this._initializeCustomSelects(s), this._updateAddButtonState();
   }
   /**
    * Removes a single custom attribute by its index in the customAttrs array.
@@ -631,8 +631,8 @@ class se extends ut {
     const e = this._readCustomAttributesFromNode();
     if (e[t] === void 0)
       return;
-    const i = this._readCompositionFromNode(), s = this._findNthCustomKeyIndex(i, t), o = i.filter((a, d) => d !== s), n = e.filter((a, d) => d !== t), l = this.api.getDocumentModifier();
-    this._removeCustomAttributeHtml(l, o), this._stageBothAttributes(l, o, n), l.apply(new S(this.api.translate("Remove custom attribute"))), this._renderOrderableItems(o, n), this._initializeCustomSelects(n), this._updateAddButtonState();
+    const i = this._readCompositionFromNode(), s = this._findNthCustomKeyIndex(i, t), o = i.filter((l, a) => a !== s), n = e.filter((l, a) => a !== t);
+    this._updateBothAttributes(o, n), this._removeCustomAttributeHtml(o), this._renderOrderableItems(o, n), this._initializeCustomSelects(n), this._updateAddButtonState();
   }
   /**
    * Handles changing a custom attribute's selection via its inline _GuSelect.
@@ -644,22 +644,19 @@ class se extends ut {
       return;
     const s = M(e), o = this._readCompositionFromNode(), n = this._findNthCustomKeyIndex(o, t);
     n !== -1 && (o[n] = s), r[t] = e;
-    const l = this._getDisplayNameForAttribute(e), a = this.api.getDocumentModifier();
-    this._injectCustomAttributeHtml(a, e, l, s, o), this._stageBothAttributes(a, o, r), a.apply(new S(this.api.translate("Update card composition"))), this._renderOrderableItems(o, r), this._initializeCustomSelects(r);
+    const l = this._getDisplayNameForAttribute(e);
+    this._updateBothAttributes(o, r), this._injectCustomAttributeHtml(e, l, s, o), this._renderOrderableItems(o, r), this._initializeCustomSelects(r);
   }
   _onReorder(t) {
-    if (!this.currentNode)
-      return;
     const e = t.filter((r) => r.startsWith(N)).map(k);
     this.reorderInProgress = !0;
     try {
-      const r = this.api.getDocumentModifier(), i = this._isInlinePrices();
-      this._getCurrentLayout() === "grid" && !i ? this._reorderProductAttributes(r, t) : Bt({
+      this._updateBothAttributes(t, e);
+      const r = this._isInlinePrices();
+      this._getCurrentLayout() === "grid" && !r ? this._reorderProductAttributes(t) : this.currentNode && Bt({
         currentNode: this.currentNode,
-        documentModifier: r,
-        composition: t,
-        stageOnly: !0
-      }), this._stageBothAttributes(r, t, e), r.apply(new S(this.api.translate("Reorder product attributes")));
+        documentModifier: this.api.getDocumentModifier()
+      });
     } finally {
       this.reorderInProgress = !1;
     }
@@ -682,111 +679,119 @@ class se extends ut {
     );
     return i && "getOuterHTML" in i ? Q(i.getOuterHTML(), e) : "";
   }
-  _injectCustomAttributeHtml(t, e, r, i, s) {
+  _injectCustomAttributeHtml(t, e, r, i) {
     if (!this.currentNode)
       return;
-    this._getCurrentLayout() === "grid" ? this._injectGridAttributeRow(t, e, r, i, s) : this._injectListAttributeRow(t, e, r, i, s);
+    this._getCurrentLayout() === "grid" ? this._injectGridAttributeRow(t, e, r, i) : this._injectListAttributeRow(t, e, r, i);
   }
-  _injectGridAttributeRow(t, e, r, i, s) {
-    const o = this.currentNode.querySelectorAll(U);
-    if (!(o != null && o.length))
+  _injectGridAttributeRow(t, e, r, i) {
+    const s = this.currentNode.querySelectorAll(U);
+    if (!(s != null && s.length))
       return;
-    const n = y.getConfig(this.currentNode), a = `0 ${Math.floor(n.columnSpacing / 2)}px`, d = this.store.recommendationProducts.length;
+    const o = T.getConfig(this.currentNode), l = `0 ${Math.floor(o.columnSpacing / 2)}px`, a = this.api.getDocumentModifier(), d = this.store.recommendationProducts.length;
     let c = 0;
-    o.forEach((u) => {
+    s.forEach((u) => {
       var V;
-      const h = u.querySelector(E), C = ((V = h == null ? void 0 : h.querySelectorAll(`.${bt}`)) == null ? void 0 : V.length) || 1, x = (100 / C).toFixed(2), { bgStyle: et, bgAttr: rt } = this._extractSegmentBgFromCard(u), B = d > 0 ? Math.min(C, d - c) : C, it = s.map((j) => {
-        if (j === i) {
+      const h = u.querySelector(E), S = ((V = h == null ? void 0 : h.querySelectorAll(`.${bt}`)) == null ? void 0 : V.length) || 1, x = (100 / S).toFixed(2), { bgStyle: et, bgAttr: rt } = this._extractSegmentBgFromCard(u), B = d > 0 ? Math.min(S, d - c) : S, it = i.map((j) => {
+        if (j === r) {
           const st = Array.from(
             { length: B },
             (xt, nt) => {
               const lt = this._resolveAttributeContent(
+                t,
                 e,
-                r,
                 c + nt
               );
               return this._getGridCellHtml(
-                e,
+                t,
                 lt,
                 x,
                 et,
                 rt,
-                a
+                l
               );
             }
-          ).join(""), ot = Ct(x, a).repeat(C - B);
-          return `<tr class="${G}" ${R}="${i}" ${D}="1">${st}${ot}</tr>`;
+          ).join(""), ot = Ct(x, l).repeat(S - B);
+          return `<tr class="${G}" ${R}="${r}" ${D}="1">${st}${ot}</tr>`;
         }
         return this._getExistingRowHtml(u, j);
       }).join("");
-      c += B, d > 0 && c >= d && (c = 0), t.modifyHtml(u).setInnerHtml(it);
-    });
+      c += B, d > 0 && c >= d && (c = 0), a.modifyHtml(u).setInnerHtml(it);
+    }), a.apply(new y(`${this.api.translate("Add custom attribute")}: ${e}`));
   }
-  _injectListAttributeRow(t, e, r, i, s) {
-    const o = this.currentNode.querySelectorAll(Z);
-    if (!(o != null && o.length))
+  _injectListAttributeRow(t, e, r, i) {
+    const s = this.currentNode.querySelectorAll(Z);
+    if (!(s != null && s.length))
       return;
-    const n = s.filter((l) => l !== q && l !== F);
-    o.forEach((l, a) => {
-      const d = n.map((c) => {
-        if (c === i) {
-          const u = this._resolveAttributeContent(e, r, a);
-          return this._getListRowHtml(e, u, i);
+    const o = i.filter((l) => l !== q && l !== F), n = this.api.getDocumentModifier();
+    s.forEach((l, a) => {
+      const d = o.map((c) => {
+        if (c === r) {
+          const u = this._resolveAttributeContent(t, e, a);
+          return this._getListRowHtml(t, u, r);
         }
         return this._getExistingRowHtml(l, c);
       }).join("");
-      t.modifyHtml(l).setInnerHtml(d);
-    });
+      n.modifyHtml(l).setInnerHtml(d);
+    }), n.apply(new y(`${this.api.translate("Add custom attribute")}: ${e}`));
   }
   /**
    * Removes a custom attribute by rebuilding product card content without it.
    * The composition parameter should already have the deleted key removed.
    */
-  _removeCustomAttributeHtml(t, e) {
+  _removeCustomAttributeHtml(t) {
     if (!this.currentNode)
       return;
-    if (this._getCurrentLayout() === "grid") {
+    const e = this._getCurrentLayout(), r = this.api.getDocumentModifier();
+    if (e === "grid") {
       const i = this.currentNode.querySelectorAll(U);
       i == null || i.forEach((s) => {
-        const o = this._buildCompositionHtml(s, e);
-        t.modifyHtml(s).setInnerHtml(o);
+        const o = this._buildCompositionHtml(s, t);
+        r.modifyHtml(s).setInnerHtml(o);
       });
     } else {
-      const i = e.filter((o) => o !== q && o !== F), s = this.currentNode.querySelectorAll(Z);
+      const i = t.filter((o) => o !== q && o !== F), s = this.currentNode.querySelectorAll(Z);
       s == null || s.forEach((o) => {
         const n = this._buildCompositionHtml(o, i);
-        t.modifyHtml(o).setInnerHtml(n);
+        r.modifyHtml(o).setInnerHtml(n);
       });
     }
+    r.apply(new y(this.api.translate("Remove custom attribute")));
   }
   // ========================================================================
   // DOM Mutation (Block Root Attributes, Reorder)
   // ========================================================================
   /**
-   * Stages composition and custom-attributes into the caller's batch, so one apply()
-   * lands both with the card DOM and onTemplateNodeUpdated sees consistent state.
+   * Atomically updates both composition and custom-attributes in a single apply()
+   * so that onTemplateNodeUpdated fires only once with fully consistent state.
+   * Two separate apply() calls would cause an intermediate onTemplateNodeUpdated
+   * where composition is updated but customAttributes still has the old order,
+   * producing a flicker on the custom attribute dropdowns.
    */
-  _stageBothAttributes(t, e, r) {
+  _updateBothAttributes(t, e) {
     if (!this.currentNode)
       return;
-    const i = {
-      ...y.getConfig(this.currentNode),
-      composition: e
+    const r = {
+      ...T.getConfig(this.currentNode),
+      composition: t
     };
-    t.modifyHtml(this.currentNode).setAttribute(K, e.join(",")).setAttribute(W, JSON.stringify(r)).setNodeConfig(i);
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(K, t.join(",")).setAttribute(W, JSON.stringify(e)).setNodeConfig(r).apply(new y(this.api.translate("Update card composition")));
   }
   /**
    * Reorders attribute rows within each product card based on composition order.
    * Only used for grid layout (list layout has fixed 3-column structure).
    */
-  _reorderProductAttributes(t, e) {
+  _reorderProductAttributes(t) {
     if (!this.currentNode)
       return;
-    const r = this.currentNode.querySelectorAll(U);
-    r != null && r.length && r.forEach((i) => {
-      const s = this._buildCompositionHtml(i, e);
-      t.modifyHtml(i).setInnerHtml(s);
-    });
+    const e = this.currentNode.querySelectorAll(U);
+    if (!(e != null && e.length))
+      return;
+    const r = this.api.getDocumentModifier();
+    e.forEach((i) => {
+      const s = this._buildCompositionHtml(i, t);
+      r.modifyHtml(i).setInnerHtml(s);
+    }), r.apply(new y(this.api.translate("Reorder product attributes")));
   }
   /**
    * Builds HTML string with attributes ordered according to composition.
@@ -814,23 +819,23 @@ class se extends ut {
       a.modifyHtml(c).setStyle("display", h).setAttribute(D, o);
     });
     const d = {
-      ...y.getConfig(this.currentNode),
+      ...T.getConfig(this.currentNode),
       visibility: {
         ...this._readVisibilityFromRows(),
         ...Object.fromEntries(r.map((c) => [c, e]))
       }
     };
-    a.modifyHtml(this.currentNode).setNodeConfig(d), a.apply(new S(l));
+    a.modifyHtml(this.currentNode).setNodeConfig(d), a.apply(new y(l));
   }
   /** Inline "Product Prices" group row is tagged with whichever price comes first, so it drives both keys. */
   _resolveVisibilityKeys(t) {
     return this._isInlinePrices() && t === p ? [p, I] : [t];
   }
   _isInlinePrices() {
-    return !y.getConfig(this.currentNode).priceMovedToNextLine;
+    return !T.getConfig(this.currentNode).priceMovedToNextLine;
   }
   _applyTitleVisibilityToBlock(t) {
-    const e = y.getConfig(this.currentNode), r = t ? this._resolveTitleInjection(e) : null, i = t ? [] : this._findTitleRows(), s = t ? this._hasTitle() || !r : i.length === 0;
+    const e = T.getConfig(this.currentNode), r = t ? this._resolveTitleInjection(e) : null, i = t ? [] : this._findTitleRows(), s = t ? this._hasTitle() || !r : i.length === 0;
     if (!this.currentNode || s)
       return;
     const o = this.api.getDocumentModifier();
@@ -840,7 +845,7 @@ class se extends ut {
       visibility: { ...this._readVisibilityFromRows(), [$]: t }
     });
     const n = t ? this.api.translate("visible") : this.api.translate("hidden");
-    o.apply(new S(
+    o.apply(new y(
       `${this.api.translate("Set visibility")}: ${$} → ${n}`
     ));
   }
@@ -951,7 +956,7 @@ class se extends ut {
    * or when all available filters have already been added (no unused attributes left).
    */
   _updateAddButtonState() {
-    const t = this._readCustomAttributesFromNode(), e = t.length >= b, r = new Set(t), i = this._getAddableFilters(), s = i.length > 0 && i.every((o) => r.has(T(o)));
+    const t = this._readCustomAttributesFromNode(), e = t.length >= b, r = new Set(t), i = this._getAddableFilters(), s = i.length > 0 && i.every((o) => r.has(C(o)));
     this.api.setUIEAttribute(
       tt.ADD_ATTRIBUTE,
       O.BUTTON.disabled,
@@ -984,7 +989,7 @@ class se extends ut {
   _getAddableFilters() {
     const t = /* @__PURE__ */ new Set();
     return Object.values(this.store.filterList).filter((e) => !(e.type === "defaultAttribute" && gt.has(e.attributeName))).filter((e) => {
-      const r = T(e);
+      const r = C(e);
       return t.has(r) ? !1 : (t.add(r), !0);
     });
   }
@@ -994,7 +999,7 @@ class se extends ut {
    * resolve to their own entry. Falls back to Title Case of the bare name.
    */
   _getDisplayNameForAttribute(t) {
-    const e = Object.values(this.store.filterList).find((r) => T(r) === t);
+    const e = Object.values(this.store.filterList).find((r) => C(r) === t);
     return e ? e.displayName : Nt(H(t));
   }
   /**

package/dist/extensions/Blocks/Recommendation/controls/customAttribute/textTrim.js

@@ -78,10 +78,11 @@ class g extends m {
     const e = this._getTargetElements();
     if (!e.length)
       return;
+    t && c(this.api);
     const r = this.api.getDocumentModifier();
     e.forEach((s) => {
       t ? r.modifyHtml(s).setClass(o) : r.modifyHtml(s).removeClass(o);
-    }), t && c(this.api, r), r.apply(
+    }), r.apply(
       new T(
         t ? "Enable custom attribute text trimming" : "Disable custom attribute text trimming"
       )

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

@@ -77,7 +77,12 @@ class R extends g {
       this.store.recommendationConfigs.strategy !== t && this.store.patchCurrentBlockConfig({ strategy: e.strategy, filters: e.filters });
       return;
     }
-    this.store.recommendationConfigs.strategy !== t && this.store.patchCurrentBlockConfig({ strategy: t }), this._setProductIdsVisibility(t);
+    n.updateConfig(
+      this.api,
+      this.currentNode,
+      { strategy: t },
+      `Changed algorithm to ${t}`
+    ), this.store.patchCurrentBlockConfig({ strategy: t }), this._setProductIdsVisibility(t);
   }
   _onProductIdsChange(t) {
     if (!this.currentNode)
@@ -88,7 +93,12 @@ class R extends g {
       return;
     }
     const o = t === "" ? [] : t.split(",");
-    this.store.recommendationConfigs.productIds.join(",") !== t && this.store.patchCurrentBlockConfig({ productIds: o });
+    n.updateConfig(
+      this.api,
+      this.currentNode,
+      { productIds: o },
+      "Updated product IDs"
+    ), this.store.patchCurrentBlockConfig({ productIds: o });
   }
   _listenToFormUpdates() {
     this.api.onValueChanged(i.ALGORITHM, (t) => {