@useinsider/guido 3.17.0 → 3.18.0

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

@@ -1,17 +1,18 @@
 import { RecommendationBlockId as g } from "../../../extensions/Blocks/Recommendation/constants/blockIds.js";
-import { CSS_CLASS_SKIP_COMPILE as st, CURRENCY_ATTR as _, ATTR_PRODUCT_IMAGE as I, ATTR_PRODUCT_BUTTON as O, CSS_CLASS_RECO_BUTTON as z, ATTR_PRODUCT_NAME as H, ATTR_PRODUCT_PRICE as j, ATTR_PRODUCT_OLD_PRICE as V, ATTR_PRODUCT_OMNIBUS_PRICE as L, ATTR_PRODUCT_OMNIBUS_DISCOUNT as Y, ATTR_CUSTOM_PREFIX as F } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
-import { compositionKeyToProductAttr as K, bareAttributeName as J } from "../../../extensions/Blocks/Recommendation/utils/compositionKeys.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 { escapeHtml as r } from "../../../utils/htmlEscape.js";
 import { appendStyle as $ } from "./themeMapper.js";
-const X = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png", q = "attribute-cell", Q = "Buy", Z = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79)", W = "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", lt = "ins-recommendation-product-container ins-recommendation-desktop-container";
-function it(t) {
+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) {
   return t.replace(/>\s+</g, "><").trim();
 }
-function y(t) {
+function f(t) {
   return t ? ` align="${r(t)}"` : ' align="center"';
 }
-function R() {
+function _() {
   return {
     tdStyle: "",
     pStyle: "",
@@ -20,25 +21,25 @@ function R() {
     textTrimming: !1
   };
 }
-function tt(t) {
-  return t ? { ...t, wrapBold: !0 } : { ...R(), wrapBold: !0 };
+function et(t) {
+  return t ? { ...t, wrapBold: !0 } : { ..._(), wrapBold: !0 };
 }
-function k(t, o) {
+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 u(t) {
   return t ? ` style="${r(t)}"` : "";
 }
-function E(t, o) {
-  return `<td width="${t}%" class="${q}" ${o}`;
+function P(t, o) {
+  return `<td width="${t}%" class="${Q}" ${o}`;
 }
-function rt(t, o, e, s) {
+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"];
   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)}"` : "";
   return `
-        ${E(s, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${P(s, '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,7 +48,7 @@ function rt(t, o, e, s) {
                             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="${X}" alt="Product Name"
+                                <img src="${q}" alt="Product Name"
                                     class="adapt-img"${l}${n}
                                     style="${c}">
                             </a>
@@ -58,10 +59,10 @@ function rt(t, o, e, s) {
         </td>
     `;
 }
-function D(t, o, e, s, l, n, i) {
-  const a = `table-layout: fixed${n ? `; background-color: ${r(n)}` : ""}`, d = u(l.tdStyle), p = y(l.align), b = `esd-block-text ${o}`.trim(), m = $(s, l.pStyle);
+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);
   return `
-        ${E(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${P(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>
@@ -69,7 +70,7 @@ function D(t, o, e, s, l, n, i) {
                         <td${p}
                             class="${b}"
                             esd-extension-block-id="${t}"${d}>
-                            <p contenteditable="false"${u(m)}>${k(e, l)}</p>
+                            <p contenteditable="false"${u(m)}>${N(e, l)}</p>
                         </td>
                     </tr>
                 </tbody>
@@ -77,10 +78,10 @@ function D(t, o, e, s, l, n, i) {
         </td>
     `;
 }
-function ct(t, o, e, s) {
-  const l = o ? ` style="background-color: ${r(o)}"` : "", n = u(t.tdStyle), i = y(t.align), a = $("font-size: 14px; color: #999999", t.pStyle);
+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);
   return `
-        ${E(e, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${P(e, '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>
@@ -89,7 +90,7 @@ function ct(t, o, e, s) {
                             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>${k(s, t)}</s>
+                                <s>${N(s, t)}</s>
                             </p>
                         </td>
                     </tr>
@@ -98,10 +99,10 @@ function ct(t, o, e, s) {
         </td>
     `;
 }
-function G(t, o, e, s, l, n, i) {
-  const c = l ? `; background-color: ${r(l)}` : "", a = u(s.tdStyle), d = y(s.align), b = $("font-size: 12px; color: #666666", s.pStyle);
+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);
   return `
-        ${E(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
+        ${P(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>
@@ -122,10 +123,10 @@ function G(t, o, e, s, l, n, i) {
         </td>
     `;
 }
-function at(t, o, e, s) {
-  const l = e ? ` style="background-color: ${r(e)}"` : "", n = $("padding: 0 5px; height: 100%", o.tdStyle), i = y(o.align), c = o.text || Q, a = $(Z, o.spanStyle), d = $(W, o.aStyle);
+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);
   return `
-        ${E(s, `valign="top" style="${r(n)}"`)}>
+        ${P(s, `valign="top" style="${r(n)}"`)}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
                 class="product-card-segment"${l}>
                 <tbody>
@@ -135,7 +136,7 @@ function at(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 ${z}"
+                                    class="es-button ${H}"
                                     style="${r(d)}">${r(c)}</a>
                             </span>
                         </td>
@@ -145,10 +146,10 @@ function at(t, o, e, s) {
         </td>
     `;
 }
