@useinsider/guido 3.22.0 → 3.23.0

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

@@ -1,18 +1,21 @@
 import { RecommendationBlockId as g } from "../../../extensions/Blocks/Recommendation/constants/blockIds.js";
-import { CSS_CLASS_SKIP_COMPILE as st, ATTR_RECOMMENDATION_TITLE as lt, CURRENCY_ATTR as R, ATTR_PRODUCT_IMAGE as I, ATTR_PRODUCT_BUTTON as O, CSS_CLASS_RECO_BUTTON as H, ATTR_PRODUCT_NAME as j, ATTR_PRODUCT_PRICE as V, ATTR_PRODUCT_OLD_PRICE as Y, ATTR_PRODUCT_OMNIBUS_PRICE as M, ATTR_PRODUCT_OMNIBUS_DISCOUNT as F, ATTR_CUSTOM_PREFIX as K } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
-import { buildTitleRows as it } from "../../../extensions/Blocks/Recommendation/templates/titleRows.js";
-import { compositionKeyToProductAttr as J, bareAttributeName as X } from "../../../extensions/Blocks/Recommendation/utils/compositionKeys.js";
-import { formatPrice as B } from "../../../extensions/Blocks/Recommendation/utils/priceFormatter.js";
+import { CSS_CLASS_SKIP_COMPILE as dt, ATTR_RECOMMENDATION_TITLE as pt, CURRENCY_ATTR as O, ATTR_PRODUCT_PRICE as v, ATTR_PRODUCT_OLD_PRICE as k, ATTR_PRODUCT_IMAGE as L, ATTR_PRODUCT_BUTTON as U, CSS_CLASS_RECO_BUTTON as J, ATTR_PRODUCT_NAME as q, ATTR_PRODUCT_OMNIBUS_PRICE as H, ATTR_PRODUCT_OMNIBUS_DISCOUNT as Q, ATTR_CUSTOM_PREFIX as Z } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
+import { CSS_CLASS_NO_MOBILE_LAYOUT as ut } from "../../../extensions/Blocks/Recommendation/controls/mobileLayout/cssRules.js";
+import { CSS_CLASS_TEXT_TRIM as bt } from "../../../extensions/Blocks/Recommendation/controls/shared/textTrimCssRules.js";
+import { buildTitleRows as $t } from "../../../extensions/Blocks/Recommendation/templates/titleRows.js";
+import { compositionKeyToProductAttr as W, bareAttributeName as tt } from "../../../extensions/Blocks/Recommendation/utils/compositionKeys.js";
+import { resolveInlinePriceOrder as gt } from "../../../extensions/Blocks/Recommendation/utils/inlinePriceOrder.js";
+import { formatPrice as V } from "../../../extensions/Blocks/Recommendation/utils/priceFormatter.js";
 import { escapeHtml as r } from "../../../utils/htmlEscape.js";
