@useinsider/guido 3.21.2-beta.4b0fed7 → 3.21.2-beta.5a809f7

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

@@ -1,20 +1,21 @@
 import { RecommendationBlockId as g } from "../../../extensions/Blocks/Recommendation/constants/blockIds.js";
-import { CSS_CLASS_SKIP_COMPILE as at, ATTR_RECOMMENDATION_TITLE as dt, CURRENCY_ATTR as k, ATTR_PRODUCT_PRICE as h, ATTR_PRODUCT_OLD_PRICE as x, 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 j, ATTR_PRODUCT_OMNIBUS_DISCOUNT as Q, ATTR_CUSTOM_PREFIX as Z } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
+import { CSS_CLASS_SKIP_COMPILE as at, ATTR_RECOMMENDATION_TITLE as dt, CURRENCY_ATTR as E, ATTR_PRODUCT_PRICE as O, ATTR_PRODUCT_OLD_PRICE as v, 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 j, 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 pt } from "../../../extensions/Blocks/Recommendation/controls/mobileLayout/cssRules.js";
 import { CSS_CLASS_TEXT_TRIM as ut } from "../../../extensions/Blocks/Recommendation/controls/shared/textTrimCssRules.js";
 import { buildTitleRows as bt } from "../../../extensions/Blocks/Recommendation/templates/titleRows.js";
 import { compositionKeyToProductAttr as W, bareAttributeName as tt } from "../../../extensions/Blocks/Recommendation/utils/compositionKeys.js";
+import { resolveInlinePriceOrder as $t } from "../../../extensions/Blocks/Recommendation/utils/inlinePriceOrder.js";
 import { formatPrice as H } from "../../../extensions/Blocks/Recommendation/utils/priceFormatter.js";
 import { escapeHtml as r } from "../../../utils/htmlEscape.js";
 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", $t = "ins-recommendation-product-container ins-recommendation-desktop-container", gt = "ins-recommendation-product-container ins-recommendation-mobile-container", st = "font-size: 16px; color: #333333", Y = "font-size: 14px; color: #999999", ct = `${Y}; text-decoration: line-through; margin: 0`;
