@useinsider/guido 3.4.0-beta.5d19726 → 3.4.1-beta.4c96ad0

package/dist/config/compiler/recommendationCompilerRules.js

@@ -1,5 +1,5 @@
-import { useRecommendation as C } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as y, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as A, CONDITIONS as g, HTML as N } from "../../enums/recommendation.js";
+import { useRecommendation as h } from "../../composables/useRecommendation.js";
+import { DUMMY_IMAGE_MAPPINGS as N, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as A, CONDITIONS as y, HTML as C } from "../../enums/recommendation.js";
 import { prepareRecommendationBlocks as x } from "./utils/recommendationCompilerUtils.js";
 const w = [
   {
@@ -8,7 +8,7 @@ const w = [
     type: "custom",
     processor: (c) => {
       let e = c;
-      return Object.entries(y).forEach(([, l]) => {
+      return Object.entries(N).forEach(([, l]) => {
         Object.entries(l).forEach(([n, s]) => {
           e = e.replaceAll(s, `{{${n}}}`);
         });
@@ -25,12 +25,24 @@ const w = [
     replaceAll: !0,
     priority: 51
   },
+  {
+    id: "rename-legacy-buy-button-class",
+    // Templates saved before the buy-button → reco-v3-button rename still
+    // carry the old class in their persisted HTML; rewrite on export so the
+    // downstream button identification selector keeps working.
+    description: "Rename legacy buy-button class to reco-v3-button on product button anchors",
+    type: "replace",
+    search: "es-button buy-button",
+    replacement: "es-button reco-v3-button",
+    replaceAll: !0,
+    priority: 49
+  },
   {
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
     processor: (c) => {
-      const { calculateCardWidth: e, getRecommendationCampaignData: l } = C();
+      const { calculateCardWidth: e, getRecommendationCampaignData: l } = h();
       let n = c;
       const s = n.match(T.ID);
       if (s) {
@@ -60,7 +72,7 @@ const w = [
     type: "custom",
     processor: (c) => {
       let e = c;
-      const l = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = C();
+      const l = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = h();
       return l !== null && l.forEach((s) => {
         const a = s.match(T.CUSTOM_FIELD);
         if (!a)
@@ -68,17 +80,17 @@ const w = [
         const [i] = a, u = i.match(T.CUSTOM_FIELD_INDEXES_PART), _ = i.match(T.CUSTOM_FIELD_NAME_PART), R = s.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
         if (!u || !_ || !R)
           return;
-        const [S] = u, [b] = _, [d] = R, o = b.substring(1, b.length - 2), r = d.match(T.COMPOSITION) !== null;
+        const [b] = u, [I] = _, [d] = R, o = I.substring(1, I.length - 2), r = d.match(T.COMPOSITION) !== null;
         let t = i;
         if (r) {
-          const I = S.substring(2, S.length - 3), m = n(I);
+          const S = b.substring(2, b.length - 3), m = n(S);
           o === A.OMNIBUS_PRICE && (m.priceBeforeTextValue && (t = `${m.priceBeforeTextValue}${t}`), m.priceAfterTextValue && (t = `${t}${m.priceAfterTextValue}`)), o === A.OMNIBUS_DISCOUNT && (m.discountBeforeTextValue && (t = `${m.discountBeforeTextValue}${t}`), m.discountAfterTextValue && (t = `${t}${m.discountAfterTextValue}`));
         }
-        const p = S.substring(2);
+        const p = b.substring(2);
         let f = "";
-        o in g.IF && (f = g.IF[o].replaceAll(`{${A.DISCOUNT}}`, `${p}${A.DISCOUNT}`).replaceAll(`{${A.OMNIBUS_DISCOUNT}}`, `${p}${A.OMNIBUS_DISCOUNT}`).replaceAll(`{${A.OMNIBUS_PRICE}}`, `${p}${A.OMNIBUS_PRICE}`));
-        const $ = `${d}${t}${N.PARAGRAPH_END_TAG}`, h = `${f}${r ? $ : s}${g.ELSE}${d}${N.PARAGRAPH_END_TAG}${g.END_IF}`;
-        e = e.replace(s, h);
+        o in y.IF && (f = y.IF[o].replaceAll(`{${A.DISCOUNT}}`, `${p}${A.DISCOUNT}`).replaceAll(`{${A.OMNIBUS_DISCOUNT}}`, `${p}${A.OMNIBUS_DISCOUNT}`).replaceAll(`{${A.OMNIBUS_PRICE}}`, `${p}${A.OMNIBUS_PRICE}`));
+        const g = `${d}${t}${C.PARAGRAPH_END_TAG}`, $ = `${f}${r ? g : s}${y.ELSE}${d}${C.PARAGRAPH_END_TAG}${y.END_IF}`;
+        e = e.replace(s, $);
       }), e;
     },
     priority: 53
@@ -116,7 +128,7 @@ const w = [
         / class="(?:product-card-segment|attribute-cell|recommendation-attribute-row|product-image|product-name|product-price|product-old-price|product-omnibus-price|product-omnibus-discount|product-button|recommendation-product-row|product-card-wrapper)"/g,
         ""
       );
-      return e = e.replaceAll("es-button buy-button", "es-button"), e = e.replaceAll("ins-recommendation-product-container ", ""), e;
+      return e = e.replaceAll("ins-recommendation-product-container ", ""), e;
     },
     priority: 56
   },
@@ -174,10 +186,10 @@ const w = [
         let o = e;
         return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
       }
-      const R = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), S = (o, r) => `${o.slice(0, -1)} ${r}"`, b = /* @__PURE__ */ new Map();
+      const R = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = (o, r) => `${o.slice(0, -1)} ${r}"`, I = /* @__PURE__ */ new Map();
       i.forEach((o, r) => {
         const t = R(r);
-        b.set(r, {
+        I.set(r, {
           caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
           caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
         });
@@ -188,13 +200,13 @@ const w = [
         (o, r) => {
           let t = r;
           return i.forEach((p, f) => {
-            const $ = b.get(f);
+            const g = I.get(f);
             t = t.replace(
-              $.caseA,
-              (h, I, m) => S(I, p) + m
+              g.caseA,
+              ($, S, m) => b(S, p) + m
             ), t = t.replace(
-              $.caseB,
-              (h, I, m) => I + S(m, p)
+              g.caseB,
+              ($, S, m) => S + b(m, p)
             ), t = t.replaceAll(` style="${f}"`, ` class="${p}"`);
           }), t;
         }

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

@@ -1,10 +1,10 @@
 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 { formatPrice as N } from "../../../extensions/Blocks/Recommendation/utils/priceFormatter.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 { appendStyle as $ } from "./themeMapper.js";
-const V = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png", Y = "attribute-cell", F = "Buy", J = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79)", X = "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", et = "ins-recommendation-product-container ins-recommendation-desktop-container";
-function ot(t) {
+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) {
   return t.replace(/>\s+</g, "><").trim();
 }
 function y(t) {
@@ -19,10 +19,10 @@ function _() {
     textTrimming: !1
   };
 }
-function K(t) {
+function q(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;
 }
@@ -30,9 +30,9 @@ function b(t) {
   return t ? ` style="${c(t)}"` : "";
 }
 function O(t, o) {
-  return `<td width="${t}%" class="${Y}" ${o}`;
+  return `<td width="${t}%" class="${F}" ${o}`;
 }
-function nt(t, o, e, l) {
+function lt(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)}"` : "";
@@ -46,7 +46,7 @@ function nt(t, o, e, l) {
                             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="${V}" alt="Product Name"
+                                <img src="${Y}" alt="Product Name"
                                     class="adapt-img"${s}${n}
                                     style="${a}">
                             </a>
@@ -57,7 +57,7 @@ function nt(t, o, e, l) {
         </td>
     `;
 }
-function D(t, o, e, l, s, n, i) {
+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);
   return `
         ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
@@ -68,7 +68,7 @@ function D(t, o, e, l, s, n, i) {
                         <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>
@@ -76,7 +76,7 @@ function D(t, o, e, l, s, n, i) {
         </td>
     `;
 }
-function lt(t, o, e, l) {
+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);
   return `
         ${O(e, 'valign="top" style="padding: 0 5px; height: 100%"')}>
@@ -88,7 +88,7 @@ function lt(t, o, e, l) {
                             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>
+                                <s>${k(l, t)}</s>
                             </p>
                         </td>
                     </tr>
@@ -97,7 +97,7 @@ function lt(t, o, e, l) {
         </td>
     `;
 }
-function L(t, o, e, l, s, n, i) {
+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);
   return `
         ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
@@ -121,8 +121,8 @@ function L(t, o, e, l, s, n, i) {
         </td>
     `;
 }
-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);
+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);
   return `
         ${O(l, `valign="top" style="${c(n)}"`)}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
@@ -134,7 +134,7 @@ function st(t, o, e, l) {
                             esd-extension-block-id="${g.BUTTON}">
                             <span class="es-button-border" style="${c(r)}">
                                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                                    class="es-button buy-button"
+                                    class="es-button ${z}"
                                     style="${c(d)}">${c(a)}</a>
                             </span>
                         </td>
@@ -144,7 +144,7 @@ function st(t, o, e, l) {
         </td>
     `;
 }
-function it(t, o, e, l, s) {
+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());
   return `
         ${O(s, 'valign="middle" style="padding: 0 5px; height: 100%"')}>
@@ -163,18 +163,18 @@ function it(t, o, e, l, s) {
         </td>
     `;
 }
-function ct(t, o, e, l, s, n, i) {
+function at(t, o, e, l, s, n, i) {
   const a = o[t], r = a ?? _();
   switch (t) {
     case I:
-      return nt(
+      return lt(
         a ?? {},
         s,
         l,
         n
       );
-    case z:
-      return D(
+    case G:
+      return L(
         g.NAME,
         "product-name es-p10t es-p10b es-p15l es-p15r",
         "Product Name",
@@ -183,20 +183,20 @@ function ct(t, o, e, l, s, n, i) {
         l,
         n
       );
-    case G:
-      return D(
+    case H:
+      return L(
         g.PRICE,
         "product-price es-p15l es-p15r",
         i.pricePlaceholder,
         "font-size: 16px; color: #333333",
-        K(a),
+        q(a),
         l,
         n
       );
-    case H:
-      return lt(r, l, n, i.oldPricePlaceholder);
+    case j:
+      return st(r, l, n, i.oldPricePlaceholder);
     case U:
-      return L(
+      return D(
         g.OMNIBUS_PRICE,
         "omnibus-price-value",
         i.omnibusPricePlaceholder,
@@ -205,8 +205,8 @@ function ct(t, o, e, l, s, n, i) {
         "product-omnibus-price",
         n
       );
-    case j:
-      return L(
+    case V:
+      return D(
         g.OMNIBUS_DISCOUNT,
         "omnibus-discount-value",
         "-10%",
@@ -215,8 +215,8 @@ function ct(t, o, e, l, s, n, i) {
         "product-omnibus-discount",
         n
       );
-    case k:
-      return st(
+    case N:
+      return it(
         s,
         a ?? {},
         l,
@@ -225,25 +225,25 @@ function ct(t, o, e, l, s, n, i) {
     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 ct(d, p, r, l, n);
       }
       return null;
   }
 }
-const q = `
+const Q = `
     <tr>
         <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 })
+    pricePlaceholder: v({ price: 18, currency: t }),
+    oldPricePlaceholder: v({ price: 20, currency: t }),
+    omnibusPricePlaceholder: v({ 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 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) : "";
   return `
         <tr class="recommendation-product-row">
             <td>
@@ -252,7 +252,7 @@ function rt(t, o, e, l) {
                     <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 = ct(
+      const A = at(
         T,
         i,
         a,
@@ -276,44 +276,44 @@ function rt(t, o, e, l) {
         </tr>
     `;
 }
-function dt(t, o, e) {
+function pt(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(dt(s, n, o, e));
   }
   return l.join("");
 }
-function pt(t, o, e, l) {
+function ut(t, o, e, l) {
   const s = o[t];
-  if (t === z) {
+  if (t === G) {
     const n = s ?? _(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), a = 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>
+                <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");
+  if (t === H) {
+    const n = q(s), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), a = 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>
+                <p contenteditable="false"${b(i)}>${k(l.pricePlaceholder, n)}</p>
             </td>
         `;
   }
-  if (t === H) {
+  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");
     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>
+                <p contenteditable="false"${b(a)}><s>${k(l.oldPricePlaceholder, n)}</s></p>
             </td>
         `;
   }
-  if (t === U || t === j) {
+  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");
     return `
             <td class="esd-block-text ${d}"
@@ -339,7 +339,7 @@ function pt(t, o, e, l) {
   }
   return null;
 }
-function ut(t, o) {
+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 = `
         <td width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
@@ -348,7 +348,7 @@ function ut(t, o) {
             data-visibility="${p ? "1" : "0"}"
             align="center" valign="middle"${m}>
             <a target="_blank" href="https://example.com/product/${t + 1}">
-                <img src="${V}" alt="Product Name"
+                <img src="${Y}" alt="Product Name"
                     class="adapt-img product-image"${u}
                     style="display: block; max-width: 100%; height: auto">
             </a>
@@ -357,25 +357,25 @@ 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) => {
-    const B = l[P] !== !1, W = B ? "" : ' style="display: none"', tt = B ? "1" : "0", M = pt(P, s, n, o);
+                <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="${tt}"${W}>${M}</tr>` : "";
+                data-visibility="${et}"${tt}>${M}</tr>` : "";
   }).filter(Boolean).join(`
 `)}</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[N] ?? {}, C = l[N] !== !1, S = f.text || J, x = $(X, f.spanStyle ?? ""), A = $(K, f.aStyle ?? ""), Z = C ? "" : ' style="display: none"', W = `
         <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="${N}"
             data-visibility="${C ? "1" : "0"}"
-            align="${c(f.align ?? "center")}" valign="middle"${Q}>
+            align="${c(f.align ?? "center")}" valign="middle"${Z}>
             <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 ${z}"
                     style="${c(A)}">${c(S)}</a>
             </span>
         </td>
@@ -386,20 +386,20 @@ function ut(t, o) {
                 <table width="100%" cellpadding="0" cellspacing="0" border="0"
                     class="product-card-wrapper" ${r}>
                     <tbody>
-                        <tr>${h}${w}${Z}</tr>
+                        <tr>${h}${w}${W}</tr>
                     </tbody>
                 </table>
             </td>
         </tr>
     `;
 }
-function bt(t, o) {
+function gt(t, o) {
   const e = [];
   for (let l = 0; l < t; l += 1)
-    l > 0 && e.push(q), e.push(ut(l, o));
+    l > 0 && e.push(Q), e.push(bt(l, o));
   return e.join("");
 }
-function gt(t, o) {
+function mt(t, o) {
   var r, 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"]}`);
@@ -410,11 +410,11 @@ function gt(t, o) {
         </td>
     `;
 }
-function mt(t) {
+function $t(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}"`;
 }
-function xt(t) {
+function Tt(t) {
   const {
     nodeConfig: o,
     composition: e,
@@ -429,8 +429,8 @@ function xt(t) {
     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" ? gt(r, u) : pt(r, o.cardsInRow, u), h = mt(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,8 +443,8 @@ 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)}"` : "";
-  return ot(`
+  ].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"
@@ -477,7 +477,7 @@ function xt(t) {
                             <tr>
                                 <td>
                                     <table width="100%" cellpadding="0" cellspacing="0" border="0"
-                                        class="${et}">${m}
+                                        class="${ot}">${m}
                                     </table>
                                 </td>
                             </tr>
@@ -492,5 +492,5 @@ function xt(t) {
 `);
 }
 export {
-  xt as buildBlockHtml
+  Tt as buildBlockHtml
 };

package/dist/extensions/Blocks/Recommendation/block.js

@@ -1,7 +1,7 @@
 var k = Object.defineProperty;
-var _ = (r, n, t) => n in r ? k(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
-var g = (r, n, t) => _(r, typeof n != "symbol" ? n + "" : n, t);
-import { BlockId as B } from "../../../enums/block.js";
+var B = (r, n, t) => n in r ? k(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
+var g = (r, n, t) => B(r, typeof n != "symbol" ? n + "" : n, t);
+import { BlockId as _ } from "../../../enums/block.js";
 import { getMigrationBannerHtml as b } from "../../../utils/migrationBannerHtml.js";
 import { Block as R, BlockCompositionType as y, ModificationDescription as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { regenerateMobileProductRows as A } from "./controls/main/utils.js";
@@ -9,9 +9,9 @@ import { ensureMobileCssRulesExist as d, setMobileLayoutOptOut as p, hasMobileLa
 import { RecommendationConfigService as s } from "./services/configService.js";
 import { useRecommendationExtensionStore as f } from "./store/recommendation.js";
 import { getDefaultTemplate as E } from "./templates/grid/template.js";
-const h = B.Recommendation, l = "recommendation-block-v2", m = "recommendation-id";
+const h = _.Recommendation, l = "recommendation-block-v2", m = "recommendation-id";
 let I = !1;
-class v extends R {
+class q extends R {
   constructor() {
     super();
     /**
@@ -47,6 +47,9 @@ class v extends R {
   allowInnerBlocksDND() {
     return !1;
   }
+  canBeSavedAsModule() {
+    return !1;
+  }
   /**
    * Returns the template HTML for a new recommendation block.
    * Generates a unique recommendation ID and embeds the instance class
@@ -190,5 +193,5 @@ class v extends R {
 }
 export {
   h as BLOCK_ID,
-  v as RecommendationBlock
+  q as RecommendationBlock
 };

package/dist/extensions/Blocks/Recommendation/constants/selectors.js

@@ -1,11 +1,11 @@
-const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", n = ".ins-recommendation-mobile-container", t = ".ins-recommendation-mobile-row", r = {
+const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", n = ".ins-recommendation-mobile-container", t = ".ins-recommendation-mobile-row", r = "reco-v3-button", _ = {
   CURRENCY: "currency",
   SYMBOL: "currency-symbol",
   ALIGNMENT: "currency-alignment",
   THOUSAND_SEPARATOR: "currency-thousand-separator",
   DECIMAL_SEPARATOR: "currency-decimal-separator",
   DECIMAL_COUNT: "currency-decimal-count"
-}, R = "productImage", _ = "productName", e = "productPrice", O = "productOldPrice", s = "productOmnibusPrice", i = "productOmnibusDiscount", E = "productButton", A = "customAttr:", C = "data-custom-attributes", u = "product-attr", m = /* @__PURE__ */ new Set([
+}, R = "productImage", e = "productName", O = "productPrice", s = "productOldPrice", i = "productOmnibusPrice", C = "productOmnibusDiscount", E = "productButton", A = "customAttr:", u = "data-custom-attributes", m = "product-attr", a = /* @__PURE__ */ new Set([
   "name",
   // productName
   "price",
@@ -23,19 +23,20 @@ const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container
 ]);
 export {
   A as ATTR_CUSTOM_PREFIX,
-  C as ATTR_DATA_CUSTOM_ATTRIBUTES,
-  u as ATTR_PRODUCT_ATTR,
+  u as ATTR_DATA_CUSTOM_ATTRIBUTES,
+  m as ATTR_PRODUCT_ATTR,
   E as ATTR_PRODUCT_BUTTON,
   R as ATTR_PRODUCT_IMAGE,
-  _ as ATTR_PRODUCT_NAME,
-  O as ATTR_PRODUCT_OLD_PRICE,
-  i as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
-  s as ATTR_PRODUCT_OMNIBUS_PRICE,
-  e as ATTR_PRODUCT_PRICE,
+  e as ATTR_PRODUCT_NAME,
+  s as ATTR_PRODUCT_OLD_PRICE,
+  C as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  i as ATTR_PRODUCT_OMNIBUS_PRICE,
+  O as ATTR_PRODUCT_PRICE,
   T as BLOCK_ROOT_SELECTOR,
-  m as BUILT_IN_DEFAULT_ATTRIBUTES,
+  a as BUILT_IN_DEFAULT_ATTRIBUTES,
   c as CONTAINER_SELECTOR,
-  r as CURRENCY_ATTR,
+  r as CSS_CLASS_RECO_BUTTON,
+  _ as CURRENCY_ATTR,
   o as DESKTOP_CONTAINER_SELECTOR,
   n as MOBILE_CONTAINER_SELECTOR,
   t as MOBILE_ROW_SELECTOR

package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js

@@ -1,11 +1,11 @@
 import { RecommendationBlockId as s } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_ATTR as b, ATTR_PRODUCT_BUTTON as u, ATTR_PRODUCT_OMNIBUS_DISCOUNT as m, ATTR_PRODUCT_OMNIBUS_PRICE as h, ATTR_PRODUCT_OLD_PRICE as y, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as f, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as _ } from "../../store/recommendation.js";
-import { formatPrice as $ } from "../../utils/priceFormatter.js";
-import { CUSTOM_CELL_HTML as C, sanitizeImageUrl as R } from "../utils.js";
+import { ATTR_PRODUCT_ATTR as b, CSS_CLASS_RECO_BUTTON as u, ATTR_PRODUCT_BUTTON as m, ATTR_PRODUCT_OMNIBUS_DISCOUNT as h, ATTR_PRODUCT_OMNIBUS_PRICE as y, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as _, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as $ } from "../../store/recommendation.js";
+import { formatPrice as C } from "../../utils/priceFormatter.js";
+import { CUSTOM_CELL_HTML as R, sanitizeImageUrl as O } from "../utils.js";
 const a = "0 5px", l = "attribute-cell";
 function p() {
-  const t = _(), { currencySettings: e } = t.recommendationConfigs;
+  const t = $(), { currencySettings: e } = t.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -17,12 +17,12 @@ function p() {
 }
 function i(t, e = "price") {
   const o = p(), n = t[e], d = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
-  return $({
+  return C({
     price: d,
     currency: o
   });
 }
-const I = {
+const S = {
   [x]: (t) => `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
@@ -40,7 +40,7 @@ const I = {
                             esd-extension-block-id="${s.IMAGE}">
                             <a target="_blank" href="${t.url}">
                                 <img
-                                    src="${R(t.image_url)}"
+                                    src="${O(t.image_url)}"
                                     alt="${t.name}"
                                     style="display: block; max-width: 100%; height: auto;"
                                     class="adapt-img">
@@ -51,7 +51,7 @@ const I = {
             </table>
         </td>
     `,
-  [f]: (t) => `
+  [_]: (t) => `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
             <table
                 class="product-card-segment"
@@ -76,7 +76,7 @@ const I = {
             </table>
         </td>
     `,
-  [T]: (t) => `
+  [f]: (t) => `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
@@ -100,7 +100,7 @@ const I = {
             </table>
         </td>
     `,
-  [y]: (t) => `
+  [T]: (t) => `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
@@ -124,7 +124,7 @@ const I = {
             </table>
         </td>
     `,
-  [h]: (t) => `
+  [y]: (t) => `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
@@ -152,7 +152,7 @@ const I = {
             </table>
         </td>
     `,
-  [m]: (t) => {
+  [h]: (t) => {
     var r, c;
     const e = p(), o = ((r = t.original_price) == null ? void 0 : r[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((c = t.price) == null ? void 0 : c[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, d = o > 0 ? Math.round((o - n) / o * 100) : 0, g = d > 0 ? `-${d}%` : "0%";
     return `
@@ -184,7 +184,7 @@ const I = {
         </td>
     `;
   },
-  [u]: () => `
+  [m]: () => `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
@@ -208,7 +208,7 @@ const I = {
                                 ">
                                 <a
                                     href="#"
-                                    class="es-button buy-button"
+                                    class="es-button ${u}"
                                     target="_blank"
                                     style="
                                         color: rgb(56, 118, 29);
@@ -236,7 +236,7 @@ const I = {
    * @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
    * @param content - Display content for the cell
    */
-  [C]: (t, e) => `
+  [R]: (t, e) => `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
             <table
                 class="product-card-segment"
@@ -264,5 +264,5 @@ const I = {
 export {
   l as ATTRIBUTE_CELL_CLASS,
   a as DEFAULT_CELL_PADDING,
-  I as gridElementRenderer
+  S as gridElementRenderer
 };

package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js

@@ -1,10 +1,10 @@
 import { RecommendationBlockId as o } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_ATTR as m, ATTR_PRODUCT_BUTTON as c, ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as g, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as x } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as _ } from "../../store/recommendation.js";
+import { ATTR_PRODUCT_ATTR as m, ATTR_PRODUCT_BUTTON as c, CSS_CLASS_RECO_BUTTON as u, ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as g, ATTR_PRODUCT_OMNIBUS_PRICE as f, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as x, ATTR_PRODUCT_NAME as _ } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
 import { formatPrice as R } from "../../utils/priceFormatter.js";
-import { CUSTOM_CELL_HTML as y, sanitizeImageUrl as C } from "../utils.js";
+import { CUSTOM_CELL_HTML as O, sanitizeImageUrl as y } from "../utils.js";
 function p() {
-  const t = _(), { currencySettings: e } = t.recommendationConfigs;
+  const t = C(), { currencySettings: e } = t.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -21,7 +21,7 @@ function s(t, e = "price") {
     currency: n
   });
 }
-const U = {
+const I = {
   /**
    * Image cell - left column (120px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
@@ -37,7 +37,7 @@ const U = {
             valign="middle">
             <a target="_blank" href="${t.url}">
                 <img
-                    src="${C(t.image_url)}"
+                    src="${y(t.image_url)}"
                     alt="${t.name}"
                     style="display: block; max-width: 100%; height: auto;"
                     class="adapt-img product-image">
@@ -47,7 +47,7 @@ const U = {
   /**
    * Name element - row for info cell table
    */
-  [x]: (t) => `
+  [_]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-name"
@@ -62,7 +62,7 @@ const U = {
   /**
    * Price element - row for info cell table
    */
-  [T]: (t) => `
+  [x]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-price"
@@ -77,7 +77,7 @@ const U = {
   /**
    * Old price element - row for info cell table
    */
-  [f]: (t) => `
+  [T]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-old-price"
@@ -94,7 +94,7 @@ const U = {
   /**
    * Omnibus price element - row for info cell table
    */
-  [g]: (t) => `
+  [f]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-omnibus-price"
@@ -113,7 +113,7 @@ const U = {
   /**
    * Omnibus discount element - row for info cell table
    */
-  [u]: (t) => {
+  [g]: (t) => {
     var i, l;
     const e = p(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, a = ((l = t.price) == null ? void 0 : l[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - a) / n * 100) : 0, b = r > 0 ? `-${r}%` : "0%";
     return `
@@ -156,7 +156,7 @@ const U = {
                 <a
                     href="${t.url}"
                     target="_blank"
-                    class="es-button buy-button"
+                    class="es-button ${u}"
                     style="
                         color: rgb(56, 118, 29);
                         background: rgb(217, 234, 211);
@@ -179,7 +179,7 @@ const U = {
    * @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
    * @param content - Display content for the cell
    */
-  [y]: (t, e) => `
+  [O]: (t, e) => `
         <tr>
             <td
                 ${m}="${t}"
@@ -192,5 +192,5 @@ const U = {
     `
 };
 export {
-  U as listElementRenderer
+  I as listElementRenderer
 };

package/dist/extensions/Blocks/Recommendation/utils/filterUtil.js

@@ -14,7 +14,7 @@ function y(t) {
     return "";
   const o = t.sort((r, e) => r.filterNumber - e.filterNumber), u = o.map((r) => {
     const e = r.operator === l, a = e ? "=" : r.operator, c = e ? f(r.value).join(l) : r.value;
-    return `[${r.attribute}][${a}][${c}]`;
+    return `[${r.attribute}][${encodeURIComponent(a)}][${c}]`;
   }), [i, ...p] = u;
   let n = i;
   for (let r = 0; r < p.length; r++) {
@@ -23,7 +23,7 @@ function y(t) {
   }
   return `(${n})`;
 }
-function Q(t) {
+function g(t) {
   if (!t || t.length === 0)
     return "";
   const o = t.reduce((r, e) => (r[e.filterGroup] || (r[e.filterGroup] = []), r[e.filterGroup].push(e), r), {}), u = Object.keys(o).map(Number).sort((r, e) => r - e), i = u.map((r) => {
@@ -38,7 +38,7 @@ function Q(t) {
   return s.trim();
 }
 export {
-  Q as generateCompleteFilterQuery,
+  g as generateCompleteFilterQuery,
   f as parseTagList,
   m as safeDecodeURIComponent
 };

package/dist/extensions/Blocks/Recommendation/validation/requiredFields.js

@@ -1,4 +1,4 @@
-const l = [
+const o = [
   {
     key: "locale",
     getValue: (e) => e.language,
@@ -9,9 +9,9 @@ const l = [
     getValue: (e) => e.currencySettings.value,
     getAvailableOptions: (e) => e.currencyList.map((n) => n.text)
   }
-], u = "newsletter.recommendation-fill-required-fields";
-function o(e, n) {
-  return l.filter((t) => {
+], l = "newsletter.recommendation-fill-required-fields";
+function u(e, n) {
+  return o.filter((t) => {
     var a;
     if (t.condition && !t.condition(e))
       return !1;
@@ -19,15 +19,15 @@ function o(e, n) {
     if (!i)
       return !0;
     const r = (a = t.getAvailableOptions) == null ? void 0 : a.call(t, n);
-    return r === void 0 || r.length === 0 ? !1 : !r.includes(i);
+    return r !== void 0 && !r.includes(i);
   }).map((t) => t.key);
 }
 function s(e, n) {
-  return o(e, n).length === 0;
+  return u(e, n).length === 0;
 }
 export {
-  l as REQUIRED_RECOMMENDATION_FIELDS,
-  u as RecommendationRequiredFieldsKey,
-  o as getInvalidFields,
+  o as REQUIRED_RECOMMENDATION_FIELDS,
+  l as RecommendationRequiredFieldsKey,
+  u as getInvalidFields,
   s as isConfigValid
 };

package/dist/src/extensions/Blocks/Recommendation/block.d.ts

@@ -23,6 +23,7 @@ export declare class RecommendationBlock extends Block {
     getDescription(): string;
     getSettingsPanelTitleHtml(): string;
     allowInnerBlocksDND(): boolean;
+    canBeSavedAsModule(): boolean;
     /**
      * Returns the template HTML for a new recommendation block.
      * Generates a unique recommendation ID and embeds the instance class

package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts

@@ -8,6 +8,6 @@
  */
 export { RecommendationBlockId } from './blockIds';
 export { RecommendationControlId } from './controlIds';
-export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_SELECTOR, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, ATTR_CUSTOM_PREFIX, ATTR_DATA_CUSTOM_ATTRIBUTES, ATTR_PRODUCT_ATTR, BUILT_IN_DEFAULT_ATTRIBUTES, } from './selectors';
+export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_SELECTOR, CSS_CLASS_RECO_BUTTON, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, ATTR_CUSTOM_PREFIX, ATTR_DATA_CUSTOM_ATTRIBUTES, ATTR_PRODUCT_ATTR, BUILT_IN_DEFAULT_ATTRIBUTES, } from './selectors';
 export { LAYOUT_VALUES, LAYOUT_OPTIONS, DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, DEFAULT_MOBILE_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, MAX_MOBILE_PRODUCTS_PER_ROW, MIN_MOBILE_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, DEFAULT_MOBILE_COLUMN_SPACING, DEFAULT_MOBILE_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
 export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, EXCLUDED_ALGORITHM_IDS, } from './defaultConfig';

package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts

@@ -17,6 +17,12 @@ export declare const DESKTOP_CONTAINER_SELECTOR = ".ins-recommendation-desktop-c
 export declare const MOBILE_CONTAINER_SELECTOR = ".ins-recommendation-mobile-container";
 /** Mobile row wrapper — the <tr> that wraps the mobile container <td>/<table> */
 export declare const MOBILE_ROW_SELECTOR = ".ins-recommendation-mobile-row";
+/**
+ * Stable class on the recommendation product button anchor. Survives export
+ * and is the anchor selector the compiler uses to swap `href` with the
+ * `{{cId_pIdx_url}}` template variable.
+ */
+export declare const CSS_CLASS_RECO_BUTTON = "reco-v3-button";
 /**
  * Currency HTML attributes set on the block element
  * These are read by the HTML compiler at runtime to format prices

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.4.0-beta.5d19726",
+  "version": "3.4.1-beta.4c96ad0",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",