@useinsider/guido 3.8.2-beta.189e91c → 3.8.2

package/dist/extensions/Blocks/Recommendation/templates/index.js

@@ -1,37 +1,34 @@
 import "../constants/selectors.js";
-import { DEFAULT_PRODUCTS_PER_ROW as w } from "../constants/layout.js";
-import { prepareProductRows as g } from "./grid/template.js";
-import { prepareProductRows as C } from "./list/template.js";
-import "../store/recommendation.js";
-function b(o, t, r = {}) {
+import { DEFAULT_PRODUCTS_PER_ROW as f } from "../constants/layout.js";
+import { prepareProductRows as w } from "./grid/template.js";
+import { prepareProductRows as g } from "./list/template.js";
+function O(o, t, r = {}) {
   const {
-    cellPadding: i,
-    rowSpacingPx: s,
+    cellPadding: s,
+    rowSpacingPx: i,
     styleTemplates: c,
     cardBackgroundColor: l,
     cellBackgroundColors: p,
     cellAlignments: n,
     cellClasses: a,
     omnibusTexts: m,
-    visibility: d,
-    priceInline: u
+    visibility: d
   } = r, e = {
-    cellPadding: i,
-    rowSpacingPx: s,
+    cellPadding: s,
+    rowSpacingPx: i,
     styleTemplates: c,
     cardBackgroundColor: l,
     cellBackgroundColors: p,
     cellAlignments: n,
     cellClasses: a,
     omnibusTexts: m,
-    visibility: d,
-    priceInline: u
+    visibility: d
   };
   if (t === "list")
-    return C(o, r.composition, r.filterList, e);
-  const { productsPerRow: P = w, composition: R, filterList: f } = r;
-  return g(o, P, R, f, e);
+    return g(o, r.composition, r.filterList, e);
+  const { productsPerRow: u = f, composition: P, filterList: R } = r;
+  return w(o, u, P, R, e);
 }
 export {
-  b as prepareProductRows
+  O as prepareProductRows
 };

package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js

@@ -1,60 +1,48 @@
 import { RecommendationBlockId as t } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_ATTR as U, ATTR_PRODUCT_BUTTON as x, CSS_CLASS_RECO_BUTTON as y, ATTR_PRODUCT_OMNIBUS_DISCOUNT as E, ATTR_PRODUCT_OMNIBUS_PRICE as B, ATTR_PRODUCT_OLD_PRICE as I, ATTR_PRODUCT_PRICE as L, ATTR_PRODUCT_NAME as D, ATTR_PRODUCT_IMAGE as R } from "../../constants/selectors.js";
