@useinsider/guido 3.2.1-beta.d58ee72 → 3.3.0-beta.1d2853a

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

@@ -1,180 +1,184 @@
 import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlockId as m } 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 { MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, CURRENCY_ATTR as y, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as v, ATTR_PRODUCT_ATTR as W } 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 L, DEFAULT_CARD_COMPOSITION as R, sanitizeImageUrl as j } from "../../templates/utils.js";
-const h = "recommendation-block-v2";
-function M(t) {
+import { prepareProductRows as _ } from "../../templates/index.js";
+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 V } from "../../templates/utils.js";
+const M = "recommendation-block-v2";
+function h(t) {
   if (!t)
     return null;
   if ("getAttribute" in t) {
     const e = t.getAttribute("class");
-    if (e && e.includes(h))
+    if (e && e.includes(M))
       return t;
   }
-  return "querySelector" in t ? t.querySelector(`.${h}`) ?? null : null;
+  return "querySelector" in t ? t.querySelector(`.${M}`) ?? null : null;
 }
-function g(t) {
-  const e = M(t);
+function b(t) {
+  const e = h(t);
   if (!e || !("getAttribute" in e))
     return "grid";
   const o = e.getAttribute("data-layout");
   return o === "list" || o === "horizontal" ? "list" : "grid";
 }
-function _(t) {
-  const e = M(t);
+function x(t) {
+  const e = h(t);
   if (!e || !("getAttribute" in e))
     return R;
   const o = e.getAttribute("data-card-composition");
   return o ? o.split(",").filter(Boolean) : R;
 }
-function b(t, e, o) {
-  if (!e || !("childNodes" in e))
-    return !1;
-  const i = e.childNodes().find(
-    (l) => "getType" in l && l.getType() === "text"
+function D(t) {
+  if (!t || !("childNodes" in t))
+    return null;
+  const e = t.childNodes(), o = e.find(
+    (n) => "getType" in n && n.getType() === "text"
   );
-  return i ? (t.modifyHtml(i).setText(o), !0) : !1;
+  return o || e.reduce((n, i) => n || !("getType" in i) || i.getType() === "text" ? n : D(i), null);
+}
+function S(t, e, o) {
+  const n = D(e);
+  return n ? (t.modifyHtml(n).setText(o), !0) : !1;
 }
-function x(t, e) {
+function U(t, e) {
   return t && t.length > 0 ? t : e.length > 0 ? e : L();
 }
-function V(t) {
+function G(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 W(t) {
+function Y(t) {
   const {
     currentNode: e,
     documentModifier: o,
     products: n,
     layout: i,
-    composition: l
+    composition: c
   } = t;
   if (!e || !("querySelector" in e))
     return;
-  const r = i ?? g(e), u = E.getConfig(e);
-  if (r === "list" || !u.mobileLayoutEnabled) {
-    V({ currentNode: e, documentModifier: o });
+  const r = i ?? b(e), s = E.getConfig(e);
+  if (r === "list" || !s.mobileLayoutEnabled) {
+    G({ currentNode: e, documentModifier: o });
     return;
   }
-  const s = e.querySelector(k);
-  if (!s)
+  const u = e.querySelector(k);
+  if (!u)
     return;
-  const c = C(), a = x(n, c.recommendationProducts), f = 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, {
-    productsPerRow: u.mobileCardsInRow,
-    composition: f,
-    filterList: c.filterList
+  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
   })}</table></td>`;
-  o.modifyHtml(s).setInnerHtml(S), o.apply(new p("Updated mobile product rows"));
+  o.modifyHtml(u).setInnerHtml(g), o.apply(new p("Updated mobile product rows"));
 }
-function G(t) {
+function K(t) {
   const {
     currentNode: e,
     documentModifier: o,
     afterRegenerate: n,
     products: i,
-    layout: l,
+    layout: c,
     composition: r
   } = t;
   if (!e || !("querySelector" in e))
     return;
-  const u = e.querySelector(q) ?? e.querySelector($);
-  if (!u)
+  const s = e.querySelector(P) ?? e.querySelector(v);
+  if (!s)
     return;
-  const s = C(), c = x(i, s.recommendationProducts), { cardsInRow: a } = s.recommendationConfigs, f = r ?? _(e), d = l ?? g(e), S = T(c, d, {
-    productsPerRow: a,
-    composition: f,
-    filterList: s.filterList
+  const u = C(), l = U(i, u.recommendationProducts), { cardsInRow: d } = u.recommendationConfigs, a = r ?? x(e), f = c ?? b(e), g = _(l, f, {
+    productsPerRow: d,
+    composition: a,
+    filterList: u.filterList
   });
-  o.modifyHtml(u).setInnerHtml(S).apply(new p("Updated product")), W(t), n == null || n();
+  o.modifyHtml(s).setInnerHtml(g).apply(new p("Updated product")), Y(t), n == null || n();
 }
-function I(t, e, o, n) {
-  const l = `0 ${Math.floor(o / 2)}px`;
+function T(t, e, o, n) {
+  const c = `0 ${Math.floor(o / 2)}px`;
   let r = !1;
   return n === "grid" ? Array.from(
     t.querySelectorAll(".attribute-cell")
-  ).forEach((s) => {
-    e.modifyHtml(s).setStyle("padding", l), r = !0;
+  ).forEach((u) => {
+    e.modifyHtml(u).setStyle("padding", c), r = !0;
   }) : Array.from(
     t.querySelectorAll(".product-card-wrapper")
-  ).forEach((s) => {
-    const c = "parentNode" in s ? s.parentNode : null;
-    c && v(c) && (e.modifyHtml(c).setStyle("padding", l), r = !0);
+  ).forEach((u) => {
+    const l = "parentNode" in u ? u.parentNode : null;
+    l && F(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
   }), r;
 }
-function O(t, e, o) {
+function I(t, e, o) {
   const n = `${o}px`, i = Array.from(t.querySelectorAll(".spacer"));
-  let l = !1;
+  let c = !1;
   return i.forEach((r) => {
-    e.modifyHtml(r).setStyle("height", n), l = !0;
-  }), l;
+    e.modifyHtml(r).setStyle("height", n), c = !0;
+  }), c;
 }
-function Y(t) {
+function X(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e)
     return;
-  const n = E.getConfig(e), i = g(e);
-  let l = !1;
-  const r = e.querySelector(q);
+  const n = E.getConfig(e), i = b(e);
+  let c = !1;
+  const r = e.querySelector(P);
   if (r) {
-    l = I(
+    c = T(
       r,
       o,
       n.columnSpacing,
       i
     );
-    const c = O(
+    const l = I(
       r,
       o,
       n.rowSpacing
     );
-    l = l || c;
+    c = c || l;
   }
-  const u = e.querySelector(P);
-  if (u) {
-    const s = I(
-      u,
+  const s = e.querySelector(q);
+  if (s) {
+    const u = T(
+      s,
       o,
       n.mobileColumnSpacing,
       i
     );
-    l = l || s;
-    const c = O(
-      u,
+    c = c || u;
+    const l = I(
+      s,
       o,
       n.mobileRowSpacing
     );
-    l = l || c;
+    c = c || l;
   }
-  l && o.apply(new p("Reapply spacing after regeneration"));
+  c && o.apply(new p("Reapply spacing after regeneration"));
 }
-function re(t) {
-  const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: l, composition: r } = t;
-  e && G({
+function se(t) {
+  const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: c, composition: r } = t;
+  e && K({
     currentNode: e,
     documentModifier: o,
     products: i,
-    layout: l,
+    layout: c,
     composition: r,
     afterRegenerate: () => {
       setTimeout(() => {
-        Y({ currentNode: e, documentModifier: o });
+        X({ currentNode: e, documentModifier: o });
       }, 0), n == null || n();
     }
   });
 }
-function ie(t, e) {
+function ae(t, e) {
   return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...L(e - t.length)];
 }
-function D() {
+function H() {
   const t = C(), { currencySettings: e } = t.recommendationConfigs, o = parseInt(e.decimalCount);
   return {
     code: e.value,
@@ -186,76 +190,119 @@ 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({
+  const o = H(), n = t[e], i = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
+  return j({
     price: i,
     currency: o
   });
 }
-function F(t) {
-  var l, r;
-  const e = D(), o = ((l = t.original_price) == null ? void 0 : l[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;
+function z(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%";
 }
-function H(t) {
-  const { documentModifier: e, product: o, priceEl: n, oldPriceEl: i, omnibusPriceEl: l, omnibusDiscountEl: r } = t;
-  let u = !1;
+function $(t) {
+  const { documentModifier: e, product: o, priceEl: n, oldPriceEl: i, omnibusPriceEl: c, omnibusDiscountEl: r } = t;
+  let s = !1;
   if (n && "querySelector" in n) {
-    const s = n.querySelector("strong") ?? null, c = A(o, "price");
-    b(e, s, c) && (u = !0);
+    const u = n.querySelector("strong") ?? n.querySelector("p"), l = A(o, "price");
+    S(e, u ?? null, l) && (s = !0);
   }
   if (i && "querySelector" in i) {
-    const s = i.querySelector("strong") ?? null, c = A(o, "original_price");
-    b(e, s, c) && (u = !0);
+    const u = i.querySelector("strong") ?? i.querySelector("p"), l = A(o, "original_price");
+    S(e, u ?? null, l) && (s = !0);
   }
-  if (l && "querySelector" in l) {
-    const s = l.querySelector(".omnibus-price-value") ?? null, c = A(o, "original_price");
-    b(e, s, c) && (u = !0);
+  if (c && "querySelector" in c) {
+    const u = c.querySelector(".omnibus-price-value") ?? null, l = A(o, "original_price");
+    S(e, u, l) && (s = !0);
   }
   if (r && "querySelector" in r) {
-    const s = r.querySelector(".omnibus-discount-value") ?? null, c = F(o);
-    b(e, s, c) && (u = !0);
+    const u = r.querySelector(".omnibus-discount-value") ?? null, l = z(o);
+    S(e, u, l) && (s = !0);
   }
-  return u;
+  return s;
 }
-function K(t) {
+function J(t) {
   const {
     documentModifier: e,
     product: o,
     imageEl: n,
     nameEl: i,
-    priceEl: l,
+    priceEl: c,
     oldPriceEl: r,
-    omnibusPriceEl: u,
-    omnibusDiscountEl: s,
-    buttonEl: c
+    omnibusPriceEl: s,
+    omnibusDiscountEl: u,
+    buttonEl: l
   } = t;
-  let a = !1;
+  let d = !1;
   if (n && "querySelector" in n) {
-    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);
+    const a = n.querySelector("img");
+    a && (e.modifyHtml(a).setAttribute("src", V(o.image_url)).setAttribute("alt", o.name), d = !0);
+    const f = n.querySelector("a");
+    f && (e.modifyHtml(f).setAttribute("href", o.url), d = !0);
   }
   if (i && "querySelector" in i) {
-    const f = i.querySelector("strong") ?? null;
-    b(e, f, o.name) && (a = !0);
+    const a = i.querySelector("strong") ?? i.querySelector("p");
+    S(e, a ?? null, o.name) && (d = !0);
   }
-  if (H({
+  if ($({
     documentModifier: e,
     product: o,
-    priceEl: l,
+    priceEl: c,
     oldPriceEl: r,
-    omnibusPriceEl: u,
-    omnibusDiscountEl: s
-  }) && (a = !0), c && "querySelector" in c) {
-    const f = c.querySelector("a.es-button") || c.querySelector("a");
-    f && (e.modifyHtml(f).setAttribute("href", o.url), a = !0);
+    omnibusPriceEl: s,
+    omnibusDiscountEl: u
+  }) && (d = !0), l && "querySelector" in l) {
+    const a = l.querySelector("a.es-button") || l.querySelector("a");
+    a && (e.modifyHtml(a).setAttribute("href", o.url), d = !0);
   }
-  return a;
+  return d;
+}
+function B(t) {
+  return "querySelector" in t ? t.querySelector(P) ?? t : t;
 }
-function U(t) {
-  return "querySelector" in t ? t.querySelector(q) ?? t : t;
+const O = "product_attribute.";
+function Q(t, e) {
+  var n;
+  let o;
+  if (t.startsWith(O)) {
+    const i = t.slice(O.length);
+    o = (n = e.product_attributes) == null ? void 0 : n[i];
+  } else
+    o = e[t];
+  return typeof o == "string" && o.length > 0 ? o : typeof o == "number" ? String(o) : null;
+}
+function Z(t, e, o) {
+  if (!("querySelectorAll" in t))
+    return !1;
+  const n = t.querySelectorAll(
+    `[esd-extension-block-id="${m.CUSTOM_ATTRIBUTE}"]`
+  );
+  if (n.length === 0)
+    return !1;
+  const i = /* @__PURE__ */ new Map();
+  n.forEach((r) => {
+    if (!("getAttribute" in r))
+      return;
+    const s = r.getAttribute(W);
+    if (!s)
+      return;
+    const u = i.get(s) ?? [];
+    u.push(r), i.set(s, u);
+  });
+  let c = !1;
+  return i.forEach((r, s) => {
+    const u = Math.min(r.length, o.length);
+    r.slice(0, u).forEach((l, d) => {
+      if (!("querySelector" in l))
+        return;
+      const a = Q(s, o[d]);
+      if (a === null)
+        return;
+      const f = l.querySelector("p") ?? null;
+      S(e, f, a) && (c = !0);
+    });
+  }), c;
 }
 function w(t, e, o) {
   if (!("querySelectorAll" in t))
@@ -264,54 +311,54 @@ function w(t, e, o) {
     `[esd-extension-block-id="${m.IMAGE}"]`
   ), i = t.querySelectorAll(
     `[esd-extension-block-id="${m.NAME}"]`
-  ), l = t.querySelectorAll(
+  ), c = t.querySelectorAll(
     `[esd-extension-block-id="${m.PRICE}"]`
   ), r = t.querySelectorAll(
     `[esd-extension-block-id="${m.OLD_PRICE}"]`
-  ), u = t.querySelectorAll(
-    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
   ), s = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
+  ), u = t.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
-  ), c = t.querySelectorAll(
+  ), l = t.querySelectorAll(
     `[esd-extension-block-id="${m.BUTTON}"]`
-  ), a = Math.min(n.length, o.length);
-  let f = !1;
-  for (let d = 0; d < a; d++) {
-    const S = K({
+  ), d = Math.min(n.length, o.length);
+  let a = !1;
+  for (let f = 0; f < d; f++) {
+    const g = J({
       documentModifier: e,
-      product: o[d],
-      imageEl: n[d] ?? null,
-      nameEl: i[d] ?? null,
-      priceEl: l[d] ?? null,
-      oldPriceEl: r[d] ?? null,
-      omnibusPriceEl: u[d] ?? null,
-      omnibusDiscountEl: s[d] ?? null,
-      buttonEl: c[d] ?? null
+      product: o[f],
+      imageEl: n[f] ?? null,
+      nameEl: i[f] ?? null,
+      priceEl: c[f] ?? null,
+      oldPriceEl: r[f] ?? null,
+      omnibusPriceEl: s[f] ?? null,
+      omnibusDiscountEl: u[f] ?? null,
+      buttonEl: l[f] ?? null
     });
-    f = f || S;
+    a = a || g;
   }
-  return f;
+  return Z(t, e, o) && (a = !0), a;
 }
-function le(t) {
+function de(t) {
   const { currentNode: e, documentModifier: o, products: n } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
-  const i = U(e);
+  const i = B(e);
   if (!("querySelectorAll" in i) || i.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);
-  if (u !== "list" && s.mobileLayoutEnabled && "querySelector" in e) {
-    const c = e.querySelector(P);
-    if (c) {
-      const a = w(
-        c,
+  const s = b(e), u = E.getConfig(e);
+  if (s !== "list" && u.mobileLayoutEnabled && "querySelector" in e) {
+    const l = e.querySelector(q);
+    if (l) {
+      const d = w(
+        l,
         o,
         n
       );
-      r = r || a;
+      r = r || d;
     }
   }
   return r && o.apply(new p("Updated product content in-place")), !0;
@@ -323,63 +370,63 @@ function N(t, e, o) {
     `[esd-extension-block-id="${m.PRICE}"]`
   ), i = t.querySelectorAll(
     `[esd-extension-block-id="${m.OLD_PRICE}"]`
-  ), l = t.querySelectorAll(
+  ), c = t.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
   ), r = t.querySelectorAll(
     `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
-  ), u = Math.min(n.length, o.length);
-  let s = !1;
-  for (let c = 0; c < u; c++)
-    H({
+  ), s = Math.min(n.length, o.length);
+  let u = !1;
+  for (let l = 0; l < s; l++)
+    $({
       documentModifier: e,
-      product: o[c],
-      priceEl: n[c] ?? null,
-      oldPriceEl: i[c] ?? null,
-      omnibusPriceEl: l[c] ?? null,
-      omnibusDiscountEl: r[c] ?? null
-    }) && (s = !0);
-  return s;
+      product: o[l],
+      priceEl: n[l] ?? null,
+      oldPriceEl: i[l] ?? null,
+      omnibusPriceEl: c[l] ?? null,
+      omnibusDiscountEl: r[l] ?? null
+    }) && (u = !0);
+  return u;
 }
-function ce(t) {
+function fe(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
   const i = C().recommendationProducts;
   if (i.length === 0)
     return !1;
-  const l = U(e);
-  let r = N(l, o, i);
-  const u = g(e), s = E.getConfig(e);
-  if (u !== "list" && s.mobileLayoutEnabled && "querySelector" in e) {
-    const c = e.querySelector(P);
-    if (c) {
-      const a = N(c, o, i);
-      r = r || a;
+  const c = B(e);
+  let r = N(c, o, i);
+  const s = b(e), u = E.getConfig(e);
+  if (s !== "list" && u.mobileLayoutEnabled && "querySelector" in e) {
+    const l = e.querySelector(q);
+    if (l) {
+      const d = N(l, o, i);
+      r = r || d;
     }
   }
   return r && o.apply(new p("Updated price formatting in-place")), r;
 }
-function se(t) {
-  const { currentNode: e, documentModifier: o, currency: n } = t, i = M(e);
+function me(t) {
+  const { currentNode: e, documentModifier: o, currency: n } = t, i = h(e);
   if (!i)
     return;
-  const l = n.alignment === "before" ? "0" : "1", r = (u, s) => {
-    o.modifyHtml(i).setAttribute(u, s);
+  const c = n.alignment === "before" ? "0" : "1", r = (s, u) => {
+    o.modifyHtml(i).setAttribute(s, u);
   };
-  r(y.CURRENCY, n.code), r(y.SYMBOL, n.symbol), r(y.ALIGNMENT, l), 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"));
+  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 {
-  ie as adjustProductsToSize,
+  ae as adjustProductsToSize,
   A as formatProductPrice,
-  M as getBlockElement,
-  _ as getCardComposition,
-  g as getCurrentLayout,
-  Y as reapplySpacing,
-  W as regenerateMobileProductRows,
-  G as regenerateProductRows,
-  re as regenerateProductRowsWithStyles,
-  se as setCurrencyAttributes,
-  ce as updatePricesInPlace,
-  le as updateProductContentInPlace,
-  K as updateSingleProductContent
+  h as getBlockElement,
+  x as getCardComposition,
+  b as getCurrentLayout,
+  X as reapplySpacing,
+  Y as regenerateMobileProductRows,
+  K as regenerateProductRows,
+  se as regenerateProductRowsWithStyles,
+  me as setCurrencyAttributes,
+  fe as updatePricesInPlace,
+  de as updateProductContentInPlace,
+  J as updateSingleProductContent
 };