@useinsider/guido 3.7.2-beta.1e8f93e → 3.7.2-beta.2220fb0

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

@@ -1,74 +1,74 @@
 import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlockId as m } from "../../constants/blockIds.js";
-import { CURRENCY_ATTR as g, MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as v, ATTR_PRODUCT_ATTR as j } from "../../constants/selectors.js";
+import { CURRENCY_ATTR as g, MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as j, ATTR_PRODUCT_ATTR as V } from "../../constants/selectors.js";
 import { RecommendationConfigService as b } from "../../services/configService.js";
 import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
-import { prepareProductRows as _ } from "../../templates/index.js";
-import { formatPrice as V } from "../../utils/priceFormatter.js";
-import { isTdNode as W } from "../../utils/tagName.js";
-import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as T, sanitizeImageUrl as F, toDisplayableAttributeValue as G } from "../../templates/utils.js";
-const h = "recommendation-block-v2";
-function R(t) {
+import { prepareProductRows as L } from "../../templates/index.js";
+import { formatPrice as W } from "../../utils/priceFormatter.js";
+import { isTdNode as F } from "../../utils/tagName.js";
+import { getDefaultProducts as _, DEFAULT_CARD_COMPOSITION as M, sanitizeImageUrl as G, isSamePrice as Y, toDisplayableAttributeValue as K } from "../../templates/utils.js";
+const R = "recommendation-block-v2";
+function T(t) {
   if (!t)
     return null;
   if ("getAttribute" in t) {
     const e = t.getAttribute("class");
-    if (e && e.includes(h))
+    if (e && e.includes(R))
       return t;
   }
-  return "querySelector" in t ? t.querySelector(`.${h}`) ?? null : null;
+  return "querySelector" in t ? t.querySelector(`.${R}`) ?? null : null;
 }
 function E(t) {
-  const e = R(t);
+  const e = T(t);
   if (!e || !("getAttribute" in e))
     return "grid";
   const o = e.getAttribute("data-layout");
   return o === "list" || o === "horizontal" ? "list" : "grid";
 }
-function H(t) {
-  const e = R(t);
+function x(t) {
+  const e = T(t);
   if (!e || !("getAttribute" in e))
-    return T;
+    return M;
   const o = e.getAttribute("data-card-composition");
-  return o ? o.split(",").filter(Boolean) : T;
+  return o ? o.split(",").filter(Boolean) : M;
 }
-function x(t) {
+function H(t) {
   if (!t || !("childNodes" in t))
     return null;
   const e = t.childNodes(), o = e.find(
     (n) => "getType" in n && n.getType() === "text"
   );
-  return o || e.reduce((n, r) => n || !("getType" in r) || r.getType() === "text" ? n : x(r), null);
+  return o || e.reduce((n, r) => n || !("getType" in r) || r.getType() === "text" ? n : H(r), null);
 }
 function S(t, e, o) {
-  const n = x(e);
+  const n = H(e);
   return n ? (t.modifyHtml(n).setText(o), !0) : !1;
 }
 function D(t, e) {
-  return t && t.length > 0 ? t : e.length > 0 ? e : L();
+  return t && t.length > 0 ? t : e.length > 0 ? e : _();
 }
-function Y(t) {
+function X(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelector" in e))
     return;
   const n = e.querySelector(k);
   n && (o.modifyHtml(n).setInnerHtml(""), o.apply(new p("Cleared mobile row content")));
 }
-function K(t) {
+function z(t) {
   return "getOuterHTML" in t && typeof t.getOuterHTML == "function" ? t.getOuterHTML() : "";
 }
-function X(t) {
+function J(t) {
   const e = t.querySelector(".container");
   return !e || !("childNodes" in e) ? null : e.childNodes().find((n) => "getTagName" in n && n.getTagName() === "tbody") ?? e.querySelector("tbody") ?? null;
 }
-function z(t, e, o) {
-  const n = X(t);
+function Q(t, e, o) {
+  const n = J(t);
   if (!n || !("childNodes" in n))
     return;
-  const r = n.childNodes().map(K).join(""), l = `<tr class="ins-recommendation-mobile-row">${o}</tr>`;
+  const r = n.childNodes().map(z).join(""), l = `<tr class="ins-recommendation-mobile-row">${o}</tr>`;
   e.modifyHtml(n).setInnerHtml(r + l), e.apply(new p("Added mobile product row"));
 }
-function J(t) {
+function Z(t) {
   const {
     currentNode: e,
     documentModifier: o,
@@ -80,21 +80,22 @@ function J(t) {
     return;
   const i = r ?? E(e), s = b.getConfig(e);
   if (i === "list" || !s.mobileLayoutEnabled) {
-    Y({ currentNode: e, documentModifier: o });
+    X({ currentNode: e, documentModifier: o });
     return;
   }
-  const u = C(), c = D(n, u.recommendationProducts), d = l ?? H(e), a = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${_(c, i, {
+  const u = C(), c = D(n, u.recommendationProducts), d = l ?? x(e), a = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${L(c, i, {
     productsPerRow: s.mobileCardsInRow,
     composition: d,
-    filterList: u.filterList
+    filterList: u.filterList,
+    priceInline: !s.priceMovedToNextLine
   })}</table></td>`, y = e.querySelector(k);
   if (!y) {
-    z(e, o, a);
+    Q(e, o, a);
     return;
   }
   o.modifyHtml(y).setInnerHtml(a), o.apply(new p("Updated mobile product rows"));
 }
-function Q(t) {
+function ee(t) {
   const {
     currentNode: e,
     documentModifier: o,
@@ -105,17 +106,18 @@ function Q(t) {
   } = t;
   if (!e || !("querySelector" in e))
     return;
-  const s = e.querySelector(P) ?? e.querySelector(v);
+  const s = e.querySelector(P) ?? e.querySelector(j);
   if (!s)
     return;
-  const u = C(), c = D(r, u.recommendationProducts), { cardsInRow: d } = b.getConfig(e), f = i ?? H(e), a = l ?? E(e), y = _(c, a, {
+  const u = C(), c = D(r, u.recommendationProducts), { cardsInRow: d } = b.getConfig(e), f = i ?? x(e), a = l ?? E(e), { priceMovedToNextLine: y } = b.getConfig(e), v = L(c, a, {
     productsPerRow: d,
     composition: f,
-    filterList: u.filterList
+    filterList: u.filterList,
+    priceInline: !y
   });
-  o.modifyHtml(s).setInnerHtml(y).apply(new p("Updated product")), J(t), n == null || n();
+  o.modifyHtml(s).setInnerHtml(v).apply(new p("Updated product")), Z(t), n == null || n();
 }
-function M(t, e, o, n) {
+function h(t, e, o, n) {
   const l = `0 ${Math.floor(o / 2)}px`;
   let i = !1;
   return n === "grid" ? Array.from(
@@ -126,7 +128,7 @@ function M(t, e, o, n) {
     t.querySelectorAll(".product-card-wrapper")
   ).forEach((u) => {
     const c = "parentNode" in u ? u.parentNode : null;
-    c && W(c) && (e.modifyHtml(c).setStyle("padding", l), i = !0);
+    c && F(c) && (e.modifyHtml(c).setStyle("padding", l), i = !0);
   }), i;
 }
 function I(t, e, o) {
@@ -136,7 +138,7 @@ function I(t, e, o) {
     e.modifyHtml(i).setStyle("height", n), l = !0;
   }), l;
 }
-function Z(t) {
+function te(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e)
     return;
@@ -144,7 +146,7 @@ function Z(t) {
   let l = !1;
   const i = e.querySelector(P);
   if (i) {
-    l = M(
+    l = h(
       i,
       o,
       n.columnSpacing,
@@ -159,7 +161,7 @@ function Z(t) {
   }
   const s = e.querySelector(q);
   if (s) {
-    const u = M(
+    const u = h(
       s,
       o,
       n.mobileColumnSpacing,
@@ -175,9 +177,9 @@ function Z(t) {
   }
   l && o.apply(new p("Reapply spacing after regeneration"));
 }
-function me(t) {
+function ye(t) {
   const { currentNode: e, documentModifier: o, afterRegenerate: n, products: r, layout: l, composition: i } = t;
-  e && Q({
+  e && ee({
     currentNode: e,
     documentModifier: o,
     products: r,
@@ -185,13 +187,13 @@ function me(t) {
     composition: i,
     afterRegenerate: () => {
       setTimeout(() => {
-        Z({ currentNode: e, documentModifier: o });
+        te({ currentNode: e, documentModifier: o });
       }, 0), n == null || n();
     }
   });
 }
-function pe(t, e) {
-  return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...L(e - t.length)];
+function ge(t, e) {
+  return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ..._(e - t.length)];
 }
 function U() {
   const t = C(), { currencySettings: e } = t.recommendationConfigs, o = parseInt(e.decimalCount);
@@ -206,12 +208,12 @@ function U() {
 }
 function A(t, e = "price") {
   const o = U(), n = t[e], r = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
-  return V({
+  return W({
     price: r,
     currency: o
   });
 }
-function ee(t) {
+function oe(t) {
   var l, i;
   const e = U(), o = ((l = t.original_price) == null ? void 0 : l[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((i = t.price) == null ? void 0 : i[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, r = o > 0 ? Math.round((o - n) / o * 100) : 0;
   return r > 0 ? `-${r}%` : "0%";
@@ -225,19 +227,19 @@ function $(t) {
   }
   if (r && "querySelector" in r) {
     const u = r.querySelector("strong") ?? r.querySelector("p"), c = A(o, "original_price");
-    S(e, u ?? null, c) && (s = !0);
+    S(e, u ?? null, c) && (s = !0), e.modifyHtml(r).setAttribute("data-same-price", String(Y(o))), s = !0;
   }
   if (l && "querySelector" in l) {
     const u = l.querySelector(".omnibus-price-value") ?? null, c = A(o, "original_price");
     S(e, u, c) && (s = !0);
   }
   if (i && "querySelector" in i) {
-    const u = i.querySelector(".omnibus-discount-value") ?? null, c = ee(o);
+    const u = i.querySelector(".omnibus-discount-value") ?? null, c = oe(o);
     S(e, u, c) && (s = !0);
   }
   return s;
 }
-function te(t) {
+function ne(t) {
   const {
     documentModifier: e,
     product: o,
@@ -252,7 +254,7 @@ function te(t) {
   let d = !1;
   if (n && "querySelector" in n) {
     const f = n.querySelector("img");
-    f && (e.modifyHtml(f).setAttribute("src", F(o.image_url)).setAttribute("alt", o.name), d = !0);
+    f && (e.modifyHtml(f).setAttribute("src", G(o.image_url)).setAttribute("alt", o.name), d = !0);
     const a = n.querySelector("a");
     a && (e.modifyHtml(a).setAttribute("href", o.url), d = !0);
   }
@@ -276,18 +278,18 @@ function te(t) {
 function B(t) {
   return "querySelector" in t ? t.querySelector(P) ?? t : t;
 }
-const O = "product_attribute.";
-function oe(t, e) {
+const N = "product_attribute.";
+function re(t, e) {
   var n;
   let o;
-  if (t.startsWith(O)) {
-    const r = t.slice(O.length);
+  if (t.startsWith(N)) {
+    const r = t.slice(N.length);
     o = (n = e.product_attributes) == null ? void 0 : n[r];
   } else
     o = e[t];
-  return G(o) || null;
+  return K(o) || null;
 }
-function ne(t, e, o) {
+function ie(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
@@ -299,7 +301,7 @@ function ne(t, e, o) {
   n.forEach((i) => {
     if (!("getAttribute" in i))
       return;
-    const s = i.getAttribute(j);
+    const s = i.getAttribute(V);
     if (!s)
       return;
     const u = r.get(s) ?? [];
@@ -311,7 +313,7 @@ function ne(t, e, o) {
     i.slice(0, u).forEach((c, d) => {
       if (!("querySelector" in c))
         return;
-      const f = oe(s, o[d]);
+      const f = re(s, o[d]);
       if (f === null)
         return;
       const a = c.querySelector("p") ?? null;
@@ -319,7 +321,7 @@ function ne(t, e, o) {
     });
   }), l;
 }
-function w(t, e, o) {
+function O(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
@@ -339,7 +341,7 @@ function w(t, e, o) {
   ), d = Math.min(n.length, o.length);
   let f = !1;
   for (let a = 0; a < d; a++) {
-    const y = te({
+    const y = ne({
       documentModifier: e,
       product: o[a],
       imageEl: n[a] ?? null,
@@ -352,9 +354,9 @@ function w(t, e, o) {
     });
     f = f || y;
   }
-  return ne(t, e, o) && (f = !0), f;
+  return ie(t, e, o) && (f = !0), f;
 }
-function ye(t) {
+function Se(t) {
   const { currentNode: e, documentModifier: o, products: n } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
@@ -363,12 +365,12 @@ function ye(t) {
     `[esd-extension-block-id="${m.IMAGE}"]`
   ).length !== n.length)
     return !1;
-  let i = w(r, o, n);
+  let i = O(r, o, n);
   const s = E(e), u = b.getConfig(e);
   if (s !== "list" && u.mobileLayoutEnabled && "querySelector" in e) {
     const c = e.querySelector(q);
     if (c) {
-      const d = w(
+      const d = O(
         c,
         o,
         n
@@ -378,7 +380,7 @@ function ye(t) {
   }
   return i && o.apply(new p("Updated product content in-place")), !0;
 }
-function N(t, e, o) {
+function w(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
@@ -402,7 +404,7 @@ function N(t, e, o) {
     }) && (u = !0);
   return u;
 }
-function ge(t) {
+function be(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
@@ -410,19 +412,19 @@ function ge(t) {
   if (r.length === 0)
     return !1;
   const l = B(e);
-  let i = N(l, o, r);
+  let i = w(l, o, r);
   const s = E(e), u = b.getConfig(e);
   if (s !== "list" && u.mobileLayoutEnabled && "querySelector" in e) {
     const c = e.querySelector(q);
     if (c) {
-      const d = N(c, o, r);
+      const d = w(c, o, r);
       i = i || d;
     }
   }
   return i && o.apply(new p("Updated price formatting in-place")), i;
 }
-function Se(t) {
-  const { currentNode: e, documentModifier: o, currency: n } = t, r = R(e);
+function Ee(t) {
+  const { currentNode: e, documentModifier: o, currency: n } = t, r = T(e);
   if (!r)
     return;
   const l = n.alignment === "before" ? "0" : "1", i = (s, u) => {
@@ -431,17 +433,17 @@ function Se(t) {
   i(g.CURRENCY, n.code), i(g.SYMBOL, n.symbol), i(g.ALIGNMENT, l), i(g.THOUSAND_SEPARATOR, n.thousandSeparator), i(g.DECIMAL_SEPARATOR, n.decimalSeparator), i(g.DECIMAL_COUNT, n.decimalCount.toString()), o.apply(new p("Update currency attributes"));
 }
 export {
-  pe as adjustProductsToSize,
+  ge as adjustProductsToSize,
   A as formatProductPrice,
-  R as getBlockElement,
-  H as getCardComposition,
+  T as getBlockElement,
+  x as getCardComposition,
   E as getCurrentLayout,
-  Z as reapplySpacing,
-  J as regenerateMobileProductRows,
-  Q as regenerateProductRows,
-  me as regenerateProductRowsWithStyles,
-  Se as setCurrencyAttributes,
-  ge as updatePricesInPlace,
-  ye as updateProductContentInPlace,
-  te as updateSingleProductContent
+  te as reapplySpacing,
+  Z as regenerateMobileProductRows,
+  ee as regenerateProductRows,
+  ye as regenerateProductRowsWithStyles,
+  Ee as setCurrencyAttributes,
+  be as updatePricesInPlace,
+  Se as updateProductContentInPlace,
+  ne as updateSingleProductContent
 };

package/dist/extensions/Blocks/Recommendation/extension.js

@@ -1,44 +1,45 @@
 import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlock as m } from "./block.js";
-import { RecommendationBlockControl as n } from "./controls/main/index.js";
+import n from "./canvasPreview.css.js";
+import { RecommendationBlockControl as i } from "./controls/main/index.js";
 import "./store/recommendation.js";
-import { NameControls as i } from "./controls/name/index.js";
-import { PriceControls as e } from "./controls/price/index.js";
-import { OldPriceControls as s } from "./controls/oldPrice/index.js";
-import { OmnibusPriceControls as l } from "./controls/omnibusPrice/index.js";
-import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
-import { ButtonControls as p } from "./controls/button/index.js";
-import { ImageControls as c } from "./controls/image/index.js";
+import { NameControls as e } from "./controls/name/index.js";
+import { PriceControls as s } from "./controls/price/index.js";
+import { OldPriceControls as l } from "./controls/oldPrice/index.js";
+import { OmnibusPriceControls as a } from "./controls/omnibusPrice/index.js";
+import { OmnibusDiscountControls as p } from "./controls/omnibusDiscount/index.js";
+import { ButtonControls as c } from "./controls/button/index.js";
+import { ImageControls as f } from "./controls/image/index.js";
 import { CustomAttributeControls as C } from "./controls/customAttribute/index.js";
-import { SpacingControl as f } from "./controls/spacing/index.js";
-import { CardBackgroundColorControl as d } from "./controls/cardBackground/index.js";
-import { RecommendationCardCompositionControl as u } from "./controls/cardComposition/index.js";
-import { SyncInfoMessageControl as g } from "./controls/syncInfoMessage.js";
-import { RecommendationIconsRegistry as R } from "./iconsRegistry.js";
-import y from "./recommendation.css.js";
-import { SettingsPanel as B } from "./settingsPanel.js";
-const b = [
-  i,
+import { SpacingControl as d } from "./controls/spacing/index.js";
+import { CardBackgroundColorControl as u } from "./controls/cardBackground/index.js";
+import { RecommendationCardCompositionControl as g } from "./controls/cardComposition/index.js";
+import { SyncInfoMessageControl as y } from "./controls/syncInfoMessage.js";
+import { RecommendationIconsRegistry as P } from "./iconsRegistry.js";
+import R from "./recommendation.css.js";
+import { SettingsPanel as S } from "./settingsPanel.js";
+const w = [
   e,
   s,
   l,
   a,
   p,
   c,
-  C
-], P = [
-  n,
-  d,
   f,
+  C
+], B = [
+  i,
   u,
-  g
-], S = [
-  ...P,
-  ...b.flatMap((o) => Object.values(o))
-], K = S.reduce(
+  d,
+  g,
+  y
+], b = [
+  ...B,
+  ...w.flatMap((o) => Object.values(o))
+], Q = b.reduce(
   (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(B)
-).addStyles(y).withIconsRegistry(R).build();
+  new r().addBlock(m).withSettingsPanelRegistry(S)
+).addStyles(R).withPreviewStyles(n).withIconsRegistry(P).build();
 export {
-  K as default
+  Q as default
 };

package/dist/extensions/Blocks/Recommendation/iconsRegistry.js

@@ -1,8 +1,8 @@
 import r from "../../../static/assets/info.svg.js";
-import { IconsRegistry as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class h extends t {
-  registerIconsSvg(C) {
-    C["recommendation-icon"] = `
+import { IconsRegistry as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class h extends C {
+  registerIconsSvg(t) {
+    t["recommendation-icon"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                 <path d="M10 4.4C10 4.73137 9.73012 4.99622 9.40108 5.0355C6.92202 5.33143 5 7.44126 5 10C5 12.5587 
                 6.92202 14.6686 9.40108 14.9645C9.73012 15.0038 10 15.2686 10 15.6V18.4C10 18.7314 9.73137 19 9.4 
@@ -44,14 +44,14 @@ class h extends t {
                 3.40029 12.0082 3.25285 11.7656 3.15234C11.365 2.98638 11.0001 2.64849 11 2.21484V2Z" 
                 fill="currentColor"/>
             </svg>
-        `, C["grid-orientation"] = `
+        `, t["grid-orientation"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                 <rect x="1" y="1" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
                 <rect x="12" y="1" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
                 <rect x="1" y="12" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
                 <rect x="12" y="12" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
             </svg>
-        `, C["list-orientation"] = `
+        `, t["list-orientation"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                 <circle cx="3" cy="4" r="1" stroke="currentColor" stroke-width="1"/>
                 <rect x="7" y="3" width="11" height="2" rx="1"/>
@@ -60,7 +60,21 @@ class h extends t {
                 <circle cx="3" cy="16" r="1" stroke="currentColor" stroke-width="1"/>
                 <rect x="7" y="15" width="11" height="2" rx="1"/>
             </svg>
-        `, C["migration-info-icon"] = r;
+        `, t["vertical-orientation"] = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M19 10V16C19 16.5523 18.5523 17 18 17H2C1.44772 17 1 16.5523 1 16V10H19Z"
+                    stroke="currentColor" stroke-width="2" fill="none"/>
+                <path d="M2 3H18C18.5523 3 19 3.44772 19 4V10H1V4C1 3.44772 1.44772 3 2 3Z" stroke="currentColor"
+                stroke-width="2" fill="none"/>
+            </svg>
+        `, t["horizontal-orientation"] = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+                <path d="M10 19H4C3.44772 19 3 18.5523 3 18V2C3 1.44772 3.44772 1 4 1H10V19Z" stroke="currentColor"
+                    stroke-width="2" fill="none"/>
+                <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor"
+                    stroke-width="2" fill="none"/>
+            </svg>
+        `, t["migration-info-icon"] = r;
   }
 }
 export {

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

@@ -18,6 +18,13 @@ const n = `/* Utils */
     padding: 0
 }
 
+/* Group the two price-placement rows (orientation + hide-if-same) into one
+   container — drop the divider the editor adds between stacked setting rows.
+   Ancestor added so this out-specifies the editor's \`.two-columns:not(:first-child)\`. */
+.recommendation-controls-container .price-placement-control-container .container.two-columns {
+    border-top: none;
+}
+
 /* Right-align the mobile layout toggle within the two-column grid */
 .product-layout-control-container ue-switcher {
     justify-self: end;
@@ -143,15 +150,68 @@ ue-orderable.orderable-disabled .droppable-icon {
     color: var(--guido-color-danger-500);
 }
 
-/* Disable drag for list layout */
-.orderable-list.orderable-disabled .drag-handle {
-    display: none;
+/* ─── Inline "Product Prices" group: nested 2-item sub-drag ───────────── */
+.orderable-item.price-group-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
 }
 
-.orderable-list.orderable-disabled .orderable-item {
+.price-group-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.price-suborderable-list {
+    display: flex;
+    flex-direction: column;
+    margin-left: 4px;
+    padding-left: 8px;
+    border-left: 2px solid #eee;
+}
+
+.price-suborderable-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 0;
+    background: var(--guido-color-white);
     cursor: default;
+    transition: background 0.15s;
+    box-sizing: border-box;
+}
+
+.price-suborderable-item:hover {
+    background: #fafafa;
+}
+
+.price-suborderable-item.dragging {
+    opacity: 0.5;
+    background: var(--guido-color-gray-1);
+}
+
+.price-suborderable-item.drag-over {
+    border-top: 2px solid var(--guido-color-primary-500, #0A2ECC);
+}
+
+.price-suborderable-item .item-label {
+    font-size: 13px;
 }
 
+.sub-drag-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    cursor: move;
+    user-select: none;
+    color: var(--guido-color-gray-600);
+}
+
+
 /* ─── Migration Info Box ─────────────────────────────────────────────── */
 /* Shown in the settings panel title when a block was migrated from legacy */