@useinsider/guido 3.7.0-beta.24a845f → 3.7.0-beta.24bdfa3

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

@@ -1,36 +1,36 @@
 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 y, MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as v, ATTR_PRODUCT_ATTR as V } from "../../constants/selectors.js";
-import { RecommendationConfigService as E } from "../../services/configService.js";
+import { CURRENCY_ATTR as y, MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as V, ATTR_PRODUCT_ATTR as W } 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 W } from "../../utils/priceFormatter.js";
-import { isTdNode as j } from "../../utils/tagName.js";
-import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as h, sanitizeImageUrl as F, toDisplayableAttributeValue as G } from "../../templates/utils.js";
-const M = "recommendation-block-v2";
-function R(t) {
+import { formatPrice as j } from "../../utils/priceFormatter.js";
+import { isTdNode as F } from "../../utils/tagName.js";
+import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as R, sanitizeImageUrl as G, toDisplayableAttributeValue as Y } from "../../templates/utils.js";
+const h = "recommendation-block-v2";
+function M(t) {
   if (!t)
     return null;
   if ("getAttribute" in t) {
     const e = t.getAttribute("class");
-    if (e && e.includes(M))
+    if (e && e.includes(h))
       return t;
   }
-  return "querySelector" in t ? t.querySelector(`.${M}`) ?? null : null;
+  return "querySelector" in t ? t.querySelector(`.${h}`) ?? null : null;
 }
