@useinsider/guido 3.7.2-beta.1489585 → 3.7.2-beta.2220fb0

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

@@ -1,166 +1,148 @@
-import { RecommendationBlockId as t } from "../../constants/blockIds.js";
-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
-  };
+import { RecommendationBlockId as e } from "../../constants/blockIds.js";
+import { ATTR_PRODUCT_ATTR as m, ATTR_PRODUCT_BUTTON as d, CSS_CLASS_RECO_BUTTON as p, ATTR_PRODUCT_IMAGE as b, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as f, ATTR_PRODUCT_OLD_PRICE as x, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as _ } from "../../constants/selectors.js";
+import { formatProductPrice as a, isSamePrice as g, CUSTOM_CELL_HTML as $, getCurrentCurrencyConfig as C, sanitizeImageUrl as R } from "../utils.js";
+function k(t) {
+  const s = `<s><strong>${a(t, "original_price")}</strong></s>`;
+  return `
+        <tr>
+            <td
+                class="esd-block-text product-old-price"
+                esd-extension-block-id="${e.OLD_PRICE}"
+                data-same-price="${g(t)}"
+                align="left">
+                <p
+                    contenteditable="false"
+                    style="font-size: 14px; color: #999999; margin: 0;">
+                    ${s}
+                </p>
+            </td>
+        </tr>
+    `;
 }
-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
-  });
+function h(t, s = !0) {
+  const n = `<s><strong>${a(t, "original_price")}</strong></s>`, r = (o) => `<td
+                class="esd-block-text product-price"
+                esd-extension-block-id="${e.PRICE}"
+                align="left"
+                valign="middle"
+                style="width: auto;${o}">
+                <p contenteditable="false" style="font-size: 16px; color: #333333; font-weight: bold; margin: 0;">
+                    <strong>${a(t, "price")}</strong>
+                </p>
+            </td>`, i = (o) => `<td
+                class="esd-block-text product-old-price"
+                esd-extension-block-id="${e.OLD_PRICE}"
+                data-same-price="${g(t)}"
+                align="left"
+                valign="middle"
+                style="width: auto;${o}">
+                <p
+                    contenteditable="false"
+                    style="font-size: 14px; color: #999999; margin: 0;">
+                    ${n}
+                </p>
+            </td>`, c = s ? i(" padding-right: 8px;") : r(" padding-right: 8px;"), l = s ? r("") : i("");
+  return `
+        <tr>
+            ${c}
+            ${l}
+        </tr>
+    `;
 }
