@useinsider/guido 3.6.0-beta.4f2bf14 → 3.6.0-beta.7ac8612

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

@@ -1,16 +1,16 @@
 import { RecommendationBlockId as g } from "../../../extensions/Blocks/Recommendation/constants/blockIds.js";
-import { CURRENCY_ATTR as R, ATTR_PRODUCT_IMAGE as I, ATTR_PRODUCT_BUTTON as N, CSS_CLASS_RECO_BUTTON as z, ATTR_PRODUCT_NAME as G, ATTR_PRODUCT_PRICE as H, ATTR_PRODUCT_OLD_PRICE as j, ATTR_PRODUCT_OMNIBUS_PRICE as U, ATTR_PRODUCT_OMNIBUS_DISCOUNT as V, ATTR_CUSTOM_PREFIX as E } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
-import { formatPrice as v } from "../../../extensions/Blocks/Recommendation/utils/priceFormatter.js";
-import { escapeHtml as c } from "../../../utils/htmlEscape.js";
+import { CSS_CLASS_SKIP_COMPILE as ot, CURRENCY_ATTR as P, ATTR_PRODUCT_IMAGE as O, ATTR_PRODUCT_BUTTON as k, 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 E } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
+import { formatPrice as L } from "../../../extensions/Blocks/Recommendation/utils/priceFormatter.js";
+import { escapeHtml as r } from "../../../utils/htmlEscape.js";
 import { appendStyle as $ } from "./themeMapper.js";