-function mt(t) {
+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", gt = "ins-recommendation-product-container ins-recommendation-desktop-container", mt = "ins-recommendation-product-container ins-recommendation-mobile-container", st = "font-size: 16px; color: #333333", Y = "font-size: 14px; color: #999999", ct = `${Y}; text-decoration: line-through; margin: 0`;
+function ft(t) {
   return t.replace(/>\s+</g, "><").trim();
 }
 function f(t) {
   return t ? ` align="${r(t)}"` : ' align="center"';
 }
-function _() {
+function P() {
   return {
     tdStyle: "",
     pStyle: "",
@@ -24,9 +25,9 @@ function _() {
   };
 }
 function M(t) {
-  return t ? { ...t, wrapBold: !0 } : { ..._(), wrapBold: !0 };
+  return t ? { ...t, wrapBold: !0 } : { ...P(), wrapBold: !0 };
 }
-function C(t, e) {
+function h(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;
 }
@@ -36,15 +37,15 @@ function p(t) {
 function B(t) {
   return t.textTrimming ? ` ${ut}` : "";
 }
-function I(t, e) {
+function R(t, e) {
   return `<td width="${t}%" class="${ot}" ${e}`;
 }
-function ft(t, e, o, n) {
+function yt(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 = o ? ` style="background-color: ${r(o)}"` : "";
   return `
-        ${I(n, '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>
@@ -67,7 +68,7 @@ function ft(t, e, o, n) {
 function F(t, e, o, n, s, l, i) {
   const a = `table-layout: fixed${l ? `; background-color: ${r(l)}` : ""}`, d = p(s.tdStyle), u = f(s.align), b = `esd-block-text ${e}`.trim(), $ = m(n, s.pStyle);
   return `
-        ${I(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>
@@ -75,7 +76,7 @@ function F(t, e, o, n, s, l, i) {
                         <td${u}
                             class="${b}"
                             esd-extension-block-id="${t}"${d}>
-                            <p contenteditable="false"${p($)}>${C(o, s)}</p>
+                            <p contenteditable="false"${p($)}>${h(o, s)}</p>
                         </td>
                     </tr>
                 </tbody>
@@ -83,10 +84,10 @@ function F(t, e, o, n, s, l, i) {
         </td>
     `;
 }
-function yt(t, e, o, n) {
+function St(t, e, o, n) {
   const s = e ? ` style="background-color: ${r(e)}"` : "", l = p(t.tdStyle), i = f(t.align), c = m(Y, t.pStyle);
   return `
-        ${I(o, '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"${s}>
                 <tbody>
@@ -95,7 +96,7 @@ function yt(t, e, o, n) {
                             class="esd-block-text product-old-price es-p15l es-p15r"
                             esd-extension-block-id="${g.OLD_PRICE}"${l}>
                             <p contenteditable="false"${p(c)}>
-                                <s>${C(n, t)}</s>
+                                <s>${h(n, t)}</s>
                             </p>
                         </td>
                     </tr>
@@ -107,7 +108,7 @@ function yt(t, e, o, n) {
 function K(t, e, o, n, s, l, i) {
   const c = s ? `; background-color: ${r(s)}` : "", a = p(n.tdStyle), d = f(n.align), b = m("font-size: 12px; color: #666666", n.pStyle);
   return `
-        ${I(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>
@@ -128,10 +129,10 @@ function K(t, e, o, n, s, l, i) {
         </td>
     `;
 }
-function St(t, e, o, n) {
+function ht(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), d = m(it, e.aStyle);
   return `
-        ${I(n, `valign="top" style="${r(l)}"`)}>
+        ${R(n, `valign="top" style="${r(l)}"`)}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
                 class="product-card-segment"${s}>
                 <tbody>
@@ -151,10 +152,10 @@ function St(t, e, o, n) {
         </td>
     `;
 }
-function ht(t, e, o, n, s) {
+function xt(t, e, o, n, s) {
   const l = n ? `; background-color: ${r(n)}` : "", i = p(o.tdStyle), c = f(o.align), d = m("font-size: 12px; color: #666666; margin: 0", o.pStyle), u = `esd-block-text product-custom-attribute es-p0t es-p0b es-p15l es-p15r${B(o)}`, b = e.replace(/_/g, " ").replace(/\b\w/g, ($) => $.toUpperCase());
   return `
-        ${I(s, '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${l}">
                 <tbody>
@@ -170,24 +171,24 @@ function ht(t, e, o, n, s) {
         </td>
     `;
 }
-function xt(t, e, o, n, s) {
-  const l = e ? ` style="background-color: ${r(e)}"` : "", i = M(t[h]), c = t[x] ?? _(), a = ($) => `
+function Ct(t, e, o, n, s) {
+  const l = e ? ` style="background-color: ${r(e)}"` : "", i = M(t[O]), c = t[v] ?? P(), a = ($) => `
         <td${f(i.align)} valign="middle"
             class="esd-block-text product-price ${$}"
             esd-extension-block-id="${g.PRICE}"${p(i.tdStyle)}>
-            <p contenteditable="false"${p(m(st, i.pStyle))}>${C(n.pricePlaceholder, i)}</p>
+            <p contenteditable="false"${p(m(st, i.pStyle))}>${h(n.pricePlaceholder, i)}</p>
         </td>
     `, d = ($) => `
         <td${f(c.align)} valign="middle"
             class="esd-block-text product-old-price ${$}"
             esd-extension-block-id="${g.OLD_PRICE}"${p(c.tdStyle)}>
             <p contenteditable="false"${p(m(Y, c.pStyle))}>
-                <s>${C(n.oldPricePlaceholder, c)}</s>
+                <s>${h(n.oldPricePlaceholder, c)}</s>
             </p>
         </td>
     `, u = s ? d("es-p15l es-p5r") : a("es-p15l es-p5r"), b = s ? a("es-p5l es-p15r") : d("es-p5l es-p15r");
   return `
-        ${I(o, '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}>
                 <tbody>
@@ -205,13 +206,13 @@ function xt(t, e, o, n, s) {
         </td>
     `;
 }
-function Ct(t, e, o, n, s, l, i) {
-  const c = e[t], a = c ?? _();
+function Tt(t, e, o, n, s, l, i) {
+  const c = e[t], a = c ?? P();
   if (i.inlinePrice && t === i.inlinePrice.anchor)
-    return xt(e, n, l, i, i.inlinePrice.originalFirst);
+    return Ct(e, n, l, i, i.inlinePrice.originalFirst);
   switch (t) {
     case L:
-      return ft(
+      return yt(
         c ?? {},
         s,
         n,
@@ -227,7 +228,7 @@ function Ct(t, e, o, n, s, l, i) {
         n,
         l
       );
-    case h:
+    case O:
       return F(
         g.PRICE,
         "product-price es-p15l es-p15r",
@@ -237,8 +238,8 @@ function Ct(t, e, o, n, s, l, i) {
         n,
         l
       );
-    case x:
-      return yt(a, n, l, i.oldPricePlaceholder);
+    case v:
+      return St(a, n, l, i.oldPricePlaceholder);
     case j:
       return K(
         g.OMNIBUS_PRICE,
@@ -260,7 +261,7 @@ function Ct(t, e, o, n, s, l, i) {
         l
       );
     case U:
-      return St(
+      return ht(
         s,
         c ?? {},
         n,
@@ -269,7 +270,7 @@ function Ct(t, e, o, n, s, l, i) {
     default:
       if (t.startsWith(Z)) {
         const d = o[t] ?? W(t), u = tt(d);
-        return ht(d, u, a, n, l);
+        return xt(d, u, a, n, l);
       }
       return null;
   }
@@ -279,53 +280,46 @@ const rt = `
         <td class="spacer" style="height: 10px"></td>
     </tr>
 `;
-function Tt(t) {
+function Pt(t) {
   return {
     pricePlaceholder: H({ price: 18, currency: t }),
     oldPricePlaceholder: H({ price: 20, currency: t }),
     omnibusPricePlaceholder: H({ price: 20, currency: t })
   };
 }
-function Pt(t, e, o) {
-  const n = e.includes(h) && e.includes(x), l = o[h] !== !1 === (o[x] !== !1);
-  if (t || !n || !l)
-    return null;
-  const i = e.indexOf(x) < e.indexOf(h);
-  return {
-    originalFirst: i,
-    anchor: i ? x : h,
-    skip: i ? h : x
-  };
+function wt(t, e, o) {
+  const n = e.includes(O) && e.includes(v), l = o[O] !== !1 === (o[v] !== !1);
+  return t || !n || !l ? null : $t(e);
 }
-function wt(t, e, o, n) {
+function _t(t, e, o, n) {
   const { composition: s, visibility: l, perElement: i, customAttrValues: c, cardBg: a } = n, d = (100 / o).toFixed(2), u = o - e, b = `<td class="${ot}" style="padding: 0 5px;" width="${d}%"></td>`, $ = u > 0 ? b.repeat(u) : "";
   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.filter((T) => {
+                    <tbody>${s.filter((x) => {
     var S;
-    return T !== ((S = n.inlinePrice) == null ? void 0 : S.skip);
-  }).map((T) => {
-    const S = l[T] !== !1, P = S ? "" : ' style="display: none"', O = S ? "1" : "0", R = [];
-    for (let E = 0; E < e; E += 1) {
-      const v = Ct(
-        T,
+    return x !== ((S = n.inlinePrice) == null ? void 0 : S.skip);
+  }).map((x) => {
+    const S = l[x] !== !1, C = S ? "" : ' style="display: none"', I = S ? "1" : "0", _ = [];
+    for (let A = 0; A < e; A += 1) {
+      const k = Tt(
+        x,
         i,
         c,
         a,
-        t + E,
+        t + A,
         d,
         n
       );
-      v && R.push(v);
+      k && _.push(k);
     }
-    return R.length === 0 ? "" : `
+    return _.length === 0 ? "" : `
             <tr class="recommendation-attribute-row"
-                data-attribute-type="${r(T)}"
-                data-visibility="${O}"${P}>
-                ${R.join("")}${$}
+                data-attribute-type="${r(x)}"
+                data-visibility="${I}"${C}>
+                ${_.join("")}${$}
             </tr>
         `;
   }).filter(Boolean).join("")}</tbody>
@@ -338,59 +332,59 @@ 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(wt(s, l, e, o));
+    s > 0 && n.push(rt), n.push(_t(s, l, e, o));
   }
   return n.join("");
 }
-function _t(t, e, o) {
-  const n = M(t[h]), s = t[x] ?? _(), l = (c) => `
+function At(t, e, o) {
+  const n = M(t[O]), s = t[v] ?? P(), l = (c) => `
         <td class="esd-block-text product-price" esd-extension-block-id="${g.PRICE}"
             ${f(n.align ?? "left")} valign="middle"
             ${p(m(`width: auto${c}`, n.tdStyle))}>
-            <p contenteditable="false"${p(m(`${st}; margin: 0`, n.pStyle))}>${C(e.pricePlaceholder, n)}</p>
+            <p contenteditable="false"${p(m(`${st}; margin: 0`, n.pStyle))}>${h(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"
             ${p(m(`width: auto${c}`, s.tdStyle))}>
-            <p contenteditable="false"${p(m(ct, s.pStyle))}>${`<s>${C(e.oldPricePlaceholder, s)}</s>`}</p>
+            <p contenteditable="false"${p(m(ct, s.pStyle))}>${`<s>${h(e.oldPricePlaceholder, s)}</s>`}</p>
         </td>
     `;
   return o ? i("; padding-right: 8px") + l("") : l("; padding-right: 8px") + i("");
 }
-function At(t, e, o, n) {
+function Rt(t, e, o, n) {
   const s = e[t];
   if (n.inlinePrice && t === n.inlinePrice.anchor)
-    return _t(e, n, n.inlinePrice.originalFirst);
+    return At(e, n, n.inlinePrice.originalFirst);
   if (t === q) {
-    const l = s ?? _(), i = m("font-size: 16px; color: #333333; margin: 0", l.pStyle), c = f(l.align ?? "left");
+    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${B(l)}"
                 esd-extension-block-id="${g.NAME}"${c}${p(l.tdStyle)}>
-                <p contenteditable="false"${p(i)}>${C("Product Name", l)}</p>
+                <p contenteditable="false"${p(i)}>${h("Product Name", l)}</p>
             </td>
         `;
   }
-  if (t === h) {
+  if (t === O) {
     const l = M(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}${p(l.tdStyle)}>
-                <p contenteditable="false"${p(i)}>${C(n.pricePlaceholder, l)}</p>
+                <p contenteditable="false"${p(i)}>${h(n.pricePlaceholder, l)}</p>
             </td>
         `;
   }
-  if (t === x) {
-    const l = s ?? _(), i = m(ct, l.pStyle), c = f(l.align ?? "left");
+  if (t === v) {
+    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}"${c}${p(l.tdStyle)}>
-                <p contenteditable="false"${p(i)}><s>${C(n.oldPricePlaceholder, l)}</s></p>
+                <p contenteditable="false"${p(i)}><s>${h(n.oldPricePlaceholder, l)}</s></p>
             </td>
         `;
   }
   if (t === j || t === Q) {
-    const l = t === j, i = l ? g.OMNIBUS_PRICE : g.OMNIBUS_DISCOUNT, c = l ? "omnibus-price-value" : "omnibus-discount-value", a = l ? n.omnibusPricePlaceholder : "-10%", d = l ? "product-omnibus-price" : "product-omnibus-discount", u = s ?? _(), b = m("font-size: 12px; color: #666666; margin: 0", u.pStyle), $ = f(u.align ?? "left");
+    const l = t === j, i = l ? g.OMNIBUS_PRICE : g.OMNIBUS_DISCOUNT, c = l ? "omnibus-price-value" : "omnibus-discount-value", a = l ? n.omnibusPricePlaceholder : "-10%", d = l ? "product-omnibus-price" : "product-omnibus-discount", u = s ?? P(), b = m("font-size: 12px; color: #666666; margin: 0", u.pStyle), $ = f(u.align ?? "left");
     return `
             <td class="esd-block-text ${d}"
                 data-text-before="" data-text-after=""
@@ -404,7 +398,7 @@ function At(t, e, o, n) {
         `;
   }
   if (t.startsWith(Z)) {
-    const l = s ?? _(), i = o[t] ?? W(t), a = tt(i).replace(/_/g, " ").replace(/\b\w/g, ($) => $.toUpperCase()), d = m("font-size: 12px; color: #666666; margin: 0", l.pStyle), u = f(l.align ?? "left"), b = g.CUSTOM_ATTRIBUTE;
+    const l = s ?? P(), i = o[t] ?? W(t), a = tt(i).replace(/_/g, " ").replace(/\b\w/g, ($) => $.toUpperCase()), d = m("font-size: 12px; color: #666666; margin: 0", l.pStyle), u = f(l.align ?? "left"), b = g.CUSTOM_ATTRIBUTE;
     return `
             <td product-attr="${r(i)}"
                 class="esd-block-text product-custom-attribute${B(l)}"
@@ -415,8 +409,8 @@ function At(t, e, o, n) {
   }
   return null;
 }
-function Rt(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"', d = s[L] ?? {}, u = n[L] !== !1, b = d.width ? ` width="${d.width}"` : "", $ = u ? "" : ' style="display: none"', A = `
+function It(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"', d = s[L] ?? {}, u = n[L] !== !1, b = d.width ? ` width="${d.width}"` : "", $ = u ? "" : ' 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}"
@@ -434,10 +428,10 @@ function Rt(t, e) {
             <table cellpadding="0" cellspacing="0" role="presentation" width="100%"
                 style="table-layout: fixed">
                 <tbody>${o.filter((y) => {
-    var w;
-    return y !== L && y !== U && y !== ((w = e.inlinePrice) == null ? void 0 : w.skip);
+    var T;
+    return y !== L && y !== U && y !== ((T = e.inlinePrice) == null ? void 0 : T.skip);
   }).map((y) => {
-    const w = n[y] !== !1, G = w ? "" : ' style="display: none"', z = w ? "1" : "0", V = At(y, s, l, e);
+    const T = n[y] !== !1, G = T ? "" : ' style="display: none"', z = T ? "1" : "0", V = Rt(y, s, l, e);
     return V ? `<tr class="recommendation-attribute-row"
                 data-attribute-type="${r(y)}"
                 data-visibility="${z}"${G}>${V}</tr>` : "";
@@ -445,17 +439,17 @@ function Rt(t, e) {
 `)}</tbody>
             </table>
         </td>
-    `, P = s[U] ?? {}, O = n[U] !== !1, R = P.text || nt, E = m(lt, P.spanStyle ?? ""), v = m(it, P.aStyle ?? ""), D = O ? "" : ' style="display: none"', N = `
+    `, C = s[U] ?? {}, I = n[U] !== !1, _ = C.text || nt, A = m(lt, C.spanStyle ?? ""), k = m(it, C.aStyle ?? ""), D = I ? "" : ' style="display: none"', N = `
         <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="${U}"
-            data-visibility="${O ? "1" : "0"}"
-            align="${r(P.align ?? "center")}" valign="middle"${D}>
-            <span class="es-button-border" style="${r(E)}">
+            data-visibility="${I ? "1" : "0"}"
+            align="${r(C.align ?? "center")}" valign="middle"${D}>
+            <span class="es-button-border" style="${r(A)}">
                 <a href="https://example.com/product/${t + 1}" target="_blank"
                     class="es-button ${J}"
-                    style="${r(v)}">${r(R)}</a>
+                    style="${r(k)}">${r(_)}</a>
             </span>
         </td>
     `;
@@ -465,7 +459,7 @@ function Rt(t, e) {
                 <table width="100%" cellpadding="0" cellspacing="0" border="0"
                     class="product-card-wrapper" ${a}>
                     <tbody>
-                        <tr>${A}${S}${N}</tr>
+                        <tr>${w}${S}${N}</tr>
                     </tbody>
                 </table>
             </td>
@@ -475,21 +469,21 @@ function Rt(t, e) {
 function Et(t, e) {
   const o = [];
   for (let n = 0; n < t; n += 1)
-    n > 0 && o.push(rt), o.push(Rt(n, e));
+    n > 0 && o.push(rt), o.push(It(n, e));
   return o.join("");
 }
-function It(t, e) {
-  var a, d, u, b, $, A;
+function Ot(t, e) {
+  var a, d, u, 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: ${((d = o == null ? void 0 : o.textStyle) == null ? void 0 : d["font-size"]) ?? "28px"}`), n.push(`color: ${((u = o == null ? void 0 : o.textColor) == null ? void 0 : u.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 = ((A = o == null ? void 0 : o.textStyle) == null ? void 0 : A["font-weight"]) !== "normal", i = r(e), c = l ? `<strong>${i}</strong>` : i;
+  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${p(s)}>${c}</p>`;
 }
-function Ot(t) {
+function vt(t) {
   const e = t.alignment === "before" ? "0" : "1";
-  return ` ${k.CURRENCY}="${r(t.code)}" ${k.SYMBOL}="${r(t.symbol)}" ${k.ALIGNMENT}="${e}" ${k.THOUSAND_SEPARATOR}="${r(t.thousandSeparator)}" ${k.DECIMAL_SEPARATOR}="${r(t.decimalSeparator)}" ${k.DECIMAL_COUNT}="${t.decimalCount}"`;
+  return ` ${E.CURRENCY}="${r(t.code)}" ${E.SYMBOL}="${r(t.symbol)}" ${E.ALIGNMENT}="${e}" ${E.THOUSAND_SEPARATOR}="${r(t.thousandSeparator)}" ${E.DECIMAL_SEPARATOR}="${r(t.decimalSeparator)}" ${E.DECIMAL_COUNT}="${t.decimalCount}"`;
 }
-function zt(t) {
+function Ht(t) {
   const {
     nodeConfig: e,
     composition: o,
@@ -500,7 +494,7 @@ function zt(t) {
     legacyBgColor: c,
     preserveInnerHtml: a,
     skipCompile: d = !1
-  } = t, u = e.layout === "list" ? ' data-layout="list"' : "", b = e.layout === "list" ? " es-m-p0 ins-recommendation-list-layout" : "", $ = o.composition.join(","), A = JSON.stringify(o.customAttributes), T = [
+  } = t, u = e.layout === "list" ? ' data-layout="list"' : "", b = e.layout === "list" ? " es-m-p0 ins-recommendation-list-layout" : "", $ = o.composition.join(","), w = JSON.stringify(o.customAttributes), x = [
     "recommendation-block-v2",
     "esd-block-recommendation-v3-block",
     `es-p20${b}`,
@@ -514,21 +508,21 @@ function zt(t) {
     e.mobileLayoutEnabled ? "" : pt,
     d ? at : "",
     l
-  ].filter(Boolean).join(" "), S = Ot(e.currency), P = e.visibility[dt] !== !1, O = ` esd-ext-config="${r(JSON.stringify(e))}"`, R = i ? ` id="${r(i)}"` : "", E = c ? ` bgcolor="${r(c)}"` : "", D = a ?? (() => {
+  ].filter(Boolean).join(" "), S = vt(e.currency), C = e.visibility[dt] !== !1, I = ` esd-ext-config="${r(JSON.stringify(e))}"`, _ = i ? ` id="${r(i)}"` : "", A = c ? ` bgcolor="${r(c)}"` : "", D = a ?? (() => {
     const N = parseInt(e.size) || 6, y = {
       composition: o.composition,
       visibility: o.visibility,
       perElement: o.perElementStyles,
       customAttrValues: o.customAttrValues,
       cardBg: n,
-      ...Tt(e.currency),
-      inlinePrice: Pt(
+      ...Pt(e.currency),
+      inlinePrice: wt(
         e.priceMovedToNextLine,
         o.composition,
         o.visibility
       )
-    }, w = e.layout === "list", G = w ? Et(N, y) : X(N, e.cardsInRow, y), z = e.mobileLayoutEnabled && !w ? `<td><table width="100%" cellpadding="0" cellspacing="0" border="0"
-                class="${gt}" style="display: none">${X(N, e.mobileCardsInRow, y)}</table></td>` : "";
+    }, T = e.layout === "list", G = T ? Et(N, y) : X(N, e.cardsInRow, y), z = e.mobileLayoutEnabled && !T ? `<td><table width="100%" cellpadding="0" cellspacing="0" border="0"
+                class="${mt}" style="display: none">${X(N, e.mobileCardsInRow, y)}</table></td>` : "";
     return `
     <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tbody>
@@ -536,11 +530,11 @@ function zt(t) {
                 <td align="center">
                     <table class="container" width="100%" cellpadding="0" cellspacing="0" border="0">
                         <tbody>
-                            ${P ? bt(It(o.titleVariable, s), !0, e.rowSpacing) : ""}
+                            ${C ? bt(Ot(o.titleVariable, s), !0, e.rowSpacing) : ""}
                             <tr>
                                 <td>
                                     <table width="100%" cellpadding="0" cellspacing="0" border="0"
-                                        class="${$t}">${G}
+                                        class="${gt}">${G}
                                     </table>
                                 </td>
                             </tr>
@@ -552,22 +546,22 @@ function zt(t) {
         </tbody>
     </table>`;
   })();
-  return mt(`
+  return ft(`
 <td align="left"
     esd-extension-block-id="recommendation-block"
     width="520"
-    class="${T}"${R}${E}
+    class="${x}"${_}${A}
     recommendation-id="${e.recommendationId}"${S}
     data-card-composition="${r($)}"
-    data-custom-attributes="${r(A)}"
+    data-custom-attributes="${r(w)}"
     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}"${u}${O}>${D}
+    hide-price="${e.priceHideIfSameAsDiscounted}"${u}${I}>${D}
 </td>
 `);
 }
 export {
-  zt as buildBlockHtml
+  Ht as buildBlockHtml
 };

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

@@ -1,5 +1,5 @@
 import { PRE_RRS_CONFIG_VERSION as p, DEFAULT_CURRENCY as i } from "../../../extensions/Blocks/Recommendation/constants/defaultConfig.js";
-import { DEFAULT_CARDS_IN_ROW as d, DEFAULT_MOBILE_ROW_SPACING as S, DEFAULT_MOBILE_COLUMN_SPACING as c, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as f, DEFAULT_MOBILE_CARDS_IN_ROW as s } from "../../../extensions/Blocks/Recommendation/constants/layout.js";
+import { DEFAULT_CARDS_IN_ROW as d, DEFAULT_MOBILE_ROW_SPACING as S, DEFAULT_MOBILE_COLUMN_SPACING as c, DEFAULT_ROW_SPACING as f, DEFAULT_COLUMN_SPACING as l, DEFAULT_MOBILE_CARDS_IN_ROW as s } from "../../../extensions/Blocks/Recommendation/constants/layout.js";
 import { mapLegacyStrategy as _ } from "../../../extensions/Blocks/Recommendation/utils/legacyStrategyMap.js";
 function I(t) {
   return t === "0" || t === 0 ? "before" : "after";
@@ -14,13 +14,13 @@ function A(t) {
   }
   return i.decimalCount;
 }
-function R(t) {
+function L(t) {
   return t === "." || t === "," || t === " " || t === "" ? t : ",";
 }
 function N(t) {
   return t === "." || t === "," || t === " " ? t : ".";
 }
-function L(t) {
+function R(t) {
   if (!t || typeof t != "object")
     return { ...i };
   const o = t, n = o.value ?? o.name ?? i.code, e = o.symbol ?? n;
@@ -30,36 +30,34 @@ function L(t) {
     alignment: I(o.alignment),
     decimalCount: A(o.decimalCount),
     decimalSeparator: N(o.decimalSeparator),
-    thousandSeparator: R(o.thousandSeparator)
+    thousandSeparator: L(o.thousandSeparator)
   };
 }
 function b(t) {
   return t === "horizontal" || t === "list" ? "list" : "grid";
 }
-const D = ["similarViewed", "similarBought"];
-function E(t) {
-  const o = _(t);
-  return o && !D.includes(o) ? o : "mostPopular";
+function D(t) {
+  return _(t) || "mostPopular";
 }
-function P(t, o, n) {
+function U(t, o, n) {
   var a, u;
   const e = o.rowCount ?? t.cardsInRow ?? d, m = o.totalCount ?? (typeof t.size == "string" ? parseInt(t.size) : t.size) ?? 6;
   return {
     recommendationId: n,
-    strategy: E(t.strategy),
+    strategy: D(t.strategy),
     productIds: (t.productIds ?? []).map((r) => String(r)),
     size: String(m),
     shuffleProducts: !!t.shuffleProducts,
     language: t.language ?? "en_US",
-    currency: L(t.currencySettings),
+    currency: R(t.currencySettings),
     filters: (t.filters ?? []).map((r) => ({ ...r })),
     layout: b(t.orientation ?? o.orientation),
     cardsInRow: e,
     mobileCardsInRow: s,
     mobileLayoutEnabled: ((u = (a = o.theme) == null ? void 0 : a.blockAdapt) == null ? void 0 : u.adapt) === !0,
     previousMobileCardsInRow: s,
-    columnSpacing: f,
-    rowSpacing: l,
+    columnSpacing: l,
+    rowSpacing: f,
     mobileColumnSpacing: c,
     mobileRowSpacing: S,
     omnibusPrice: { textBefore: "", textAfter: "" },
@@ -73,6 +71,6 @@ function P(t, o, n) {
   };
 }
 export {
-  L as mapCurrency,
-  P as mapSettings
+  R as mapCurrency,
+  U as mapSettings
 };