@useinsider/guido 3.2.0-beta.e01b42a → 3.2.0-beta.e69fb3b

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

@@ -1,14 +1,14 @@
 import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlockId as f } from "../../constants/blockIds.js";
-import { MOBILE_CONTAINER_SELECTOR as P, MOBILE_ROW_SELECTOR as k, CURRENCY_ATTR as y, DESKTOP_CONTAINER_SELECTOR as q, CONTAINER_SELECTOR as $ } from "../../constants/selectors.js";
 import { RecommendationConfigService as E } from "../../services/configService.js";
 import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
-import { prepareProductRows as T } from "../../templates/index.js";
-import { formatPrice as B } from "../../utils/priceFormatter.js";
-import { isTdNode as v } from "../../utils/tagName.js";
-import { getDefaultProducts as _, DEFAULT_CARD_COMPOSITION as R, sanitizeImageUrl as j } from "../../templates/utils.js";
+import { prepareProductRows as k } from "../../templates/index.js";
+import { formatPrice as $ } from "../../utils/priceFormatter.js";
+import { isTdNode as B } from "../../utils/tagName.js";
+import { RecommendationBlockId as m } from "../../constants/blockIds.js";
+import { MOBILE_CONTAINER_SELECTOR as P, MOBILE_ROW_SELECTOR as T, CURRENCY_ATTR as y, DESKTOP_CONTAINER_SELECTOR as q, CONTAINER_SELECTOR as v } from "../../constants/selectors.js";
+import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as M, sanitizeImageUrl as j } from "../../templates/utils.js";
 const h = "recommendation-block-v2";
