@useinsider/guido 3.4.0-beta.0ec3bc7 → 3.4.0-beta.14fc097

package/dist/composables/useHtmlValidator.js

@@ -1,10 +1,10 @@
-import { useConfig as _ } from "./useConfig.js";
+import { useConfig as V } from "./useConfig.js";
 import { TemplateTypes as H } from "../enums/defaults.js";
 import { DISPLAY_CONDITIONS_REGEX as P, DISPLAY_CONDITIONS_EXCEPTIONS_REGEX as G, CampaignCouldNotBeSavedKey as M, CanNotMakeAnyChangesForRunningKey as $ } from "../enums/html-validator.js";
 import { ToasterTypeOptions as c } from "../enums/toaster.js";
-import { itemsBlockDynamicVariables as q } from "../extensions/Blocks/Items/enums/productEnums.js";
-import { useRecommendationExtensionStore as X } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { RecommendationRequiredFieldsKey as j } from "../extensions/Blocks/Recommendation/validation/requiredFields.js";
+import { itemsBlockDynamicVariables as j } from "../extensions/Blocks/Items/enums/productEnums.js";
+import { useRecommendationExtensionStore as q } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { RecommendationRequiredFieldsKey as X } from "../extensions/Blocks/Recommendation/validation/requiredFields.js";
 import { useRecommendationStore as K } from "../stores/recommendation.js";
 import { base64EncodeWithSpecialChars as z } from "../utils/base64.js";
 import { useHttp as U } from "./useHttp.js";
