@useinsider/guido 2.1.0-beta.9ba2e9d → 2.1.0-beta.a67f307

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

@@ -1,37 +1,38 @@
-import { ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlockId as f } from "../../constants/blockIds.js";
-import { CURRENCY_ATTR as y, CONTAINER_SELECTOR as I } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as A } from "../../store/recommendation.js";
+import { ModificationDescription as S } 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 T, DESKTOP_CONTAINER_SELECTOR as w, CONTAINER_SELECTOR as _ } from "../../constants/selectors.js";
+import { RecommendationConfigService as k } from "../../services/configService.js";
+import { useRecommendationExtensionStore as b } from "../../store/recommendation.js";
 import { prepareProductRows as R } from "../../templates/index.js";
-import { formatPrice as O } from "../../utils/priceFormatter.js";
-import { isTdNode as T } from "../../utils/tagName.js";
-import { sanitizeImageUrl as k, getDefaultProducts as _, DEFAULT_CARD_COMPOSITION as P } from "../../templates/utils.js";
-const C = "ins-recommendation-v3-block-v2";
-function b(o) {
+import { formatPrice as D } from "../../utils/priceFormatter.js";
+import { isTdNode as L } from "../../utils/tagName.js";
+import { sanitizeImageUrl as U, getDefaultProducts as H, DEFAULT_CARD_COMPOSITION as C } from "../../templates/utils.js";
+const q = "ins-recommendation-v3-block-v2";
+function E(o) {
   if (!o)
     return null;
   if ("getAttribute" in o) {
     const e = o.getAttribute("class");
-    if (e && e.includes(C))
+    if (e && e.includes(q))
       return o;
   }
-  return "querySelector" in o ? o.querySelector(`.${C}`) : null;
+  return "querySelector" in o ? o.querySelector(`.${q}`) : null;
 }
-function q(o) {
-  const e = b(o);
+function P(o) {
+  const e = E(o);
   if (!e || !("getAttribute" in e))
     return "grid";
   const t = e.getAttribute("data-layout");
   return t === "list" || t === "horizontal" ? "list" : "grid";
 }
-function D(o) {
-  const e = b(o);
+function N(o) {
+  const e = E(o);
   if (!e || !("getAttribute" in e))
-    return P;
+    return C;
   const t = e.getAttribute("data-card-composition");
-  return t ? t.split(",").filter(Boolean) : P;
+  return t ? t.split(",").filter(Boolean) : C;
 }
-function S(o, e, t) {
+function g(o, e, t) {
   if (!e || !("childNodes" in e))
     return !1;
   const n = e.childNodes().find(
@@ -39,23 +40,42 @@ function S(o, e, t) {
   );
   return n ? (o.modifyHtml(n).setText(t), !0) : !1;
 }
-function w(o, e) {
-  return o && o.length > 0 ? o : e.length > 0 ? e : _();
+function h(o, e) {
+  return o && o.length > 0 ? o : e.length > 0 ? e : H();
 }
-function U(o) {
-  const { currentNode: e, documentModifier: t, afterRegenerate: r, products: n, layout: i } = o;
+function $(o) {
+  const { currentNode: e, documentModifier: t, products: r, layout: n } = o;
+  if (!e || !("querySelector" in e))
+    return;
+  const i = e.querySelector(T);
+  if (!i)
+    return;
+  const c = b(), u = k.getConfig(e), l = h(r, c.recommendationProducts), s = N(e), d = n ?? P(e), a = R(l, d, {
+    productsPerRow: u.mobileCardsInRow,
+    composition: s
+  });
+  t.modifyHtml(i).setInnerHtml(a).apply(new S("Updated mobile product rows"));
+}
+function x(o) {
+  const {
+    currentNode: e,
+    documentModifier: t,
+    afterRegenerate: r,
+    products: n,
+    layout: i
+  } = o;
   if (!e || !("querySelector" in e))
     return;
-  const c = e.querySelector(I);
+  const c = e.querySelector(w) ?? e.querySelector(_);
   if (!c)
     return;
-  const s = A(), l = w(n, s.recommendationProducts), { cardsInRow: u } = s.recommendationConfigs, d = D(e), a = i ?? q(e), p = R(l, a, {
-    productsPerRow: u,
+  const u = b(), l = h(n, u.recommendationProducts), { cardsInRow: s } = u.recommendationConfigs, d = N(e), a = i ?? P(e), p = R(l, a, {
+    productsPerRow: s,
     composition: d
   });
-  t.modifyHtml(c).setInnerHtml(p).apply(new g("Updated product")), r == null || r();
+  t.modifyHtml(c).setInnerHtml(p).apply(new S("Updated product")), $(o), r == null || r();
 }
-function $(o, e, t, r) {
+function B(o, e, t, r) {
   const i = `0 ${Math.floor(t / 2)}px`;
   let c = !1;
   return r === "grid" ? Array.from(
@@ -65,29 +85,29 @@ function $(o, e, t, r) {
   }) : Array.from(
     o.querySelectorAll(".product-card-wrapper")
   ).forEach((l) => {
-    const u = "parentNode" in l ? l.parentNode : null;
-    u && T(u) && (e.modifyHtml(u).setStyle("padding", i), c = !0);
+    const s = "parentNode" in l ? l.parentNode : null;
+    s && L(s) && (e.modifyHtml(s).setStyle("padding", i), c = !0);
   }), c;
 }
-function L(o, e, t) {
+function v(o, e, t) {
   const r = `${t}px`, n = Array.from(o.querySelectorAll(".spacer"));
   let i = !1;
   return n.forEach((c) => {
     e.modifyHtml(c).setStyle("height", r), i = !0;
   }), i;
 }
-function H(o) {
+function V(o) {
   const { currentNode: e, documentModifier: t } = o;
   if (!e)
     return;
-  const r = b(e);
+  const r = E(e);
   if (!r || !("getAttribute" in r))
     return;
-  const n = r.getAttribute("data-column-spacing"), i = r.getAttribute("data-row-spacing"), c = q(e);
-  let s = !1;
+  const n = r.getAttribute("data-column-spacing"), i = r.getAttribute("data-row-spacing"), c = P(e);
+  let u = !1;
   if (n) {
     const l = parseInt(n);
-    Number.isNaN(l) || (s = $(
+    Number.isNaN(l) || (u = B(
       e,
       t,
       l,
@@ -97,28 +117,28 @@ function H(o) {
   if (i) {
     const l = parseInt(i);
     if (!Number.isNaN(l)) {
-      const u = L(e, t, l);
-      s = s || u;
+      const s = v(e, t, l);
+      u = u || s;
     }
   }
-  s && t.apply(new g("Reapply spacing after regeneration"));
+  u && t.apply(new S("Reapply spacing after regeneration"));
 }
-function K(o) {
+function ee(o) {
   const { currentNode: e, documentModifier: t, afterRegenerate: r, products: n, layout: i } = o;
-  e && U({
+  e && x({
     currentNode: e,
     documentModifier: t,
     products: n,
     layout: i,
     afterRegenerate: () => {
       setTimeout(() => {
-        H({ currentNode: e, documentModifier: t });
+        V({ currentNode: e, documentModifier: t });
       }, 0), r == null || r();
     }
   });
 }
-function h() {
-  const o = A(), { currencySettings: e } = o.recommendationConfigs;
+function M() {
+  const o = b(), { currencySettings: e } = o.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -128,40 +148,40 @@ function h() {
     thousandSeparator: e.thousandSeparator
   };
 }
-function E(o, e = "price") {
-  const t = h(), r = o[e], n = (r == null ? void 0 : r[t.code]) ?? Object.values(r ?? {})[0] ?? 0;
-  return O({
+function A(o, e = "price") {
+  const t = M(), r = o[e], n = (r == null ? void 0 : r[t.code]) ?? Object.values(r ?? {})[0] ?? 0;
+  return D({
     price: n,
     currency: t
   });
 }
-function x(o) {
+function j(o) {
   var i, c;
-  const e = h(), t = ((i = o.original_price) == null ? void 0 : i[e.code]) ?? Object.values(o.original_price ?? {})[0] ?? 0, r = ((c = o.price) == null ? void 0 : c[e.code]) ?? Object.values(o.price ?? {})[0] ?? 0, n = t > 0 ? Math.round((t - r) / t * 100) : 0;
+  const e = M(), t = ((i = o.original_price) == null ? void 0 : i[e.code]) ?? Object.values(o.original_price ?? {})[0] ?? 0, r = ((c = o.price) == null ? void 0 : c[e.code]) ?? Object.values(o.price ?? {})[0] ?? 0, n = t > 0 ? Math.round((t - r) / t * 100) : 0;
   return n > 0 ? `-${n}%` : "0%";
 }
-function N(o) {
+function I(o) {
   const { documentModifier: e, product: t, priceEl: r, oldPriceEl: n, omnibusPriceEl: i, omnibusDiscountEl: c } = o;
-  let s = !1;
+  let u = !1;
   if (r && "querySelector" in r) {
-    const l = r.querySelector("strong"), u = E(t, "price");
-    S(e, l, u) && (s = !0);
+    const l = r.querySelector("strong"), s = A(t, "price");
+    g(e, l, s) && (u = !0);
   }
   if (n && "querySelector" in n) {
-    const l = n.querySelector("strong"), u = E(t, "original_price");
-    S(e, l, u) && (s = !0);
+    const l = n.querySelector("strong"), s = A(t, "original_price");
+    g(e, l, s) && (u = !0);
   }
   if (i && "querySelector" in i) {
-    const l = i.querySelector(".omnibus-price-value"), u = E(t, "original_price");
-    S(e, l, u) && (s = !0);
+    const l = i.querySelector(".omnibus-price-value"), s = A(t, "original_price");
+    g(e, l, s) && (u = !0);
   }
   if (c && "querySelector" in c) {
-    const l = c.querySelector(".omnibus-discount-value"), u = x(t);
-    S(e, l, u) && (s = !0);
+    const l = c.querySelector(".omnibus-discount-value"), s = j(t);
+    g(e, l, s) && (u = !0);
   }
-  return s;
+  return u;
 }
-function B(o) {
+function W(o) {
   const {
     documentModifier: e,
     product: t,
@@ -169,118 +189,119 @@ function B(o) {
     nameEl: n,
     priceEl: i,
     oldPriceEl: c,
-    omnibusPriceEl: s,
+    omnibusPriceEl: u,
     omnibusDiscountEl: l,
-    buttonEl: u
+    buttonEl: s
   } = o;
   let d = !1;
   if (r && "querySelector" in r) {
     const a = r.querySelector("img");
-    a && (e.modifyHtml(a).setAttribute("src", k(t.image_url)).setAttribute("alt", t.name), d = !0);
+    a && (e.modifyHtml(a).setAttribute("src", U(t.image_url)).setAttribute("alt", t.name), d = !0);
     const p = r.querySelector("a");
     p && (e.modifyHtml(p).setAttribute("href", t.url), d = !0);
   }
   if (n && "querySelector" in n) {
     const a = n.querySelector("strong");
-    S(e, a, t.name) && (d = !0);
+    g(e, a, t.name) && (d = !0);
   }
-  if (N({
+  if (I({
     documentModifier: e,
     product: t,
     priceEl: i,
     oldPriceEl: c,
-    omnibusPriceEl: s,
+    omnibusPriceEl: u,
     omnibusDiscountEl: l
-  }) && (d = !0), u && "querySelector" in u) {
-    const a = u.querySelector("a.es-button") || u.querySelector("a");
+  }) && (d = !0), s && "querySelector" in s) {
+    const a = s.querySelector("a.es-button") || s.querySelector("a");
     a && (e.modifyHtml(a).setAttribute("href", t.url), d = !0);
   }
   return d;
 }
-function J(o) {
+function te(o) {
   const { currentNode: e, documentModifier: t, products: r } = o;
   if (!e || !("querySelectorAll" in e))
     return !1;
   const n = e.querySelectorAll(
-    `[esd-extension-block-id="${f.IMAGE}"]`
+    `[esd-extension-block-id="${m.IMAGE}"]`
   ), i = e.querySelectorAll(
-    `[esd-extension-block-id="${f.NAME}"]`
+    `[esd-extension-block-id="${m.NAME}"]`
   ), c = e.querySelectorAll(
-    `[esd-extension-block-id="${f.PRICE}"]`
-  ), s = e.querySelectorAll(
-    `[esd-extension-block-id="${f.OLD_PRICE}"]`
-  ), l = e.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_PRICE}"]`
+    `[esd-extension-block-id="${m.PRICE}"]`
   ), u = e.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_DISCOUNT}"]`
+    `[esd-extension-block-id="${m.OLD_PRICE}"]`
+  ), l = e.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
+  ), s = e.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
   ), d = e.querySelectorAll(
-    `[esd-extension-block-id="${f.BUTTON}"]`
+    `[esd-extension-block-id="${m.BUTTON}"]`
   );
   if (n.length !== r.length)
     return !1;
   let a = !1;
-  return r.forEach((p, m) => {
-    const M = B({
+  return r.forEach((p, f) => {
+    const O = W({
       documentModifier: t,
       product: p,
-      imageEl: n[m] ?? null,
-      nameEl: i[m] ?? null,
-      priceEl: c[m] ?? null,
-      oldPriceEl: s[m] ?? null,
-      omnibusPriceEl: l[m] ?? null,
-      omnibusDiscountEl: u[m] ?? null,
-      buttonEl: d[m] ?? null
+      imageEl: n[f] ?? null,
+      nameEl: i[f] ?? null,
+      priceEl: c[f] ?? null,
+      oldPriceEl: u[f] ?? null,
+      omnibusPriceEl: l[f] ?? null,
+      omnibusDiscountEl: s[f] ?? null,
+      buttonEl: d[f] ?? null
     });
-    a = a || M;
-  }), a && t.apply(new g("Updated product content in-place")), !0;
+    a = a || O;
+  }), a && t.apply(new S("Updated product content in-place")), !0;
 }
-function Q(o) {
+function oe(o) {
   const { currentNode: e, documentModifier: t } = o;
   if (!e || !("querySelectorAll" in e))
     return !1;
-  const n = A().recommendationProducts;
+  const n = b().recommendationProducts;
   if (n.length === 0)
     return !1;
   const i = e.querySelectorAll(
-    `[esd-extension-block-id="${f.PRICE}"]`
+    `[esd-extension-block-id="${m.PRICE}"]`
   ), c = e.querySelectorAll(
-    `[esd-extension-block-id="${f.OLD_PRICE}"]`
-  ), s = e.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_PRICE}"]`
+    `[esd-extension-block-id="${m.OLD_PRICE}"]`
+  ), u = e.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
   ), l = e.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_DISCOUNT}"]`
+    `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
   );
-  let u = !1;
+  let s = !1;
   return n.forEach((d, a) => {
-    N({
+    I({
       documentModifier: t,
       product: d,
       priceEl: i[a] ?? null,
       oldPriceEl: c[a] ?? null,
-      omnibusPriceEl: s[a] ?? null,
+      omnibusPriceEl: u[a] ?? null,
       omnibusDiscountEl: l[a] ?? null
-    }) && (u = !0);
-  }), u && t.apply(new g("Updated price formatting in-place")), u;
+    }) && (s = !0);
+  }), s && t.apply(new S("Updated price formatting in-place")), s;
 }
-function X(o) {
-  const { currentNode: e, documentModifier: t, currency: r } = o, n = b(e);
+function re(o) {
+  const { currentNode: e, documentModifier: t, currency: r } = o, n = E(e);
   if (!n)
     return;
-  const i = r.alignment === "before" ? "0" : "1", c = (s, l) => {
-    t.modifyHtml(n).setAttribute(s, l);
+  const i = r.alignment === "before" ? "0" : "1", c = (u, l) => {
+    t.modifyHtml(n).setAttribute(u, l);
   };
-  c(y.CURRENCY, r.code), c(y.SYMBOL, r.symbol), c(y.ALIGNMENT, i), c(y.THOUSAND_SEPARATOR, r.thousandSeparator), c(y.DECIMAL_SEPARATOR, r.decimalSeparator), c(y.DECIMAL_COUNT, r.decimalCount.toString()), t.apply(new g("Update currency attributes"));
+  c(y.CURRENCY, r.code), c(y.SYMBOL, r.symbol), c(y.ALIGNMENT, i), c(y.THOUSAND_SEPARATOR, r.thousandSeparator), c(y.DECIMAL_SEPARATOR, r.decimalSeparator), c(y.DECIMAL_COUNT, r.decimalCount.toString()), t.apply(new S("Update currency attributes"));
 }
 export {
-  E as formatProductPrice,
-  b as getBlockElement,
-  D as getCardComposition,
-  q as getCurrentLayout,
-  H as reapplySpacing,
-  U as regenerateProductRows,
-  K as regenerateProductRowsWithStyles,
-  X as setCurrencyAttributes,
-  Q as updatePricesInPlace,
-  J as updateProductContentInPlace,
-  B as updateSingleProductContent
+  A as formatProductPrice,
+  E as getBlockElement,
+  N as getCardComposition,
+  P as getCurrentLayout,
+  V as reapplySpacing,
+  $ as regenerateMobileProductRows,
+  x as regenerateProductRows,
+  ee as regenerateProductRowsWithStyles,
+  re as setCurrencyAttributes,
+  oe as updatePricesInPlace,
+  te as updateProductContentInPlace,
+  W as updateSingleProductContent
 };

package/dist/extensions/Blocks/Recommendation/controls/mobileLayout/cssRules.js

@@ -0,0 +1,21 @@
+import { ModificationDescription as r } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const i = "ins-recommendation-desktop-container", s = "ins-recommendation-mobile-container", l = `.${s} { display: none; }`, u = `@media only screen and (max-width: 480px) { .${i} { display: none !important; } .${s} { display: table !important; } }`, c = `.${s}`;
+function a(o, e) {
+  return !!o.querySelector(e);
+}
+function d(o) {
+  return o.querySelectorAll(`*${i}`).length > 0;
+}
+function p(o) {
+  const e = o.getDocumentRootCssNode();
+  if (!e)
+    return;
+  const n = o.getDocumentModifier();
+  let t = !1;
+  a(e, c) || (n.modifyCss(e).appendRule(l), t = !0), d(e) || (n.modifyCss(e).appendRule(u), t = !0), t && n.apply(new r("Add mobile layout CSS rules"));
+}
+export {
+  i as CSS_CLASS_DESKTOP_CONTAINER,
+  s as CSS_CLASS_MOBILE_CONTAINER,
+  p as ensureMobileCssRulesExist
+};