-import { formatProductPrice as m, bgColorFragment as f, renderStyledParagraph as T, CUSTOM_CELL_HTML as P, cellBgStyleAttr as $, DEFAULT_BUTTON_BORDER_STYLE as h, renderButtonLabel as N, DEFAULT_BUTTON_ANCHOR_STYLE as v, resolveButtonBorderClass as M, resolvePStyle as A, getCurrentCurrencyConfig as w, resolveOmnibusText as S, isSamePrice as z, DEFAULT_IMG_STYLE as F, sanitizeImageUrl as G } from "../utils.js";
-const H = `${v} padding: 5px 30px;`, k = {
-  pStyle: "font-size: 16px; color: #333333; font-weight: bold; margin: 0;",
-  openTags: "<strong>",
-  closeTags: "</strong>"
-}, n = {
-  pStyle: "font-size: 14px; color: #999999; margin: 0;",
-  openTags: "<s><strong>",
-  closeTags: "</strong></s>"
-};
-function q(a, e = !0, l, r) {
-  const c = m(a, "price"), d = m(a, "original_price"), b = c === d, s = (g) => `<td
-                class="esd-block-text product-price"
-                esd-extension-block-id="${t.PRICE}"
-                align="${(l == null ? void 0 : l.cellAlignment) ?? "left"}"
-                valign="middle"
-                style="width: auto;${g}${f(l == null ? void 0 : l.cellBackgroundColor)}">
-                ${T(c, k, l == null ? void 0 : l.styleTemplate)}
-            </td>`, u = (g) => `<td
-                class="esd-block-text product-old-price"
-                esd-extension-block-id="${t.OLD_PRICE}"
-                data-same-price="${b}"
-                align="${(r == null ? void 0 : r.cellAlignment) ?? "left"}"
-                valign="middle"
-                style="width: auto;${g}${f(r == null ? void 0 : r.cellBackgroundColor)}">
-                ${T(d, n, r == null ? void 0 : r.styleTemplate)}
-            </td>`, C = e ? u(" padding-right: 8px;") : s(" padding-right: 8px;"), _ = e ? s("") : u("");
-  return `
-        <tr>
-            ${C}
-            ${_}
-        </tr>
-    `;
+import { ATTR_PRODUCT_ATTR as R, ATTR_PRODUCT_BUTTON as C, CSS_CLASS_RECO_BUTTON as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as A, ATTR_PRODUCT_OMNIBUS_PRICE as U, ATTR_PRODUCT_OLD_PRICE as k, ATTR_PRODUCT_PRICE as B, ATTR_PRODUCT_NAME as E, ATTR_PRODUCT_IMAGE as f } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as P } from "../../store/recommendation.js";
+import { formatPrice as I } from "../../utils/priceFormatter.js";
+import { CUSTOM_CELL_HTML as h, renderStyledParagraph as u, cellBgStyleAttr as d, DEFAULT_BUTTON_BORDER_STYLE as L, renderButtonLabel as N, DEFAULT_BUTTON_ANCHOR_STYLE as D, resolveButtonBorderClass as v, resolvePStyle as y, resolveOmnibusText as S, DEFAULT_IMG_STYLE as M, sanitizeImageUrl as w } from "../utils.js";
+const z = `${D} padding: 5px 30px;`;
+function x() {
+  const r = P(), { currencySettings: e } = r.recommendationConfigs;
+  return {
+    code: e.value,
+    symbol: e.symbol,
+    alignment: e.alignment === "0" ? "before" : "after",
+    decimalCount: parseInt(e.decimalCount) || 2,
+    decimalSeparator: e.decimalSeparator,
+    thousandSeparator: e.thousandSeparator
+  };
+}
+function T(r, e = "price") {
+  const l = x(), a = r[e], c = (a == null ? void 0 : a[l.code]) ?? Object.values(a ?? {})[0] ?? 0;
+  return I({
+    price: c,
+    currency: l
+  });
 }
