@useinsider/guido 3.18.2 → 3.19.0-beta.019f238

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

@@ -1,43 +1,64 @@
-var d = Object.defineProperty;
-var y = (r, s, t) => s in r ? d(r, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[s] = t;
-var o = (r, s, t) => y(r, typeof s != "symbol" ? s + "" : s, t);
-import { ACADEMY_LINKS as m } from "../../../../../enums/academy.js";
-import { CommonControl as h } from "../../../common-control.js";
-import { useRecommendationExtensionStore as u } from "../../store/recommendation.js";
-const p = "recommendation-strategy-control";
-class f extends h {
+var C = Object.defineProperty;
+var $ = (c, n, t) => n in c ? C(c, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[n] = t;
+var i = (c, n, t) => $(c, typeof n != "symbol" ? n + "" : n, t);
+import { useLegacyStrategyConversion as k } from "../../../../../composables/useLegacyStrategyConversion.js";
+import { ACADEMY_LINKS as L } from "../../../../../enums/academy.js";
+import { useOnboardingStore as w } from "../../../../../stores/onboarding.js";
+import { CommonControl as A } from "../../../common-control.js";
+import { RRS_CONFIG_VERSION as N } from "../../constants/defaultConfig.js";
+import { RecommendationConfigService as b } from "../../services/configService.js";
+import { useRecommendationExtensionStore as R } from "../../store/recommendation.js";
+const E = "recommendation-strategy-control";
+class M extends A {
   constructor() {
     super(...arguments);
-    o(this, "store", u());
-    o(this, "storeUnsubscription", () => {
+    i(this, "store", R());
+    i(this, "onboardingStore", w());
+    i(this, "legacyConversion", k());
+    i(this, "storeUnsubscription", () => {
     });
-    o(this, "listeners", []);
-    o(this, "lastPaintedState", null);
+    i(this, "listeners", []);
+    i(this, "lastPaintedState", null);
   }
   getId() {
-    return p;
+    return E;
   }
   getTemplate() {
     const t = this.api.translate(
       "You can assign a recommendation strategy by selecting an existing one or creating a new one to show specific content."
-    ), e = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy");
+    ), e = this.api.translate("For more information, you can"), s = this.api.translate("visit Academy"), o = this.api.translate("Legacy Strategy"), a = this.api.translate(
+      "Note that this is an older version of the Recommendation Strategy. We recommend you update it to the new Recommendation Strategy for an improved experience."
+    );
     return `
             <div class="strategy-control-container">
-                <div class="strategy-control-header">
-                    <h3 class="strategy-control-title">${this.api.translate("Recommendation Strategy")}</h3>
-                </div>
-                <div class="strategy-control-description-row">
-                    <p class="strategy-control-description">
-                        ${t}
-                        ${e}
-                        <a
-                            href="${m.EMAIL_RECOMMENDATION_BLOCK}"
-                            target="_blank"
-                            rel="noopener noreferrer">${a}</a>.
-                    </p>
+                <div data-strategy-loading-state>
+                    <div class="strategy-control-header">
+                        <span class="guido-skeleton guido-skeleton--strategy-title"></span>
+                    </div>
+                    <div class="strategy-control-description-row">
+                        <span class="guido-skeleton guido-skeleton--strategy-description"></span>
+                    </div>
+                    <div class="strategy-control-skeleton-row">
+                        <span class="guido-skeleton guido-skeleton--strategy-cta"></span>
+                        <span class="guido-skeleton guido-skeleton--strategy-cta"></span>
+                    </div>
                 </div>
-                <div data-strategy-empty-state>
-                    ${this._GuTwoColumns([
+                <div data-strategy-content style="display: none;">
+                    <div class="strategy-control-header">
+                        <h3 class="strategy-control-title">${this.api.translate("Recommendation Strategy")}</h3>
+                    </div>
+                    <div class="strategy-control-description-row">
+                        <p class="strategy-control-description">
+                            ${t}
+                            ${e}
+                            <a
+                                href="${L.EMAIL_RECOMMENDATION_BLOCK}"
+                                target="_blank"
+                                rel="noopener noreferrer">${s}</a>.
+                        </p>
+                    </div>
+                    <div data-strategy-empty-state style="display: none;">
+                        ${this._GuTwoColumns([
       this._GuButton({
         name: "assignStrategy",
         label: this.api.translate("Assign Strategy"),
@@ -48,77 +69,131 @@ class f extends h {
         name: "createStrategy",
         label: this.api.translate("Create New Strategy"),
         id: "guido__btn-create-strategy",
-        className: "strategy-control-cta primary",
-        disabled: !0
+        className: "strategy-control-cta primary"
       })
     ], "strategy-control-cta-row")}
-                </div>
-                <div data-strategy-assigned-state style="display: none;">
-                    <div class="strategy-control-name-band">
-                        <span class="strategy-control-name" data-strategy-name></span>
                     </div>
-                    <div class="strategy-control-actions">
-                        ${this._strategyAction({
+                    <div data-strategy-legacy-state style="display: none;">
+                        <div class="strategy-control-notice-row">
+                            <div class="strategy-control-notice">
+                                <p class="strategy-control-notice-text">${a}</p>
+                            </div>
+                        </div>
+                        <div class="strategy-control-name-band">
+                            <span class="strategy-control-name">${o}</span>
+                            ${this._strategyAction({
+      id: "guido__btn-update-legacy-strategy",
+      label: this.api.translate("Update"),
+      modifier: "update"
+    })}
+                        </div>
+                        <div class="strategy-control-actions">
+                            ${this._strategyAction({
+      id: "guido__btn-change-legacy-strategy",
+      label: this.api.translate("Change"),
+      modifier: "change"
+    })}
+                            ${this._strategyAction({
+      id: "guido__btn-remove-legacy-strategy",
+      label: this.api.translate("Remove"),
+      modifier: "remove"
+    })}
+                        </div>
+                    </div>
+                    <div data-strategy-assigned-state style="display: none;">
+                        <div class="strategy-control-name-band">
+                            <span class="strategy-control-name" data-strategy-name></span>
+                            <span
+                                class="guido-skeleton guido-skeleton--strategy-name" data-strategy-name-skeleton></span>
+                        </div>
+                        <div class="strategy-control-actions">
+                            ${this._strategyAction({
       id: "guido__btn-change-strategy",
       label: this.api.translate("Change"),
       modifier: "change"
     })}
-                        ${this._strategyAction({
+                            ${this._strategyAction({
       id: "guido__btn-remove-strategy",
       label: this.api.translate("Remove"),
       modifier: "remove"
     })}
+                        </div>
                     </div>
                 </div>
             </div>
         `;
   }
-  _strategyAction({ id: t, label: e, modifier: a }) {
+  _strategyAction({ id: t, label: e, modifier: s }) {
     return `
             <button
                 id="${t}"
                 type="button"
-                class="strategy-control-action strategy-control-action--${a}">
+                class="strategy-control-action strategy-control-action--${s}">
                 <span>${e}</span>
             </button>
         `;
   }
   onRender() {
-    this._teardown(), this._setupButtonListeners(), this._renderState(), this.storeUnsubscription = this.store.$subscribe(() => {
+    this._teardown(), this.store.strategyPanelOpen = !0, this._setupButtonListeners(), this._renderState(), this.storeUnsubscription = this.store.$subscribe(() => {
       this._renderState();
-    }), this.store.recommendationConfigs.strategyId && !this.store.strategies.length && this.store.fetchStrategies().catch(() => {
+    }), this.store.recommendationConfigs.strategyId && !this.store.strategiesFetched && this.store.fetchStrategies().catch(() => {
     });
   }
+  /**
+   * Whether the document itself says this block has no strategy.
+   *
+   * Read the node, not the store: when the main control cannot resolve the block id off the
+   * node it never syncs the persisted config, so the store still holds defaults (empty
+   * strategyId) for an assigned block.
+   */
+  _isNodeUnassigned() {
+    if (!b.hasConfig(this.currentNode))
+      return !1;
+    const t = b.getConfig(this.currentNode);
+    return !t.strategyId && (t.configVersion ?? 0) >= N;
+  }
   onDestroy() {
     this._teardown();
   }
   _teardown() {
-    this.storeUnsubscription(), this.storeUnsubscription = () => {
+    this.store.strategyPanelOpen = !1, this.storeUnsubscription(), this.storeUnsubscription = () => {
     }, this.lastPaintedState = null, this.listeners.forEach(({ element: t, handler: e }) => t.removeEventListener("click", e)), this.listeners = [];
   }
   _setupButtonListeners() {
     const t = this.getContainer();
     if (!t)
       return;
-    const e = (a, n) => {
-      const i = t.querySelector(a);
-      i && (i.addEventListener("click", n), this.listeners.push({ element: i, handler: n }));
+    const e = (s, o) => {
+      const a = t.querySelector(s);
+      a && (a.addEventListener("click", o), this.listeners.push({ element: a, handler: o }));
     };
-    e("#guido__btn-assign-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-change-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-remove-strategy", () => this.store.openRemoveStrategyModal());
+    e("#guido__btn-assign-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-create-strategy", () => this.store.openStrategyCreation()), e("#guido__btn-change-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-change-legacy-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-remove-strategy", () => this.store.openRemoveStrategyModal()), e("#guido__btn-remove-legacy-strategy", () => this.store.openRemoveStrategyModal()), e("#guido__btn-update-legacy-strategy", () => {
+      this.legacyConversion.convertLegacyStrategy();
+    });
   }
   _renderState() {
-    var l;
-    const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((l = this.store.assignedStrategy) == null ? void 0 : l.name) ?? "" : "", a = `${t}\0${e}`;
-    if (a === this.lastPaintedState)
+    var _;
+    const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((_ = this.store.assignedStrategy) == null ? void 0 : _.name) ?? "" : "", s = !!t && !e && (this.store.strategiesLoading || !this.store.strategiesSettled), o = this.store.legacyConversionLoading, a = this.store.isLegacyStrategyBlock, h = `${t}\0${e}\0${s}\0${o}\0${a}`;
+    if (h === this.lastPaintedState)
+      return;
+    const r = this.getContainer();
+    if (!r)
       return;
-    const n = this.getContainer();
-    if (!n)
+    const d = r.querySelector("[data-strategy-empty-state]"), y = r.querySelector("[data-strategy-assigned-state]"), g = r.querySelector("[data-strategy-legacy-state]"), p = r.querySelector("[data-strategy-loading-state]"), u = r.querySelector("[data-strategy-content]"), m = r.querySelector("[data-strategy-name]"), v = r.querySelector("[data-strategy-name-skeleton]");
+    if (!d || !y || !g)
       return;
-    const i = n.querySelector("[data-strategy-empty-state]"), c = n.querySelector("[data-strategy-assigned-state]"), g = n.querySelector("[data-strategy-name]");
-    !i || !c || (i.style.display = t ? "none" : "", c.style.display = t ? "" : "none", g && t && (g.textContent = e || `#${t}`), this.lastPaintedState = a);
+    p && (p.style.display = "none"), u && (u.style.display = "");
+    const f = t ? y : a ? g : d;
+    [d, y, g].forEach((l) => {
+      l.style.display = l === f ? "" : "none";
+    }), g.querySelectorAll("button").forEach((l) => {
+      l.disabled = o;
+    }), g.classList.toggle("is-converting", o), !t && this._isNodeUnassigned() && this.onboardingStore.startOnboarding("recommendationStrategyOnboarding");
+    const S = this.store.currentRecommendationId;
+    a && S !== null && this.store.blockStates[S] && this.onboardingStore.startOnboarding("recommendationLegacyStrategyOnboarding"), m && (m.style.display = s ? "none" : "", t && !s && (m.textContent = e || `#${t}`)), v && (v.style.display = s ? "block" : "none"), this.lastPaintedState = h;
   }
 }
 export {
-  p as STRATEGY_CONTROL_ID,
-  f as StrategyControl
+  E as STRATEGY_CONTROL_ID,
+  M as StrategyControl
 };

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

@@ -87,21 +87,21 @@ function j(e, t = {}) {
     documentModifier: o,
     products: r,
     layout: s,
-    composition: i
+    composition: l
   } = e;
   if (!n || !("querySelector" in n))
     return !1;
-  const u = s ?? P(n), l = y.getConfig(n);
-  if (u === "list" || !l.mobileLayoutEnabled)
+  const u = s ?? P(n), i = y.getConfig(n);
+  if (u === "list" || !i.mobileLayoutEnabled)
     return te({ currentNode: n, documentModifier: o });
-  const c = A(), a = $(r, c.recommendationProducts), f = i ?? U(n, c.filterList), p = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${k(a, u, {
-    productsPerRow: l.mobileCardsInRow,
+  const c = A(), a = $(r, c.recommendationProducts), f = l ?? U(n, c.filterList), p = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${k(a, u, {
+    productsPerRow: i.mobileCardsInRow,
     composition: f,
     filterList: c.filterList,
-    priceInline: !l.priceMovedToNextLine,
+    priceInline: !i.priceMovedToNextLine,
     // Match the initial render's gutter so a regeneration never changes block height (SD-143023, #386).
-    cellPadding: v(l.mobileColumnSpacing),
-    rowSpacingPx: l.mobileRowSpacing,
+    cellPadding: v(i.mobileColumnSpacing),
+    rowSpacingPx: i.mobileRowSpacing,
     ...t
   })}</table></td>`, E = n.querySelector(w);
   return E ? (o.modifyHtml(E).setInnerHtml(p), !0) : (re(n, o, p), !1);
@@ -115,17 +115,17 @@ function ie(e, t = {}) {
     documentModifier: o,
     products: r,
     layout: s,
-    composition: i
+    composition: l
   } = e;
   if (!n || !("querySelector" in n))
     return !1;
   const u = n.querySelector(L) ?? n.querySelector(W);
   if (!u)
     return !1;
-  const l = A(), c = $(r, l.recommendationProducts), { cardsInRow: a } = y.getConfig(n), f = i ?? U(n, l.filterList), d = s ?? P(n), p = y.getConfig(n), E = k(c, d, {
+  const i = A(), c = $(r, i.recommendationProducts), { cardsInRow: a } = y.getConfig(n), f = l ?? U(n, i.filterList), d = s ?? P(n), p = y.getConfig(n), E = k(c, d, {
     productsPerRow: a,
     composition: f,
-    filterList: l.filterList,
+    filterList: i.filterList,
     priceInline: !p.priceMovedToNextLine,
     // Match the initial render's gutter so a regeneration never changes block height (SD-143023, #386).
     cellPadding: v(p.columnSpacing),
@@ -151,14 +151,14 @@ function ce(e, t, n) {
   const r = o.getAttribute(R);
   if (!r)
     return !1;
-  const s = A(), i = r.split(",").filter(Boolean), u = D(i, o, s.filterList), l = [], c = u.join(",") !== i.join(",");
-  c && l.push([R, u.join(",")]);
+  const s = A(), l = r.split(",").filter(Boolean), u = D(l, o, s.filterList), i = [], c = u.join(",") !== l.join(",");
+  c && i.push([R, u.join(",")]);
   const a = le(
     o.getAttribute(q)
   ), f = a && z(a, o, s.filterList);
-  if (a && f && f.join(",") !== a.join(",") && l.push([q, JSON.stringify(f)]), l.length === 0)
+  if (a && f && f.join(",") !== a.join(",") && i.push([q, JSON.stringify(f)]), i.length === 0)
     return !1;
-  if (l.forEach(([d, p]) => {
+  if (i.forEach(([d, p]) => {
     t.modifyHtml(o).setAttribute(d, p);
   }), c && y.hasConfig(e)) {
     const d = {
@@ -176,20 +176,20 @@ function Te(e) {
     afterRegenerate: o,
     products: r,
     layout: s,
-    composition: i,
+    composition: l,
     skipStylePreservation: u
   } = e;
   if (!t)
-    return;
-  const l = u ? {} : x(t), c = {
+    return !1;
+  const i = u ? {} : x(t), c = {
     currentNode: t,
     documentModifier: n,
     products: r,
     layout: s,
-    composition: i
+    composition: l
   };
-  let a = ie(c, l);
-  a = j(c, l) || a, a && (ce(t, n, i), n.apply(new S("Regenerate products with styles"))), o == null || o();
+  let a = ie(c, i);
+  return a = j(c, i) || a, a && (ce(t, n, l), n.apply(new S("Regenerate products with styles"))), o == null || o(), a;
 }
 function Re(e, t) {
   return e.length === t ? e : e.length > t ? e.slice(0, t) : [...e, ...H(t - e.length)];
@@ -213,28 +213,28 @@ function T(e, t = "price") {
   });
 }
 function ue(e) {
-  var s, i;
-  const t = F(), n = ((s = e.original_price) == null ? void 0 : s[t.code]) ?? Object.values(e.original_price ?? {})[0] ?? 0, o = ((i = e.price) == null ? void 0 : i[t.code]) ?? Object.values(e.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - o) / n * 100) : 0;
+  var s, l;
+  const t = F(), n = ((s = e.original_price) == null ? void 0 : s[t.code]) ?? Object.values(e.original_price ?? {})[0] ?? 0, o = ((l = e.price) == null ? void 0 : l[t.code]) ?? Object.values(e.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - o) / n * 100) : 0;
   return r > 0 ? `-${r}%` : "0%";
 }
 function K(e) {
-  const { documentModifier: t, product: n, priceEl: o, oldPriceEl: r, omnibusPriceEl: s, omnibusDiscountEl: i } = e;
+  const { documentModifier: t, product: n, priceEl: o, oldPriceEl: r, omnibusPriceEl: s, omnibusDiscountEl: l } = e;
   let u = !1;
   if (o && "querySelector" in o) {
-    const l = o.querySelector("strong") ?? o.querySelector("p"), c = T(n, "price");
-    b(t, l ?? null, c) && (u = !0);
+    const i = o.querySelector("strong") ?? o.querySelector("p"), c = T(n, "price");
+    b(t, i ?? null, c) && (u = !0);
   }
   if (r && "querySelector" in r) {
-    const l = r.querySelector("strong") ?? r.querySelector("p"), c = T(n, "original_price");
-    b(t, l ?? null, c) && (u = !0), t.modifyHtml(r).setAttribute("data-same-price", String(Q(n))), u = !0;
+    const i = r.querySelector("strong") ?? r.querySelector("p"), c = T(n, "original_price");
+    b(t, i ?? null, c) && (u = !0), t.modifyHtml(r).setAttribute("data-same-price", String(Q(n))), u = !0;
   }
   if (s && "querySelector" in s) {
-    const l = s.querySelector(".omnibus-price-value") ?? null, c = T(n, "original_price");
-    b(t, l, c) && (u = !0);
+    const i = s.querySelector(".omnibus-price-value") ?? null, c = T(n, "original_price");
+    b(t, i, c) && (u = !0);
   }
-  if (i && "querySelector" in i) {
-    const l = i.querySelector(".omnibus-discount-value") ?? null, c = ue(n);
-    b(t, l, c) && (u = !0);
+  if (l && "querySelector" in l) {
+    const i = l.querySelector(".omnibus-discount-value") ?? null, c = ue(n);
+    b(t, i, c) && (u = !0);
   }
   return u;
 }
@@ -245,9 +245,9 @@ function se(e) {
     imageEl: o,
     nameEl: r,
     priceEl: s,
-    oldPriceEl: i,
+    oldPriceEl: l,
     omnibusPriceEl: u,
-    omnibusDiscountEl: l,
+    omnibusDiscountEl: i,
     buttonEl: c
   } = e;
   let a = !1;
@@ -265,9 +265,9 @@ function se(e) {
     documentModifier: t,
     product: n,
     priceEl: s,
-    oldPriceEl: i,
+    oldPriceEl: l,
     omnibusPriceEl: u,
-    omnibusDiscountEl: l
+    omnibusDiscountEl: i
   }) && (a = !0), c && "querySelector" in c) {
     const f = c.querySelector("a.es-button") || c.querySelector("a");
     f && (t.modifyHtml(f).setAttribute("href", n.url), a = !0);
@@ -296,19 +296,19 @@ function fe(e, t, n) {
   if (o.length === 0)
     return !1;
   const r = /* @__PURE__ */ new Map();
-  o.forEach((i) => {
-    if (!("getAttribute" in i))
+  o.forEach((l) => {
+    if (!("getAttribute" in l))
       return;
-    const u = i.getAttribute(Y);
+    const u = l.getAttribute(Y);
     if (!u)
       return;
-    const l = r.get(u) ?? [];
-    l.push(i), r.set(u, l);
+    const i = r.get(u) ?? [];
+    i.push(l), r.set(u, i);
   });
   let s = !1;
-  return r.forEach((i, u) => {
-    const l = Math.min(i.length, n.length);
-    i.slice(0, l).forEach((c, a) => {
+  return r.forEach((l, u) => {
+    const i = Math.min(l.length, n.length);
+    l.slice(0, i).forEach((c, a) => {
       if (!("querySelector" in c))
         return;
       const f = ae(u, n[a]);
@@ -328,11 +328,11 @@ function O(e, t, n) {
     `[esd-extension-block-id="${m.NAME}"]`
   ), s = e.querySelectorAll(
     `[esd-extension-block-id="${m.PRICE}"]`
-  ), i = e.querySelectorAll(
+  ), l = e.querySelectorAll(
     `[esd-extension-block-id="${m.OLD_PRICE}"]`
   ), u = e.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
-  ), l = e.querySelectorAll(
+  ), i = e.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
   ), c = e.querySelectorAll(
     `[esd-extension-block-id="${m.BUTTON}"]`
@@ -345,9 +345,9 @@ function O(e, t, n) {
       imageEl: o[d] ?? null,
       nameEl: r[d] ?? null,
       priceEl: s[d] ?? null,
-      oldPriceEl: i[d] ?? null,
+      oldPriceEl: l[d] ?? null,
       omnibusPriceEl: u[d] ?? null,
-      omnibusDiscountEl: l[d] ?? null,
+      omnibusDiscountEl: i[d] ?? null,
       buttonEl: c[d] ?? null
     });
     f = f || p;
@@ -355,28 +355,28 @@ function O(e, t, n) {
   return fe(e, t, n) && (f = !0), f;
 }
 function qe(e) {
-  const { currentNode: t, documentModifier: n, products: o } = e;
+  const { currentNode: t, documentModifier: n, products: o, onApplied: r } = e;
   if (!t || !("querySelectorAll" in t))
     return !1;
-  const r = V(t);
-  if (!("querySelectorAll" in r) || r.querySelectorAll(
+  const s = V(t);
+  if (!("querySelectorAll" in s) || s.querySelectorAll(
     `[esd-extension-block-id="${m.IMAGE}"]`
   ).length !== o.length)
     return !1;
-  let i = O(r, n, o);
-  const u = P(t), l = y.getConfig(t);
-  if (u !== "list" && l.mobileLayoutEnabled && "querySelector" in t) {
-    const c = t.querySelector(N);
-    if (c) {
-      const a = O(
-        c,
+  let u = O(s, n, o);
+  const i = P(t), c = y.getConfig(t);
+  if (i !== "list" && c.mobileLayoutEnabled && "querySelector" in t) {
+    const a = t.querySelector(N);
+    if (a) {
+      const f = O(
+        a,
         n,
         o
       );
-      i = i || a;
+      u = u || f;
     }
   }
-  return i && n.apply(new S("Updated product content in-place")), !0;
+  return u && (n.apply(new S("Updated product content in-place")), r == null || r()), !0;
 }
 function _(e, t, n) {
   if (!("querySelectorAll" in e))
@@ -387,10 +387,10 @@ function _(e, t, n) {
     `[esd-extension-block-id="${m.OLD_PRICE}"]`
   ), s = e.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
-  ), i = e.querySelectorAll(
+  ), l = e.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
   ), u = Math.min(o.length, n.length);
-  let l = !1;
+  let i = !1;
   for (let c = 0; c < u; c++)
     K({
       documentModifier: t,
@@ -398,9 +398,9 @@ function _(e, t, n) {
       priceEl: o[c] ?? null,
       oldPriceEl: r[c] ?? null,
       omnibusPriceEl: s[c] ?? null,
-      omnibusDiscountEl: i[c] ?? null
-    }) && (l = !0);
-  return l;
+      omnibusDiscountEl: l[c] ?? null
+    }) && (i = !0);
+  return i;
 }
 function Me(e) {
   const { currentNode: t, documentModifier: n } = e;
@@ -412,25 +412,25 @@ function Me(e) {
   if (r.length === 0)
     return !1;
   const s = V(t);
-  let i = _(s, n, r);
-  const u = P(t), l = y.getConfig(t);
-  if (u !== "list" && l.mobileLayoutEnabled && "querySelector" in t) {
+  let l = _(s, n, r);
+  const u = P(t), i = y.getConfig(t);
+  if (u !== "list" && i.mobileLayoutEnabled && "querySelector" in t) {
     const c = t.querySelector(N);
     if (c) {
       const a = _(c, n, r);
-      i = i || a;
+      l = l || a;
     }
   }
-  return i && n.apply(new S("Updated price formatting in-place")), i;
+  return l && n.apply(new S("Updated price formatting in-place")), l;
 }
 function he(e) {
   const { currentNode: t, documentModifier: n, currency: o } = e, r = C(t);
   if (!r)
     return;
-  const s = o.alignment === "before" ? "0" : "1", i = (u, l) => {
-    n.modifyHtml(r).setAttribute(u, l);
+  const s = o.alignment === "before" ? "0" : "1", l = (u, i) => {
+    n.modifyHtml(r).setAttribute(u, i);
   };
-  i(g.CURRENCY, o.code), i(g.SYMBOL, o.symbol), i(g.ALIGNMENT, s), i(g.THOUSAND_SEPARATOR, o.thousandSeparator), i(g.DECIMAL_SEPARATOR, o.decimalSeparator), i(g.DECIMAL_COUNT, o.decimalCount.toString()), n.apply(new S("Update currency attributes"));
+  l(g.CURRENCY, o.code), l(g.SYMBOL, o.symbol), l(g.ALIGNMENT, s), l(g.THOUSAND_SEPARATOR, o.thousandSeparator), l(g.DECIMAL_SEPARATOR, o.decimalSeparator), l(g.DECIMAL_COUNT, o.decimalCount.toString()), n.apply(new S("Update currency attributes"));
 }
 export {
   Re as adjustProductsToSize,

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

@@ -134,7 +134,10 @@ ue-orderable.orderable-disabled .droppable-icon {
     border-top: 2px solid var(--guido-color-primary-500, #0A2ECC);
 }
 
-.drag-handle {
+/* Namespaced: Stripo ships a global \`.drag-handle { position: absolute }\` for its
+   floating popups, which knocked this handle out of flow (SD-151734). */
+.guido-drag-handle {
+    cursor: move;
     user-select: none;
     display: flex;
     align-items: center;
@@ -144,13 +147,13 @@ ue-orderable.orderable-disabled .droppable-icon {
     flex-shrink: 0;
 }
 
-.drag-handle .drag-handle-btn .button {
+.guido-drag-handle .guido-drag-handle-btn .button {
     padding: 0;
     min-width: auto;
     cursor: move;
 }
 
-.drag-handle .drag-handle-btn .button .icon-button {
+.guido-drag-handle .guido-drag-handle-btn .button .icon-button {
     color: var(--guido-color-gray-600);
 }