@useinsider/guido 3.3.0 → 3.4.0-beta.0ec3bc7

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

@@ -1,5 +1,5 @@
 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 k, ATTR_PRODUCT_NAME as z, ATTR_PRODUCT_PRICE as G, ATTR_PRODUCT_OLD_PRICE as H, ATTR_PRODUCT_OMNIBUS_PRICE as U, ATTR_PRODUCT_OMNIBUS_DISCOUNT as j, ATTR_CUSTOM_PREFIX as E } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
+import { CURRENCY_ATTR as R, ATTR_PRODUCT_IMAGE as v, ATTR_PRODUCT_BUTTON as I, ATTR_PRODUCT_NAME as z, ATTR_PRODUCT_PRICE as G, ATTR_PRODUCT_OLD_PRICE as H, ATTR_PRODUCT_OMNIBUS_PRICE as U, ATTR_PRODUCT_OMNIBUS_DISCOUNT as j, ATTR_CUSTOM_PREFIX as E } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
 import { formatPrice as N } from "../../../extensions/Blocks/Recommendation/utils/priceFormatter.js";
 import { escapeHtml as c } from "../../../utils/htmlEscape.js";
 import { appendStyle as $ } from "./themeMapper.js";
@@ -22,7 +22,7 @@ function _() {
 function K(t) {
   return t ? { ...t, wrapBold: !0 } : { ..._(), wrapBold: !0 };
 }
-function v(t, o) {
+function k(t, o) {
   let e = c(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;
 }
@@ -35,11 +35,11 @@ function O(t, o) {
 function nt(t, o, e, l) {
   const s = t.width ? ` width="${t.width}"` : "", n = t.height ? ` height="${t.height}"` : "", i = ["display: block", "max-width: 100%", "height: auto"];
   t.width && i.push(`width: ${t.width}px`), t.height && i.push(`height: ${t.height}px`);
-  const a = i.join("; "), r = e ? ` style="background-color: ${c(e)}"` : "";
+  const r = i.join("; "), a = e ? ` style="background-color: ${c(e)}"` : "";
   return `
         ${O(l, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment"${r}>
+                class="product-card-segment"${a}>
                 <tbody>
                     <tr valign="top">
                         <td align="center"
@@ -48,7 +48,7 @@ function nt(t, o, e, l) {
                             <a target="_blank" href="https://example.com/product/${o + 1}">
                                 <img src="${V}" alt="Product Name"
                                     class="adapt-img"${s}${n}
-                                    style="${a}">
+                                    style="${r}">
                             </a>
                         </td>
                     </tr>
@@ -58,17 +58,17 @@ function nt(t, o, e, l) {
     `;
 }
 function D(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);
+  const a = `table-layout: fixed${n ? `; background-color: ${c(n)}` : ""}`, d = b(s.tdStyle), p = y(s.align), u = `esd-block-text ${o}`.trim(), m = $(l, s.pStyle);
   return `
         ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment" style="${r}">
+                class="product-card-segment" style="${a}">
                 <tbody>
                     <tr valign="top">
                         <td${p}
                             class="${u}"
                             esd-extension-block-id="${t}"${d}>
-                            <p contenteditable="false"${b(m)}>${v(e, s)}</p>
+                            <p contenteditable="false"${b(m)}>${k(e, s)}</p>
                         </td>
                     </tr>
                 </tbody>
@@ -77,7 +77,7 @@ function D(t, o, e, l, s, n, i) {
     `;
 }
 function lt(t, o, e, l) {
-  const s = o ? ` style="background-color: ${c(o)}"` : "", n = b(t.tdStyle), i = y(t.align), r = $("font-size: 14px; color: #999999", t.pStyle);
+  const s = o ? ` style="background-color: ${c(o)}"` : "", n = b(t.tdStyle), i = y(t.align), a = $("font-size: 14px; color: #999999", t.pStyle);
   return `
         ${O(e, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
@@ -87,8 +87,8 @@ function lt(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>${v(l, t)}</s>
+                            <p contenteditable="false"${b(a)}>
+                                <s>${k(l, t)}</s>
                             </p>
                         </td>
                     </tr>
@@ -98,17 +98,17 @@ function lt(t, o, e, l) {
     `;
 }
 function L(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);
+  const r = s ? `; background-color: ${c(s)}` : "", a = b(l.tdStyle), d = y(l.align), u = $("font-size: 12px; color: #666666", l.pStyle);
   return `
         ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment" style="table-layout: fixed${a}">
+                class="product-card-segment" style="table-layout: fixed${r}">
                 <tbody>
                     <tr valign="top">
                         <td${d}
                             data-text-before="" data-text-after=""
                             class="esd-block-text ${n} es-p15l es-p15r"
-                            esd-extension-block-id="${t}"${r}>
+                            esd-extension-block-id="${t}"${a}>
                             <p contenteditable="false"${b(u)}>
                                 <span class="omnibus-text-before"></span>
                                 <span class="${o}">${c(e)}</span>
@@ -122,7 +122,7 @@ function L(t, o, e, l, s, n, i) {
     `;
 }
 function st(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 || F, r = $(J, o.spanStyle), d = $(X, o.aStyle);
+  const s = e ? ` style="background-color: ${c(e)}"` : "", n = $("padding: 0 5px; height: 100%", o.tdStyle), i = y(o.align), r = o.text || F, a = $(J, o.spanStyle), d = $(X, o.aStyle);
   return `
         ${O(l, `valign="top" style="${c(n)}"`)}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
@@ -132,10 +132,10 @@ function st(t, o, e, l) {
                         <td${i}
                             class="esd-block-button product-button es-p10t es-p10b es-p5l es-p5r"
                             esd-extension-block-id="${g.BUTTON}">
-                            <span class="es-button-border" style="${c(r)}">
+                            <span class="es-button-border" style="${c(a)}">
                                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                                    class="es-button buy-button"
-                                    style="${c(d)}">${c(a)}</a>
+                                    class="es-button reco-v3-button"
+                                    style="${c(d)}">${c(r)}</a>
                             </span>
                         </td>
                     </tr>
@@ -145,14 +145,14 @@ function st(t, o, e, l) {
     `;
 }
 function it(t, o, e, l, s) {
-  const n = l ? `; background-color: ${c(l)}` : "", i = b(e.tdStyle), a = y(e.align), d = $("font-size: 12px; color: #666666; margin: 0", e.pStyle), p = o.replace(/_/g, " ").replace(/\b\w/g, (u) => u.toUpperCase());
+  const n = l ? `; background-color: ${c(l)}` : "", i = b(e.tdStyle), r = y(e.align), d = $("font-size: 12px; color: #666666; margin: 0", e.pStyle), p = o.replace(/_/g, " ").replace(/\b\w/g, (u) => u.toUpperCase());
   return `
         ${O(s, 'valign="middle" style="padding: 0 5px; height: 100%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
                 class="product-card-segment" style="table-layout: fixed${n}">
                 <tbody>
                     <tr valign="top">
-                        <td product-attr="${c(t)}"${a}
+                        <td product-attr="${c(t)}"${r}
                             class="esd-block-text product-custom-attribute es-p0t es-p0b es-p15l es-p15r"
                             esd-extension-block-id="${g.CUSTOM_ATTRIBUTE}"${i}>
                             <p contenteditable="false"${b(d)}>${c(p)}</p>
@@ -164,11 +164,11 @@ function it(t, o, e, l, s) {
     `;
 }
 function ct(t, o, e, l, s, n, i) {
-  const a = o[t], r = a ?? _();
+  const r = o[t], a = r ?? _();
   switch (t) {
-    case I:
+    case v:
       return nt(
-        a ?? {},
+        r ?? {},
         s,
         l,
         n
@@ -179,7 +179,7 @@ function ct(t, o, e, l, s, n, i) {
         "product-name es-p10t es-p10b es-p15l es-p15r",
         "Product Name",
         "font-size: 16px; color: #333333",
-        r,
+        a,
         l,
         n
       );
@@ -189,18 +189,18 @@ function ct(t, o, e, l, s, n, i) {
         "product-price es-p15l es-p15r",
         i.pricePlaceholder,
         "font-size: 16px; color: #333333",
-        K(a),
+        K(r),
         l,
         n
       );
     case H:
-      return lt(r, l, n, i.oldPricePlaceholder);
+      return lt(a, l, n, i.oldPricePlaceholder);
     case U:
       return L(
         g.OMNIBUS_PRICE,
         "omnibus-price-value",
         i.omnibusPricePlaceholder,
-        r,
+        a,
         l,
         "product-omnibus-price",
         n
@@ -210,22 +210,22 @@ function ct(t, o, e, l, s, n, i) {
         g.OMNIBUS_DISCOUNT,
         "omnibus-discount-value",
         "-10%",
-        r,
+        a,
         l,
         "product-omnibus-discount",
         n
       );
-    case k:
+    case I:
       return st(
         s,
-        a ?? {},
+        r ?? {},
         l,
         n
       );
     default:
       if (t.startsWith(E)) {
         const d = e[t] ?? t.slice(E.length), p = t.slice(E.length);
-        return it(d, p, r, l, n);
+        return it(d, p, a, l, n);
       }
       return null;
   }
@@ -235,15 +235,15 @@ const q = `
         <td class="spacer" style="height: 10px"></td>
     </tr>
 `;
-function at(t) {
+function rt(t) {
   return {
     pricePlaceholder: N({ price: 18, currency: t }),
     oldPricePlaceholder: N({ price: 20, currency: t }),
     omnibusPricePlaceholder: N({ price: 20, currency: t })
   };
 }
-function rt(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="${Y}" style="padding: 0 5px;" width="${d}%"></td>`, m = p > 0 ? u.repeat(p) : "";
+function at(t, o, e, l) {
+  const { composition: s, visibility: n, perElement: i, customAttrValues: r, cardBg: a } = l, d = (100 / e).toFixed(2), p = e - o, u = `<td class="${Y}" style="padding: 0 5px;" width="${d}%"></td>`, m = p > 0 ? u.repeat(p) : "";
   return `
         <tr class="recommendation-product-row">
             <td>
@@ -255,8 +255,8 @@ function rt(t, o, e, l) {
       const A = ct(
         T,
         i,
-        a,
         r,
+        a,
         t + x,
         d,
         l
@@ -280,71 +280,71 @@ function dt(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(rt(s, n, o, e));
+    s > 0 && l.push(q), l.push(at(s, n, o, e));
   }
   return l.join("");
 }
 function pt(t, o, e, l) {
   const s = o[t];
   if (t === z) {
-    const n = s ?? _(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), a = y(n.align ?? "left");
+    const n = s ?? _(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), r = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-name"
-                esd-extension-block-id="${g.NAME}"${a}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(i)}>${v("Product Name", n)}</p>
+                esd-extension-block-id="${g.NAME}"${r}${b(n.tdStyle)}>
+                <p contenteditable="false"${b(i)}>${k("Product Name", n)}</p>
             </td>
         `;
   }
   if (t === G) {
-    const n = K(s), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), a = y(n.align ?? "left");
+    const n = K(s), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), r = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-price"
-                esd-extension-block-id="${g.PRICE}"${a}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(i)}>${v(l.pricePlaceholder, n)}</p>
+                esd-extension-block-id="${g.PRICE}"${r}${b(n.tdStyle)}>
+                <p contenteditable="false"${b(i)}>${k(l.pricePlaceholder, n)}</p>
             </td>
         `;
   }
   if (t === H) {
-    const n = s ?? _(), a = $("font-size: 14px; color: #999999; text-decoration: line-through; margin: 0", n.pStyle), r = y(n.align ?? "left");
+    const n = s ?? _(), r = $("font-size: 14px; color: #999999; text-decoration: line-through; margin: 0", n.pStyle), a = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-old-price"
-                esd-extension-block-id="${g.OLD_PRICE}"${r}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(a)}><s>${v(l.oldPricePlaceholder, n)}</s></p>
+                esd-extension-block-id="${g.OLD_PRICE}"${a}${b(n.tdStyle)}>
+                <p contenteditable="false"${b(r)}><s>${k(l.oldPricePlaceholder, n)}</s></p>
             </td>
         `;
   }
   if (t === U || t === j) {
-    const n = t === U, i = n ? g.OMNIBUS_PRICE : g.OMNIBUS_DISCOUNT, a = n ? "omnibus-price-value" : "omnibus-discount-value", r = n ? l.omnibusPricePlaceholder : "-10%", d = n ? "product-omnibus-price" : "product-omnibus-discount", p = s ?? _(), u = $("font-size: 12px; color: #666666; margin: 0", p.pStyle), m = y(p.align ?? "left");
+    const n = t === U, i = n ? g.OMNIBUS_PRICE : g.OMNIBUS_DISCOUNT, r = n ? "omnibus-price-value" : "omnibus-discount-value", a = n ? l.omnibusPricePlaceholder : "-10%", d = n ? "product-omnibus-price" : "product-omnibus-discount", p = s ?? _(), u = $("font-size: 12px; color: #666666; margin: 0", p.pStyle), m = y(p.align ?? "left");
     return `
             <td class="esd-block-text ${d}"
                 data-text-before="" data-text-after=""
                 esd-extension-block-id="${i}"${m}${b(p.tdStyle)}>
                 <p contenteditable="false"${b(u)}>
                     <span class="omnibus-text-before"></span>
-                    <span class="${a}">${c(r)}</span>
+                    <span class="${r}">${c(a)}</span>
                     <span class="omnibus-text-after"></span>
                 </p>
             </td>
         `;
   }
   if (t.startsWith(E)) {
-    const n = s ?? _(), i = e[t] ?? t.slice(E.length), r = t.slice(E.length).replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase()), d = $("font-size: 12px; color: #666666; margin: 0", n.pStyle), p = y(n.align ?? "left"), u = g.CUSTOM_ATTRIBUTE;
+    const n = s ?? _(), i = e[t] ?? t.slice(E.length), a = t.slice(E.length).replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase()), d = $("font-size: 12px; color: #666666; margin: 0", n.pStyle), p = y(n.align ?? "left"), u = g.CUSTOM_ATTRIBUTE;
     return `
             <td product-attr="${c(i)}"
                 class="esd-block-text product-custom-attribute"
                 esd-extension-block-id="${u}"${p}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(d)}>${c(r)}</p>
+                <p contenteditable="false"${b(d)}>${c(a)}</p>
             </td>
         `;
   }
   return null;
 }
 function ut(t, o) {
-  const { composition: e, visibility: l, perElement: s, customAttrValues: n, cardBg: i } = o, a = i ? `background-color: ${c(i)}` : "", r = a ? `style="table-layout: fixed; ${a}"` : 'style="table-layout: fixed"', d = s[I] ?? {}, p = l[I] !== !1, u = d.width ? ` width="${d.width}"` : "", m = p ? "" : ' style="display: none"', h = `
+  const { composition: e, visibility: l, perElement: s, customAttrValues: n, cardBg: i } = o, r = i ? `background-color: ${c(i)}` : "", a = r ? `style="table-layout: fixed; ${r}"` : 'style="table-layout: fixed"', d = s[v] ?? {}, p = l[v] !== !1, u = d.width ? ` width="${d.width}"` : "", m = p ? "" : ' style="display: none"', h = `
         <td width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
             esd-extension-block-id="${g.IMAGE}"
-            data-attribute-type="${I}"
+            data-attribute-type="${v}"
             data-visibility="${p ? "1" : "0"}"
             align="center" valign="middle"${m}>
             <a target="_blank" href="https://example.com/product/${t + 1}">
@@ -357,7 +357,7 @@ function ut(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((P) => P !== I && P !== k).map((P) => {
+                <tbody>${e.filter((P) => P !== v && P !== I).map((P) => {
     const B = l[P] !== !1, W = B ? "" : ' style="display: none"', tt = B ? "1" : "0", M = pt(P, s, n, o);
     return M ? `<tr class="recommendation-attribute-row"
                 data-attribute-type="${c(P)}"
@@ -366,16 +366,16 @@ function ut(t, o) {
 `)}</tbody>
             </table>
         </td>
-    `, f = s[k] ?? {}, C = l[k] !== !1, S = f.text || F, x = $(J, f.spanStyle ?? ""), A = $(X, f.aStyle ?? ""), Q = C ? "" : ' style="display: none"', Z = `
+    `, f = s[I] ?? {}, C = l[I] !== !1, S = f.text || F, x = $(J, f.spanStyle ?? ""), A = $(X, f.aStyle ?? ""), Q = C ? "" : ' style="display: none"', Z = `
         <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="${k}"
+            data-attribute-type="${I}"
             data-visibility="${C ? "1" : "0"}"
             align="${c(f.align ?? "center")}" valign="middle"${Q}>
             <span class="es-button-border" style="${c(x)}">
                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                    class="es-button buy-button"
+                    class="es-button reco-v3-button"
                     style="${c(A)}">${c(S)}</a>
             </span>
         </td>
@@ -384,7 +384,7 @@ function ut(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}${Z}</tr>
                     </tbody>
@@ -400,13 +400,13 @@ function bt(t, o) {
   return e.join("");
 }
 function gt(t, o) {
-  var r, d, p, u, m, h;
+  var a, d, p, u, m, h;
   const e = t == null ? void 0 : t.theme, l = [];
-  (r = e == null ? void 0 : e.textStyle) != null && r["font-family"] && l.push(`font-family: ${e.textStyle["font-family"]}`), l.push(`font-size: ${((d = e == null ? void 0 : e.textStyle) == null ? void 0 : d["font-size"]) ?? "28px"}`), l.push(`color: ${((p = e == null ? void 0 : e.textColor) == null ? void 0 : p.color) ?? "#333333"}`), (u = e == null ? void 0 : e.textStyle) != null && u["font-weight"] && l.push(`font-weight: ${e.textStyle["font-weight"]}`), (m = e == null ? void 0 : e.textStyle) != null && m["font-style"] && l.push(`font-style: ${e.textStyle["font-style"]}`);
-  const s = l.join("; "), n = ((h = e == null ? void 0 : e.textStyle) == null ? void 0 : h["font-weight"]) !== "normal", i = c(o), a = n ? `<strong>${i}</strong>` : i;
+  (a = e == null ? void 0 : e.textStyle) != null && a["font-family"] && l.push(`font-family: ${e.textStyle["font-family"]}`), l.push(`font-size: ${((d = e == null ? void 0 : e.textStyle) == null ? void 0 : d["font-size"]) ?? "28px"}`), l.push(`color: ${((p = e == null ? void 0 : e.textColor) == null ? void 0 : p.color) ?? "#333333"}`), (u = e == null ? void 0 : e.textStyle) != null && u["font-weight"] && l.push(`font-weight: ${e.textStyle["font-weight"]}`), (m = e == null ? void 0 : e.textStyle) != null && m["font-style"] && l.push(`font-style: ${e.textStyle["font-style"]}`);
+  const s = l.join("; "), n = ((h = e == null ? void 0 : e.textStyle) == null ? void 0 : h["font-weight"]) !== "normal", i = c(o), r = n ? `<strong>${i}</strong>` : i;
   return `
         <td class="esd-block-text es-p10t es-p10b es-p20l es-p20r" align="center">
-            <p${b(s)}>${a}</p>
+            <p${b(s)}>${r}</p>
         </td>
     `;
 }
@@ -422,15 +422,15 @@ function xt(t) {
     titleText: s,
     extraClasses: n = "",
     legacyId: i,
-    legacyBgColor: a
-  } = t, r = parseInt(o.size) || 6, d = o.layout === "list" ? ' data-layout="list"' : "", p = o.layout === "list" ? " es-m-p0 ins-recommendation-list-layout" : "", u = {
+    legacyBgColor: r
+  } = t, a = parseInt(o.size) || 6, d = o.layout === "list" ? ' data-layout="list"' : "", p = o.layout === "list" ? " es-m-p0 ins-recommendation-list-layout" : "", u = {
     composition: e.composition,
     visibility: e.visibility,
     perElement: e.perElementStyles,
     customAttrValues: e.customAttrValues,
     cardBg: l,
-    ...at(o.currency)
-  }, m = o.layout === "list" ? bt(r, u) : dt(r, o.cardsInRow, u), h = gt(e.titleVariable, s), T = e.composition.join(","), w = JSON.stringify(e.customAttributes), f = [
+    ...rt(o.currency)
+  }, m = o.layout === "list" ? bt(a, u) : dt(a, o.cardsInRow, u), h = gt(e.titleVariable, s), T = e.composition.join(","), w = JSON.stringify(e.customAttributes), f = [
     "recommendation-block-v2",
     "esd-block-recommendation-v3-block",
     `es-p20${p}`,
@@ -443,7 +443,7 @@ function xt(t) {
     "esd-container-frame",
     "ins-recommendation-no-mobile-layout",
     n
-  ].filter(Boolean).join(" "), C = mt(o.currency), S = ` esd-ext-config="${c(JSON.stringify(o))}"`, x = i ? ` id="${c(i)}"` : "", A = a ? ` bgcolor="${c(a)}"` : "";
+  ].filter(Boolean).join(" "), C = mt(o.currency), S = ` esd-ext-config="${c(JSON.stringify(o))}"`, x = i ? ` id="${c(i)}"` : "", A = r ? ` bgcolor="${c(r)}"` : "";
   return ot(`
 <td align="left"
     esd-extension-block-id="recommendation-block"

package/dist/enums/extensions/recommendationBlock.js

@@ -1,84 +1,139 @@
-const s = {
+import { useTranslations as r } from "../../composables/useTranslations.js";
+const l = {
   RECOMMENDATION_API_URL: "https://recommendationv2.api.useinsider.com"
-}, i = {
+}, c = {
   CLIENT_ID: "clientId"
-}, u = [
-  { id: 11, key: "similarViewed", name: "Viewed Together", path: "viewed-together" },
-  { id: 12, key: "similarBought", name: "Purchased Together", path: "purchased-together" },
-  { id: 13, key: "userBased", name: "User Based", path: "user-based" },
-  { id: 36, key: "highestDiscounted", name: "Highest Discounted Items", path: "highest-discounted" },
-  { id: 38, key: "manualMerchandising", name: "Manual Merchandising", path: "manual-merchandising" },
-  { id: 39, key: "newArrivals", name: "New Arrivals", path: "new-arrivals" },
-  { id: 40, key: "trendingProducts", name: "Trending Products", path: "trending" },
-  { id: 46, key: "mostValuableOfPartner", name: "Most Valuable Products", path: "most-valuable" },
-  { id: 61, key: "mostPopular", name: "Most Popular Items", path: "most-popular" },
-  { id: 62, key: "mostPurchased", name: "Top Sellers", path: "top-sellers" }
-], l = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], c = [
+}, d = () => {
+  const e = r();
+  return [
+    {
+      id: 11,
+      key: "similarViewed",
+      name: e("action-builder.similar-viewed"),
+      path: "viewed-together"
+    },
+    {
+      id: 12,
+      key: "similarBought",
+      name: e("action-builder.similar-bought"),
+      path: "purchased-together"
+    },
+    {
+      id: 13,
+      key: "userBased",
+      name: e("action-builder.user-based"),
+      path: "user-based"
+    },
+    {
+      id: 36,
+      key: "highestDiscounted",
+      name: e("journey-builder.highest-discounted-items"),
+      path: "highest-discounted"
+    },
+    {
+      id: 38,
+      key: "manualMerchandising",
+      name: e("action-builder.manual-merchandising"),
+      path: "manual-merchandising"
+    },
+    {
+      id: 39,
+      key: "newArrivals",
+      name: e("action-builder.new-arrivals"),
+      path: "new-arrivals"
+    },
+    {
+      id: 40,
+      key: "trendingProducts",
+      name: e("journey-builder.trending-products"),
+      path: "trending"
+    },
+    {
+      id: 46,
+      key: "mostValuableOfPartner",
+      name: e("journey-builder.most-valuable-products"),
+      path: "most-valuable"
+    },
+    {
+      id: 61,
+      key: "mostPopular",
+      name: e("journey-builder.most-popular-items"),
+      path: "most-popular"
+    },
+    {
+      id: 62,
+      key: "mostPurchased",
+      name: e("action-builder.most-purchased"),
+      path: "top-sellers"
+    }
+  ];
+}, m = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], p = [
   { text: "before the amount", value: "0" },
   { text: "after the amount", value: "1" }
-], d = [
+], v = [
   { text: "dot(.)", value: "." },
   { text: "comma(,)", value: "," },
   { text: "space( )", value: " " }
-], p = [
+], h = [
   { text: "0", value: "0" },
   { text: "1", value: "1" },
   { text: "2", value: "2" },
   { text: "3", value: "3" },
   { text: "4", value: "4" },
   { text: "5", value: "5" }
-], e = [
+], a = "||", t = [
   { text: "is exactly", value: "=" },
   { text: "contains", value: "~" },
   { text: "does not contain", value: "!~" },
-  { text: "any of", value: "||" }
-], a = [
+  { text: "any of", value: a }
+], n = [
   { text: "is exactly", value: "=" },
   { text: "is not exactly", value: "!==" },
   { text: "contains", value: "~" },
   { text: "does not contain", value: "!~" },
-  { text: "any of", value: "||" }
-], r = [
+  { text: "any of", value: a }
+], o = [
   { text: "is equal to", value: "=" },
   { text: "is greater than", value: ">" },
   { text: "is less than", value: "<" }
-], o = [
+], s = [
   { text: "is equal to", value: "=" },
   { text: "after", value: ">" },
   { text: "before", value: "<" }
-], n = [
+], i = [
   { text: "true", value: "==" },
   { text: "false", value: "!=" }
-], m = (t) => {
-  if (!t)
-    return e;
-  switch (t) {
+], x = (e) => {
+  if (!e)
+    return t;
+  switch (e) {
     case "Boolean":
-      return n;
+      return i;
     case "Date":
-      return o;
+      return s;
     case "Number":
-      return r;
+      return o;
     case "String":
-      return e;
+      return t;
     case "Strings":
-      return a;
+      return n;
     default:
-      return e;
+      return t;
   }
 };
 export {
-  l as PriceAttributes,
-  i as QUERY_PARAMS,
-  u as RecommendationFeedSourceMaps,
-  s as URLS,
-  p as currencyDecimalCounts,
-  c as currencyLocationMaps,
-  d as currencyOperators,
-  m as getOperatorOptions,
-  a as operatorOptionsForArrayOfStrings,
-  n as operatorOptionsForBooleans,
-  o as operatorOptionsForDates,
-  r as operatorOptionsForNumbers,
-  e as operatorOptionsForStrings
+  a as OP_ANY_OF,
+  m as PriceAttributes,
+  c as QUERY_PARAMS,
+  l as URLS,
+  h as currencyDecimalCounts,
+  p as currencyLocationMaps,
+  v as currencyOperators,
+  x as getOperatorOptions,
+  d as getRecommendationFeedSourceMaps,
+  n as operatorOptionsForArrayOfStrings,
+  i as operatorOptionsForBooleans,
+  s as operatorOptionsForDates,
+  o as operatorOptionsForNumbers,
+  t as operatorOptionsForStrings
 };