@useinsider/guido 3.6.1-beta.03230b7 → 3.7.0-beta.2037cb1

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 m } from "../../constants/blockIds.js";
-import { CURRENCY_ATTR as y, MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as v, ATTR_PRODUCT_ATTR as W } from "../../constants/selectors.js";
+import { CURRENCY_ATTR as y, MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as v, ATTR_PRODUCT_ATTR as V } from "../../constants/selectors.js";
 import { RecommendationConfigService as E } from "../../services/configService.js";
 import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
 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";
+import { formatPrice as W } from "../../utils/priceFormatter.js";
+import { isTdNode as j } from "../../utils/tagName.js";
+import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as h, sanitizeImageUrl as F, toDisplayableAttributeValue as G } from "../../templates/utils.js";
 const M = "recommendation-block-v2";
-function h(t) {
+function R(t) {
   if (!t)
     return null;
   if ("getAttribute" in t) {
@@ -19,18 +19,18 @@ function h(t) {
   return "querySelector" in t ? t.querySelector(`.${M}`) ?? null : null;
 }
 function b(t) {
-  const e = h(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 x(t) {
-  const e = h(t);
+  const e = R(t);
   if (!e || !("getAttribute" in e))
-    return R;
+    return h;
   const o = e.getAttribute("data-card-composition");
-  return o ? o.split(",").filter(Boolean) : R;
+  return o ? o.split(",").filter(Boolean) : h;
 }
 function D(t) {
   if (!t || !("childNodes" in t))
@@ -47,14 +47,14 @@ function S(t, e, o) {
 function U(t, e) {
   return t && t.length > 0 ? t : e.length > 0 ? e : L();
 }
-function G(t) {
+function Y(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 Y(t) {
+function K(t) {
   const {
     currentNode: e,
     documentModifier: o,
@@ -66,7 +66,7 @@ function Y(t) {
     return;
   const r = i ?? b(e), s = E.getConfig(e);
   if (r === "list" || !s.mobileLayoutEnabled) {
-    G({ currentNode: e, documentModifier: o });
+    Y({ currentNode: e, documentModifier: o });
     return;
   }
   const u = e.querySelector(k);
@@ -79,7 +79,7 @@ function Y(t) {
   })}</table></td>`;
   o.modifyHtml(u).setInnerHtml(g), o.apply(new p("Updated mobile product rows"));
 }
-function K(t) {
+function X(t) {
   const {
     currentNode: e,
     documentModifier: o,
@@ -98,7 +98,7 @@ function K(t) {
     composition: a,
     filterList: u.filterList
   });
-  o.modifyHtml(s).setInnerHtml(g).apply(new p("Updated product")), Y(t), n == null || n();
+  o.modifyHtml(s).setInnerHtml(g).apply(new p("Updated product")), K(t), n == null || n();
 }
 function T(t, e, o, n) {
   const c = `0 ${Math.floor(o / 2)}px`;
@@ -111,7 +111,7 @@ function T(t, e, o, n) {
     t.querySelectorAll(".product-card-wrapper")
   ).forEach((u) => {
     const l = "parentNode" in u ? u.parentNode : null;
-    l && F(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
+    l && j(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
   }), r;
 }
 function I(t, e, o) {
@@ -121,7 +121,7 @@ function I(t, e, o) {
     e.modifyHtml(r).setStyle("height", n), c = !0;
   }), c;
 }
-function X(t) {
+function z(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e)
     return;
@@ -160,9 +160,9 @@ function X(t) {
   }
   c && o.apply(new p("Reapply spacing after regeneration"));
 }
-function se(t) {
+function ae(t) {
   const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: c, composition: r } = t;
-  e && K({
+  e && X({
     currentNode: e,
     documentModifier: o,
     products: i,
@@ -170,12 +170,12 @@ function se(t) {
     composition: r,
     afterRegenerate: () => {
       setTimeout(() => {
-        X({ currentNode: e, documentModifier: o });
+        z({ currentNode: e, documentModifier: o });
       }, 0), n == null || n();
     }
   });
 }
-function ae(t, e) {
+function de(t, e) {
   return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...L(e - t.length)];
 }
 function H() {
@@ -191,12 +191,12 @@ function H() {
 }
 function A(t, e = "price") {
   const o = H(), n = t[e], i = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
-  return j({
+  return W({
     price: i,
     currency: o
   });
 }
-function z(t) {
+function J(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%";
@@ -217,12 +217,12 @@ function $(t) {
     S(e, u, l) && (s = !0);
   }
   if (r && "querySelector" in r) {
-    const u = r.querySelector(".omnibus-discount-value") ?? null, l = z(o);
+    const u = r.querySelector(".omnibus-discount-value") ?? null, l = J(o);
     S(e, u, l) && (s = !0);
   }
   return s;
 }
-function J(t) {
+function Q(t) {
   const {
     documentModifier: e,
     product: o,
@@ -237,7 +237,7 @@ function J(t) {
   let d = !1;
   if (n && "querySelector" in n) {
     const a = n.querySelector("img");
-    a && (e.modifyHtml(a).setAttribute("src", V(o.image_url)).setAttribute("alt", o.name), d = !0);
+    a && (e.modifyHtml(a).setAttribute("src", F(o.image_url)).setAttribute("alt", o.name), d = !0);
     const f = n.querySelector("a");
     f && (e.modifyHtml(f).setAttribute("href", o.url), d = !0);
   }
@@ -262,7 +262,7 @@ function B(t) {
   return "querySelector" in t ? t.querySelector(P) ?? t : t;
 }
 const O = "product_attribute.";
-function Q(t, e) {
+function Z(t, e) {
   var n;
   let o;
   if (t.startsWith(O)) {
@@ -270,9 +270,9 @@ function Q(t, e) {
     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;
+  return G(o) || null;
 }
-function Z(t, e, o) {
+function ee(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
@@ -284,7 +284,7 @@ function Z(t, e, o) {
   n.forEach((r) => {
     if (!("getAttribute" in r))
       return;
-    const s = r.getAttribute(W);
+    const s = r.getAttribute(V);
     if (!s)
       return;
     const u = i.get(s) ?? [];
@@ -296,7 +296,7 @@ function Z(t, e, o) {
     r.slice(0, u).forEach((l, d) => {
       if (!("querySelector" in l))
         return;
-      const a = Q(s, o[d]);
+      const a = Z(s, o[d]);
       if (a === null)
         return;
       const f = l.querySelector("p") ?? null;
@@ -324,7 +324,7 @@ function w(t, e, o) {
   ), d = Math.min(n.length, o.length);
   let a = !1;
   for (let f = 0; f < d; f++) {
-    const g = J({
+    const g = Q({
       documentModifier: e,
       product: o[f],
       imageEl: n[f] ?? null,
@@ -337,9 +337,9 @@ function w(t, e, o) {
     });
     a = a || g;
   }
-  return Z(t, e, o) && (a = !0), a;
+  return ee(t, e, o) && (a = !0), a;
 }
-function de(t) {
+function fe(t) {
   const { currentNode: e, documentModifier: o, products: n } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
@@ -387,7 +387,7 @@ function N(t, e, o) {
     }) && (u = !0);
   return u;
 }
-function fe(t) {
+function me(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
@@ -406,8 +406,8 @@ function fe(t) {
   }
   return r && o.apply(new p("Updated price formatting in-place")), r;
 }
-function me(t) {
-  const { currentNode: e, documentModifier: o, currency: n } = t, i = h(e);
+function pe(t) {
+  const { currentNode: e, documentModifier: o, currency: n } = t, i = R(e);
   if (!i)
     return;
   const c = n.alignment === "before" ? "0" : "1", r = (s, u) => {
@@ -416,17 +416,17 @@ function me(t) {
   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 {
-  ae as adjustProductsToSize,
+  de as adjustProductsToSize,
   A as formatProductPrice,
-  h as getBlockElement,
+  R 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
+  z as reapplySpacing,
+  K as regenerateMobileProductRows,
+  X as regenerateProductRows,
+  ae as regenerateProductRowsWithStyles,
+  pe as setCurrencyAttributes,
+  me as updatePricesInPlace,
+  fe as updateProductContentInPlace,
+  Q as updateSingleProductContent
 };

package/dist/extensions/Blocks/Recommendation/store/recommendation.js

@@ -6,8 +6,9 @@ import { DEFAULT_CARDS_IN_ROW as F } from "../constants/layout.js";
 import { EXCLUDED_ALGORITHM_IDS as D } from "../constants/defaultConfig.js";
 import { getDefaultProducts as S } from "../templates/utils.js";
 import { generateCompleteFilterQuery as b } from "../utils/filterUtil.js";
-import { isFilterValid as v } from "../validation/filterSchema.js";
-import { isConfigValid as w } from "../validation/requiredFields.js";
+import { getPartnerRecommendationParams as v } from "../utils/partnerCustomizations.js";
+import { isFilterValid as w } from "../validation/filterSchema.js";
+import { isConfigValid as N } from "../validation/requiredFields.js";
 const h = y();
 let m = null, u = null, d = null;
 function I() {
@@ -49,7 +50,7 @@ function k() {
     filterSnapshot: null
   };
 }
-const N = () => ({
+const x = () => ({
   recommendationCampaignUrls: {},
   activePredictiveAlgorithms: [],
   languages: {},
@@ -58,8 +59,8 @@ const N = () => ({
   blockStates: {},
   currentRecommendationId: null,
   configVersion: 0
-}), M = P("guidoRecommendationExtension", {
-  state: () => N(),
+}), T = P("guidoRecommendationExtension", {
+  state: () => x(),
   getters: {
     // ====================================================================
     // Proxy Getters — Backward Compatible Access to Current Block State
@@ -378,7 +379,7 @@ const N = () => ({
         const n = [...e.recommendationConfigs.filters];
         n[r] = {
           ...t,
-          isValid: v(t)
+          isValid: w(t)
         }, e.recommendationConfigs.filters = n;
       }
     },
@@ -424,7 +425,7 @@ const N = () => ({
      * every block's recommendationConfigs across user edits.
      */
     hasInvalidBlock() {
-      return Object.values(this.blockStates).some((t) => !w(t.recommendationConfigs, this));
+      return Object.values(this.blockStates).some((t) => !N(t.recommendationConfigs, this));
     },
     // ====================================================================
     // Per-Block Product Fetching
@@ -453,7 +454,10 @@ const N = () => ({
         details: !0,
         campaignId: o.variationId
       };
-      r.strategy === "manualMerchandising" ? a.productId = r.productIds.join(",") : r.strategy === "similarViewed" && (a.productId = "{itemId}"), r.strategy === "userBased" && (a.userId = "{user_id}"), c && (a.filter = c), r.shuffleProducts && (a.shuffle = !0);
+      r.strategy === "manualMerchandising" ? a.productId = r.productIds.join(",") : r.strategy === "similarViewed" && (a.productId = "{itemId}"), r.strategy === "userBased" && (a.userId = "{user_id}"), c && (a.filter = c), r.shuffleProducts && (a.shuffle = !0), Object.assign(
+        a,
+        v(o.partnerName, r.strategy)
+      );
       let f;
       try {
         f = await h.fetchRecommendationProducts(i, a);
@@ -471,5 +475,5 @@ const N = () => ({
   }
 });
 export {
-  M as useRecommendationExtensionStore
+  T as useRecommendationExtensionStore
 };

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

@@ -1,11 +1,14 @@
-import { RecommendationBlockId as s } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_ATTR as u, CSS_CLASS_RECO_BUTTON as p, ATTR_PRODUCT_BUTTON as m, ATTR_PRODUCT_OMNIBUS_DISCOUNT as h, ATTR_PRODUCT_OMNIBUS_PRICE as y, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as _, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as $ } from "../../store/recommendation.js";
+import { RecommendationBlockId as l } from "../../constants/blockIds.js";
+import { ATTR_PRODUCT_ATTR as u, CSS_CLASS_RECO_BUTTON as p, ATTR_PRODUCT_BUTTON as m, ATTR_PRODUCT_OMNIBUS_DISCOUNT as h, ATTR_PRODUCT_OMNIBUS_PRICE as y, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as $, ATTR_PRODUCT_IMAGE as _ } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as x } from "../../store/recommendation.js";
 import { formatPrice as C } from "../../utils/priceFormatter.js";
 import { CUSTOM_CELL_HTML as R, sanitizeImageUrl as O } from "../utils.js";
-const a = "0 5px", l = "attribute-cell";
+const s = "0 5px", a = "attribute-cell";
+function S(t, e = s) {
+  return `<td class="${a}" style="padding: ${e};" width="${t}%"></td>`;
+}
 function g() {
-  const t = $(), { currencySettings: e } = t.recommendationConfigs;
+  const t = x(), { currencySettings: e } = t.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -22,9 +25,9 @@ function i(t, e = "price") {
     currency: o
   });
 }
-const S = {
-  [x]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+const A = {
+  [_]: (t) => `
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -37,7 +40,7 @@ const S = {
                         <td
                             class="esd-block-image product-image"
                             align="center"
-                            esd-extension-block-id="${s.IMAGE}">
+                            esd-extension-block-id="${l.IMAGE}">
                             <a target="_blank" href="${t.url}" class="${p}">
                                 <img
                                     src="${O(t.image_url)}"
@@ -51,8 +54,8 @@ const S = {
             </table>
         </td>
     `,
-  [_]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
+  [$]: (t) => `
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="middle">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -66,7 +69,7 @@ const S = {
                         <td
                             class="esd-block-text product-name es-p10t es-p10b es-p15l es-p15r"
                             align="center"
-                            esd-extension-block-id="${s.NAME}">
+                            esd-extension-block-id="${l.NAME}">
                             <p contenteditable="false" style="font-size: 16px; color: #333333;">
                                 <strong>${t.name}</strong>
                             </p>
@@ -77,7 +80,7 @@ const S = {
         </td>
     `,
   [f]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -90,7 +93,7 @@ const S = {
                         <td
                             class="esd-block-text product-price es-p15l es-p15r"
                             align="center"
-                            esd-extension-block-id="${s.PRICE}">
+                            esd-extension-block-id="${l.PRICE}">
                             <p contenteditable="false" style="font-size: 16px; color: #333333;">
                                 <strong>${i(t, "price")}</strong>
                             </p>
@@ -101,7 +104,7 @@ const S = {
         </td>
     `,
   [T]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -114,9 +117,11 @@ const S = {
                         <td
                             class="esd-block-text product-old-price es-p15l es-p15r"
                             align="center"
-                            esd-extension-block-id="${s.OLD_PRICE}">
-                            <p contenteditable="false" style="font-size: 14px; color: #999999;">
-                                <strong>${i(t, "original_price")}</strong>
+                            esd-extension-block-id="${l.OLD_PRICE}">
+                            <p
+                                contenteditable="false"
+                                style="font-size: 14px; color: #999999;">
+                                <s><strong>${i(t, "original_price")}</strong></s>
                             </p>
                         </td>
                     </tr>
@@ -125,7 +130,7 @@ const S = {
         </td>
     `,
   [y]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -140,7 +145,7 @@ const S = {
                             align="center"
                             data-text-before="Lowest 30-day price: "
                             data-text-after=""
-                            esd-extension-block-id="${s.OMNIBUS_PRICE}">
+                            esd-extension-block-id="${l.OMNIBUS_PRICE}">
                             <p contenteditable="false" style="font-size: 12px; color: #666666;">
                                 <span class="omnibus-text-before">Lowest 30-day price: </span>
                                 <span class="omnibus-price-value">${i(t, "original_price")}</span>
@@ -156,7 +161,7 @@ const S = {
     var r, c;
     const e = g(), o = ((r = t.original_price) == null ? void 0 : r[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((c = t.price) == null ? void 0 : c[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, d = o > 0 ? Math.round((o - n) / o * 100) : 0, b = d > 0 ? `-${d}%` : "0%";
     return `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -171,7 +176,7 @@ const S = {
                             align="center"
                             data-text-before=""
                             data-text-after=""
-                            esd-extension-block-id="${s.OMNIBUS_DISCOUNT}">
+                            esd-extension-block-id="${l.OMNIBUS_DISCOUNT}">
                             <p contenteditable="false" style="font-size: 12px; color: #666666;">
                                 <span class="omnibus-text-before"></span>
                                 <span class="omnibus-discount-value">${b}</span>
@@ -185,7 +190,7 @@ const S = {
     `;
   },
   [m]: () => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -198,7 +203,7 @@ const S = {
                         <td
                             class="esd-block-button product-button es-p10t es-p10b"
                             align="center"
-                            esd-extension-block-id="${s.BUTTON}">
+                            esd-extension-block-id="${l.BUTTON}">
                             <span
                                 class="es-button-border"
                                 style="
@@ -237,7 +242,7 @@ const S = {
    * @param content - Display content for the cell
    */
   [R]: (t, e) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="middle">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -252,7 +257,7 @@ const S = {
                             ${u}="${t}"
                             class="esd-block-text product-custom-attribute es-p0t es-p0b es-p15l es-p15r"
                             align="center"
-                            esd-extension-block-id="${s.CUSTOM_ATTRIBUTE}">
+                            esd-extension-block-id="${l.CUSTOM_ATTRIBUTE}">
                             <p contenteditable="false" style="font-size: 12px; color: #666666;">${e}</p>
                         </td>
                     </tr>
@@ -262,7 +267,8 @@ const S = {
     `
 };
 export {
-  l as ATTRIBUTE_CELL_CLASS,
-  a as DEFAULT_CELL_PADDING,
-  S as gridElementRenderer
+  a as ATTRIBUTE_CELL_CLASS,
+  s as DEFAULT_CELL_PADDING,
+  S as buildFillerCell,
+  A as gridElementRenderer
 };

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

@@ -1,7 +1,7 @@
-import { DEFAULT_PRODUCTS_PER_ROW as L } from "../../constants/layout.js";
-import { getDefaultProducts as E, DEFAULTS as I, createBlockTemplate as _, DEFAULT_CARD_COMPOSITION as S, spacer as b, buildElementRenderer as A, DEFAULT_CARD_VISIBILITY as f } from "../utils.js";
-import { ATTRIBUTE_CELL_CLASS as w, DEFAULT_CELL_PADDING as D, gridElementRenderer as C } from "./elementRenderer.js";
-const O = `
+import { DEFAULT_PRODUCTS_PER_ROW as m } from "../../constants/layout.js";
+import { getDefaultProducts as I, DEFAULTS as b, createBlockTemplate as E, DEFAULT_CARD_COMPOSITION as L, spacer as S, buildElementRenderer as _, DEFAULT_CARD_VISIBILITY as f } from "../utils.js";
+import { buildFillerCell as w, gridElementRenderer as A } from "./elementRenderer.js";
+const D = `
     <tr class="recommendation-product-row">
         <td>
             <table
@@ -18,7 +18,7 @@ const O = `
             </table>
         </td>
     </tr>
-`, g = `
+`, C = `
     <tr
         class="recommendation-attribute-row"
         data-attribute-type="{-{-ATTR_TYPE-}-}"
@@ -27,38 +27,38 @@ const O = `
         {-{-CELLS-}-}
     </tr>
 `;
-function P(t, e, o, r = S, n = {}) {
-  const c = (100 / e).toFixed(2), i = e - t.length, l = `<td class="${w}" style="padding: ${D};" width="${c}%"></td>`, d = i > 0 ? l.repeat(i) : "", a = A(o, r, n);
-  return r.filter((s) => a[s]).map((s) => {
-    const T = f[s] ?? !0, u = T ? "" : 'style="display: none;"', R = t.map((m) => a[s](m).replace("<td", `<td width="${c}%"`)).join("");
-    return g.replace("{-{-ATTR_TYPE-}-}", s).replace("{-{-VISIBILITY-}-}", T ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", u).replace("{-{-CELLS-}-}", R + d);
+function O(t, e, n, r = L, c = {}) {
+  const a = (100 / e).toFixed(2), s = e - t.length, l = s > 0 ? w(a).repeat(s) : "", i = _(n, r, c);
+  return r.filter((o) => i[o]).map((o) => {
+    const p = f[o] ?? !0, u = p ? "" : 'style="display: none;"', T = t.map((R) => i[o](R).replace("<td", `<td width="${a}%"`)).join("");
+    return C.replace("{-{-ATTR_TYPE-}-}", o).replace("{-{-VISIBILITY-}-}", p ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", u).replace("{-{-CELLS-}-}", T + l);
   }).join("");
 }
-function U(t, e, o, r, n = {}) {
-  const c = [];
+function g(t, e, n, r, c = {}) {
+  const a = [];
   for (let l = 0; l < t.length; l += e)
-    c.push(t.slice(l, l + e));
-  return c.map((l, d) => {
-    const a = P(
+    a.push(t.slice(l, l + e));
+  return a.map((l, i) => {
+    const d = O(
       l,
       e,
-      o,
+      n,
       r,
-      n
-    ), p = O.replace("{-{-ATTRIBUTE_ROWS-}-}", a);
-    return d > 0 ? b + p : p;
+      c
+    ), o = D.replace("{-{-ATTRIBUTE_ROWS-}-}", d);
+    return i > 0 ? S + o : o;
   }).join("");
 }
-function h(t, e, o, r = {}) {
-  return U(t, e, C, o, r);
+function P(t, e, n, r = {}) {
+  return g(t, e, A, n, r);
 }
-function F(t) {
-  const e = t ? `ins-recommendation-v3-block-${t}` : void 0, o = _("grid", e), r = E(), n = h(r, L);
-  return o.replace("{-{-TITLE-}-}", I.TITLE).replace("{-{-PRODUCT_ROWS-}-}", n).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", "");
+function B(t) {
+  const e = t ? `ins-recommendation-v3-block-${t}` : void 0, n = E("grid", e), r = I(), c = P(r, m);
+  return n.replace("{-{-TITLE-}-}", b.TITLE).replace("{-{-PRODUCT_ROWS-}-}", c).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", "");
 }
 export {
-  F as getDefaultTemplate,
-  P as prepareGridAttributeRows,
-  U as prepareGridProductRows,
-  h as prepareProductRows
+  B as getDefaultTemplate,
+  O as prepareGridAttributeRows,
+  g as prepareGridProductRows,
+  P as prepareProductRows
 };

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

@@ -14,10 +14,10 @@ function b() {
     thousandSeparator: e.thousandSeparator
   };
 }
-function s(t, e = "price") {
-  const n = b(), a = t[e], r = (a == null ? void 0 : a[n.code]) ?? Object.values(a ?? {})[0] ?? 0;
+function r(t, e = "price") {
+  const n = b(), s = t[e], a = (s == null ? void 0 : s[n.code]) ?? Object.values(s ?? {})[0] ?? 0;
   return R({
-    price: r,
+    price: a,
     currency: n
   });
 }
@@ -69,7 +69,7 @@ const I = {
                 esd-extension-block-id="${o.PRICE}"
                 align="left">
                 <p contenteditable="false" style="font-size: 16px; color: #333333; font-weight: bold; margin: 0;">
-                    <strong>${s(t, "price")}</strong>
+                    <strong>${r(t, "price")}</strong>
                 </p>
             </td>
         </tr>
@@ -85,8 +85,8 @@ const I = {
                 align="left">
                 <p
                     contenteditable="false"
-                    style="font-size: 14px; color: #999999; text-decoration: line-through; margin: 0;">
-                    <strong>${s(t, "original_price")}</strong>
+                    style="font-size: 14px; color: #999999; margin: 0;">
+                    <s><strong>${r(t, "original_price")}</strong></s>
                 </p>
             </td>
         </tr>
@@ -104,7 +104,7 @@ const I = {
                 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">${s(t, "original_price")}</span>
+                    <span class="omnibus-price-value">${r(t, "original_price")}</span>
                     <span class="omnibus-text-after"></span>
                 </p>
             </td>
@@ -115,7 +115,7 @@ const I = {
    */
   [g]: (t) => {
     var i, l;
-    const e = b(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, a = ((l = t.price) == null ? void 0 : l[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - a) / n * 100) : 0, m = r > 0 ? `-${r}%` : "0%";
+    const e = b(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, s = ((l = t.price) == null ? void 0 : l[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, a = n > 0 ? Math.round((n - s) / n * 100) : 0, m = a > 0 ? `-${a}%` : "0%";
     return `
         <tr>
             <td