-function b(t) {
-  const e = R(t);
+function E(t) {
+  const e = M(t);
   if (!e || !("getAttribute" in e))
     return "grid";
   const o = e.getAttribute("data-layout");
   return o === "list" || o === "horizontal" ? "list" : "grid";
 }
 function x(t) {
-  const e = R(t);
+  const e = M(t);
   if (!e || !("getAttribute" in e))
-    return h;
+    return R;
   const o = e.getAttribute("data-card-composition");
-  return o ? o.split(",").filter(Boolean) : h;
+  return o ? o.split(",").filter(Boolean) : R;
 }
 function D(t) {
   if (!t || !("childNodes" in t))
@@ -47,14 +47,14 @@ function S(t, e, o) {
 function U(t, e) {
   return t && t.length > 0 ? t : e.length > 0 ? e : L();
 }
-function Y(t) {
+function K(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 X(t) {
   const {
     currentNode: e,
     documentModifier: o,
@@ -64,9 +64,9 @@ function K(t) {
   } = t;
   if (!e || !("querySelector" in e))
     return;
-  const r = i ?? b(e), s = E.getConfig(e);
+  const r = i ?? E(e), s = b.getConfig(e);
   if (r === "list" || !s.mobileLayoutEnabled) {
-    Y({ currentNode: e, documentModifier: o });
+    K({ currentNode: e, documentModifier: o });
     return;
   }
   const u = e.querySelector(k);
@@ -75,11 +75,12 @@ function K(t) {
   const l = C(), d = U(n, l.recommendationProducts), a = c ?? x(e), g = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${_(d, r, {
     productsPerRow: s.mobileCardsInRow,
     composition: a,
-    filterList: l.filterList
+    filterList: l.filterList,
+    priceInline: !s.priceMovedToNextLine
   })}</table></td>`;
   o.modifyHtml(u).setInnerHtml(g), o.apply(new p("Updated mobile product rows"));
 }
-function X(t) {
+function z(t) {
   const {
     currentNode: e,
     documentModifier: o,
@@ -90,15 +91,16 @@ function X(t) {
   } = t;
   if (!e || !("querySelector" in e))
     return;
-  const s = e.querySelector(P) ?? e.querySelector(v);
+  const s = e.querySelector(P) ?? e.querySelector(V);
   if (!s)
     return;
-  const u = C(), l = U(i, u.recommendationProducts), { cardsInRow: d } = u.recommendationConfigs, a = r ?? x(e), f = c ?? b(e), g = _(l, f, {
+  const u = C(), l = U(i, u.recommendationProducts), { cardsInRow: d } = u.recommendationConfigs, a = r ?? x(e), f = c ?? E(e), { priceMovedToNextLine: g } = b.getConfig(e), v = _(l, f, {
     productsPerRow: d,
     composition: a,
-    filterList: u.filterList
+    filterList: u.filterList,
+    priceInline: !g
   });
-  o.modifyHtml(s).setInnerHtml(g).apply(new p("Updated product")), K(t), n == null || n();
+  o.modifyHtml(s).setInnerHtml(v).apply(new p("Updated product")), X(t), n == null || n();
 }
 function T(t, e, o, n) {
   const c = `0 ${Math.floor(o / 2)}px`;
@@ -111,7 +113,7 @@ function T(t, e, o, n) {
     t.querySelectorAll(".product-card-wrapper")
   ).forEach((u) => {
     const l = "parentNode" in u ? u.parentNode : null;
-    l && j(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
+    l && F(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
   }), r;
 }
 function I(t, e, o) {
@@ -121,11 +123,11 @@ function I(t, e, o) {
     e.modifyHtml(r).setStyle("height", n), c = !0;
   }), c;
 }
-function z(t) {
+function J(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e)
     return;
-  const n = E.getConfig(e), i = b(e);
+  const n = b.getConfig(e), i = E(e);
   let c = !1;
   const r = e.querySelector(P);
   if (r) {
@@ -160,9 +162,9 @@ function z(t) {
   }
   c && o.apply(new p("Reapply spacing after regeneration"));
 }
-function ae(t) {
+function de(t) {
   const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: c, composition: r } = t;
-  e && X({
+  e && z({
     currentNode: e,
     documentModifier: o,
     products: i,
@@ -170,12 +172,12 @@ function ae(t) {
     composition: r,
     afterRegenerate: () => {
       setTimeout(() => {
-        z({ currentNode: e, documentModifier: o });
+        J({ currentNode: e, documentModifier: o });
       }, 0), n == null || n();
     }
   });
 }
-function de(t, e) {
+function fe(t, e) {
   return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...L(e - t.length)];
 }
 function H() {
@@ -191,12 +193,12 @@ function H() {
 }
 function A(t, e = "price") {
   const o = H(), n = t[e], i = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
-  return W({
+  return j({
     price: i,
     currency: o
   });
 }
-function J(t) {
+function Q(t) {
   var c, r;
   const e = H(), o = ((c = t.original_price) == null ? void 0 : c[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((r = t.price) == null ? void 0 : r[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, i = o > 0 ? Math.round((o - n) / o * 100) : 0;
   return i > 0 ? `-${i}%` : "0%";
@@ -217,12 +219,12 @@ function $(t) {
     S(e, u, l) && (s = !0);
   }
   if (r && "querySelector" in r) {
-    const u = r.querySelector(".omnibus-discount-value") ?? null, l = J(o);
+    const u = r.querySelector(".omnibus-discount-value") ?? null, l = Q(o);
     S(e, u, l) && (s = !0);
   }
   return s;
 }
-function Q(t) {
+function Z(t) {
   const {
     documentModifier: e,
     product: o,
@@ -237,7 +239,7 @@ function Q(t) {
   let d = !1;
   if (n && "querySelector" in n) {
     const a = n.querySelector("img");
-    a && (e.modifyHtml(a).setAttribute("src", F(o.image_url)).setAttribute("alt", o.name), d = !0);
+    a && (e.modifyHtml(a).setAttribute("src", G(o.image_url)).setAttribute("alt", o.name), d = !0);
     const f = n.querySelector("a");
     f && (e.modifyHtml(f).setAttribute("href", o.url), d = !0);
   }
@@ -262,7 +264,7 @@ function B(t) {
   return "querySelector" in t ? t.querySelector(P) ?? t : t;
 }
 const O = "product_attribute.";
-function Z(t, e) {
+function ee(t, e) {
   var n;
   let o;
   if (t.startsWith(O)) {
@@ -270,9 +272,9 @@ function Z(t, e) {
     o = (n = e.product_attributes) == null ? void 0 : n[i];
   } else
     o = e[t];
-  return G(o) || null;
+  return Y(o) || null;
 }
-function ee(t, e, o) {
+function te(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
@@ -284,7 +286,7 @@ function ee(t, e, o) {
   n.forEach((r) => {
     if (!("getAttribute" in r))
       return;
-    const s = r.getAttribute(V);
+    const s = r.getAttribute(W);
     if (!s)
       return;
     const u = i.get(s) ?? [];
@@ -296,7 +298,7 @@ function ee(t, e, o) {
     r.slice(0, u).forEach((l, d) => {
       if (!("querySelector" in l))
         return;
-      const a = Z(s, o[d]);
+      const a = ee(s, o[d]);
       if (a === null)
         return;
       const f = l.querySelector("p") ?? null;
@@ -304,7 +306,7 @@ function ee(t, e, o) {
     });
   }), c;
 }
-function w(t, e, o) {
+function N(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
@@ -324,7 +326,7 @@ function w(t, e, o) {
   ), d = Math.min(n.length, o.length);
   let a = !1;
   for (let f = 0; f < d; f++) {
-    const g = Q({
+    const g = Z({
       documentModifier: e,
       product: o[f],
       imageEl: n[f] ?? null,
@@ -337,9 +339,9 @@ function w(t, e, o) {
     });
     a = a || g;
   }
-  return ee(t, e, o) && (a = !0), a;
+  return te(t, e, o) && (a = !0), a;
 }
-function fe(t) {
+function me(t) {
   const { currentNode: e, documentModifier: o, products: n } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
@@ -348,12 +350,12 @@ function fe(t) {
     `[esd-extension-block-id="${m.IMAGE}"]`
   ).length !== n.length)
     return !1;
-  let r = w(i, o, n);
-  const s = b(e), u = E.getConfig(e);
+  let r = N(i, o, n);
+  const s = E(e), u = b.getConfig(e);
   if (s !== "list" && u.mobileLayoutEnabled && "querySelector" in e) {
     const l = e.querySelector(q);
     if (l) {
-      const d = w(
+      const d = N(
         l,
         o,
         n
@@ -363,7 +365,7 @@ function fe(t) {
   }
   return r && 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(
@@ -387,7 +389,7 @@ function N(t, e, o) {
     }) && (u = !0);
   return u;
 }
-function me(t) {
+function pe(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
@@ -395,19 +397,19 @@ function me(t) {
   if (i.length === 0)
     return !1;
   const c = B(e);
-  let r = N(c, o, i);
-  const s = b(e), u = E.getConfig(e);
+  let r = w(c, o, i);
+  const s = E(e), u = b.getConfig(e);
   if (s !== "list" && u.mobileLayoutEnabled && "querySelector" in e) {
     const l = e.querySelector(q);
     if (l) {
-      const d = N(l, o, i);
+      const d = w(l, o, i);
       r = r || d;
     }
   }
   return r && o.apply(new p("Updated price formatting in-place")), r;
 }
-function pe(t) {
-  const { currentNode: e, documentModifier: o, currency: n } = t, i = R(e);
+function ye(t) {
+  const { currentNode: e, documentModifier: o, currency: n } = t, i = M(e);
   if (!i)
     return;
   const c = n.alignment === "before" ? "0" : "1", r = (s, u) => {
@@ -416,17 +418,17 @@ function pe(t) {
   r(y.CURRENCY, n.code), r(y.SYMBOL, n.symbol), r(y.ALIGNMENT, c), r(y.THOUSAND_SEPARATOR, n.thousandSeparator), r(y.DECIMAL_SEPARATOR, n.decimalSeparator), r(y.DECIMAL_COUNT, n.decimalCount.toString()), o.apply(new p("Update currency attributes"));
 }
 export {
-  de as adjustProductsToSize,
+  fe as adjustProductsToSize,
   A as formatProductPrice,
-  R as getBlockElement,
+  M as getBlockElement,
   x as getCardComposition,
-  b as getCurrentLayout,
-  z as reapplySpacing,
-  K as regenerateMobileProductRows,
-  X as regenerateProductRows,
-  ae as regenerateProductRowsWithStyles,
-  pe as setCurrencyAttributes,
-  me as updatePricesInPlace,
-  fe as updateProductContentInPlace,
-  Q as updateSingleProductContent
+  E as getCurrentLayout,
+  J as reapplySpacing,
+  X as regenerateMobileProductRows,
+  z as regenerateProductRows,
+  de as regenerateProductRowsWithStyles,
+  ye as setCurrencyAttributes,
+  pe as updatePricesInPlace,
+  me as updateProductContentInPlace,
+  Z as updateSingleProductContent
 };

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 */
 

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

@@ -2,8 +2,8 @@ import { getRecommendationFeedSourceMaps as g, getOperatorOptions as R, PriceAtt
 import { useRecommendationApi as y } from "../../../../services/recommendationApi.js";
 import { useConfigStore as G } from "../../../../stores/config.js";
 import { defineStore as P } from "pinia";
-import { DEFAULT_CARDS_IN_ROW as F } from "../constants/layout.js";
-import { EXCLUDED_ALGORITHM_IDS as D } from "../constants/defaultConfig.js";
+import { DEFAULT_CARDS_IN_ROW as D } from "../constants/layout.js";
+import { EXCLUDED_ALGORITHM_IDS as F } from "../constants/defaultConfig.js";
 import { getDefaultProducts as S } from "../templates/utils.js";
 import { generateCompleteFilterQuery as b } from "../utils/filterUtil.js";
 import { getPartnerRecommendationParams as v } from "../utils/partnerCustomizations.js";
@@ -13,7 +13,7 @@ const h = y();
 let m = null, u = null, d = null;
 function I() {
   return {
-    cardsInRow: F,
+    cardsInRow: D,
     currencySettings: {
       name: "USD",
       value: "USD",
@@ -36,7 +36,9 @@ function I() {
     textTrimming: !0,
     unresponsive: !1,
     size: "6",
-    customAttributes: []
+    customAttributes: [],
+    priceMovedToNextLine: !0,
+    priceHideIfSameAsDiscounted: !1
   };
 }
 function k() {
@@ -116,7 +118,7 @@ const x = () => ({
     },
     getActivePredictiveAlgorithms: (t) => {
       const e = g(), r = [];
-      return t.activePredictiveAlgorithms.filter((n) => !D.includes(n)).forEach((n) => {
+      return t.activePredictiveAlgorithms.filter((n) => !F.includes(n)).forEach((n) => {
         r.push(...e.filter((c) => c.id === n));
       }), r.map((n) => ({
         text: n.name,