-const Y = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png", F = "attribute-cell", J = "Buy", X = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79)", K = "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", ot = "ins-recommendation-product-container ins-recommendation-desktop-container";
-function nt(t) {
+const J = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png", K = "attribute-cell", X = "Buy", q = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79)", Q = "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", nt = "ins-recommendation-product-container ins-recommendation-desktop-container";
+function lt(t) {
   return t.replace(/>\s+</g, "><").trim();
 }
 function y(t) {
-  return t ? ` align="${c(t)}"` : ' align="center"';
+  return t ? ` align="${r(t)}"` : ' align="center"';
 }
-function _() {
+function R() {
   return {
     tdStyle: "",
     pStyle: "",
@@ -19,36 +19,36 @@ function _() {
     textTrimming: !1
   };
 }
-function q(t) {
-  return t ? { ...t, wrapBold: !0 } : { ..._(), wrapBold: !0 };
+function Z(t) {
+  return t ? { ...t, wrapBold: !0 } : { ...R(), wrapBold: !0 };
 }
-function k(t, o) {
-  let e = c(t);
+function v(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 b(t) {
-  return t ? ` style="${c(t)}"` : "";
+function u(t) {
+  return t ? ` style="${r(t)}"` : "";
 }
-function O(t, o) {
-  return `<td width="${t}%" class="${F}" ${o}`;
+function I(t, o) {
+  return `<td width="${t}%" class="${K}" ${o}`;
 }
-function lt(t, o, e, l) {
+function st(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 c = i.join("; "), a = e ? ` style="background-color: ${r(e)}"` : "";
   return `
-        ${O(l, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${I(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"
                             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="${Y}" alt="Product Name"
+                                <img src="${J}" alt="Product Name"
                                     class="adapt-img"${s}${n}
-                                    style="${a}">
+                                    style="${c}">
                             </a>
                         </td>
                     </tr>
@@ -57,18 +57,18 @@ 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 G(t, o, e, l, s, n, i) {
+  const a = `table-layout: fixed${n ? `; background-color: ${r(n)}` : ""}`, d = u(s.tdStyle), p = y(s.align), b = `esd-block-text ${o}`.trim(), m = $(l, s.pStyle);
   return `
-        ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${I(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}
-                            class="${u}"
+                            class="${b}"
                             esd-extension-block-id="${t}"${d}>
-                            <p contenteditable="false"${b(m)}>${k(e, s)}</p>
+                            <p contenteditable="false"${u(m)}>${v(e, s)}</p>
                         </td>
                     </tr>
                 </tbody>
@@ -76,10 +76,10 @@ function L(t, o, e, l, s, n, i) {
         </td>
     `;
 }
-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);
+function it(t, o, e, l) {
+  const s = o ? ` style="background-color: ${r(o)}"` : "", n = u(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%"')}>
+        ${I(e, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
                 class="product-card-segment"${s}>
                 <tbody>
@@ -87,8 +87,8 @@ 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)}>
-                                <s>${k(l, t)}</s>
+                            <p contenteditable="false"${u(a)}>
+                                <s>${v(l, t)}</s>
                             </p>
                         </td>
                     </tr>
@@ -97,21 +97,21 @@ 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 z(t, o, e, l, s, n, i) {
+  const c = s ? `; background-color: ${r(s)}` : "", a = u(l.tdStyle), d = y(l.align), b = $("font-size: 12px; color: #666666", l.pStyle);
   return `
-        ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${I(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${c}">
                 <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}>
-                            <p contenteditable="false"${b(u)}>
+                            esd-extension-block-id="${t}"${a}>
+                            <p contenteditable="false"${u(b)}>
                                 <span class="omnibus-text-before"></span>
-                                <span class="${o}">${c(e)}</span>
+                                <span class="${o}">${r(e)}</span>
                                 <span class="omnibus-text-after"></span>
                             </p>
                         </td>
@@ -121,10 +121,10 @@ function D(t, o, e, l, s, n, i) {
         </td>
     `;
 }
-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);
+function rt(t, o, e, l) {
+  const s = e ? ` style="background-color: ${r(e)}"` : "", n = $("padding: 0 5px; height: 100%", o.tdStyle), i = y(o.align), c = o.text || X, a = $(q, o.spanStyle), d = $(Q, o.aStyle);
   return `
-        ${O(l, `valign="top" style="${c(n)}"`)}>
+        ${I(l, `valign="top" style="${r(n)}"`)}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
                 class="product-card-segment"${s}>
                 <tbody>
@@ -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="${r(a)}">
                                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                                    class="es-button ${z}"
-                                    style="${c(d)}">${c(a)}</a>
+                                    class="es-button ${H}"
+                                    style="${r(d)}">${r(c)}</a>
                             </span>
                         </td>
                     </tr>
@@ -145,17 +145,17 @@ 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: ${r(l)}` : "", i = u(e.tdStyle), c = y(e.align), d = $("font-size: 12px; color: #666666; margin: 0", e.pStyle), p = o.replace(/_/g, " ").replace(/\b\w/g, (b) => b.toUpperCase());
   return `
-        ${O(s, 'valign="middle" style="padding: 0 5px; height: 100%"')}>
+        ${I(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="${r(t)}"${c}
                             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>
+                            <p contenteditable="false"${u(d)}>${r(p)}</p>
                         </td>
                     </tr>
                 </tbody>
@@ -164,110 +164,110 @@ function ct(t, o, e, l, s) {
     `;
 }
 function at(t, o, e, l, s, n, i) {
-  const a = o[t], r = a ?? _();
+  const c = o[t], a = c ?? R();
   switch (t) {
-    case I:
-      return lt(
-        a ?? {},
+    case O:
+      return st(
+        c ?? {},
         s,
         l,
         n
       );
-    case G:
-      return L(
+    case j:
+      return G(
         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(
+    case V:
+      return G(
         g.PRICE,
         "product-price es-p15l es-p15r",
         i.pricePlaceholder,
         "font-size: 16px; color: #333333",
-        q(a),
+        Z(c),
         l,
         n
       );
-    case j:
-      return st(r, l, n, i.oldPricePlaceholder);
-    case U:
-      return D(
+    case Y:
+      return it(a, l, n, i.oldPricePlaceholder);
+    case M:
+      return z(
         g.OMNIBUS_PRICE,
         "omnibus-price-value",
         i.omnibusPricePlaceholder,
-        r,
+        a,
         l,
         "product-omnibus-price",
         n
       );
-    case V:
-      return D(
+    case F:
+      return z(
         g.OMNIBUS_DISCOUNT,
         "omnibus-discount-value",
         "-10%",
-        r,
+        a,
         l,
         "product-omnibus-discount",
         n
       );
-    case N:
-      return it(
+    case k:
+      return rt(
         s,
-        a ?? {},
+        c ?? {},
         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;
   }
 }
-const Q = `
+const W = `
     <tr>
         <td class="spacer" style="height: 10px"></td>
     </tr>
 `;
-function rt(t) {
+function dt(t) {
   return {
-    pricePlaceholder: v({ price: 18, currency: t }),
-    oldPricePlaceholder: v({ price: 20, currency: t }),
-    omnibusPricePlaceholder: v({ price: 20, currency: t })
+    pricePlaceholder: L({ price: 18, currency: t }),
+    oldPricePlaceholder: L({ price: 20, currency: t }),
+    omnibusPricePlaceholder: L({ price: 20, currency: 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) : "";
+function pt(t, o, e, l) {
+  const { composition: s, visibility: n, perElement: i, customAttrValues: c, cardBg: a } = l, d = (100 / e).toFixed(2), p = e - o, b = `<td class="${K}" style="padding: 0 5px;" width="${d}%"></td>`, m = p > 0 ? b.repeat(p) : "";
   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>${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 C = n[T] !== !1, f = C ? "" : ' style="display: none"', w = C ? "1" : "0", x = [];
+    for (let A = 0; A < o; A += 1) {
+      const _ = at(
         T,
         i,
+        c,
         a,
-        r,
-        t + x,
+        t + A,
         d,
         l
       );
-      A && S.push(A);
+      _ && x.push(_);
     }
-    return S.length === 0 ? "" : `
+    return x.length === 0 ? "" : `
             <tr class="recommendation-attribute-row"
-                data-attribute-type="${c(T)}"
-                data-visibility="${C}"${f}>
-                ${S.join("")}${m}
+                data-attribute-type="${r(T)}"
+                data-visibility="${w}"${f}>
+                ${x.join("")}${m}
             </tr>
         `;
   }).filter(Boolean).join("")}</tbody>
@@ -276,107 +276,107 @@ function dt(t, o, e, l) {
         </tr>
     `;
 }
-function pt(t, o, e) {
+function ut(t, o, e) {
   const l = [];
   for (let s = 0; s < t; s += o) {
     const n = Math.min(o, t - s);
-    s > 0 && l.push(Q), l.push(dt(s, n, o, e));
+    s > 0 && l.push(W), l.push(pt(s, n, o, e));
   }
   return l.join("");
 }
-function ut(t, o, e, l) {
+function bt(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");
+  if (t === j) {
+    const n = s ?? R(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), c = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-name"
-                esd-extension-block-id="${g.NAME}"${a}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(i)}>${k("Product Name", n)}</p>
+                esd-extension-block-id="${g.NAME}"${c}${u(n.tdStyle)}>
+                <p contenteditable="false"${u(i)}>${v("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");
+  if (t === V) {
+    const n = Z(s), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), c = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-price"
-                esd-extension-block-id="${g.PRICE}"${a}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(i)}>${k(l.pricePlaceholder, n)}</p>
+                esd-extension-block-id="${g.PRICE}"${c}${u(n.tdStyle)}>
+                <p contenteditable="false"${u(i)}>${v(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");
+  if (t === Y) {
+    const n = s ?? R(), c = $("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}${u(n.tdStyle)}>
+                <p contenteditable="false"${u(c)}><s>${v(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");
+  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 ? l.omnibusPricePlaceholder : "-10%", d = n ? "product-omnibus-price" : "product-omnibus-discount", p = s ?? R(), b = $("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)}>
+                esd-extension-block-id="${i}"${m}${u(p.tdStyle)}>
+                <p contenteditable="false"${u(b)}>
                     <span class="omnibus-text-before"></span>
-                    <span class="${a}">${c(r)}</span>
+                    <span class="${c}">${r(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 ?? R(), 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"), b = g.CUSTOM_ATTRIBUTE;
     return `
-            <td product-attr="${c(i)}"
+            <td product-attr="${r(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>
+                esd-extension-block-id="${b}"${p}${u(n.tdStyle)}>
+                <p contenteditable="false"${u(d)}>${r(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 = `
+function gt(t, o) {
+  const { composition: e, visibility: l, perElement: s, customAttrValues: n, cardBg: i } = o, c = i ? `background-color: ${r(i)}` : "", a = c ? `style="table-layout: fixed; ${c}"` : 'style="table-layout: fixed"', d = s[O] ?? {}, p = l[O] !== !1, b = d.width ? ` width="${d.width}"` : "", m = p ? "" : ' style="display: none"', S = `
         <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-attribute-type="${O}"
             data-visibility="${p ? "1" : "0"}"
             align="center" valign="middle"${m}>
             <a target="_blank" href="https://example.com/product/${t + 1}">
-                <img src="${Y}" alt="Product Name"
-                    class="adapt-img product-image"${u}
+                <img src="${J}" alt="Product Name"
+                    class="adapt-img product-image"${b}
                     style="display: block; max-width: 100%; height: auto">
             </a>
         </td>
-    `, w = `
+    `, C = `
         <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((P) => P !== I && P !== N).map((P) => {
-    const B = l[P] !== !1, tt = B ? "" : ' style="display: none"', et = B ? "1" : "0", M = ut(P, s, n, o);
-    return M ? `<tr class="recommendation-attribute-row"
-                data-attribute-type="${c(P)}"
-                data-visibility="${et}"${tt}>${M}</tr>` : "";
+                <tbody>${e.filter((h) => h !== O && h !== k).map((h) => {
+    const B = l[h] !== !1, tt = B ? "" : ' style="display: none"', et = B ? "1" : "0", D = bt(h, s, n, o);
+    return D ? `<tr class="recommendation-attribute-row"
+                data-attribute-type="${r(h)}"
+                data-visibility="${et}"${tt}>${D}</tr>` : "";
   }).filter(Boolean).join(`
 `)}</tbody>
             </table>
         </td>
-    `, f = s[N] ?? {}, C = l[N] !== !1, S = f.text || J, x = $(X, f.spanStyle ?? ""), A = $(K, f.aStyle ?? ""), Z = C ? "" : ' style="display: none"', W = `
+    `, f = s[k] ?? {}, w = l[k] !== !1, x = f.text || X, A = $(q, f.spanStyle ?? ""), _ = $(Q, f.aStyle ?? ""), N = w ? "" : ' style="display: none"', U = `
         <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="${N}"
-            data-visibility="${C ? "1" : "0"}"
-            align="${c(f.align ?? "center")}" valign="middle"${Z}>
-            <span class="es-button-border" style="${c(x)}">
+            data-attribute-type="${k}"
+            data-visibility="${w ? "1" : "0"}"
+            align="${r(f.align ?? "center")}" valign="middle"${N}>
+            <span class="es-button-border" style="${r(A)}">
                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                    class="es-button ${z}"
-                    style="${c(A)}">${c(S)}</a>
+                    class="es-button ${H}"
+                    style="${r(_)}">${r(x)}</a>
             </span>
         </td>
     `;
@@ -384,37 +384,37 @@ 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>
+                        <tr>${S}${C}${U}</tr>
                     </tbody>
                 </table>
             </td>
         </tr>
     `;
 }
-function gt(t, o) {
+function mt(t, o) {
   const e = [];
   for (let l = 0; l < t; l += 1)
-    l > 0 && e.push(Q), e.push(bt(l, o));
+    l > 0 && e.push(W), e.push(gt(l, o));
   return e.join("");
 }
-function mt(t, o) {
-  var r, d, p, u, m, h;
+function $t(t, o) {
+  var a, d, p, b, m, S;
   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"}`), (b = e == null ? void 0 : e.textStyle) != null && b["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 = ((S = e == null ? void 0 : e.textStyle) == null ? void 0 : S["font-weight"]) !== "normal", i = r(o), c = 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${u(s)}>${c}</p>
         </td>
     `;
 }
-function $t(t) {
+function yt(t) {
   const o = t.alignment === "before" ? "0" : "1";
-  return ` ${R.CURRENCY}="${c(t.code)}" ${R.SYMBOL}="${c(t.symbol)}" ${R.ALIGNMENT}="${o}" ${R.THOUSAND_SEPARATOR}="${c(t.thousandSeparator)}" ${R.DECIMAL_SEPARATOR}="${c(t.decimalSeparator)}" ${R.DECIMAL_COUNT}="${t.decimalCount}"`;
+  return ` ${P.CURRENCY}="${r(t.code)}" ${P.SYMBOL}="${r(t.symbol)}" ${P.ALIGNMENT}="${o}" ${P.THOUSAND_SEPARATOR}="${r(t.thousandSeparator)}" ${P.DECIMAL_SEPARATOR}="${r(t.decimalSeparator)}" ${P.DECIMAL_COUNT}="${t.decimalCount}"`;
 }
-function Tt(t) {
+function Ct(t) {
   const {
     nodeConfig: o,
     composition: e,
@@ -422,18 +422,13 @@ 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 = {
-    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 = [
+    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(","), S = JSON.stringify(e.customAttributes), T = [
     "recommendation-block-v2",
     "esd-block-recommendation-v3-block",
-    `es-p20${p}`,
+    `es-p20${b}`,
     `ins-recommendation-v3-block-${o.recommendationId}`,
     // Marker class Stripo's block infrastructure uses to identify recommendation
     // blocks. Without it, certain Styles-panel controls (e.g. button "Fit to
@@ -442,20 +437,18 @@ function Tt(t) {
     "esd-extension-block",
     "esd-container-frame",
     "ins-recommendation-no-mobile-layout",
+    d ? ot : "",
     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)}"` : "";
-  return nt(`
-<td align="left"
-    esd-extension-block-id="recommendation-block"
-    width="520"
-    class="${f}"${x}${A}
-    recommendation-id="${o.recommendationId}"${C}
-    data-card-composition="${c(T)}"
-    data-custom-attributes="${c(w)}"
-    data-column-spacing="${o.columnSpacing}"
-    data-row-spacing="${o.rowSpacing}"
-    data-mobile-column-spacing="${o.mobileColumnSpacing}"
-    data-mobile-row-spacing="${o.mobileRowSpacing}"${d}${S}>
+  ].filter(Boolean).join(" "), C = yt(o.currency), f = ` esd-ext-config="${r(JSON.stringify(o))}"`, w = i ? ` id="${r(i)}"` : "", x = c ? ` bgcolor="${r(c)}"` : "", _ = a ?? (() => {
+    const N = parseInt(o.size) || 6, U = {
+      composition: e.composition,
+      visibility: e.visibility,
+      perElement: e.perElementStyles,
+      customAttrValues: e.customAttrValues,
+      cardBg: l,
+      ...dt(o.currency)
+    }, h = o.layout === "list" ? mt(N, U) : ut(N, o.cardsInRow, U);
+    return `
     <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tbody>
             <tr>
@@ -466,7 +459,7 @@ function Tt(t) {
                                 <td>
                                     <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                         <tbody>
-                                            <tr>${h}</tr>
+                                            <tr>${$t(e.titleVariable, s)}</tr>
                                         </tbody>
                                     </table>
                                 </td>
@@ -477,7 +470,7 @@ function Tt(t) {
                             <tr>
                                 <td>
                                     <table width="100%" cellpadding="0" cellspacing="0" border="0"
-                                        class="${ot}">${m}
+                                        class="${nt}">${h}
                                     </table>
                                 </td>
                             </tr>
@@ -487,10 +480,23 @@ function Tt(t) {
                 </td>
             </tr>
         </tbody>
-    </table>
+    </table>`;
+  })();
+  return lt(`
+<td align="left"
+    esd-extension-block-id="recommendation-block"
+    width="520"
+    class="${T}"${w}${x}
+    recommendation-id="${o.recommendationId}"${C}
+    data-card-composition="${r(m)}"
+    data-custom-attributes="${r(S)}"
+    data-column-spacing="${o.columnSpacing}"
+    data-row-spacing="${o.rowSpacing}"
+    data-mobile-column-spacing="${o.mobileColumnSpacing}"
+    data-mobile-row-spacing="${o.mobileRowSpacing}"${p}${f}>${_}
 </td>
 `);
 }
 export {
-  Tt as buildBlockHtml
+  Ct as buildBlockHtml
 };