@useinsider/guido 3.7.0-beta.830822b → 3.7.0-beta.9fddd7d

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,151 +1,159 @@
-import { useConfig as g } from "../../../composables/useConfig.js";
-import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
+import { useConfig as _ } from "../../../composables/useConfig.js";
+import { useRecommendation as g } from "../../../composables/useRecommendation.js";
 import { CSS_CLASS_RECO_BUTTON as q } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
 import { useRecommendationExtensionStore as C } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
-function y(r, n, e, o, i = "") {
-  const c = `{{${i}${r}_${n}_${e}}}`, t = `{{${i}${r}_${n}_currency}}`;
-  return o === "before" ? `${t} ${c}` : `${c} ${t}`;
+function b(r, n, t, o, s = "") {
+  const c = `{{${s}${r}_${n}_${t}}}`, e = `{{${s}${r}_${n}_currency}}`;
+  return o === "before" ? `${e} ${c}` : `${c} ${e}`;
 }
-function A(r) {
+function f(r) {
   let n = r;
   for (; n.children.length === 1; )
     [n] = n.children;
   return n;
 }
-function f(r, n, e, o, i, c) {
+function h(r, n, t, o, s, c) {
   switch (n) {
     case "productImage": {
-      const t = r.querySelector("img");
-      t && (t.setAttribute("src", `{{${c}${e}_${o}_image_url}}`), t.setAttribute("alt", `{{${c}${e}_${o}_name}}`));
-      const s = r.querySelector("a");
-      s && (s.setAttribute("href", `{{${c}${e}_${o}_url}}`), s.classList.add(q));
+      const e = r.querySelector("img");
+      e && (e.setAttribute("src", `{{${c}${t}_${o}_image_url}}`), e.setAttribute("alt", `{{${c}${t}_${o}_name}}`));
+      const i = r.querySelector("a");
+      i && (i.setAttribute("href", `{{${c}${t}_${o}_url}}`), i.classList.add(q));
       break;
     }
     case "productName": {
-      const t = r.querySelector("p");
-      if (t) {
-        const s = t.querySelector("strong") || t;
-        s.textContent = `{{${c}${e}_${o}_name}}`;
+      const e = r.querySelector("p");
+      if (e) {
+        const i = e.querySelector("strong") || e;
+        i.textContent = `{{${c}${t}_${o}_name}}`;
       }
       break;
     }
     case "productPrice": {
-      const t = r.querySelector("p");
-      t && (A(t).textContent = y(
-        e,
+      const e = r.querySelector(".product-price p") ?? r.querySelector("p");
+      e && (f(e).textContent = b(
+        t,
         o,
         "price",
-        i,
+        s,
+        c
+      ));
+      const i = r.querySelector(".product-old-price p");
+      i && (f(i).textContent = b(
+        t,
+        o,
+        "original_price",
+        s,
         c
       ));
       break;
     }
     case "productOldPrice": {
-      const t = r.querySelector("p");
-      t && (A(t).textContent = y(
-        e,
+      const e = r.querySelector("p");
+      e && (f(e).textContent = b(
+        t,
         o,
         "original_price",
-        i,
+        s,
         c
-      ), t.setAttribute("product-attr", "discount"));
+      ));
       break;
     }
     case "productButton": {
-      const t = r.querySelector("a");
-      t && t.setAttribute("href", `{{${c}${e}_${o}_url}}`);
+      const e = r.querySelector("a");
+      e && e.setAttribute("href", `{{${c}${t}_${o}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
-      const t = r.querySelector(".omnibus-price-value");
-      if (t) {
-        t.textContent = `{{${c}${e}_${o}_omnibus_price}}`;
-        const s = t.closest("p");
-        s && (s.setAttribute("product-attr", "omnibus_price"), s.setAttribute("composition", "true"));
+      const e = r.querySelector(".omnibus-price-value");
+      if (e) {
+        e.textContent = `{{${c}${t}_${o}_omnibus_price}}`;
+        const i = e.closest("p");
+        i && (i.setAttribute("product-attr", "omnibus_price"), i.setAttribute("composition", "true"));
       }
       break;
     }
     case "productOmnibusDiscount": {
-      const t = r.querySelector(".omnibus-discount-value");
-      if (t) {
-        t.textContent = `{{${c}${e}_${o}_omnibus_discount}}`;
-        const s = t.closest("p");
-        s && (s.setAttribute("product-attr", "omnibus_discount"), s.setAttribute("composition", "true"));
+      const e = r.querySelector(".omnibus-discount-value");
+      if (e) {
+        e.textContent = `{{${c}${t}_${o}_omnibus_discount}}`;
+        const i = e.closest("p");
+        i && (i.setAttribute("product-attr", "omnibus_discount"), i.setAttribute("composition", "true"));
       }
       break;
     }
     default: {
-      const t = r.getAttribute("product-attr") ? r : r.querySelector("[product-attr]");
-      if (t) {
-        const s = t.getAttribute("product-attr"), a = t.querySelector("p");
+      const e = r.getAttribute("product-attr") ? r : r.querySelector("[product-attr]");
+      if (e) {
+        const i = e.getAttribute("product-attr"), a = e.querySelector("p");
         if (a) {
           const u = a.querySelector("strong") || a;
-          u.textContent = `{{${c}${e}_${o}_${s}}}`;
+          u.textContent = `{{${c}${t}_${o}_${i}}}`;
         }
       }
       break;
     }
   }
 }
-function w(r, n, e, o) {
-  r.querySelectorAll(".recommendation-product-row").forEach((c, t) => {
+function w(r, n, t, o) {
+  r.querySelectorAll(".recommendation-product-row").forEach((c, e) => {
     c.querySelectorAll("[data-attribute-type]").forEach((a) => {
       const u = a.getAttribute("data-attribute-type") || "", p = a.querySelectorAll(".attribute-cell");
       p.length > 0 ? p.forEach((l) => {
-        f(l, u, n, t, e, o);
-      }) : f(a, u, n, t, e, o);
+        h(l, u, n, e, t, o);
+      }) : h(a, u, n, e, t, o);
     });
   });
 }
-function E(r, n, e, o) {
-  const i = r.querySelectorAll(".recommendation-product-row");
-  if (!i.length)
+function E(r, n, t, o) {
+  const s = r.querySelectorAll(".recommendation-product-row");
+  if (!s.length)
     return;
-  const [c] = i, t = c.querySelector("[data-attribute-type]"), s = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  i.forEach((a, u) => {
+  const [c] = s, e = c.querySelector("[data-attribute-type]"), i = e ? e.querySelectorAll(".attribute-cell").length : 1;
+  s.forEach((a, u) => {
     a.querySelectorAll("[data-attribute-type]").forEach((l) => {
       const d = l.getAttribute("data-attribute-type") || "";
-      l.querySelectorAll(".attribute-cell").forEach((h, $) => {
-        const S = u * s + $;
-        f(h, d, n, S, e, o);
+      l.querySelectorAll(".attribute-cell").forEach((A, $) => {
+        const S = u * i + $;
+        h(A, d, n, S, t, o);
       });
     });
   });
 }
-function R(r, n, e, o) {
+function P(r, n, t, o) {
   r.querySelectorAll(".ins-recommendation-product-container").forEach((c) => {
-    E(c, n, e, o);
+    E(c, n, t, o);
   });
 }
-function P(r, n, e) {
-  const o = r.getAttribute("data-layout") || "grid", i = r.getAttribute("currency-alignment") || "after";
-  o === "list" ? w(r, n, i, e) : R(r, n, i, e);
+function R(r, n, t) {
+  const o = r.getAttribute("data-layout") || "grid", s = r.getAttribute("currency-alignment") || "after";
+  o === "list" ? w(r, n, s, t) : P(r, n, s, t);
 }
-function b(r, n, e) {
-  const o = new RegExp(`${n}\\s*:\\s*(\\d+)\\s*px`, "i"), i = r.match(o);
-  return i ? parseInt(i[1]) : e;
+function y(r, n, t) {
+  const o = new RegExp(`${n}\\s*:\\s*(\\d+)\\s*px`, "i"), s = r.match(o);
+  return s ? parseInt(s[1]) : t;
 }
-function T(r, n) {
-  let e = r.parentElement;
-  for (; e && e !== n; ) {
-    if (e.tagName === "TD") {
-      const o = e.getAttribute("width");
+function O(r, n) {
+  let t = r.parentElement;
+  for (; t && t !== n; ) {
+    if (t.tagName === "TD") {
+      const o = t.getAttribute("width");
       if (o && o.endsWith("%") && parseFloat(o) < 100)
-        return e;
+        return t;
     }
-    e = e.parentElement;
+    t = t.parentElement;
   }
   return null;
 }
-function v(r) {
-  const n = r.getAttribute("style") || "", e = b(n, "width", 600), o = b(n, "padding", 0) * 2, i = Math.max(0, e - o);
-  i !== 0 && r.querySelectorAll("img.adapt-img").forEach((c) => {
+function T(r) {
+  const n = r.getAttribute("style") || "", t = y(n, "width", 600), o = y(n, "padding", 0) * 2, s = Math.max(0, t - o);
+  s !== 0 && r.querySelectorAll("img.adapt-img").forEach((c) => {
     if (c.hasAttribute("width"))
       return;
-    const t = T(c, r);
-    if (!t)
+    const e = O(c, r);
+    if (!e)
       return;
-    const s = t.getAttribute("width"), a = parseFloat(s), u = b(t.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(i * a / 100), l = Math.max(1, p - u);
+    const i = e.getAttribute("width"), a = parseFloat(i), u = y(e.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(s * a / 100), l = Math.max(1, p - u);
     c.setAttribute("width", String(l));
     const d = c.getAttribute("style") || "";
     if (!/\bwidth\s*:\s*\d/i.test(d)) {
@@ -154,25 +162,25 @@ function v(r) {
     }
   });
 }
-function O(r, n) {
-  const e = r.match(/<!DOCTYPE[^>]*>/i);
-  return (e ? `${e[0]}
+function v(r, n) {
+  const t = r.match(/<!DOCTYPE[^>]*>/i);
+  return (t ? `${t[0]}
 ` : "") + n.documentElement.outerHTML;
 }
 function N(r) {
-  const n = r.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(n, "text/html"), o = e.querySelectorAll(".recommendation-block-v2");
+  const n = r.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), t = new DOMParser().parseFromString(n, "text/html"), o = t.querySelectorAll(".recommendation-block-v2");
   if (!o.length)
     return r;
-  const { buildCampaignUrl: i } = _(), c = C();
+  const { buildCampaignUrl: s } = g(), c = C();
   c.recommendationCampaignUrls = {};
-  const { isFeatureEnabled: t } = g(), s = t("liquidSyntax") ? "reco_" : "";
+  const { isFeatureEnabled: e } = _(), i = e("liquidSyntax") ? "reco_" : "";
   return o.forEach((u) => {
     var l, d;
     const p = u.getAttribute("recommendation-id");
-    p && ((l = u.parentNode) == null || l.insertBefore(e.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), i(p), P(u, p, s), v(u));
-  }), O(n, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+    p && ((l = u.parentNode) == null || l.insertBefore(t.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(t.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), s(p), R(u, p, i), T(u));
+  }), v(n, t).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
-  y as formatPriceVariable,
+  b as formatPriceVariable,
   N as prepareRecommendationBlocks
 };

package/dist/config/migrator/recommendation/htmlBuilder.js

@@ -35,11 +35,11 @@ function O(t, o) {
 function lt(t, o, e, l) {
   const s = t.width ? ` width="${t.width}"` : "", n = t.height ? ` height="${t.height}"` : "", i = ["display: block", "max-width: 100%", "height: auto"];
   t.width && i.push(`width: ${t.width}px`), t.height && i.push(`height: ${t.height}px`);
-  const a = i.join("; "), r = e ? ` style="background-color: ${c(e)}"` : "";
+  const r = i.join("; "), a = e ? ` style="background-color: ${c(e)}"` : "";
   return `
         ${O(l, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment"${r}>
+                class="product-card-segment"${a}>
                 <tbody>
                     <tr valign="top">
                         <td align="center"
@@ -48,7 +48,7 @@ function lt(t, o, e, l) {
                             <a target="_blank" href="https://example.com/product/${o + 1}">
                                 <img src="${Y}" alt="Product Name"
                                     class="adapt-img"${s}${n}
-                                    style="${a}">
+                                    style="${r}">
                             </a>
                         </td>
                     </tr>
@@ -57,12 +57,12 @@ function lt(t, o, e, l) {
         </td>
     `;
 }
-function L(t, o, e, l, s, n, i) {
-  const r = `table-layout: fixed${n ? `; background-color: ${c(n)}` : ""}`, d = b(s.tdStyle), p = y(s.align), u = `esd-block-text ${o}`.trim(), m = $(l, s.pStyle);
+function D(t, o, e, l, s, n, i) {
+  const a = `table-layout: fixed${n ? `; background-color: ${c(n)}` : ""}`, d = b(s.tdStyle), p = y(s.align), u = `esd-block-text ${o}`.trim(), m = $(l, s.pStyle);
   return `
         ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment" style="${r}">
+                class="product-card-segment" style="${a}">
                 <tbody>
                     <tr valign="top">
                         <td${p}
@@ -77,7 +77,7 @@ function L(t, o, e, l, s, n, i) {
     `;
 }
 function st(t, o, e, l) {
-  const s = o ? ` style="background-color: ${c(o)}"` : "", n = b(t.tdStyle), i = y(t.align), r = $("font-size: 14px; color: #999999", t.pStyle);
+  const s = o ? ` style="background-color: ${c(o)}"` : "", n = b(t.tdStyle), i = y(t.align), a = $("font-size: 14px; color: #999999", t.pStyle);
   return `
         ${O(e, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
@@ -87,7 +87,7 @@ function st(t, o, e, l) {
                         <td${i}
                             class="esd-block-text product-old-price es-p15l es-p15r"
                             esd-extension-block-id="${g.OLD_PRICE}"${n}>
-                            <p contenteditable="false"${b(r)}>
+                            <p contenteditable="false"${b(a)}>
                                 <s>${k(l, t)}</s>
                             </p>
                         </td>
@@ -97,18 +97,18 @@ function st(t, o, e, l) {
         </td>
     `;
 }
-function D(t, o, e, l, s, n, i) {
-  const a = s ? `; background-color: ${c(s)}` : "", r = b(l.tdStyle), d = y(l.align), u = $("font-size: 12px; color: #666666", l.pStyle);
+function L(t, o, e, l, s, n, i) {
+  const r = s ? `; background-color: ${c(s)}` : "", a = b(l.tdStyle), d = y(l.align), u = $("font-size: 12px; color: #666666", l.pStyle);
   return `
         ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment" style="table-layout: fixed${a}">
+                class="product-card-segment" style="table-layout: fixed${r}">
                 <tbody>
                     <tr valign="top">
                         <td${d}
                             data-text-before="" data-text-after=""
                             class="esd-block-text ${n} es-p15l es-p15r"
-                            esd-extension-block-id="${t}"${r}>
+                            esd-extension-block-id="${t}"${a}>
                             <p contenteditable="false"${b(u)}>
                                 <span class="omnibus-text-before"></span>
                                 <span class="${o}">${c(e)}</span>
@@ -122,7 +122,7 @@ function D(t, o, e, l, s, n, i) {
     `;
 }
 function it(t, o, e, l) {
-  const s = e ? ` style="background-color: ${c(e)}"` : "", n = $("padding: 0 5px; height: 100%", o.tdStyle), i = y(o.align), a = o.text || J, r = $(X, o.spanStyle), d = $(K, o.aStyle);
+  const s = e ? ` style="background-color: ${c(e)}"` : "", n = $("padding: 0 5px; height: 100%", o.tdStyle), i = y(o.align), r = o.text || J, a = $(X, o.spanStyle), d = $(K, o.aStyle);
   return `
         ${O(l, `valign="top" style="${c(n)}"`)}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
@@ -132,10 +132,10 @@ function it(t, o, e, l) {
                         <td${i}
                             class="esd-block-button product-button es-p10t es-p10b es-p5l es-p5r"
                             esd-extension-block-id="${g.BUTTON}">
-                            <span class="es-button-border" style="${c(r)}">
+                            <span class="es-button-border" style="${c(a)}">
                                 <a href="https://example.com/product/${t + 1}" target="_blank"
                                     class="es-button ${z}"
-                                    style="${c(d)}">${c(a)}</a>
+                                    style="${c(d)}">${c(r)}</a>
                             </span>
                         </td>
                     </tr>
@@ -145,14 +145,14 @@ function it(t, o, e, l) {
     `;
 }
 function ct(t, o, e, l, s) {
-  const n = l ? `; background-color: ${c(l)}` : "", i = b(e.tdStyle), a = y(e.align), d = $("font-size: 12px; color: #666666; margin: 0", e.pStyle), p = o.replace(/_/g, " ").replace(/\b\w/g, (u) => u.toUpperCase());
+  const n = l ? `; background-color: ${c(l)}` : "", i = b(e.tdStyle), r = y(e.align), d = $("font-size: 12px; color: #666666; margin: 0", e.pStyle), p = o.replace(/_/g, " ").replace(/\b\w/g, (u) => u.toUpperCase());
   return `
         ${O(s, 'valign="middle" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
                 class="product-card-segment" style="table-layout: fixed${n}">
                 <tbody>
                     <tr valign="top">
-                        <td product-attr="${c(t)}"${a}
+                        <td product-attr="${c(t)}"${r}
                             class="esd-block-text product-custom-attribute es-p0t es-p0b es-p15l es-p15r"
                             esd-extension-block-id="${g.CUSTOM_ATTRIBUTE}"${i}>
                             <p contenteditable="false"${b(d)}>${c(p)}</p>
@@ -163,54 +163,54 @@ function ct(t, o, e, l, s) {
         </td>
     `;
 }
-function at(t, o, e, l, s, n, i) {
-  const a = o[t], r = a ?? _();
+function rt(t, o, e, l, s, n, i) {
+  const r = o[t], a = r ?? _();
   switch (t) {
     case I:
       return lt(
-        a ?? {},
+        r ?? {},
         s,
         l,
         n
       );
     case G:
-      return L(
+      return D(
         g.NAME,
         "product-name es-p10t es-p10b es-p15l es-p15r",
         "Product Name",
         "font-size: 16px; color: #333333",
-        r,
+        a,
         l,
         n
       );
     case H:
-      return L(
+      return D(
         g.PRICE,
         "product-price es-p15l es-p15r",
         i.pricePlaceholder,
         "font-size: 16px; color: #333333",
-        q(a),
+        q(r),
         l,
         n
       );
     case j:
-      return st(r, l, n, i.oldPricePlaceholder);
+      return st(a, l, n, i.oldPricePlaceholder);
     case U:
-      return D(
+      return L(
         g.OMNIBUS_PRICE,
         "omnibus-price-value",
         i.omnibusPricePlaceholder,
-        r,
+        a,
         l,
         "product-omnibus-price",
         n
       );
     case V:
-      return D(
+      return L(
         g.OMNIBUS_DISCOUNT,
         "omnibus-discount-value",
         "-10%",
-        r,
+        a,
         l,
         "product-omnibus-discount",
         n
@@ -218,14 +218,14 @@ function at(t, o, e, l, s, n, i) {
     case N:
       return it(
         s,
-        a ?? {},
+        r ?? {},
         l,
         n
       );
     default:
       if (t.startsWith(E)) {
         const d = e[t] ?? t.slice(E.length), p = t.slice(E.length);
-        return ct(d, p, r, l, n);
+        return ct(d, p, a, l, n);
       }
       return null;
   }
@@ -235,7 +235,7 @@ const Q = `
         <td class="spacer" style="height: 10px"></td>
     </tr>
 `;
-function rt(t) {
+function at(t) {
   return {
     pricePlaceholder: v({ price: 18, currency: t }),
     oldPricePlaceholder: v({ price: 20, currency: t }),
@@ -243,7 +243,7 @@ function rt(t) {
   };
 }
 function dt(t, o, e, l) {
-  const { composition: s, visibility: n, perElement: i, customAttrValues: a, cardBg: r } = l, d = (100 / e).toFixed(2), p = e - o, u = `<td class="${F}" style="padding: 0 5px;" width="${d}%"></td>`, m = p > 0 ? u.repeat(p) : "";
+  const { composition: s, visibility: n, perElement: i, customAttrValues: r, cardBg: a } = l, d = (100 / e).toFixed(2), p = e - o, u = `<td class="${F}" style="padding: 0 5px;" width="${d}%"></td>`, m = p > 0 ? u.repeat(p) : "";
   return `
         <tr class="recommendation-product-row">
             <td>
@@ -252,11 +252,11 @@ function dt(t, o, e, l) {
                     <tbody>${s.map((T) => {
     const w = n[T] !== !1, f = w ? "" : ' style="display: none"', C = w ? "1" : "0", S = [];
     for (let x = 0; x < o; x += 1) {
-      const A = at(
+      const A = rt(
         T,
         i,
-        a,
         r,
+        a,
         t + x,
         d,
         l
@@ -287,60 +287,60 @@ function pt(t, o, e) {
 function ut(t, o, e, l) {
   const s = o[t];
   if (t === G) {
-    const n = s ?? _(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), a = y(n.align ?? "left");
+    const n = s ?? _(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), r = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-name"
-                esd-extension-block-id="${g.NAME}"${a}${b(n.tdStyle)}>
+                esd-extension-block-id="${g.NAME}"${r}${b(n.tdStyle)}>
                 <p contenteditable="false"${b(i)}>${k("Product Name", n)}</p>
             </td>
         `;
   }
   if (t === H) {
-    const n = q(s), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), a = y(n.align ?? "left");
+    const n = q(s), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), r = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-price"
-                esd-extension-block-id="${g.PRICE}"${a}${b(n.tdStyle)}>
+                esd-extension-block-id="${g.PRICE}"${r}${b(n.tdStyle)}>
                 <p contenteditable="false"${b(i)}>${k(l.pricePlaceholder, n)}</p>
             </td>
         `;
   }
   if (t === j) {
-    const n = s ?? _(), a = $("font-size: 14px; color: #999999; text-decoration: line-through; margin: 0", n.pStyle), r = y(n.align ?? "left");
+    const n = s ?? _(), r = $("font-size: 14px; color: #999999; text-decoration: line-through; margin: 0", n.pStyle), a = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-old-price"
-                esd-extension-block-id="${g.OLD_PRICE}"${r}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(a)}><s>${k(l.oldPricePlaceholder, n)}</s></p>
+                esd-extension-block-id="${g.OLD_PRICE}"${a}${b(n.tdStyle)}>
+                <p contenteditable="false"${b(r)}><s>${k(l.oldPricePlaceholder, n)}</s></p>
             </td>
         `;
   }
   if (t === U || t === V) {
-    const n = t === U, i = n ? g.OMNIBUS_PRICE : g.OMNIBUS_DISCOUNT, a = n ? "omnibus-price-value" : "omnibus-discount-value", r = n ? l.omnibusPricePlaceholder : "-10%", d = n ? "product-omnibus-price" : "product-omnibus-discount", p = s ?? _(), u = $("font-size: 12px; color: #666666; margin: 0", p.pStyle), m = y(p.align ?? "left");
+    const n = t === U, i = n ? g.OMNIBUS_PRICE : g.OMNIBUS_DISCOUNT, r = n ? "omnibus-price-value" : "omnibus-discount-value", a = n ? l.omnibusPricePlaceholder : "-10%", d = n ? "product-omnibus-price" : "product-omnibus-discount", p = s ?? _(), u = $("font-size: 12px; color: #666666; margin: 0", p.pStyle), m = y(p.align ?? "left");
     return `
             <td class="esd-block-text ${d}"
                 data-text-before="" data-text-after=""
                 esd-extension-block-id="${i}"${m}${b(p.tdStyle)}>
                 <p contenteditable="false"${b(u)}>
                     <span class="omnibus-text-before"></span>
-                    <span class="${a}">${c(r)}</span>
+                    <span class="${r}">${c(a)}</span>
                     <span class="omnibus-text-after"></span>
                 </p>
             </td>
         `;
   }
   if (t.startsWith(E)) {
-    const n = s ?? _(), i = e[t] ?? t.slice(E.length), r = t.slice(E.length).replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase()), d = $("font-size: 12px; color: #666666; margin: 0", n.pStyle), p = y(n.align ?? "left"), u = g.CUSTOM_ATTRIBUTE;
+    const n = s ?? _(), i = e[t] ?? t.slice(E.length), a = t.slice(E.length).replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase()), d = $("font-size: 12px; color: #666666; margin: 0", n.pStyle), p = y(n.align ?? "left"), u = g.CUSTOM_ATTRIBUTE;
     return `
             <td product-attr="${c(i)}"
                 class="esd-block-text product-custom-attribute"
                 esd-extension-block-id="${u}"${p}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(d)}>${c(r)}</p>
+                <p contenteditable="false"${b(d)}>${c(a)}</p>
             </td>
         `;
   }
   return null;
 }
 function bt(t, o) {
-  const { composition: e, visibility: l, perElement: s, customAttrValues: n, cardBg: i } = o, a = i ? `background-color: ${c(i)}` : "", r = a ? `style="table-layout: fixed; ${a}"` : 'style="table-layout: fixed"', d = s[I] ?? {}, p = l[I] !== !1, u = d.width ? ` width="${d.width}"` : "", m = p ? "" : ' style="display: none"', h = `
+  const { composition: e, visibility: l, perElement: s, customAttrValues: n, cardBg: i } = o, r = i ? `background-color: ${c(i)}` : "", a = r ? `style="table-layout: fixed; ${r}"` : 'style="table-layout: fixed"', d = s[I] ?? {}, p = l[I] !== !1, u = d.width ? ` width="${d.width}"` : "", m = p ? "" : ' style="display: none"', h = `
         <td width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
             esd-extension-block-id="${g.IMAGE}"
@@ -384,7 +384,7 @@ function bt(t, o) {
         <tr class="recommendation-product-row">
             <td style="padding: 0 5px">
                 <table width="100%" cellpadding="0" cellspacing="0" border="0"
-                    class="product-card-wrapper" ${r}>
+                    class="product-card-wrapper" ${a}>
                     <tbody>
                         <tr>${h}${w}${W}</tr>
                     </tbody>
@@ -400,13 +400,13 @@ function gt(t, o) {
   return e.join("");
 }
 function mt(t, o) {
-  var r, d, p, u, m, h;
+  var a, d, p, u, m, h;
   const e = t == null ? void 0 : t.theme, l = [];
-  (r = e == null ? void 0 : e.textStyle) != null && r["font-family"] && l.push(`font-family: ${e.textStyle["font-family"]}`), l.push(`font-size: ${((d = e == null ? void 0 : e.textStyle) == null ? void 0 : d["font-size"]) ?? "28px"}`), l.push(`color: ${((p = e == null ? void 0 : e.textColor) == null ? void 0 : p.color) ?? "#333333"}`), (u = e == null ? void 0 : e.textStyle) != null && u["font-weight"] && l.push(`font-weight: ${e.textStyle["font-weight"]}`), (m = e == null ? void 0 : e.textStyle) != null && m["font-style"] && l.push(`font-style: ${e.textStyle["font-style"]}`);
-  const s = l.join("; "), n = ((h = e == null ? void 0 : e.textStyle) == null ? void 0 : h["font-weight"]) !== "normal", i = c(o), a = n ? `<strong>${i}</strong>` : i;
+  (a = e == null ? void 0 : e.textStyle) != null && a["font-family"] && l.push(`font-family: ${e.textStyle["font-family"]}`), l.push(`font-size: ${((d = e == null ? void 0 : e.textStyle) == null ? void 0 : d["font-size"]) ?? "28px"}`), l.push(`color: ${((p = e == null ? void 0 : e.textColor) == null ? void 0 : p.color) ?? "#333333"}`), (u = e == null ? void 0 : e.textStyle) != null && u["font-weight"] && l.push(`font-weight: ${e.textStyle["font-weight"]}`), (m = e == null ? void 0 : e.textStyle) != null && m["font-style"] && l.push(`font-style: ${e.textStyle["font-style"]}`);
+  const s = l.join("; "), n = ((h = e == null ? void 0 : e.textStyle) == null ? void 0 : h["font-weight"]) !== "normal", i = c(o), r = n ? `<strong>${i}</strong>` : i;
   return `
         <td class="esd-block-text es-p10t es-p10b es-p20l es-p20r" align="center">
-            <p${b(s)}>${a}</p>
+            <p${b(s)}>${r}</p>
         </td>
     `;
 }
@@ -422,15 +422,15 @@ function Tt(t) {
     titleText: s,
     extraClasses: n = "",
     legacyId: i,
-    legacyBgColor: a
-  } = t, r = parseInt(o.size) || 6, d = o.layout === "list" ? ' data-layout="list"' : "", p = o.layout === "list" ? " es-m-p0 ins-recommendation-list-layout" : "", u = {
+    legacyBgColor: r
+  } = t, a = parseInt(o.size) || 6, d = o.layout === "list" ? ' data-layout="list"' : "", p = o.layout === "list" ? " es-m-p0 ins-recommendation-list-layout" : "", u = {
     composition: e.composition,
     visibility: e.visibility,
     perElement: e.perElementStyles,
     customAttrValues: e.customAttrValues,
     cardBg: l,
-    ...rt(o.currency)
-  }, m = o.layout === "list" ? gt(r, u) : pt(r, o.cardsInRow, u), h = mt(e.titleVariable, s), T = e.composition.join(","), w = JSON.stringify(e.customAttributes), f = [
+    ...at(o.currency)
+  }, m = o.layout === "list" ? gt(a, u) : pt(a, o.cardsInRow, u), h = mt(e.titleVariable, s), T = e.composition.join(","), w = JSON.stringify(e.customAttributes), f = [
     "recommendation-block-v2",
     "esd-block-recommendation-v3-block",
     `es-p20${p}`,
@@ -443,7 +443,7 @@ function Tt(t) {
     "esd-container-frame",
     "ins-recommendation-no-mobile-layout",
     n
-  ].filter(Boolean).join(" "), C = $t(o.currency), S = ` esd-ext-config="${c(JSON.stringify(o))}"`, x = i ? ` id="${c(i)}"` : "", A = a ? ` bgcolor="${c(a)}"` : "";
+  ].filter(Boolean).join(" "), C = $t(o.currency), S = ` esd-ext-config="${c(JSON.stringify(o))}"`, x = i ? ` id="${c(i)}"` : "", A = r ? ` bgcolor="${c(r)}"` : "";
   return nt(`
 <td align="left"
     esd-extension-block-id="recommendation-block"
@@ -455,7 +455,8 @@ function Tt(t) {
     data-column-spacing="${o.columnSpacing}"
     data-row-spacing="${o.rowSpacing}"
     data-mobile-column-spacing="${o.mobileColumnSpacing}"
-    data-mobile-row-spacing="${o.mobileRowSpacing}"${d}${S}>
+    data-mobile-row-spacing="${o.mobileRowSpacing}"
+    hide-price="${o.priceHideIfSameAsDiscounted}"${d}${S}>
     <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tbody>
             <tr>