-function M(t) {
+function R(t) {
   if (!t)
     return null;
   if ("getAttribute" in t) {
@@ -18,36 +18,36 @@ function M(t) {
   }
   return "querySelector" in t ? t.querySelector(`.${h}`) ?? null : null;
 }
-function g(t) {
-  const e = M(t);
+function b(t) {
+  const e = R(t);
   if (!e || !("getAttribute" in e))
     return "grid";
   const o = e.getAttribute("data-layout");
   return o === "list" || o === "horizontal" ? "list" : "grid";
 }
-function L(t) {
-  const e = M(t);
+function _(t) {
+  const e = R(t);
   if (!e || !("getAttribute" in e))
-    return R;
+    return M;
   const o = e.getAttribute("data-card-composition");
-  return o ? o.split(",").filter(Boolean) : R;
+  return o ? o.split(",").filter(Boolean) : M;
 }
-function b(t, e, o) {
+function g(t, e, o) {
   if (!e || !("childNodes" in e))
     return !1;
-  const i = e.childNodes().find(
+  const r = e.childNodes().find(
     (c) => "getType" in c && c.getType() === "text"
   );
-  return i ? (t.modifyHtml(i).setText(o), !0) : !1;
+  return r ? (t.modifyHtml(r).setText(o), !0) : !1;
 }
-function x(t, e) {
-  return t && t.length > 0 ? t : e.length > 0 ? e : _();
+function D(t, e) {
+  return t && t.length > 0 ? t : e.length > 0 ? e : L();
 }
 function V(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelector" in e))
     return;
-  const n = e.querySelector(k);
+  const n = e.querySelector(T);
   n && (o.modifyHtml(n).setInnerHtml(""), o.apply(new p("Cleared mobile row content")));
 }
 function W(t) {
@@ -55,22 +55,23 @@ function W(t) {
     currentNode: e,
     documentModifier: o,
     products: n,
-    layout: i,
+    layout: r,
     composition: c
   } = t;
   if (!e || !("querySelector" in e))
     return;
-  const r = i ?? g(e), u = E.getConfig(e);
-  if (r === "list" || !u.mobileLayoutEnabled) {
+  const i = r ?? b(e), u = E.getConfig(e);
+  if (i === "list" || !u.mobileLayoutEnabled) {
     V({ currentNode: e, documentModifier: o });
     return;
   }
-  const s = e.querySelector(k);
+  const s = e.querySelector(T);
   if (!s)
     return;
-  const l = C(), a = x(n, l.recommendationProducts), m = c ?? L(e), S = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${T(a, r, {
+  const l = C(), a = D(n, l.recommendationProducts), f = c ?? _(e), S = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${k(a, i, {
     productsPerRow: u.mobileCardsInRow,
-    composition: m
+    composition: f,
+    filterList: l.filterList
   })}</table></td>`;
   o.modifyHtml(s).setInnerHtml(S), o.apply(new p("Updated mobile product rows"));
 }
@@ -79,58 +80,59 @@ function G(t) {
     currentNode: e,
     documentModifier: o,
     afterRegenerate: n,
-    products: i,
+    products: r,
     layout: c,
-    composition: r
+    composition: i
   } = t;
   if (!e || !("querySelector" in e))
     return;
-  const u = e.querySelector(q) ?? e.querySelector($);
+  const u = e.querySelector(q) ?? e.querySelector(v);
   if (!u)
     return;
-  const s = C(), l = x(i, s.recommendationProducts), { cardsInRow: a } = s.recommendationConfigs, m = r ?? L(e), d = c ?? g(e), S = T(l, d, {
+  const s = C(), l = D(r, s.recommendationProducts), { cardsInRow: a } = s.recommendationConfigs, f = i ?? _(e), d = c ?? b(e), S = k(l, d, {
     productsPerRow: a,
-    composition: m
+    composition: f,
+    filterList: s.filterList
   });
-  o.modifyHtml(u).setInnerHtml(S).apply(new p("Updated product")), W(t), n == null || n();
+  o.modifyHtml(u).setInnerHtml(S).apply(new p("Updated product")), W(t), n?.();
 }
 function I(t, e, o, n) {
   const c = `0 ${Math.floor(o / 2)}px`;
-  let r = !1;
+  let i = !1;
   return n === "grid" ? Array.from(
     t.querySelectorAll(".attribute-cell")
   ).forEach((s) => {
-    e.modifyHtml(s).setStyle("padding", c), r = !0;
+    e.modifyHtml(s).setStyle("padding", c), i = !0;
   }) : Array.from(
     t.querySelectorAll(".product-card-wrapper")
   ).forEach((s) => {
     const l = "parentNode" in s ? s.parentNode : null;
-    l && v(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
-  }), r;
+    l && B(l) && (e.modifyHtml(l).setStyle("padding", c), i = !0);
+  }), i;
 }
 function O(t, e, o) {
-  const n = `${o}px`, i = Array.from(t.querySelectorAll(".spacer"));
+  const n = `${o}px`, r = Array.from(t.querySelectorAll(".spacer"));
   let c = !1;
-  return i.forEach((r) => {
-    e.modifyHtml(r).setStyle("height", n), c = !0;
+  return r.forEach((i) => {
+    e.modifyHtml(i).setStyle("height", n), c = !0;
   }), c;
 }
 function Y(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e)
     return;
-  const n = E.getConfig(e), i = g(e);
+  const n = E.getConfig(e), r = b(e);
   let c = !1;
-  const r = e.querySelector(q);
-  if (r) {
+  const i = e.querySelector(q);
+  if (i) {
     c = I(
-      r,
+      i,
       o,
       n.columnSpacing,
-      i
+      r
     );
     const l = O(
-      r,
+      i,
       o,
       n.rowSpacing
     );
@@ -142,7 +144,7 @@ function Y(t) {
       u,
       o,
       n.mobileColumnSpacing,
-      i
+      r
     );
     c = c || s;
     const l = O(
@@ -155,24 +157,24 @@ function Y(t) {
   c && o.apply(new p("Reapply spacing after regeneration"));
 }
 function re(t) {
-  const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: c, composition: r } = t;
+  const { currentNode: e, documentModifier: o, afterRegenerate: n, products: r, layout: c, composition: i } = t;
   e && G({
     currentNode: e,
     documentModifier: o,
-    products: i,
+    products: r,
     layout: c,
-    composition: r,
+    composition: i,
     afterRegenerate: () => {
       setTimeout(() => {
         Y({ currentNode: e, documentModifier: o });
-      }, 0), n == null || n();
+      }, 0), n?.();
     }
   });
 }
 function ie(t, e) {
-  return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ..._(e - t.length)];
+  return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...L(e - t.length)];
 }
-function D() {
+function x() {
   const t = C(), { currencySettings: e } = t.recommendationConfigs, o = parseInt(e.decimalCount);
   return {
     code: e.value,
@@ -184,35 +186,34 @@ function D() {
   };
 }
 function A(t, e = "price") {
-  const o = D(), n = t[e], i = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
-  return B({
-    price: i,
+  const o = x(), n = t[e], r = n?.[o.code] ?? Object.values(n ?? {})[0] ?? 0;
+  return $({
+    price: r,
     currency: o
   });
 }
 function F(t) {
-  var c, r;
-  const e = D(), 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%";
+  const e = x(), o = t.original_price?.[e.code] ?? Object.values(t.original_price ?? {})[0] ?? 0, n = t.price?.[e.code] ?? Object.values(t.price ?? {})[0] ?? 0, r = o > 0 ? Math.round((o - n) / o * 100) : 0;
+  return r > 0 ? `-${r}%` : "0%";
 }
 function H(t) {
-  const { documentModifier: e, product: o, priceEl: n, oldPriceEl: i, omnibusPriceEl: c, omnibusDiscountEl: r } = t;
+  const { documentModifier: e, product: o, priceEl: n, oldPriceEl: r, omnibusPriceEl: c, omnibusDiscountEl: i } = t;
   let u = !1;
   if (n && "querySelector" in n) {
-    const s = n.querySelector("strong"), l = A(o, "price");
-    b(e, s, l) && (u = !0);
+    const s = n.querySelector("strong") ?? null, l = A(o, "price");
+    g(e, s, l) && (u = !0);
   }
-  if (i && "querySelector" in i) {
-    const s = i.querySelector("strong"), l = A(o, "original_price");
-    b(e, s, l) && (u = !0);
+  if (r && "querySelector" in r) {
+    const s = r.querySelector("strong") ?? null, l = A(o, "original_price");
+    g(e, s, l) && (u = !0);
   }
   if (c && "querySelector" in c) {
-    const s = c.querySelector(".omnibus-price-value"), l = A(o, "original_price");
-    b(e, s, l) && (u = !0);
+    const s = c.querySelector(".omnibus-price-value") ?? null, l = A(o, "original_price");
+    g(e, s, l) && (u = !0);
   }
-  if (r && "querySelector" in r) {
-    const s = r.querySelector(".omnibus-discount-value"), l = F(o);
-    b(e, s, l) && (u = !0);
+  if (i && "querySelector" in i) {
+    const s = i.querySelector(".omnibus-discount-value") ?? null, l = F(o);
+    g(e, s, l) && (u = !0);
   }
   return u;
 }
@@ -221,34 +222,34 @@ function K(t) {
     documentModifier: e,
     product: o,
     imageEl: n,
-    nameEl: i,
+    nameEl: r,
     priceEl: c,
-    oldPriceEl: r,
+    oldPriceEl: i,
     omnibusPriceEl: u,
     omnibusDiscountEl: s,
     buttonEl: l
   } = t;
   let a = !1;
   if (n && "querySelector" in n) {
-    const m = n.querySelector("img");
-    m && (e.modifyHtml(m).setAttribute("src", j(o.image_url)).setAttribute("alt", o.name), a = !0);
+    const f = n.querySelector("img");
+    f && (e.modifyHtml(f).setAttribute("src", j(o.image_url)).setAttribute("alt", o.name), a = !0);
     const d = n.querySelector("a");
     d && (e.modifyHtml(d).setAttribute("href", o.url), a = !0);
   }
-  if (i && "querySelector" in i) {
-    const m = i.querySelector("strong");
-    b(e, m, o.name) && (a = !0);
+  if (r && "querySelector" in r) {
+    const f = r.querySelector("strong") ?? null;
+    g(e, f, o.name) && (a = !0);
   }
   if (H({
     documentModifier: e,
     product: o,
     priceEl: c,
-    oldPriceEl: r,
+    oldPriceEl: i,
     omnibusPriceEl: u,
     omnibusDiscountEl: s
   }) && (a = !0), l && "querySelector" in l) {
-    const m = l.querySelector("a.es-button") || l.querySelector("a");
-    m && (e.modifyHtml(m).setAttribute("href", o.url), a = !0);
+    const f = l.querySelector("a.es-button") || l.querySelector("a");
+    f && (e.modifyHtml(f).setAttribute("href", o.url), a = !0);
   }
   return a;
 }
@@ -259,48 +260,48 @@ function w(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
-    `[esd-extension-block-id="${f.IMAGE}"]`
-  ), i = t.querySelectorAll(
-    `[esd-extension-block-id="${f.NAME}"]`
-  ), c = t.querySelectorAll(
-    `[esd-extension-block-id="${f.PRICE}"]`
+    `[esd-extension-block-id="${m.IMAGE}"]`
   ), r = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OLD_PRICE}"]`
+    `[esd-extension-block-id="${m.NAME}"]`
+  ), c = t.querySelectorAll(
+    `[esd-extension-block-id="${m.PRICE}"]`
+  ), i = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OLD_PRICE}"]`
   ), u = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_PRICE}"]`
+    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
   ), s = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_DISCOUNT}"]`
+    `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
   ), l = t.querySelectorAll(
-    `[esd-extension-block-id="${f.BUTTON}"]`
+    `[esd-extension-block-id="${m.BUTTON}"]`
   ), a = Math.min(n.length, o.length);
-  let m = !1;
+  let f = !1;
   for (let d = 0; d < a; d++) {
     const S = K({
       documentModifier: e,
       product: o[d],
       imageEl: n[d] ?? null,
-      nameEl: i[d] ?? null,
+      nameEl: r[d] ?? null,
       priceEl: c[d] ?? null,
-      oldPriceEl: r[d] ?? null,
+      oldPriceEl: i[d] ?? null,
       omnibusPriceEl: u[d] ?? null,
       omnibusDiscountEl: s[d] ?? null,
       buttonEl: l[d] ?? null
     });
-    m = m || S;
+    f = f || S;
   }
-  return m;
+  return f;
 }
-function ce(t) {
+function le(t) {
   const { currentNode: e, documentModifier: o, products: n } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
-  const i = U(e);
-  if (!("querySelectorAll" in i) || i.querySelectorAll(
-    `[esd-extension-block-id="${f.IMAGE}"]`
+  const r = U(e);
+  if (!("querySelectorAll" in r) || r.querySelectorAll(
+    `[esd-extension-block-id="${m.IMAGE}"]`
   ).length !== n.length)
     return !1;
-  let r = w(i, o, n);
-  const u = g(e), s = E.getConfig(e);
+  let i = w(r, o, n);
+  const u = b(e), s = E.getConfig(e);
   if (u !== "list" && s.mobileLayoutEnabled && "querySelector" in e) {
     const l = e.querySelector(P);
     if (l) {
@@ -309,22 +310,22 @@ function ce(t) {
         o,
         n
       );
-      r = r || a;
+      i = i || a;
     }
   }
-  return r && o.apply(new p("Updated product content in-place")), !0;
+  return i && o.apply(new p("Updated product content in-place")), !0;
 }
 function N(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
-    `[esd-extension-block-id="${f.PRICE}"]`
-  ), i = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OLD_PRICE}"]`
-  ), c = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_PRICE}"]`
+    `[esd-extension-block-id="${m.PRICE}"]`
   ), r = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_DISCOUNT}"]`
+    `[esd-extension-block-id="${m.OLD_PRICE}"]`
+  ), c = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
+  ), i = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
   ), u = Math.min(n.length, o.length);
   let s = !1;
   for (let l = 0; l < u; l++)