@@ -18,8 +18,8 @@ function ee(a, u) {
   return u.some((d) => a.startsWith(`${d}_`));
 }
 const ge = () => {
-  var y, h;
-  const { showToaster: a } = Y(), { post: u } = U(), { config: d } = _(), r = Z(), g = K(), S = X(), p = ((h = (y = d.value) == null ? void 0 : y.partner) == null ? void 0 : h.messageType) === H.transactional, b = async (e) => {
+  var h, v;
+  const { showToaster: a } = Y(), { post: u } = U(), { config: d } = V(), r = Z(), p = K(), f = q(), y = ((v = (h = d.value) == null ? void 0 : h.partner) == null ? void 0 : v.messageType) === H.transactional, w = async (e) => {
     const t = await u(
       "/newsletter/template-library/check-template-html-body",
       { html: z(e) }
@@ -31,21 +31,21 @@ const ge = () => {
       type: c.Alert,
       message: r("newsletter.already-in-progress")
     }), n;
-  }, w = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), E = (e) => ["if", "endif"].includes(e.toLowerCase()), A = (e, s) => {
+  }, S = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), E = (e) => ["if", "endif"].includes(e.toLowerCase()), A = (e, s) => {
     const t = e.match(/({%(.*?)%})/g);
     let n = !0;
-    return t !== null && !p && t.forEach((l) => {
+    return t !== null && !y && t.forEach((l) => {
       const o = l.slice(2, -2).trim().match(/(".*?"|[^"\s]+)(?=\s*|\s*$)/g);
       if (o && o.length > 0) {
         const [i] = o;
-        w(i) && !s.includes(i) && (a({
+        S(i) && !s.includes(i) && (a({
           type: c.Warning,
           message: r("custom-fields.invalid-custom-fields")
         }), n = !1);
       }
     }), n;
   }, k = async (e, s, t) => {
-    const n = t ? await b(e) : !0;
+    const n = t ? await w(e) : !0;
     return A(e, s) && n;
   }, x = (e) => e.length > 0 ? !0 : (a({
     type: c.Warning,
@@ -65,9 +65,9 @@ const ge = () => {
       type: c.Warning,
       message: r("custom-fields.invalid-custom-fields")
     }), s;
-  }, T = (e, s) => {
+  }, R = (e, s) => {
     const t = e.match(/{{([a-zA-Z0-9_\s]*)}}/gm);
-    if (t && !p) {
+    if (t && !y) {
       const n = new Set(s.map((i) => i.toLowerCase())), l = Q(e), o = [];
       if (t.forEach((i) => {
         const m = i.slice(2, -2).trim().toLowerCase();
@@ -85,7 +85,7 @@ const ge = () => {
       }
     }
     return !0;
-  }, R = (e) => {
+  }, T = (e) => {
     const s = e.match(/{%(.*?)%}/g), t = [];
     let n = !0;
     if (s && s.forEach((l) => {
@@ -93,14 +93,14 @@ const ge = () => {
       (!o || l !== m) && !i && (a({
         type: c.Alert,
         message: r("newsletter.display-conditions-invalid-syntax")
-      }), n = !1), o && o.forEach((f) => {
-        f.trim() === "=" && (a({
+      }), n = !1), o && o.forEach((g) => {
+        g.trim() === "=" && (a({
           type: c.Alert,
           message: r("custom-conditions.wrong-equality-operators")
         }), n = !1);
-        const v = f.match(/^[a-zA-Z]*$/g);
-        v && v.forEach((C) => {
-          E(C) && t.push(C);
+        const C = g.match(/^[a-zA-Z]*$/g);
+        C && C.forEach((b) => {
+          E(b) && t.push(b);
         });
       });
     }), t.length) {
@@ -120,10 +120,10 @@ const ge = () => {
   }, W = (e) => (e.match(/({%(.*?)%})/g) || []).filter((t) => t.includes("if")).map((t) => (t.match(/{{.*}}/gm) || []).length).reduce((t, n) => t + n, 0) > 0 ? (a({
     type: c.Warning,
     message: r("custom-conditions.no-braces-inside-if-tag")
-  }), !1) : !0, N = () => S.hasInvalidBlock() ? (a({
+  }), !1) : !0, N = () => f.hasInvalidBlock() ? (a({
     type: c.Alert,
-    message: r(j)
-  }), !1) : !0, O = () => g.recommendationConfigs && Object.values(g.recommendationConfigs).find((s) => s.filters.find((t) => t.value === "")) !== void 0 ? (a({
+    message: r(X)
+  }), !1) : !0, O = () => p.recommendationConfigs && Object.values(p.recommendationConfigs).find((s) => s.filters.find((t) => t.value === "")) !== void 0 ? (a({
     type: c.Alert,
     message: r("newsletter.fill-all-necessary-fields")
   }), !1) : !0, D = (e) => {
@@ -141,7 +141,7 @@ const ge = () => {
       type: c.Alert,
       message: r("unsubscribe-templates.select-checkbox-groups")
     }), !1) : !0;
-  }, V = (e) => {
+  }, _ = (e) => {
     const n = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".radio-button-v2");
     return Array.from(n).find((o) => {
       var i;
@@ -153,12 +153,13 @@ const ge = () => {
   };
   return { validateHtml: async (e, s, t = !1) => {
     var o, i;
+    t && Object.keys(f.blockStates).length > 0 && await f.fetchRecommendationCreateData();
     const n = [
       ...s.map((m) => m.value),
-      ...q,
+      ...j,
       ...((i = (o = d.value) == null ? void 0 : o.template) == null ? void 0 : i.customFieldAttributes) ?? []
     ];
-    return await k(e, n, t) && x(e) && I(e) && F(e) && T(e, n) && R(e) && B(e) && W(e) && N() && O() && D(e) && L(e) && V(e);
+    return await k(e, n, t) && x(e) && I(e) && F(e) && R(e, n) && T(e) && B(e) && W(e) && N() && O() && D(e) && L(e) && _(e);
   } };
 };
 export {

package/dist/config/compiler/recommendationCompilerRules.js

@@ -68,16 +68,16 @@ 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, [f] = _, [d] = R, o = f.substring(1, f.length - 2), r = d.match(T.COMPOSITION) !== null;
+        const [S] = u, [b] = _, [d] = R, o = b.substring(1, b.length - 2), r = d.match(T.COMPOSITION) !== null;
         let t = i;
         if (r) {
           const I = S.substring(2, S.length - 3), m = n(I);
           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);
-        let b = "";
-        o in g.IF && (b = 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 = `${b}${r ? $ : s}${g.ELSE}${d}${N.PARAGRAPH_END_TAG}${g.END_IF}`;
+        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);
       }), e;
     },
@@ -116,7 +116,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("ins-recommendation-product-container ", ""), e;
+      return e = e.replaceAll("es-button buy-button", "es-button"), e = e.replaceAll("ins-recommendation-product-container ", ""), e;
     },
     priority: 56
   },
@@ -174,10 +174,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}"`, f = /* @__PURE__ */ new Map();
+      const R = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), S = (o, r) => `${o.slice(0, -1)} ${r}"`, b = /* @__PURE__ */ new Map();
       i.forEach((o, r) => {
         const t = R(r);
-        f.set(r, {
+        b.set(r, {
           caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
           caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
         });
@@ -187,15 +187,15 @@ const w = [
         /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
         (o, r) => {
           let t = r;
-          return i.forEach((p, b) => {
-            const $ = f.get(b);
+          return i.forEach((p, f) => {
+            const $ = b.get(f);
             t = t.replace(
               $.caseA,
               (h, I, m) => S(I, p) + m
             ), t = t.replace(
               $.caseB,
               (h, I, m) => I + S(m, p)
-            ), t = t.replaceAll(` style="${b}"`, ` class="${p}"`);
+            ), t = t.replaceAll(` style="${f}"`, ` class="${p}"`);
           }), t;
         }
       ), d = d.replaceAll("<!--REC_START-->", ""), d = d.replaceAll("<!--REC_END-->", ""), d;

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 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 { 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 { 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 k(t, o) {
+function v(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 r = i.join("; "), a = e ? ` style="background-color: ${c(e)}"` : "";
+  const a = i.join("; "), r = 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"${a}>
+                class="product-card-segment"${r}>
                 <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="${r}">
+                                    style="${a}">
                             </a>
                         </td>
                     </tr>
@@ -58,17 +58,17 @@ function nt(t, o, e, l) {
     `;
 }
 function D(t, o, e, l, s, n, i) {
-  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);
+  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%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment" style="${a}">
+                class="product-card-segment" style="${r}">
                 <tbody>
                     <tr valign="top">
                         <td${p}
                             class="${u}"
                             esd-extension-block-id="${t}"${d}>
-                            <p contenteditable="false"${b(m)}>${k(e, s)}</p>
+                            <p contenteditable="false"${b(m)}>${v(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), a = $("font-size: 14px; color: #999999", t.pStyle);
+  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%"')}>
             <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(a)}>
-                                <s>${k(l, t)}</s>
+                            <p contenteditable="false"${b(r)}>
+                                <s>${v(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 r = s ? `; background-color: ${c(s)}` : "", a = b(l.tdStyle), d = y(l.align), u = $("font-size: 12px; color: #666666", l.pStyle);
+  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%"')}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
-                class="product-card-segment" style="table-layout: fixed${r}">
+                class="product-card-segment" style="table-layout: fixed${a}">
                 <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}"${a}>
+                            esd-extension-block-id="${t}"${r}>
                             <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), r = o.text || F, a = $(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), a = o.text || F, r = $(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(a)}">
+                            <span class="es-button-border" style="${c(r)}">
                                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                                    class="es-button reco-v3-button"
-                                    style="${c(d)}">${c(r)}</a>
+                                    class="es-button buy-button"
+                                    style="${c(d)}">${c(a)}</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), 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());
+  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%"')}>
             <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)}"${r}
+                        <td product-attr="${c(t)}"${a}
                             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 r = o[t], a = r ?? _();
+  const a = o[t], r = a ?? _();
   switch (t) {
-    case v:
+    case I:
       return nt(
-        r ?? {},
+        a ?? {},
         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",
-        a,
+        r,
         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(r),
+        K(a),
         l,
         n
       );
     case H:
-      return lt(a, l, n, i.oldPricePlaceholder);
+      return lt(r, l, n, i.oldPricePlaceholder);
     case U:
       return L(
         g.OMNIBUS_PRICE,
         "omnibus-price-value",
         i.omnibusPricePlaceholder,
-        a,
+        r,
         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%",
-        a,
+        r,
         l,
         "product-omnibus-discount",
         n
       );
-    case I:
+    case k:
       return st(
         s,
-        r ?? {},
+        a ?? {},
         l,
         n
       );
     default:
       if (t.startsWith(E)) {
         const d = e[t] ?? t.slice(E.length), p = t.slice(E.length);
-        return it(d, p, a, l, n);
+        return it(d, p, r, l, n);
       }
       return null;
   }
@@ -235,15 +235,15 @@ const q = `
         <td class="spacer" style="height: 10px"></td>
     </tr>
 `;
-function rt(t) {
+function at(t) {
   return {
     pricePlaceholder: N({ price: 18, currency: t }),
     oldPricePlaceholder: N({ price: 20, currency: t }),
     omnibusPricePlaceholder: N({ price: 20, currency: t })
   };
 }
-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) : "";
+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) : "";
   return `
         <tr class="recommendation-product-row">
             <td>
@@ -255,8 +255,8 @@ function at(t, o, e, l) {
       const A = ct(
         T,
         i,
-        r,
         a,
+        r,
         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(at(s, n, o, e));
+    s > 0 && l.push(q), l.push(rt(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), r = y(n.align ?? "left");
+    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}"${r}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(i)}>${k("Product Name", n)}</p>
+                esd-extension-block-id="${g.NAME}"${a}${b(n.tdStyle)}>
+                <p contenteditable="false"${b(i)}>${v("Product Name", n)}</p>
             </td>
         `;
   }
   if (t === G) {
-    const n = K(s), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), r = y(n.align ?? "left");
+    const n = K(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}"${r}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(i)}>${k(l.pricePlaceholder, n)}</p>
+                esd-extension-block-id="${g.PRICE}"${a}${b(n.tdStyle)}>
+                <p contenteditable="false"${b(i)}>${v(l.pricePlaceholder, n)}</p>
             </td>
         `;
   }
   if (t === H) {
-    const n = s ?? _(), r = $("font-size: 14px; color: #999999; text-decoration: line-through; margin: 0", n.pStyle), a = y(n.align ?? "left");
+    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}"${a}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(r)}><s>${k(l.oldPricePlaceholder, n)}</s></p>
+                esd-extension-block-id="${g.OLD_PRICE}"${r}${b(n.tdStyle)}>
+                <p contenteditable="false"${b(a)}><s>${v(l.oldPricePlaceholder, n)}</s></p>
             </td>
         `;
   }
   if (t === U || t === j) {
-    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");
+    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}"
                 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="${r}">${c(a)}</span>
+                    <span class="${a}">${c(r)}</span>
                     <span class="omnibus-text-after"></span>
                 </p>
             </td>
         `;
   }
   if (t.startsWith(E)) {
-    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;
+    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;
     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(a)}</p>
+                <p contenteditable="false"${b(d)}>${c(r)}</p>
             </td>
         `;
   }
   return null;
 }
 function ut(t, o) {
-  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 = `
+  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"
             esd-extension-block-id="${g.IMAGE}"
-            data-attribute-type="${v}"
+            data-attribute-type="${I}"
             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 !== v && P !== I).map((P) => {
+                <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);
     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[I] ?? {}, C = l[I] !== !1, S = f.text || F, x = $(J, f.spanStyle ?? ""), A = $(X, f.aStyle ?? ""), Q = C ? "" : ' style="display: none"', Z = `
+    `, 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 = `
         <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="${I}"
+            data-attribute-type="${k}"
             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 reco-v3-button"
+                    class="es-button buy-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" ${a}>
+                    class="product-card-wrapper" ${r}>
                     <tbody>
                         <tr>${h}${w}${Z}</tr>
                     </tbody>
@@ -400,13 +400,13 @@ function bt(t, o) {
   return e.join("");
 }
 function gt(t, o) {
-  var a, d, p, u, m, h;
+  var r, d, p, u, m, h;
   const e = t == null ? void 0 : t.theme, l = [];
-  (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;
+  (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;
   return `
         <td class="esd-block-text es-p10t es-p10b es-p20l es-p20r" align="center">
-            <p${b(s)}>${r}</p>
+            <p${b(s)}>${a}</p>
         </td>
     `;
 }
@@ -422,15 +422,15 @@ function xt(t) {
     titleText: s,
     extraClasses: n = "",
     legacyId: i,
-    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 = {
+    legacyBgColor: a
+  } = t, r = parseInt(o.size) || 6, d = o.layout === "list" ? ' data-layout="list"' : "", p = o.layout === "list" ? " es-m-p0 ins-recommendation-list-layout" : "", u = {
     composition: e.composition,
     visibility: e.visibility,
     perElement: e.perElementStyles,
     customAttrValues: e.customAttrValues,
     cardBg: l,
-    ...rt(o.currency)
-  }, m = o.layout === "list" ? bt(a, u) : dt(a, o.cardsInRow, u), h = gt(e.titleVariable, s), T = e.composition.join(","), w = JSON.stringify(e.customAttributes), f = [
+    ...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 = [
     "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 = r ? ` bgcolor="${c(r)}"` : "";
+  ].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(`
 <td align="left"
     esd-extension-block-id="recommendation-block"

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

@@ -15,7 +15,7 @@ function p() {
     thousandSeparator: e.thousandSeparator
   };
 }
-function r(t, e = "price") {
+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 $({
     price: d,
@@ -92,7 +92,7 @@ const I = {
                             align="center"
                             esd-extension-block-id="${s.PRICE}">
                             <p contenteditable="false" style="font-size: 16px; color: #333333;">
-                                <strong>${r(t, "price")}</strong>
+                                <strong>${i(t, "price")}</strong>
                             </p>
                         </td>
                     </tr>
@@ -116,7 +116,7 @@ const I = {
                             align="center"
                             esd-extension-block-id="${s.OLD_PRICE}">
                             <p contenteditable="false" style="font-size: 14px; color: #999999;">
-                                <strong>${r(t, "original_price")}</strong>
+                                <strong>${i(t, "original_price")}</strong>
                             </p>
                         </td>
                     </tr>
@@ -143,7 +143,7 @@ const I = {
                             esd-extension-block-id="${s.OMNIBUS_PRICE}">
                             <p contenteditable="false" style="font-size: 12px; color: #666666;">
                                 <span class="omnibus-text-before">Lowest 30-day price: </span>
-                                <span class="omnibus-price-value">${r(t, "original_price")}</span>
+                                <span class="omnibus-price-value">${i(t, "original_price")}</span>
                                 <span class="omnibus-text-after"></span>
                             </p>
                         </td>
@@ -153,8 +153,8 @@ const I = {
         </td>
     `,
   [m]: (t) => {
-    var i, c;
-    const e = p(), o = ((i = t.original_price) == null ? void 0 : i[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%";
+    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 `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
@@ -208,7 +208,7 @@ const I = {
                                 ">
                                 <a
                                     href="#"
-                                    class="es-button reco-v3-button"
+                                    class="es-button buy-button"
                                     target="_blank"
                                     style="
                                         color: rgb(56, 118, 29);

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

@@ -2,7 +2,7 @@ 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 { formatPrice as R } from "../../utils/priceFormatter.js";
-import { CUSTOM_CELL_HTML as C, sanitizeImageUrl as y } from "../utils.js";
+import { CUSTOM_CELL_HTML as y, sanitizeImageUrl as C } from "../utils.js";
 function p() {
   const t = _(), { currencySettings: e } = t.recommendationConfigs;
   return {
@@ -15,9 +15,9 @@ function p() {
   };
 }
 function s(t, e = "price") {
-  const n = p(), r = t[e], a = (r == null ? void 0 : r[n.code]) ?? Object.values(r ?? {})[0] ?? 0;
+  const n = p(), a = t[e], r = (a == null ? void 0 : a[n.code]) ?? Object.values(a ?? {})[0] ?? 0;
   return R({
-    price: a,
+    price: r,
     currency: n
   });
 }
@@ -37,7 +37,7 @@ const U = {
             valign="middle">
             <a target="_blank" href="${t.url}">
                 <img
-                    src="${y(t.image_url)}"
+                    src="${C(t.image_url)}"
                     alt="${t.name}"
                     style="display: block; max-width: 100%; height: auto;"
                     class="adapt-img product-image">
@@ -115,7 +115,7 @@ const U = {
    */
   [u]: (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, r = ((l = t.price) == null ? void 0 : l[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, a = n > 0 ? Math.round((n - r) / n * 100) : 0, b = a > 0 ? `-${a}%` : "0%";
+    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 `
         <tr>
             <td
@@ -156,7 +156,7 @@ const U = {
                 <a
                     href="${t.url}"
                     target="_blank"
-                    class="es-button reco-v3-button"
+                    class="es-button buy-button"
                     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
    */
-  [C]: (t, e) => `
+  [y]: (t, e) => `
         <tr>
             <td
                 ${m}="${t}"

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}][${encodeURIComponent(a)}][${c}]`;
+    return `[${r.attribute}][${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 g(t) {
+function Q(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 g(t) {
   return s.trim();
 }
 export {
-  g as generateCompleteFilterQuery,
+  Q as generateCompleteFilterQuery,
   f as parseTagList,
   m as safeDecodeURIComponent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.4.0-beta.0ec3bc7",
+  "version": "3.4.0-beta.14fc097",
   "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",