-import { appendStyle as $ } from "./themeMapper.js";
-const q = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png", Q = "attribute-cell", Z = "Buy", W = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79)", tt = "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%; mso-border-alt: 10px solid rgb(217, 234, 211); mso-padding-alt: 0", rt = "ins-recommendation-product-container ins-recommendation-desktop-container";
-function ct(t) {
+import { appendStyle as m } from "./themeMapper.js";
+const et = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png", ot = "attribute-cell", nt = "Buy", lt = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79)", it = "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%; mso-border-alt: 10px solid rgb(217, 234, 211); mso-padding-alt: 0", mt = "ins-recommendation-product-container ins-recommendation-desktop-container", ft = "ins-recommendation-product-container ins-recommendation-mobile-container", st = "font-size: 16px; color: #333333", j = "font-size: 14px; color: #999999", ct = `${j}; text-decoration: line-through; margin: 0`;
+function yt(t) {
   return t.replace(/>\s+</g, "><").trim();
 }
 function f(t) {
   return t ? ` align="${r(t)}"` : ' align="center"';
 }
-function _() {
+function P() {
   return {
     tdStyle: "",
     pStyle: "",
@@ -21,25 +24,28 @@ function _() {
     textTrimming: !1
   };
 }
-function et(t) {
-  return t ? { ...t, wrapBold: !0 } : { ..._(), wrapBold: !0 };
+function G(t) {
+  return t ? { ...t, wrapBold: !0 } : { ...P(), wrapBold: !0 };
 }
-function N(t, o) {
-  let e = r(t);
-  return o.wrapBold && o.wrapItalic ? e = `<strong><em>${e}</em></strong>` : o.wrapBold ? e = `<strong>${e}</strong>` : o.wrapItalic && (e = `<em>${e}</em>`), e;
+function x(t, e) {
+  let o = r(t);
+  return e.wrapBold && e.wrapItalic ? o = `<strong><em>${o}</em></strong>` : e.wrapBold ? o = `<strong>${o}</strong>` : e.wrapItalic && (o = `<em>${o}</em>`), o;
 }
 function u(t) {
   return t ? ` style="${r(t)}"` : "";
 }
-function P(t, o) {
-  return `<td width="${t}%" class="${Q}" ${o}`;
+function D(t) {
+  return t.textTrimming ? ` ${bt}` : "";
 }
-function at(t, o, e, s) {
-  const l = t.width ? ` width="${t.width}"` : "", n = t.height ? ` height="${t.height}"` : "", i = ["display: block", "max-width: 100%", "height: auto"];
+function R(t, e) {
+  return `<td width="${t}%" class="${ot}" ${e}`;
+}
+function St(t, e, o, n) {
+  const s = t.width ? ` width="${t.width}"` : "", l = 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 c = i.join("; "), a = e ? ` style="background-color: ${r(e)}"` : "";
+  const c = i.join("; "), a = o ? ` style="background-color: ${r(o)}"` : "";
   return `
-        ${P(s, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${R(n, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
                 class="product-card-segment"${a}>
                 <tbody>
@@ -47,9 +53,9 @@ function at(t, o, e, s) {
                         <td align="center"
                             class="esd-block-image product-image es-p5"
                             esd-extension-block-id="${g.IMAGE}">
-                            <a target="_blank" href="https://example.com/product/${o + 1}">
-                                <img src="${q}" alt="Product Name"
-                                    class="adapt-img"${l}${n}
+                            <a target="_blank" href="https://example.com/product/${e + 1}">
+                                <img src="${et}" alt="Product Name"
+                                    class="adapt-img"${s}${l}
                                     style="${c}">
                             </a>
                         </td>
@@ -59,18 +65,18 @@ function at(t, o, e, s) {
         </td>
     `;
 }
-function G(t, o, e, s, l, n, i) {
-  const a = `table-layout: fixed${n ? `; background-color: ${r(n)}` : ""}`, d = u(l.tdStyle), p = f(l.align), b = `esd-block-text ${o}`.trim(), m = $(s, l.pStyle);
+function F(t, e, o, n, s, l, i) {
+  const a = `table-layout: fixed${l ? `; background-color: ${r(l)}` : ""}`, p = u(s.tdStyle), d = f(s.align), b = `esd-block-text ${e}`.trim(), $ = m(n, s.pStyle);
   return `
-        ${P(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${R(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="${a}">
                 <tbody>
                     <tr valign="top">
-                        <td${p}
+                        <td${d}
                             class="${b}"
-                            esd-extension-block-id="${t}"${d}>
-                            <p contenteditable="false"${u(m)}>${N(e, l)}</p>
+                            esd-extension-block-id="${t}"${p}>
+                            <p contenteditable="false"${u($)}>${x(o, s)}</p>
                         </td>
                     </tr>
                 </tbody>
@@ -78,19 +84,19 @@ function G(t, o, e, s, l, n, i) {
         </td>
     `;
 }
-function dt(t, o, e, s) {
-  const l = o ? ` style="background-color: ${r(o)}"` : "", n = u(t.tdStyle), i = f(t.align), a = $("font-size: 14px; color: #999999", t.pStyle);
+function ht(t, e, o, n) {
+  const s = e ? ` style="background-color: ${r(e)}"` : "", l = u(t.tdStyle), i = f(t.align), c = m(j, t.pStyle);
   return `
-        ${P(e, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${R(o, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment"${l}>
+                class="product-card-segment"${s}>
                 <tbody>
                     <tr valign="top">
                         <td${i}
                             class="esd-block-text product-old-price es-p15l es-p15r"
-                            esd-extension-block-id="${g.OLD_PRICE}"${n}>
-                            <p contenteditable="false"${u(a)}>
-                                <s>${N(s, t)}</s>
+                            esd-extension-block-id="${g.OLD_PRICE}"${l}>
+                            <p contenteditable="false"${u(c)}>
+                                <s>${x(n, t)}</s>
                             </p>
                         </td>
                     </tr>
@@ -99,21 +105,21 @@ function dt(t, o, e, s) {
         </td>
     `;
 }
-function z(t, o, e, s, l, n, i) {
-  const c = l ? `; background-color: ${r(l)}` : "", a = u(s.tdStyle), d = f(s.align), b = $("font-size: 12px; color: #666666", s.pStyle);
+function K(t, e, o, n, s, l, i) {
+  const c = s ? `; background-color: ${r(s)}` : "", a = u(n.tdStyle), p = f(n.align), b = m("font-size: 12px; color: #666666", n.pStyle);
   return `
-        ${P(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${R(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${c}">
                 <tbody>
                     <tr valign="top">
-                        <td${d}
+                        <td${p}
                             data-text-before="" data-text-after=""
-                            class="esd-block-text ${n} es-p15l es-p15r"
+                            class="esd-block-text ${l} es-p15l es-p15r"
                             esd-extension-block-id="${t}"${a}>
                             <p contenteditable="false"${u(b)}>
                                 <span class="omnibus-text-before"></span>
-                                <span class="${o}">${r(e)}</span>
+                                <span class="${e}">${r(o)}</span>
                                 <span class="omnibus-text-after"></span>
                             </p>
                         </td>
@@ -123,12 +129,12 @@ function z(t, o, e, s, l, n, i) {
         </td>
     `;
 }
-function pt(t, o, e, s) {
-  const l = e ? ` style="background-color: ${r(e)}"` : "", n = $("padding: 0 5px; height: 100%", o.tdStyle), i = f(o.align), c = o.text || Z, a = $(W, o.spanStyle), d = $(tt, o.aStyle);
+function xt(t, e, o, n) {
+  const s = o ? ` style="background-color: ${r(o)}"` : "", l = m("padding: 0 5px; height: 100%", e.tdStyle), i = f(e.align), c = e.text || nt, a = m(lt, e.spanStyle), p = m(it, e.aStyle);
   return `
-        ${P(s, `valign="top" style="${r(n)}"`)}>
+        ${R(n, `valign="top" style="${r(l)}"`)}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment"${l}>
+                class="product-card-segment"${s}>
                 <tbody>
                     <tr valign="top">
                         <td${i}
@@ -136,8 +142,8 @@ function pt(t, o, e, s) {
                             esd-extension-block-id="${g.BUTTON}">
                             <span class="es-button-border" style="${r(a)}">
                                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                                    class="es-button ${H}"
-                                    style="${r(d)}">${r(c)}</a>
+                                    class="es-button ${J}"
+                                    style="${r(p)}">${r(c)}</a>
                             </span>
                         </td>
                     </tr>
@@ -146,18 +152,18 @@ function pt(t, o, e, s) {
         </td>
     `;
 }
-function ut(t, o, e, s, l) {
-  const n = s ? `; background-color: ${r(s)}` : "", i = u(e.tdStyle), c = f(e.align), d = $("font-size: 12px; color: #666666; margin: 0", e.pStyle), p = o.replace(/_/g, " ").replace(/\b\w/g, (b) => b.toUpperCase());
+function Ct(t, e, o, n, s) {
+  const l = n ? `; background-color: ${r(n)}` : "", i = u(o.tdStyle), c = f(o.align), p = m("font-size: 12px; color: #666666; margin: 0", o.pStyle), d = `esd-block-text product-custom-attribute es-p0t es-p0b es-p15l es-p15r${D(o)}`, b = e.replace(/_/g, " ").replace(/\b\w/g, ($) => $.toUpperCase());
   return `
-        ${P(l, 'valign="middle" style="padding: 0 5px; height: 100%"')}>
+        ${R(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}">
+                class="product-card-segment" style="table-layout: fixed${l}">
                 <tbody>
                     <tr valign="top">
                         <td product-attr="${r(t)}"${c}
-                            class="esd-block-text product-custom-attribute es-p0t es-p0b es-p15l es-p15r"
+                            class="${d}"
                             esd-extension-block-id="${g.CUSTOM_ATTRIBUTE}"${i}>
-                            <p contenteditable="false"${u(d)}>${r(p)}</p>
+                            <p contenteditable="false"${u(p)}>${r(b)}</p>
                         </td>
                     </tr>
                 </tbody>
@@ -165,111 +171,155 @@ function ut(t, o, e, s, l) {
         </td>
     `;
 }
-function bt(t, o, e, s, l, n, i) {
-  const c = o[t], a = c ?? _();
+function Tt(t, e, o, n, s) {
+  const l = e ? ` style="background-color: ${r(e)}"` : "", i = G(t[v]), c = t[k] ?? P(), a = ($) => `
+        <td${f(i.align)} valign="middle"
+            class="esd-block-text product-price ${$}"
+            esd-extension-block-id="${g.PRICE}"${u(i.tdStyle)}>
+            <p contenteditable="false"${u(m(st, i.pStyle))}>${x(n.pricePlaceholder, i)}</p>
+        </td>
+    `, p = ($) => `
+        <td${f(c.align)} valign="middle"
+            class="esd-block-text product-old-price ${$}"
+            esd-extension-block-id="${g.OLD_PRICE}"${u(c.tdStyle)}>
+            <p contenteditable="false"${u(m(j, c.pStyle))}>
+                <s>${x(n.oldPricePlaceholder, c)}</s>
+            </p>
+        </td>
+    `, d = s ? p("es-p15l es-p5r") : a("es-p15l es-p5r"), b = s ? a("es-p5l es-p15r") : p("es-p5l es-p15r");
+  return `
+        ${R(o, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
+                class="product-card-segment"${l}>
+                <tbody>
+                    <tr valign="top">
+                        <td align="center">
+                            <table cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 0 auto">
+                                <tbody>
+                                    <tr valign="middle">${d}${b}</tr>
+                                </tbody>
+                            </table>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </td>
+    `;
+}
+function Pt(t, e, o, n, s, l, i) {
+  const c = e[t], a = c ?? P();
+  if (i.inlinePrice && t === i.inlinePrice.anchor)
+    return Tt(e, n, l, i, i.inlinePrice.originalFirst);
   switch (t) {
-    case I:
-      return at(
+    case L:
+      return St(
         c ?? {},
-        l,
         s,
-        n
+        n,
+        l
       );
-    case j:
-      return G(
+    case q:
+      return F(
         g.NAME,
-        "product-name es-p10t es-p10b es-p15l es-p15r",
+        `product-name es-p10t es-p10b es-p15l es-p15r${D(a)}`,
         "Product Name",
         "font-size: 16px; color: #333333",
         a,
-        s,
-        n
+        n,
+        l
       );
-    case V:
-      return G(
+    case v:
+      return F(
         g.PRICE,
         "product-price es-p15l es-p15r",
         i.pricePlaceholder,
         "font-size: 16px; color: #333333",
-        et(c),
-        s,
-        n
+        G(c),
+        n,
+        l
       );
-    case Y:
-      return dt(a, s, n, i.oldPricePlaceholder);
-    case M:
-      return z(
+    case k:
+      return ht(a, n, l, i.oldPricePlaceholder);
+    case H:
+      return K(
         g.OMNIBUS_PRICE,
         "omnibus-price-value",
         i.omnibusPricePlaceholder,
         a,
-        s,
+        n,
         "product-omnibus-price",
-        n
+        l
       );
-    case F:
-      return z(
+    case Q:
+      return K(
         g.OMNIBUS_DISCOUNT,
         "omnibus-discount-value",
         "-10%",
         a,
-        s,
+        n,
         "product-omnibus-discount",
-        n
+        l
       );
-    case O:
-      return pt(
-        l,
-        c ?? {},
+    case U:
+      return xt(
         s,
-        n
+        c ?? {},
+        n,
+        l
       );
     default:
-      if (t.startsWith(K)) {
-        const d = e[t] ?? J(t), p = X(d);
-        return ut(d, p, a, s, n);
+      if (t.startsWith(Z)) {
+        const p = o[t] ?? W(t), d = tt(p);
+        return Ct(p, d, a, n, l);
       }
       return null;
   }
 }
-const ot = `
+const rt = `
     <tr>
         <td class="spacer" style="height: 10px"></td>
     </tr>
 `;
-function gt(t) {
+function wt(t) {
   return {
-    pricePlaceholder: B({ price: 18, currency: t }),
-    oldPricePlaceholder: B({ price: 20, currency: t }),
-    omnibusPricePlaceholder: B({ price: 20, currency: t })
+    pricePlaceholder: V({ price: 18, currency: t }),
+    oldPricePlaceholder: V({ price: 20, currency: t }),
+    omnibusPricePlaceholder: V({ price: 20, currency: t })
   };
 }
-function mt(t, o, e, s) {
-  const { composition: l, visibility: n, perElement: i, customAttrValues: c, cardBg: a } = s, d = (100 / e).toFixed(2), p = e - o, b = `<td class="${Q}" style="padding: 0 5px;" width="${d}%"></td>`, m = p > 0 ? b.repeat(p) : "";
+function At(t, e, o) {
+  const n = e.includes(v) && e.includes(k), l = o[v] !== !1 === (o[k] !== !1);
+  return t || !n || !l ? null : gt(e);
+}
+function _t(t, e, o, n) {
+  const { composition: s, visibility: l, perElement: i, customAttrValues: c, cardBg: a } = n, p = (100 / o).toFixed(2), d = o - e, b = `<td class="${ot}" style="padding: 0 5px;" width="${p}%"></td>`, $ = d > 0 ? b.repeat(d) : "";
   return `
         <tr class="recommendation-product-row">
             <td>
                 <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
                     class="product-card-wrapper" style="table-layout: fixed">
-                    <tbody>${l.map((w) => {
-    const C = n[w] !== !1, S = C ? "" : ' style="display: none"', A = C ? "1" : "0", x = [];
-    for (let T = 0; T < o; T += 1) {
-      const E = bt(
-        w,
+                    <tbody>${s.filter((C) => {
+    var y;
+    return C !== ((y = n.inlinePrice) == null ? void 0 : y.skip);
+  }).map((C) => {
+    const y = l[C] !== !1, T = y ? "" : ' style="display: none"', I = y ? "1" : "0", A = [];
+    for (let _ = 0; _ < e; _ += 1) {
+      const E = Pt(
+        C,
         i,
         c,
         a,
-        t + T,
-        d,
-        s
+        t + _,
+        p,
+        n
       );
-      E && x.push(E);
+      E && A.push(E);
     }
-    return x.length === 0 ? "" : `
+    return A.length === 0 ? "" : `
             <tr class="recommendation-attribute-row"
-                data-attribute-type="${r(w)}"
-                data-visibility="${A}"${S}>
-                ${x.join("")}${m}
+                data-attribute-type="${r(C)}"
+                data-visibility="${I}"${T}>
+                ${A.join("")}${$}
             </tr>
         `;
   }).filter(Boolean).join("")}</tbody>
@@ -278,49 +328,67 @@ function mt(t, o, e, s) {
         </tr>
     `;
 }
-function $t(t, o, e) {
-  const s = [];
-  for (let l = 0; l < t; l += o) {
-    const n = Math.min(o, t - l);
-    l > 0 && s.push(ot), s.push(mt(l, n, o, e));
+function X(t, e, o) {
+  const n = [];
+  for (let s = 0; s < t; s += e) {
+    const l = Math.min(e, t - s);
+    s > 0 && n.push(rt), n.push(_t(s, l, e, o));
   }
-  return s.join("");
+  return n.join("");
+}
+function Rt(t, e, o) {
+  const n = G(t[v]), s = t[k] ?? P(), l = (c) => `
+        <td class="esd-block-text product-price" esd-extension-block-id="${g.PRICE}"
+            ${f(n.align ?? "left")} valign="middle"
+            ${u(m(`width: auto${c}`, n.tdStyle))}>
+            <p contenteditable="false"${u(m(`${st}; margin: 0`, n.pStyle))}>${x(e.pricePlaceholder, n)}</p>
+        </td>
+    `, i = (c) => `
+        <td class="esd-block-text product-old-price" esd-extension-block-id="${g.OLD_PRICE}"
+            ${f(s.align ?? "left")} valign="middle"
+            ${u(m(`width: auto${c}`, s.tdStyle))}>
+            <p contenteditable="false"${u(m(ct, s.pStyle))}>${`<s>${x(e.oldPricePlaceholder, s)}</s>`}</p>
+        </td>
+    `;
+  return o ? i("; padding-right: 8px") + l("") : l("; padding-right: 8px") + i("");
 }
-function ft(t, o, e, s) {
-  const l = o[t];
-  if (t === j) {
-    const n = l ?? _(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), c = f(n.align ?? "left");
+function It(t, e, o, n) {
+  const s = e[t];
+  if (n.inlinePrice && t === n.inlinePrice.anchor)
+    return Rt(e, n, n.inlinePrice.originalFirst);
+  if (t === q) {
+    const l = s ?? P(), i = m("font-size: 16px; color: #333333; margin: 0", l.pStyle), c = f(l.align ?? "left");
     return `
-            <td class="esd-block-text product-name"
-                esd-extension-block-id="${g.NAME}"${c}${u(n.tdStyle)}>
-                <p contenteditable="false"${u(i)}>${N("Product Name", n)}</p>
+            <td class="esd-block-text product-name${D(l)}"
+                esd-extension-block-id="${g.NAME}"${c}${u(l.tdStyle)}>
+                <p contenteditable="false"${u(i)}>${x("Product Name", l)}</p>
             </td>
         `;
   }
-  if (t === V) {
-    const n = et(l), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), c = f(n.align ?? "left");
+  if (t === v) {
+    const l = G(s), i = m("font-size: 16px; color: #333333; margin: 0", l.pStyle), c = f(l.align ?? "left");
     return `
             <td class="esd-block-text product-price"
-                esd-extension-block-id="${g.PRICE}"${c}${u(n.tdStyle)}>
-                <p contenteditable="false"${u(i)}>${N(s.pricePlaceholder, n)}</p>
+                esd-extension-block-id="${g.PRICE}"${c}${u(l.tdStyle)}>
+                <p contenteditable="false"${u(i)}>${x(n.pricePlaceholder, l)}</p>
             </td>
         `;
   }
-  if (t === Y) {
-    const n = l ?? _(), c = $("font-size: 14px; color: #999999; text-decoration: line-through; margin: 0", n.pStyle), a = f(n.align ?? "left");
+  if (t === k) {
+    const l = s ?? P(), i = m(ct, l.pStyle), c = f(l.align ?? "left");
     return `
             <td class="esd-block-text product-old-price"
-                esd-extension-block-id="${g.OLD_PRICE}"${a}${u(n.tdStyle)}>
-                <p contenteditable="false"${u(c)}><s>${N(s.oldPricePlaceholder, n)}</s></p>
+                esd-extension-block-id="${g.OLD_PRICE}"${c}${u(l.tdStyle)}>
+                <p contenteditable="false"${u(i)}><s>${x(n.oldPricePlaceholder, l)}</s></p>
             </td>
         `;
   }
-  if (t === M || t === F) {
-    const n = t === M, i = n ? g.OMNIBUS_PRICE : g.OMNIBUS_DISCOUNT, c = n ? "omnibus-price-value" : "omnibus-discount-value", a = n ? s.omnibusPricePlaceholder : "-10%", d = n ? "product-omnibus-price" : "product-omnibus-discount", p = l ?? _(), b = $("font-size: 12px; color: #666666; margin: 0", p.pStyle), m = f(p.align ?? "left");
+  if (t === H || t === Q) {
+    const l = t === H, i = l ? g.OMNIBUS_PRICE : g.OMNIBUS_DISCOUNT, c = l ? "omnibus-price-value" : "omnibus-discount-value", a = l ? n.omnibusPricePlaceholder : "-10%", p = l ? "product-omnibus-price" : "product-omnibus-discount", d = s ?? P(), b = m("font-size: 12px; color: #666666; margin: 0", d.pStyle), $ = f(d.align ?? "left");
     return `
-            <td class="esd-block-text ${d}"
+            <td class="esd-block-text ${p}"
                 data-text-before="" data-text-after=""
-                esd-extension-block-id="${i}"${m}${u(p.tdStyle)}>
+                esd-extension-block-id="${i}"${$}${u(d.tdStyle)}>
                 <p contenteditable="false"${u(b)}>
                     <span class="omnibus-text-before"></span>
                     <span class="${c}">${r(a)}</span>
@@ -329,56 +397,59 @@ function ft(t, o, e, s) {
             </td>
         `;
   }
-  if (t.startsWith(K)) {
-    const n = l ?? _(), i = e[t] ?? J(t), a = X(i).replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase()), d = $("font-size: 12px; color: #666666; margin: 0", n.pStyle), p = f(n.align ?? "left"), b = g.CUSTOM_ATTRIBUTE;
+  if (t.startsWith(Z)) {
+    const l = s ?? P(), i = o[t] ?? W(t), a = tt(i).replace(/_/g, " ").replace(/\b\w/g, ($) => $.toUpperCase()), p = m("font-size: 12px; color: #666666; margin: 0", l.pStyle), d = f(l.align ?? "left"), b = g.CUSTOM_ATTRIBUTE;
     return `
             <td product-attr="${r(i)}"
-                class="esd-block-text product-custom-attribute"
-                esd-extension-block-id="${b}"${p}${u(n.tdStyle)}>
-                <p contenteditable="false"${u(d)}>${r(a)}</p>
+                class="esd-block-text product-custom-attribute${D(l)}"
+                esd-extension-block-id="${b}"${d}${u(l.tdStyle)}>
+                <p contenteditable="false"${u(p)}>${r(a)}</p>
             </td>
         `;
   }
   return null;
 }
-function yt(t, o) {
-  const { composition: e, visibility: s, perElement: l, customAttrValues: n, cardBg: i } = o, c = i ? `background-color: ${r(i)}` : "", a = c ? `style="table-layout: fixed; ${c}"` : 'style="table-layout: fixed"', d = l[I] ?? {}, p = s[I] !== !1, b = d.width ? ` width="${d.width}"` : "", m = p ? "" : ' style="display: none"', h = `
+function Et(t, e) {
+  const { composition: o, visibility: n, perElement: s, customAttrValues: l, cardBg: i } = e, c = i ? `background-color: ${r(i)}` : "", a = c ? `style="table-layout: fixed; ${c}"` : 'style="table-layout: fixed"', p = s[L] ?? {}, d = n[L] !== !1, b = p.width ? ` width="${p.width}"` : "", $ = d ? "" : ' style="display: none"', w = `
         <td width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
             esd-extension-block-id="${g.IMAGE}"
-            data-attribute-type="${I}"
-            data-visibility="${p ? "1" : "0"}"
-            align="center" valign="middle"${m}>
+            data-attribute-type="${L}"
+            data-visibility="${d ? "1" : "0"}"
+            align="center" valign="middle"${$}>
             <a target="_blank" href="https://example.com/product/${t + 1}">
-                <img src="${q}" alt="Product Name"
+                <img src="${et}" alt="Product Name"
                     class="adapt-img product-image"${b}
                     style="display: block; max-width: 100%; height: auto">
             </a>
         </td>
-    `, C = `
+    `, y = `
         <td class="product-info-cell" valign="middle" style="padding: 15px">
             <table cellpadding="0" cellspacing="0" role="presentation" width="100%"
                 style="table-layout: fixed">
-                <tbody>${e.filter((y) => y !== I && y !== O).map((y) => {
-    const v = s[y] !== !1, L = v ? "" : ' style="display: none"', nt = v ? "1" : "0", D = ft(y, l, n, o);
-    return D ? `<tr class="recommendation-attribute-row"
-                data-attribute-type="${r(y)}"
-                data-visibility="${nt}"${L}>${D}</tr>` : "";
+                <tbody>${o.filter((S) => {
+    var h;
+    return S !== L && S !== U && S !== ((h = e.inlinePrice) == null ? void 0 : h.skip);
+  }).map((S) => {
+    const h = n[S] !== !1, N = h ? "" : ' style="display: none"', B = h ? "1" : "0", M = It(S, s, l, e);
+    return M ? `<tr class="recommendation-attribute-row"
+                data-attribute-type="${r(S)}"
+                data-visibility="${B}"${N}>${M}</tr>` : "";
   }).filter(Boolean).join(`
 `)}</tbody>
             </table>
         </td>
-    `, S = l[O] ?? {}, A = s[O] !== !1, x = S.text || Z, T = $(W, S.spanStyle ?? ""), E = $(tt, S.aStyle ?? ""), U = A ? "" : ' style="display: none"', k = `
+    `, T = s[U] ?? {}, I = n[U] !== !1, A = T.text || nt, _ = m(lt, T.spanStyle ?? ""), E = m(it, T.aStyle ?? ""), z = I ? "" : ' style="display: none"', Y = `
         <td width="100"
             class="esd-block-button button-cell recommendation-attribute-row product-button es-p5l es-p5r"
             esd-extension-block-id="${g.BUTTON}"
-            data-attribute-type="${O}"
-            data-visibility="${A ? "1" : "0"}"
-            align="${r(S.align ?? "center")}" valign="middle"${U}>
-            <span class="es-button-border" style="${r(T)}">
+            data-attribute-type="${U}"
+            data-visibility="${I ? "1" : "0"}"
+            align="${r(T.align ?? "center")}" valign="middle"${z}>
+            <span class="es-button-border" style="${r(_)}">
                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                    class="es-button ${H}"
-                    style="${r(E)}">${r(x)}</a>
+                    class="es-button ${J}"
+                    style="${r(E)}">${r(A)}</a>
             </span>
         </td>
     `;
@@ -388,64 +459,71 @@ function yt(t, o) {
                 <table width="100%" cellpadding="0" cellspacing="0" border="0"
                     class="product-card-wrapper" ${a}>
                     <tbody>
-                        <tr>${h}${C}${k}</tr>
+                        <tr>${w}${y}${Y}</tr>
                     </tbody>
                 </table>
             </td>
         </tr>
     `;
 }
-function St(t, o) {
-  const e = [];
-  for (let s = 0; s < t; s += 1)
-    s > 0 && e.push(ot), e.push(yt(s, o));
-  return e.join("");
+function Ot(t, e) {
+  const o = [];
+  for (let n = 0; n < t; n += 1)
+    n > 0 && o.push(rt), o.push(Et(n, e));
+  return o.join("");
 }
-function ht(t, o) {
-  var a, d, p, b, m, h;
-  const e = t == null ? void 0 : t.theme, s = [];
-  (a = e == null ? void 0 : e.textStyle) != null && a["font-family"] && s.push(`font-family: ${e.textStyle["font-family"]}`), s.push(`font-size: ${((d = e == null ? void 0 : e.textStyle) == null ? void 0 : d["font-size"]) ?? "28px"}`), s.push(`color: ${((p = e == null ? void 0 : e.textColor) == null ? void 0 : p.color) ?? "#333333"}`), (b = e == null ? void 0 : e.textStyle) != null && b["font-weight"] && s.push(`font-weight: ${e.textStyle["font-weight"]}`), (m = e == null ? void 0 : e.textStyle) != null && m["font-style"] && s.push(`font-style: ${e.textStyle["font-style"]}`);
-  const l = s.join("; "), n = ((h = e == null ? void 0 : e.textStyle) == null ? void 0 : h["font-weight"]) !== "normal", i = r(o), c = n ? `<strong>${i}</strong>` : i;
-  return `<p${u(l)}>${c}</p>`;
+function vt(t, e) {
+  var a, p, d, b, $, w;
+  const o = t == null ? void 0 : t.theme, n = [];
+  (a = o == null ? void 0 : o.textStyle) != null && a["font-family"] && n.push(`font-family: ${o.textStyle["font-family"]}`), n.push(`font-size: ${((p = o == null ? void 0 : o.textStyle) == null ? void 0 : p["font-size"]) ?? "28px"}`), n.push(`color: ${((d = o == null ? void 0 : o.textColor) == null ? void 0 : d.color) ?? "#333333"}`), (b = o == null ? void 0 : o.textStyle) != null && b["font-weight"] && n.push(`font-weight: ${o.textStyle["font-weight"]}`), ($ = o == null ? void 0 : o.textStyle) != null && $["font-style"] && n.push(`font-style: ${o.textStyle["font-style"]}`);
+  const s = n.join("; "), l = ((w = o == null ? void 0 : o.textStyle) == null ? void 0 : w["font-weight"]) !== "normal", i = r(e), c = l ? `<strong>${i}</strong>` : i;
+  return `<p${u(s)}>${c}</p>`;
 }
-function xt(t) {
-  const o = t.alignment === "before" ? "0" : "1";
-  return ` ${R.CURRENCY}="${r(t.code)}" ${R.SYMBOL}="${r(t.symbol)}" ${R.ALIGNMENT}="${o}" ${R.THOUSAND_SEPARATOR}="${r(t.thousandSeparator)}" ${R.DECIMAL_SEPARATOR}="${r(t.decimalSeparator)}" ${R.DECIMAL_COUNT}="${t.decimalCount}"`;
+function kt(t) {
+  const e = t.alignment === "before" ? "0" : "1";
+  return ` ${O.CURRENCY}="${r(t.code)}" ${O.SYMBOL}="${r(t.symbol)}" ${O.ALIGNMENT}="${e}" ${O.THOUSAND_SEPARATOR}="${r(t.thousandSeparator)}" ${O.DECIMAL_SEPARATOR}="${r(t.decimalSeparator)}" ${O.DECIMAL_COUNT}="${t.decimalCount}"`;
 }
-function Et(t) {
+function Yt(t) {
   const {
-    nodeConfig: o,
-    composition: e,
-    cardBg: s,
-    titleText: l,
-    extraClasses: n = "",
+    nodeConfig: e,
+    composition: o,
+    cardBg: n,
+    titleText: s,
+    extraClasses: l = "",
     legacyId: i,
     legacyBgColor: c,
     preserveInnerHtml: a,
-    skipCompile: d = !1
-  } = t, p = o.layout === "list" ? ' data-layout="list"' : "", b = o.layout === "list" ? " es-m-p0 ins-recommendation-list-layout" : "", m = e.composition.join(","), h = JSON.stringify(e.customAttributes), w = [
+    skipCompile: p = !1,
+    blockPadding: d
+  } = t, b = e.layout === "list" ? ' data-layout="list"' : "", $ = e.layout === "list" ? " es-m-p0 ins-recommendation-list-layout" : "", w = o.composition.join(","), C = JSON.stringify(o.customAttributes), y = [
     "recommendation-block-v2",
     "esd-block-recommendation-v3-block",
-    `es-p20${b}`,
-    `ins-recommendation-v3-block-${o.recommendationId}`,
+    `${d ? d.classes : "es-p20"}${$}`,
+    `ins-recommendation-v3-block-${e.recommendationId}`,
     // Marker class Stripo's block infrastructure uses to identify recommendation
     // blocks. Without it, certain Styles-panel controls (e.g. button "Fit to
     // Container") are suppressed even though every other selector matches.
     "esd-recommendation-block",
     "esd-extension-block",
     "esd-container-frame",
-    "ins-recommendation-no-mobile-layout",
-    d ? st : "",
-    n
-  ].filter(Boolean).join(" "), C = xt(o.currency), S = o.visibility[lt] !== !1, A = ` esd-ext-config="${r(JSON.stringify(o))}"`, x = i ? ` id="${r(i)}"` : "", T = c ? ` bgcolor="${r(c)}"` : "", U = a ?? (() => {
-    const k = parseInt(o.size) || 6, y = {
-      composition: e.composition,
-      visibility: e.visibility,
-      perElement: e.perElementStyles,
-      customAttrValues: e.customAttrValues,
-      cardBg: s,
-      ...gt(o.currency)
-    }, v = o.layout === "list" ? St(k, y) : $t(k, o.cardsInRow, y);
+    e.mobileLayoutEnabled ? "" : ut,
+    p ? dt : "",
+    l
+  ].filter(Boolean).join(" "), T = kt(e.currency), I = e.visibility[pt] !== !1, A = ` esd-ext-config="${r(JSON.stringify(e))}"`, _ = i ? ` id="${r(i)}"` : "", E = c ? ` bgcolor="${r(c)}"` : "", z = d != null && d.style ? ` style="${d.style}"` : "", S = a ?? (() => {
+    const h = parseInt(e.size) || 6, N = {
+      composition: o.composition,
+      visibility: o.visibility,
+      perElement: o.perElementStyles,
+      customAttrValues: o.customAttrValues,
+      cardBg: n,
+      ...wt(e.currency),
+      inlinePrice: At(
+        e.priceMovedToNextLine,
+        o.composition,
+        o.visibility
+      )
+    }, B = e.layout === "list", M = B ? Ot(h, N) : X(h, e.cardsInRow, N), at = e.mobileLayoutEnabled && !B ? `<td><table width="100%" cellpadding="0" cellspacing="0" border="0"
+                class="${ft}" style="display: none">${X(h, e.mobileCardsInRow, N)}</table></td>` : "";
     return `
     <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tbody>
@@ -453,15 +531,15 @@ function Et(t) {
                 <td align="center">
                     <table class="container" width="100%" cellpadding="0" cellspacing="0" border="0">
                         <tbody>
-                            ${S ? it(ht(e.titleVariable, l), !0, o.rowSpacing) : ""}
+                            ${I ? $t(vt(o.titleVariable, s), !0, e.rowSpacing) : ""}
                             <tr>
                                 <td>
                                     <table width="100%" cellpadding="0" cellspacing="0" border="0"
-                                        class="${rt}">${v}
+                                        class="${mt}">${M}
                                     </table>
                                 </td>
                             </tr>
-                            <tr class="ins-recommendation-mobile-row"></tr>
+                            <tr class="ins-recommendation-mobile-row">${at}</tr>
                         </tbody>
                     </table>
                 </td>
@@ -469,22 +547,22 @@ function Et(t) {
         </tbody>
     </table>`;
   })();
-  return ct(`
+  return yt(`
 <td align="left"
     esd-extension-block-id="recommendation-block"
     width="520"
-    class="${w}"${x}${T}
-    recommendation-id="${o.recommendationId}"${C}
-    data-card-composition="${r(m)}"
-    data-custom-attributes="${r(h)}"
-    data-column-spacing="${o.columnSpacing}"
-    data-row-spacing="${o.rowSpacing}"
-    data-mobile-column-spacing="${o.mobileColumnSpacing}"
-    data-mobile-row-spacing="${o.mobileRowSpacing}"
-    hide-price="${o.priceHideIfSameAsDiscounted}"${p}${A}>${U}
+    class="${y}"${_}${E}${z}
+    recommendation-id="${e.recommendationId}"${T}
+    data-card-composition="${r(w)}"
+    data-custom-attributes="${r(C)}"
+    data-column-spacing="${e.columnSpacing}"
+    data-row-spacing="${e.rowSpacing}"
+    data-mobile-column-spacing="${e.mobileColumnSpacing}"
+    data-mobile-row-spacing="${e.mobileRowSpacing}"
+    hide-price="${e.priceHideIfSameAsDiscounted}"${b}${A}>${S}
 </td>
 `);
 }
 export {
-  Et as buildBlockHtml
+  Yt as buildBlockHtml
 };