@@ -332,52 +333,52 @@ function N(t, e, o) {
       documentModifier: e,
       product: o[l],
       priceEl: n[l] ?? null,
-      oldPriceEl: i[l] ?? null,
+      oldPriceEl: r[l] ?? null,
       omnibusPriceEl: c[l] ?? null,
-      omnibusDiscountEl: r[l] ?? null
+      omnibusDiscountEl: i[l] ?? null
     }) && (s = !0);
   return s;
 }
-function le(t) {
+function ce(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
-  const i = C().recommendationProducts;
-  if (i.length === 0)
+  const r = C().recommendationProducts;
+  if (r.length === 0)
     return !1;
   const c = U(e);
-  let r = N(c, o, i);
-  const u = g(e), s = E.getConfig(e);
+  let i = N(c, o, r);
+  const u = b(e), s = E.getConfig(e);
   if (u !== "list" && s.mobileLayoutEnabled && "querySelector" in e) {
     const l = e.querySelector(P);
     if (l) {
-      const a = N(l, o, i);
-      r = r || a;
+      const a = N(l, o, r);
+      i = i || a;
     }
   }
-  return r && o.apply(new p("Updated price formatting in-place")), r;
+  return i && o.apply(new p("Updated price formatting in-place")), i;
 }
 function se(t) {
-  const { currentNode: e, documentModifier: o, currency: n } = t, i = M(e);
-  if (!i)
+  const { currentNode: e, documentModifier: o, currency: n } = t, r = R(e);
+  if (!r)
     return;
-  const c = n.alignment === "before" ? "0" : "1", r = (u, s) => {
-    o.modifyHtml(i).setAttribute(u, s);
+  const c = n.alignment === "before" ? "0" : "1", i = (u, s) => {
+    o.modifyHtml(r).setAttribute(u, s);
   };
-  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"));
+  i(y.CURRENCY, n.code), i(y.SYMBOL, n.symbol), i(y.ALIGNMENT, c), i(y.THOUSAND_SEPARATOR, n.thousandSeparator), i(y.DECIMAL_SEPARATOR, n.decimalSeparator), i(y.DECIMAL_COUNT, n.decimalCount.toString()), o.apply(new p("Update currency attributes"));
 }
 export {
   ie as adjustProductsToSize,
   A as formatProductPrice,
-  M as getBlockElement,
-  L as getCardComposition,
-  g as getCurrentLayout,
+  R as getBlockElement,
+  _ as getCardComposition,
+  b as getCurrentLayout,
   Y as reapplySpacing,
   W as regenerateMobileProductRows,
   G as regenerateProductRows,
   re as regenerateProductRowsWithStyles,
   se as setCurrencyAttributes,
-  le as updatePricesInPlace,
-  ce as updateProductContentInPlace,
+  ce as updatePricesInPlace,
+  le as updateProductContentInPlace,
   K as updateSingleProductContent
 };

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

@@ -1,36 +1,36 @@
 import { createPaddingsControl as n, createTextBackgroundColorControl as e, createTextFontFamilyControl as l, createTextStyleControl as C, createTextSizeControl as c, createTextColorControl as a, createTextAlignControl as i } from "../../../controlFactories.js";
-import { RecommendationBlockId as o } from "../../constants/blockIds.js";
-import { RecommendationControlId as t } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as r } from "../../constants/selectors.js";
 import { NameTextTrimControl as m } from "./textTrim.js";
+import { BLOCK_ROOT_SELECTOR as o } from "../../constants/selectors.js";
+import { RecommendationBlockId as t } from "../../constants/blockIds.js";
+import { RecommendationControlId as r } from "../../constants/controlIds.js";
 const A = i(
-  t.NAME_ALIGN,
-  o.NAME,
-  r
+  r.NAME_ALIGN,
+  t.NAME,
+  o
 ), N = a(
-  t.NAME_COLOR,
-  o.NAME,
-  r
+  r.NAME_COLOR,
+  t.NAME,
+  o
 ), E = c(
-  t.NAME_SIZE,
-  o.NAME,
-  r
+  r.NAME_SIZE,
+  t.NAME,
+  o
 ), M = C(
-  t.NAME_STYLE,
-  o.NAME,
-  r
+  r.NAME_STYLE,
+  t.NAME,
+  o
 ), s = l(
-  t.NAME_FONT_FAMILY,
-  o.NAME,
-  r
+  r.NAME_FONT_FAMILY,
+  t.NAME,
+  o
 ), d = e(
-  t.NAME_BACKGROUND,
-  o.NAME,
-  r
+  r.NAME_BACKGROUND,
+  t.NAME,
+  o
 ), T = n(
-  t.NAME_PADDINGS,
-  o.NAME,
-  r
+  r.NAME_PADDINGS,
+  t.NAME,
+  o
 ), p = {
   align: A,
   color: N,