-const J = {
+const V = {
   /**
    * Image cell - left column (120px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
    */
-  [R]: (a, e) => {
-    var r;
-    const l = ((r = e == null ? void 0 : e.styleTemplate) == null ? void 0 : r.imgStyle) ?? F;
+  [f]: (r, e) => {
+    var a;
+    const l = ((a = e == null ? void 0 : e.styleTemplate) == null ? void 0 : a.imgStyle) ?? M;
     return `
         <td
             width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
             esd-extension-block-id="${t.IMAGE}"
-            data-attribute-type="${R}"
+            data-attribute-type="${f}"
             data-visibility="1"
             align="center"
             valign="middle">
-            <a target="_blank" href="${a.url}" class="${y}">
+            <a target="_blank" href="${r.url}" class="${_}">
                 <img
-                    src="${G(a.image_url)}"
-                    alt="${a.name}"
+                    src="${w(r.image_url)}"
+                    alt="${r.name}"
                     style="${l}"
                     class="adapt-img product-image">
             </a>
@@ -64,9 +52,9 @@ const J = {
   /**
    * Name element - row for info cell table
    */
-  [D]: (a, e) => {
-    const l = T(
-      a.name,
+  [E]: (r, e) => {
+    const l = u(
+      r.name,
       {
         pStyle: "font-size: 16px; color: #333333; font-weight: 600; margin: 0;",
         openTags: "<strong>",
@@ -78,7 +66,7 @@ const J = {
         <tr>
             <td
                 class="esd-block-text product-name${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
-                esd-extension-block-id="${t.NAME}"${$(e == null ? void 0 : e.cellBackgroundColor)}
+                esd-extension-block-id="${t.NAME}"${d(e == null ? void 0 : e.cellBackgroundColor)}
                 align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
                 ${l}
             </td>
@@ -88,17 +76,21 @@ const J = {
   /**
    * Price element - row for info cell table
    */
-  [L]: (a, e) => {
-    const l = T(
-      m(a, "price"),
-      k,
+  [B]: (r, e) => {
+    const l = u(
+      T(r, "price"),
+      {
+        pStyle: "font-size: 16px; color: #333333; font-weight: bold; margin: 0;",
+        openTags: "<strong>",
+        closeTags: "</strong>"
+      },
       e == null ? void 0 : e.styleTemplate
     );
     return `
         <tr>
             <td
                 class="esd-block-text product-price${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
-                esd-extension-block-id="${t.PRICE}"${$(e == null ? void 0 : e.cellBackgroundColor)}
+                esd-extension-block-id="${t.PRICE}"${d(e == null ? void 0 : e.cellBackgroundColor)}
                 align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
                 ${l}
             </td>
@@ -108,18 +100,21 @@ const J = {
   /**
    * Old price element - row for info cell table
    */
-  [I]: (a, e) => {
-    const l = T(
-      m(a, "original_price"),
-      n,
+  [k]: (r, e) => {
+    const l = u(
+      T(r, "original_price"),
+      {
+        pStyle: "font-size: 14px; color: #999999; margin: 0;",
+        openTags: "<s><strong>",
+        closeTags: "</strong></s>"
+      },
       e == null ? void 0 : e.styleTemplate
     );
     return `
         <tr>
             <td
                 class="esd-block-text product-old-price${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
-                esd-extension-block-id="${t.OLD_PRICE}"
-                data-same-price="${z(a)}"${$(e == null ? void 0 : e.cellBackgroundColor)}
+                esd-extension-block-id="${t.OLD_PRICE}"${d(e == null ? void 0 : e.cellBackgroundColor)}
                 align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
                 ${l}
             </td>
@@ -129,19 +124,19 @@ const J = {
   /**
    * Omnibus price element - row for info cell table
    */
-  [B]: (a, e) => {
-    const l = A("font-size: 12px; color: #666666; margin: 0;", e == null ? void 0 : e.styleTemplate), { before: r, after: c } = S(e == null ? void 0 : e.omnibusText, "Lowest 30-day price: ");
+  [U]: (r, e) => {
+    const l = y("font-size: 12px; color: #666666; margin: 0;", e == null ? void 0 : e.styleTemplate), { before: a, after: c } = S(e == null ? void 0 : e.omnibusText, "Lowest 30-day price: ");
     return `
         <tr>
             <td
                 class="esd-block-text product-omnibus-price${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
-                data-text-before="${r}"
+                data-text-before="${a}"
                 data-text-after="${c}"
-                esd-extension-block-id="${t.OMNIBUS_PRICE}"${$(e == null ? void 0 : e.cellBackgroundColor)}
+                esd-extension-block-id="${t.OMNIBUS_PRICE}"${d(e == null ? void 0 : e.cellBackgroundColor)}
                 align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
                 <p contenteditable="false" style="${l}">
-                    <span class="omnibus-text-before">${r}</span>
-                    <span class="omnibus-price-value">${m(a, "original_price")}</span>
+                    <span class="omnibus-text-before">${a}</span>
+                    <span class="omnibus-price-value">${T(r, "original_price")}</span>
                     <span class="omnibus-text-after">${c}</span>
                 </p>
             </td>
@@ -151,21 +146,21 @@ const J = {
   /**
    * Omnibus discount element - row for info cell table
    */
-  [E]: (a, e) => {
-    var _, g;
-    const l = A("font-size: 12px; color: #666666; margin: 0;", e == null ? void 0 : e.styleTemplate), r = w(), c = ((_ = a.original_price) == null ? void 0 : _[r.code]) ?? Object.values(a.original_price ?? {})[0] ?? 0, d = ((g = a.price) == null ? void 0 : g[r.code]) ?? Object.values(a.price ?? {})[0] ?? 0, b = c > 0 ? Math.round((c - d) / c * 100) : 0, s = b > 0 ? `-${b}%` : "0%", { before: u, after: C } = S(e == null ? void 0 : e.omnibusText);
+  [A]: (r, e) => {
+    var b, n;
+    const l = y("font-size: 12px; color: #666666; margin: 0;", e == null ? void 0 : e.styleTemplate), a = x(), c = ((b = r.original_price) == null ? void 0 : b[a.code]) ?? Object.values(r.original_price ?? {})[0] ?? 0, s = ((n = r.price) == null ? void 0 : n[a.code]) ?? Object.values(r.price ?? {})[0] ?? 0, g = c > 0 ? Math.round((c - s) / c * 100) : 0, O = g > 0 ? `-${g}%` : "0%", { before: m, after: $ } = S(e == null ? void 0 : e.omnibusText);
     return `
         <tr>
             <td
                 class="esd-block-text product-omnibus-discount${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
-                data-text-before="${u}"
-                data-text-after="${C}"
-                esd-extension-block-id="${t.OMNIBUS_DISCOUNT}"${$(e == null ? void 0 : e.cellBackgroundColor)}
+                data-text-before="${m}"
+                data-text-after="${$}"
+                esd-extension-block-id="${t.OMNIBUS_DISCOUNT}"${d(e == null ? void 0 : e.cellBackgroundColor)}
                 align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
                 <p contenteditable="false" style="${l}">
-                    <span class="omnibus-text-before">${u}</span>
-                    <span class="omnibus-discount-value">${s}</span>
-                    <span class="omnibus-text-after">${C}</span>
+                    <span class="omnibus-text-before">${m}</span>
+                    <span class="omnibus-discount-value">${O}</span>
+                    <span class="omnibus-text-after">${$}</span>
                 </p>
             </td>
         </tr>
@@ -175,24 +170,24 @@ const J = {
    * Button cell - right column (100px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
    */
-  [x]: (a, e) => {
-    const l = e == null ? void 0 : e.styleTemplate, r = (l == null ? void 0 : l.buttonBorderStyle) ?? h, c = (l == null ? void 0 : l.buttonAnchorStyle) ?? H, d = N((l == null ? void 0 : l.buttonText) ?? "Buy", l);
+  [C]: (r, e) => {
+    const l = e == null ? void 0 : e.styleTemplate, a = (l == null ? void 0 : l.buttonBorderStyle) ?? L, c = (l == null ? void 0 : l.buttonAnchorStyle) ?? z, s = N((l == null ? void 0 : l.buttonText) ?? "Buy", l);
     return `
         <td
             width="100"
             class="esd-block-button button-cell recommendation-attribute-row product-button ${(e == null ? void 0 : e.cellClasses) ?? "es-p5l es-p5r"}"
             esd-extension-block-id="${t.BUTTON}"
-            data-attribute-type="${x}"
+            data-attribute-type="${C}"
             data-visibility="1"
             align="${(e == null ? void 0 : e.cellAlignment) ?? "center"}"
             valign="middle">
-            <span class="${M(l)}" style="${r}">
+            <span class="${v(l)}" style="${a}">
                 <a
-                    href="${a.url}"
+                    href="${r.url}"
                     target="_blank"
-                    class="es-button ${y}"
+                    class="es-button ${_}"
                     style="${c}">
-                    ${d}
+                    ${s}
                 </a>
             </span>
         </td>
@@ -204,8 +199,8 @@ const J = {
    * @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
    * @param content - Display content for the cell
    */
-  [P]: (a, e, l) => {
-    const r = T(
+  [h]: (r, e, l) => {
+    const a = u(
       e,
       { pStyle: "font-size: 12px; color: #666666; margin: 0;", openTags: "", closeTags: "" },
       l == null ? void 0 : l.styleTemplate
@@ -213,17 +208,16 @@ const J = {
     return `
         <tr>
             <td
-                ${U}="${a}"
+                ${R}="${r}"
                 class="esd-block-text product-custom-attribute${l != null && l.cellClasses ? ` ${l.cellClasses}` : ""}"
-                esd-extension-block-id="${t.CUSTOM_ATTRIBUTE}"${$(l == null ? void 0 : l.cellBackgroundColor)}
+                esd-extension-block-id="${t.CUSTOM_ATTRIBUTE}"${d(l == null ? void 0 : l.cellBackgroundColor)}
                 align="${(l == null ? void 0 : l.cellAlignment) ?? "left"}">
-                ${r}
+                ${a}
             </td>
         </tr>
     `;
   }
 };
 export {
-  J as listElementRenderer,
-  q as renderInlineListPriceRow
+  V as listElementRenderer
 };

package/dist/extensions/Blocks/Recommendation/templates/list/template.js

@@ -1,15 +1,15 @@
-import { ATTR_PRODUCT_IMAGE as p, ATTR_PRODUCT_BUTTON as C, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as m } from "../../constants/selectors.js";
-import { buildSpacer as I, DEFAULT_CARD_COMPOSITION as g, buildElementRenderer as E, buildCellOptions as a, resolveInlinePriceOrder as w, DEFAULT_CARD_VISIBILITY as y } from "../utils.js";
-import { listElementRenderer as L, renderInlineListPriceRow as O } from "./elementRenderer.js";
-const S = "0 5px";
-function U(l, r, n) {
-  const e = n ? "" : ' style="display: none;"', o = l.replace(/<tr>/, "").replace(/<\/tr>/, "");
+import { ATTR_PRODUCT_IMAGE as b, ATTR_PRODUCT_BUTTON as s } from "../../constants/selectors.js";
+import { buildSpacer as I, DEFAULT_CARD_COMPOSITION as O, buildElementRenderer as T, DEFAULT_CARD_VISIBILITY as S } from "../utils.js";
+import { listElementRenderer as N } from "./elementRenderer.js";
+const L = "0 5px";
+function U(n, r, e) {
+  const l = e ? "" : ' style="display: none;"', a = n.replace(/<tr>/, "").replace(/<\/tr>/, "");
   return `<tr
             class="recommendation-attribute-row"
             data-attribute-type="${r}"
-            data-visibility="${n ? "1" : "0"}"${e}>${o}</tr>`;
+            data-visibility="${e ? "1" : "0"}"${l}>${a}</tr>`;
 }
-const N = `
+const $ = `
     <tr class="recommendation-product-row">
         <td style="padding: {-{-CARD_PADDING-}-};">
             <table
@@ -27,40 +27,49 @@ const N = `
         </td>
     </tr>
 `;
-function $(l, r = g, n = {}, e = {}) {
+function x(n, r = O, e = {}, l = {}) {
   const {
-    cellPadding: o = S,
-    cardBackgroundColor: d,
-    visibility: c,
-    priceInline: i = !1
-  } = e, u = d ? ` style="background-color: ${d};"` : "", s = E(L, r, n), P = s[p](l, a(p, e)), R = w(r), T = `
+    cellPadding: a = L,
+    styleTemplates: o,
+    cardBackgroundColor: p,
+    cellBackgroundColors: c,
+    cellAlignments: d,
+    cellClasses: i,
+    omnibusTexts: R,
+    visibility: C
+  } = l, D = p ? ` style="background-color: ${p};"` : "", u = T(N, r, e), _ = { styleTemplate: o == null ? void 0 : o[b] }, P = u[b](n, _), m = `
         <td class="product-info-cell" valign="middle" style="padding: 15px;">
             <table cellpadding="0" cellspacing="0" role="presentation" width="100%" style="table-layout: fixed;">
                 <tbody>
-                    ${r.filter((t) => t !== p && t !== C).filter((t) => !(i && t === R.skip)).filter((t) => s[t]).map((t) => {
-    const b = (c == null ? void 0 : c[t]) ?? y[t] ?? !0, A = i && t === R.anchor ? O(
-      l,
-      R.originalFirst,
-      a(m, e),
-      a(f, e)
-    ) : s[t](l, a(t, e));
-    return U(A, t, b);
+                    ${r.filter((t) => t !== b && t !== s).filter((t) => u[t]).map((t) => {
+    const w = (C == null ? void 0 : C[t]) ?? S[t] ?? !0, E = u[t](n, {
+      styleTemplate: o == null ? void 0 : o[t],
+      cellBackgroundColor: c == null ? void 0 : c[t],
+      cellAlignment: d == null ? void 0 : d[t],
+      cellClasses: i == null ? void 0 : i[t],
+      omnibusText: R == null ? void 0 : R[t]
+    });
+    return U(E, t, w);
   }).join(`
                     `)}
                 </tbody>
             </table>
         </td>
-    `, _ = s[C](l, a(C, e)), D = P + T + _;
-  return N.replace("{-{-CARD_PADDING-}-}", o).replace("{-{-WRAPPER_STYLE-}-}", u).replace("{-{-PRODUCT_CONTENT-}-}", D);
+    `, A = {
+    styleTemplate: o == null ? void 0 : o[s],
+    cellAlignment: d == null ? void 0 : d[s],
+    cellClasses: i == null ? void 0 : i[s]
+  }, f = u[s](n, A), g = P + m + f;
+  return $.replace("{-{-CARD_PADDING-}-}", a).replace("{-{-WRAPPER_STYLE-}-}", D).replace("{-{-PRODUCT_CONTENT-}-}", g);
 }
-function W(l, r, n = {}, e = {}) {
-  const o = I(e.rowSpacingPx);
-  return l.map((d, c) => {
-    const i = $(d, r, n, e);
-    return c > 0 ? o + i : i;
+function B(n, r, e = {}, l = {}) {
+  const a = I(l.rowSpacingPx);
+  return n.map((o, p) => {
+    const c = x(o, r, e, l);
+    return p > 0 ? a + c : c;
   }).join("");
 }
 export {
-  $ as getListProductCard,
-  W as prepareProductRows
+  x as getListProductCard,
+  B as prepareProductRows
 };