-const V = {
+const U = {
   /**
    * Image cell - left column (120px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
    */
-  [f]: (r, e) => {
-    var a;
-    const l = ((a = e == null ? void 0 : e.styleTemplate) == null ? void 0 : a.imgStyle) ?? M;
-    return `
+  [b]: (t) => `
         <td
             width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
-            esd-extension-block-id="${t.IMAGE}"
-            data-attribute-type="${f}"
+            esd-extension-block-id="${e.IMAGE}"
+            data-attribute-type="${b}"
             data-visibility="1"
             align="center"
             valign="middle">
-            <a target="_blank" href="${r.url}" class="${_}">
+            <a target="_blank" href="${t.url}" class="${p}">
                 <img
-                    src="${w(r.image_url)}"
-                    alt="${r.name}"
-                    style="${l}"
+                    src="${R(t.image_url)}"
+                    alt="${t.name}"
+                    style="display: block; max-width: 100%; height: auto;"
                     class="adapt-img product-image">
             </a>
         </td>
-    `;
-  },
+    `,
   /**
    * Name element - row for info cell table
    */
-  [E]: (r, e) => {
-    const l = u(
-      r.name,
-      {
-        pStyle: "font-size: 16px; color: #333333; font-weight: 600; margin: 0;",
-        openTags: "<strong>",
-        closeTags: "</strong>"
-      },
-      e == null ? void 0 : e.styleTemplate
-    );
-    return `
+  [_]: (t) => `
         <tr>
             <td
-                class="esd-block-text product-name${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
-                esd-extension-block-id="${t.NAME}"${d(e == null ? void 0 : e.cellBackgroundColor)}
-                align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
-                ${l}
+                class="esd-block-text product-name"
+                esd-extension-block-id="${e.NAME}"
+                align="left">
+                <p contenteditable="false" style="font-size: 16px; color: #333333; font-weight: 600; margin: 0;">
+                    <strong>${t.name}</strong>
+                </p>
             </td>
         </tr>
-    `;
-  },
+    `,
   /**
    * Price element - row for info cell table
    */
-  [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 `
+  [T]: (t) => `
         <tr>
             <td
-                class="esd-block-text product-price${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
-                esd-extension-block-id="${t.PRICE}"${d(e == null ? void 0 : e.cellBackgroundColor)}
-                align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
-                ${l}
+                class="esd-block-text product-price"
+                esd-extension-block-id="${e.PRICE}"
+                align="left">
+                <p contenteditable="false" style="font-size: 16px; color: #333333; font-weight: bold; margin: 0;">
+                    <strong>${a(t, "price")}</strong>
+                </p>
             </td>
         </tr>
-    `;
-  },
+    `,
   /**
    * Old price element - row for info cell table
    */
-  [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}"${d(e == null ? void 0 : e.cellBackgroundColor)}
-                align="${(e == null ? void 0 : e.cellAlignment) ?? "left"}">
-                ${l}
-            </td>
-        </tr>
-    `;
-  },
+  [x]: (t) => k(t),
   /**
    * Omnibus price element - row for info cell table
    */
-  [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 `
+  [f]: (t) => `
         <tr>
             <td
-                class="esd-block-text product-omnibus-price${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
-                data-text-before="${a}"
-                data-text-after="${c}"
-                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">${a}</span>
-                    <span class="omnibus-price-value">${T(r, "original_price")}</span>
-                    <span class="omnibus-text-after">${c}</span>
+                class="esd-block-text product-omnibus-price"
+                data-text-before="Lowest 30-day price: "
+                data-text-after=""
+                esd-extension-block-id="${e.OMNIBUS_PRICE}"
+                align="left">
+                <p contenteditable="false" style="font-size: 12px; color: #666666; margin: 0;">
+                    <span class="omnibus-text-before">Lowest 30-day price: </span>
+                    <span class="omnibus-price-value">${a(t, "original_price")}</span>
+                    <span class="omnibus-text-after"></span>
                 </p>
             </td>
         </tr>
-    `;
-  },
+    `,
   /**
    * Omnibus discount element - row for info cell table
    */
-  [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);
+  [u]: (t) => {
+    var l, o;
+    const s = C(), n = ((l = t.original_price) == null ? void 0 : l[s.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, r = ((o = t.price) == null ? void 0 : o[s.code]) ?? Object.values(t.price ?? {})[0] ?? 0, i = n > 0 ? Math.round((n - r) / n * 100) : 0, c = i > 0 ? `-${i}%` : "0%";
     return `
         <tr>
             <td
-                class="esd-block-text product-omnibus-discount${e != null && e.cellClasses ? ` ${e.cellClasses}` : ""}"
-                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">${m}</span>
-                    <span class="omnibus-discount-value">${O}</span>
-                    <span class="omnibus-text-after">${$}</span>
+                class="esd-block-text product-omnibus-discount"
+                data-text-before=""
+                data-text-after=""
+                esd-extension-block-id="${e.OMNIBUS_DISCOUNT}"
+                align="left">
+                <p contenteditable="false" style="font-size: 12px; color: #666666; margin: 0;">
+                    <span class="omnibus-text-before"></span>
+                    <span class="omnibus-discount-value">${c}</span>
+                    <span class="omnibus-text-after"></span>
                 </p>
             </td>
         </tr>
@@ -170,54 +152,62 @@ const V = {
    * Button cell - right column (100px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
    */
-  [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 `
+  [d]: (t) => `
         <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="${C}"
+            class="esd-block-button button-cell recommendation-attribute-row product-button es-p5l es-p5r"
+            esd-extension-block-id="${e.BUTTON}"
+            data-attribute-type="${d}"
             data-visibility="1"
-            align="${(e == null ? void 0 : e.cellAlignment) ?? "center"}"
+            align="center"
             valign="middle">
-            <span class="${v(l)}" style="${a}">
+            <span
+                class="es-button-border"
+                style="
+                    border-width: 1px;
+                    background: rgb(217, 234, 211);
+                    border-color: rgb(106, 168, 79);
+                ">
                 <a
-                    href="${r.url}"
+                    href="${t.url}"
                     target="_blank"
-                    class="es-button ${_}"
-                    style="${c}">
-                    ${s}
+                    class="es-button ${p}"
+                    style="
+                        color: rgb(56, 118, 29);
+                        background: rgb(217, 234, 211);
+                        font-family: arial, 'helvetica neue', helvetica, sans-serif;
+                        font-size: 16px;
+                        font-weight: normal;
+                        line-height: 120%;
+                        padding: 5px 30px;
+                        mso-border-alt: 10px solid rgb(217, 234, 211);
+                        mso-padding-alt: 0;
+                    ">
+                    Buy
                 </a>
             </span>
         </td>
-    `;
-  },
+    `,
   /**
    * Custom attribute row template — same tr-td structure as Name, Price, etc.
    * Used by `buildElementRenderer` for `customAttr:*` composition entries.
    * @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
    * @param content - Display content for the cell
    */
-  [h]: (r, e, l) => {
-    const a = u(
-      e,
-      { pStyle: "font-size: 12px; color: #666666; margin: 0;", openTags: "", closeTags: "" },
-      l == null ? void 0 : l.styleTemplate
-    );
-    return `
+  [$]: (t, s) => `
         <tr>
             <td
-                ${R}="${r}"
-                class="esd-block-text product-custom-attribute${l != null && l.cellClasses ? ` ${l.cellClasses}` : ""}"
-                esd-extension-block-id="${t.CUSTOM_ATTRIBUTE}"${d(l == null ? void 0 : l.cellBackgroundColor)}
-                align="${(l == null ? void 0 : l.cellAlignment) ?? "left"}">
-                ${a}
+                ${m}="${t}"
+                class="esd-block-text product-custom-attribute"
+                esd-extension-block-id="${e.CUSTOM_ATTRIBUTE}"
+                align="left">
+                <p contenteditable="false" style="font-size: 12px; color: #666666; margin: 0;">${s}</p>
             </td>
         </tr>
-    `;
-  }
+    `
 };
 export {
-  V as listElementRenderer
+  U as listElementRenderer,
+  h as renderInlineListPriceRow,
+  k as renderListOldPriceRow
 };

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

@@ -1,23 +1,22 @@
-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>/, "");
+import { ATTR_PRODUCT_IMAGE as a, ATTR_PRODUCT_BUTTON as c } from "../../constants/selectors.js";
+import { DEFAULT_CARD_COMPOSITION as R, spacer as m, buildElementRenderer as T, resolveInlinePriceOrder as O, DEFAULT_CARD_VISIBILITY as w } from "../utils.js";
+import { listElementRenderer as y, renderInlineListPriceRow as I } from "./elementRenderer.js";
+function g(t, r, n) {
+  const o = n ? "" : ' style="display: none;"', l = t.replace(/<tr>/, "").replace(/<\/tr>/, "");
   return `<tr
             class="recommendation-attribute-row"
             data-attribute-type="${r}"
-            data-visibility="${e ? "1" : "0"}"${l}>${a}</tr>`;
+            data-visibility="${n ? "1" : "0"}"${o}>${l}</tr>`;
 }
-const $ = `
+const _ = `
     <tr class="recommendation-product-row">
-        <td style="padding: {-{-CARD_PADDING-}-};">
+        <td style="padding: 0 5px;">
             <table
                 width="100%"
                 cellpadding="0"
                 cellspacing="0"
                 border="0"
-                class="product-card-wrapper"{-{-WRAPPER_STYLE-}-}>
+                class="product-card-wrapper">
                 <tbody>
                     <tr>
                         {-{-PRODUCT_CONTENT-}-}
@@ -27,49 +26,29 @@ const $ = `
         </td>
     </tr>
 `;
-function x(n, r = O, e = {}, l = {}) {
-  const {
-    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 = `
+function P(t, r = R, n = {}, o = {}) {
+  const { priceInline: l = !1 } = o, i = T(y, r, n), d = i[a](t), s = O(r), p = (e) => l && e === s.anchor ? I(t, s.originalFirst) : i[e](t), u = `
         <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 !== 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);
+                    ${r.filter((e) => e !== a && e !== c).filter((e) => !(l && e === s.skip)).filter((e) => i[e]).map((e) => {
+    const C = w[e] ?? !0;
+    return g(p(e), e, C);
   }).join(`
                     `)}
                 </tbody>
             </table>
         </td>
-    `, 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);
+    `, f = i[c](t), b = d + u + f;
+  return _.replace("{-{-PRODUCT_CONTENT-}-}", b);
 }
-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;
+function N(t, r, n = {}, o = {}) {
+  return t.map((l, i) => {
+    const d = P(l, r, n, o);
+    return i > 0 ? m + d : d;
   }).join("");
 }
 export {
-  x as getListProductCard,
-  B as prepareProductRows
+  P as getListProductCard,
+  N as prepareProductRows
 };