-function dt(t, o, e, s, l) {
-  const n = s ? `; background-color: ${r(s)}` : "", 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());
+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());
   return `
-        ${E(l, 'valign="middle" style="padding: 0 5px; height: 100%"')}>
+        ${P(l, '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>
@@ -164,18 +165,18 @@ function dt(t, o, e, s, l) {
         </td>
     `;
 }
-function pt(t, o, e, s, l, n, i) {
-  const c = o[t], a = c ?? R();
+function bt(t, o, e, s, l, n, i) {
+  const c = o[t], a = c ?? _();
   switch (t) {
     case I:
-      return rt(
+      return at(
         c ?? {},
         l,
         s,
         n
       );
-    case H:
-      return D(
+    case j:
+      return G(
         g.NAME,
         "product-name es-p10t es-p10b es-p15l es-p15r",
         "Product Name",
@@ -184,20 +185,20 @@ function pt(t, o, e, s, l, n, i) {
         s,
         n
       );
-    case j:
-      return D(
+    case V:
+      return G(
         g.PRICE,
         "product-price es-p15l es-p15r",
         i.pricePlaceholder,
         "font-size: 16px; color: #333333",
-        tt(c),
+        et(c),
         s,
         n
       );
-    case V:
-      return ct(a, s, n, i.oldPricePlaceholder);
-    case L:
-      return G(
+    case Y:
+      return dt(a, s, n, i.oldPricePlaceholder);
+    case M:
+      return z(
         g.OMNIBUS_PRICE,
         "omnibus-price-value",
         i.omnibusPricePlaceholder,
@@ -206,8 +207,8 @@ function pt(t, o, e, s, l, n, i) {
         "product-omnibus-price",
         n
       );
-    case Y:
-      return G(
+    case F:
+      return z(
         g.OMNIBUS_DISCOUNT,
         "omnibus-discount-value",
         "-10%",
@@ -217,57 +218,57 @@ function pt(t, o, e, s, l, n, i) {
         n
       );
     case O:
-      return at(
+      return pt(
         l,
         c ?? {},
         s,
         n
       );
     default:
-      if (t.startsWith(F)) {
-        const d = e[t] ?? K(t), p = J(d);
-        return dt(d, p, a, s, n);
+      if (t.startsWith(K)) {
+        const d = e[t] ?? J(t), p = X(d);
+        return ut(d, p, a, s, n);
       }
       return null;
   }
 }
-const et = `
+const ot = `
     <tr>
         <td class="spacer" style="height: 10px"></td>
     </tr>
 `;
-function ut(t) {
+function gt(t) {
   return {
     pricePlaceholder: B({ price: 18, currency: t }),
     oldPricePlaceholder: B({ price: 20, currency: t }),
     omnibusPricePlaceholder: B({ price: 20, currency: t })
   };
 }
-function bt(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 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) : "";
   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((T) => {
-    const C = n[T] !== !1, f = C ? "" : ' style="display: none"', w = C ? "1" : "0", x = [];
-    for (let A = 0; A < o; A += 1) {
-      const P = pt(
-        T,
+                    <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,
         i,
         c,
         a,
-        t + A,
+        t + T,
         d,
         s
       );
-      P && x.push(P);
+      E && x.push(E);
     }
     return x.length === 0 ? "" : `
             <tr class="recommendation-attribute-row"
-                data-attribute-type="${r(T)}"
-                data-visibility="${w}"${f}>
+                data-attribute-type="${r(w)}"
+                data-visibility="${A}"${S}>
                 ${x.join("")}${m}
             </tr>
         `;
@@ -277,45 +278,45 @@ function bt(t, o, e, s) {
         </tr>
     `;
 }
-function gt(t, o, e) {
+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(et), s.push(bt(l, n, o, e));
+    l > 0 && s.push(ot), s.push(mt(l, n, o, e));
   }
   return s.join("");
 }
-function mt(t, o, e, s) {
+function ft(t, o, e, s) {
   const l = o[t];
-  if (t === H) {
-    const n = l ?? R(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), c = y(n.align ?? "left");
+  if (t === j) {
+    const n = l ?? _(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), c = f(n.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)}>${k("Product Name", n)}</p>
+                <p contenteditable="false"${u(i)}>${N("Product Name", n)}</p>
             </td>
         `;
   }
-  if (t === j) {
-    const n = tt(l), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), c = y(n.align ?? "left");
+  if (t === V) {
+    const n = et(l), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), c = f(n.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)}>${k(s.pricePlaceholder, n)}</p>
+                <p contenteditable="false"${u(i)}>${N(s.pricePlaceholder, n)}</p>
             </td>
         `;
   }
-  if (t === V) {
-    const n = l ?? R(), c = $("font-size: 14px; color: #999999; text-decoration: line-through; margin: 0", n.pStyle), a = y(n.align ?? "left");
+  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");
     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>${k(s.oldPricePlaceholder, n)}</s></p>
+                <p contenteditable="false"${u(c)}><s>${N(s.oldPricePlaceholder, n)}</s></p>
             </td>
         `;
   }
-  if (t === L || t === Y) {
-    const n = t === L, 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 ?? R(), b = $("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 ? 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");
     return `
             <td class="esd-block-text ${d}"
                 data-text-before="" data-text-after=""
@@ -328,8 +329,8 @@ function mt(t, o, e, s) {
             </td>
         `;
   }
-  if (t.startsWith(F)) {
-    const n = l ?? R(), i = e[t] ?? K(t), a = J(i).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;
+  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;
     return `
             <td product-attr="${r(i)}"
                 class="esd-block-text product-custom-attribute"
@@ -340,8 +341,8 @@ function mt(t, o, e, s) {
   }
   return null;
 }
-function $t(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"', S = `
+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 = `
         <td width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
             esd-extension-block-id="${g.IMAGE}"
@@ -349,7 +350,7 @@ function $t(t, o) {
             data-visibility="${p ? "1" : "0"}"
             align="center" valign="middle"${m}>
             <a target="_blank" href="https://example.com/product/${t + 1}">
-                <img src="${X}" alt="Product Name"
+                <img src="${q}" alt="Product Name"
                     class="adapt-img product-image"${b}
                     style="display: block; max-width: 100%; height: auto">
             </a>
@@ -358,26 +359,26 @@ function $t(t, o) {
         <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((h) => h !== I && h !== O).map((h) => {
-    const U = s[h] !== !1, ot = U ? "" : ' style="display: none"', nt = U ? "1" : "0", M = mt(h, l, n, o);
-    return M ? `<tr class="recommendation-attribute-row"
-                data-attribute-type="${r(h)}"
-                data-visibility="${nt}"${ot}>${M}</tr>` : "";
+                <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>` : "";
   }).filter(Boolean).join(`
 `)}</tbody>
             </table>
         </td>
-    `, f = l[O] ?? {}, w = s[O] !== !1, x = f.text || Q, A = $(Z, f.spanStyle ?? ""), P = $(W, f.aStyle ?? ""), N = w ? "" : ' style="display: none"', v = `
+    `, 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 = `
         <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="${w ? "1" : "0"}"
-            align="${r(f.align ?? "center")}" valign="middle"${N}>
-            <span class="es-button-border" style="${r(A)}">
+            data-visibility="${A ? "1" : "0"}"
+            align="${r(S.align ?? "center")}" valign="middle"${U}>
+            <span class="es-button-border" style="${r(T)}">
                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                    class="es-button ${z}"
-                    style="${r(P)}">${r(x)}</a>
+                    class="es-button ${H}"
+                    style="${r(E)}">${r(x)}</a>
             </span>
         </td>
     `;
@@ -387,35 +388,31 @@ function $t(t, o) {
                 <table width="100%" cellpadding="0" cellspacing="0" border="0"
                     class="product-card-wrapper" ${a}>
                     <tbody>
-                        <tr>${S}${C}${v}</tr>
+                        <tr>${h}${C}${k}</tr>
                     </tbody>
                 </table>
             </td>
         </tr>
     `;
 }
-function yt(t, o) {
+function St(t, o) {
   const e = [];
   for (let s = 0; s < t; s += 1)
-    s > 0 && e.push(et), e.push($t(s, o));
+    s > 0 && e.push(ot), e.push(yt(s, o));
   return e.join("");
 }
-function ft(t, o) {
-  var a, d, p, b, m, S;
+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 = ((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${u(l)}>${c}</p>
-        </td>
-    `;
+  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 ht(t) {
+function xt(t) {
   const o = t.alignment === "before" ? "0" : "1";
-  return ` ${_.CURRENCY}="${r(t.code)}" ${_.SYMBOL}="${r(t.symbol)}" ${_.ALIGNMENT}="${o}" ${_.THOUSAND_SEPARATOR}="${r(t.thousandSeparator)}" ${_.DECIMAL_SEPARATOR}="${r(t.decimalSeparator)}" ${_.DECIMAL_COUNT}="${t.decimalCount}"`;
+  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 Pt(t) {
+function Et(t) {
   const {
     nodeConfig: o,
     composition: e,
@@ -426,7 +423,7 @@ function Pt(t) {
     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 = [
+  } = 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 = [
     "recommendation-block-v2",
     "esd-block-recommendation-v3-block",
     `es-p20${b}`,
@@ -440,15 +437,15 @@ function Pt(t) {
     "ins-recommendation-no-mobile-layout",
     d ? st : "",
     n
-  ].filter(Boolean).join(" "), C = ht(o.currency), f = ` esd-ext-config="${r(JSON.stringify(o))}"`, w = i ? ` id="${r(i)}"` : "", x = c ? ` bgcolor="${r(c)}"` : "", P = a ?? (() => {
-    const N = parseInt(o.size) || 6, v = {
+  ].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,
-      ...ut(o.currency)
-    }, h = o.layout === "list" ? yt(N, v) : gt(N, o.cardsInRow, v);
+      ...gt(o.currency)
+    }, v = o.layout === "list" ? St(k, y) : $t(k, o.cardsInRow, y);
     return `
     <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tbody>
@@ -456,22 +453,11 @@ function Pt(t) {
                 <td align="center">
                     <table class="container" width="100%" cellpadding="0" cellspacing="0" border="0">
                         <tbody>
-                            <tr>
-                                <td>
-                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
-                                        <tbody>
-                                            <tr>${ft(e.titleVariable, l)}</tr>
-                                        </tbody>
-                                    </table>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td class="spacer" style="height: ${o.rowSpacing}px"></td>
-                            </tr>
+                            ${S ? it(ht(e.titleVariable, l), !0, o.rowSpacing) : ""}
                             <tr>
                                 <td>
                                     <table width="100%" cellpadding="0" cellspacing="0" border="0"
-                                        class="${lt}">${h}
+                                        class="${rt}">${v}
                                     </table>
                                 </td>
                             </tr>
@@ -483,22 +469,22 @@ function Pt(t) {
         </tbody>
     </table>`;
   })();
-  return it(`
+  return ct(`
 <td align="left"
     esd-extension-block-id="recommendation-block"
     width="520"
-    class="${T}"${w}${x}
+    class="${w}"${x}${T}
     recommendation-id="${o.recommendationId}"${C}
     data-card-composition="${r(m)}"
-    data-custom-attributes="${r(S)}"
+    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}${f}>${P}
+    hide-price="${o.priceHideIfSameAsDiscounted}"${p}${A}>${U}
 </td>
 `);
 }
 export {
-  Pt as buildBlockHtml
+  Et as buildBlockHtml
 };

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

@@ -1,10 +1,10 @@
-import { CURRENT_CONFIG_VERSION as s, DEFAULT_CURRENCY as i } from "../../../extensions/Blocks/Recommendation/constants/defaultConfig.js";
-import { DEFAULT_CARDS_IN_ROW as m, DEFAULT_MOBILE_ROW_SPACING as p, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as f, DEFAULT_COLUMN_SPACING as S, DEFAULT_MOBILE_CARDS_IN_ROW as a } from "../../../extensions/Blocks/Recommendation/constants/layout.js";
+import { PRE_RRS_CONFIG_VERSION as s, DEFAULT_CURRENCY as i } from "../../../extensions/Blocks/Recommendation/constants/defaultConfig.js";
+import { DEFAULT_CARDS_IN_ROW as m, DEFAULT_MOBILE_ROW_SPACING as p, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as S, DEFAULT_COLUMN_SPACING as f, DEFAULT_MOBILE_CARDS_IN_ROW as a } from "../../../extensions/Blocks/Recommendation/constants/layout.js";
 import { mapLegacyStrategy as l } from "../../../extensions/Blocks/Recommendation/utils/legacyStrategyMap.js";
 function c(t) {
   return t === "0" || t === 0 ? "before" : "after";
 }
-function I(t) {
+function _(t) {
   if (typeof t == "number" && Number.isFinite(t))
     return t;
   if (typeof t == "string") {
@@ -14,13 +14,13 @@ function I(t) {
   }
   return i.decimalCount;
 }
-function _(t) {
+function I(t) {
   return t === "." || t === "," || t === " " || t === "" ? t : ",";
 }
-function N(t) {
+function A(t) {
   return t === "." || t === "," || t === " " ? t : ".";
 }
-function A(t) {
+function L(t) {
   if (!t || typeof t != "object")
     return { ...i };
   const o = t, n = o.value ?? o.name ?? i.code, r = o.symbol ?? n;
@@ -28,18 +28,18 @@ function A(t) {
     code: n,
     symbol: r,
     alignment: c(o.alignment),
-    decimalCount: I(o.decimalCount),
-    decimalSeparator: N(o.decimalSeparator),
-    thousandSeparator: _(o.thousandSeparator)
+    decimalCount: _(o.decimalCount),
+    decimalSeparator: A(o.decimalSeparator),
+    thousandSeparator: I(o.thousandSeparator)
   };
 }
-function L(t) {
+function N(t) {
   return t === "horizontal" || t === "list" ? "list" : "grid";
 }
 function R(t) {
   return l(t) || "mostPopular";
 }
-function U(t, o, n) {
+function O(t, o, n) {
   const r = o.rowCount ?? t.cardsInRow ?? m, u = o.totalCount ?? (typeof t.size == "string" ? parseInt(t.size) : t.size) ?? 6;
   return {
     recommendationId: n,
@@ -48,15 +48,15 @@ function U(t, o, n) {
     size: String(u),
     shuffleProducts: !!t.shuffleProducts,
     language: t.language ?? "en_US",
-    currency: A(t.currencySettings),
+    currency: L(t.currencySettings),
     filters: (t.filters ?? []).map((e) => ({ ...e })),
-    layout: L(t.orientation ?? o.orientation),
+    layout: N(t.orientation ?? o.orientation),
     cardsInRow: r,
     mobileCardsInRow: a,
     mobileLayoutEnabled: !1,
     previousMobileCardsInRow: a,
-    columnSpacing: S,
-    rowSpacing: f,
+    columnSpacing: f,
+    rowSpacing: S,
     mobileColumnSpacing: d,
     mobileRowSpacing: p,
     omnibusPrice: { textBefore: "", textAfter: "" },
@@ -70,6 +70,6 @@ function U(t, o, n) {
   };
 }
 export {
-  A as mapCurrency,
-  U as mapSettings
+  L as mapCurrency,
+  O as mapSettings
 };