@useinsider/guido 3.1.1-beta.f9482a3 → 3.2.0-beta.4aabac5

package/dist/composables/usePreviewMode.js

@@ -1,31 +1,35 @@
-import { useEditorStore as n } from "../stores/editor.js";
-import { usePreviewStore as l } from "../stores/preview.js";
-import { useActionsApi as m } from "./useActionsApi.js";
-import { useCodeEditorApi as p } from "./useCodeEditorApi.js";
-const E = () => {
-  const o = n(), e = l(), { closeCodeEditor: a } = p(), { getPreviewData: s } = m(), r = () => {
-    o.isPreviewModeOpen = !1, e.$reset();
+import { useEditorStore as d } from "../stores/editor.js";
+import { usePreviewStore as n } from "../stores/preview.js";
+import { useActionsApi as p } from "./useActionsApi.js";
+import { useCodeEditorApi as c } from "./useCodeEditorApi.js";
+import { useHtmlCompiler as u } from "./useHtmlCompiler.js";
+const g = () => {
+  const t = d(), e = n(), { closeCodeEditor: i } = c(), { getPreviewData: a, getCompiledEmail: s } = p(), { compileHtml: m } = u(), r = () => {
+    t.isPreviewModeOpen = !1, e.$reset();
   };
   return {
     closePreviewMode: r,
     openPreviewMode: () => {
-      o.isCodeEditorOpen && a(), o.isPreviewModeOpen = !0;
+      t.isCodeEditorOpen && i(), t.isPreviewModeOpen = !0;
     },
     loadPreviewData: async () => {
-      if (!(o.loadingStatus || e.isLoaded)) {
-        o.loadingStatus = !0;
+      if (!(t.loadingStatus || e.isLoaded)) {
+        t.loadingStatus = !0;
         try {
-          const { html: t, ampHtml: i, ampErrors: d } = await s();
-          e.templateHtml = t || "", e.ampHtml = i || "", e.ampErrors = d || [], e.setEmailFormat(i ? "AMP" : "html"), e.isLoaded = !0;
-        } catch (t) {
-          console.error("Failed to load preview data:", t), r();
+          const [o, l] = await Promise.all([
+            a(),
+            s({ minimize: !0, resetDataSavedFlag: !1 })
+          ]);
+          e.templateHtml = o.html || "", e.ampHtml = o.ampHtml || "", e.ampErrors = o.ampErrors || [], e.setEmailFormat(o.ampHtml ? "AMP" : "html"), e.emailSizeKB = m(l.html).estimatedSizeKB, e.isLoaded = !0;
+        } catch (o) {
+          console.error("Failed to load preview data:", o), r();
         } finally {
-          o.loadingStatus = !1;
+          t.loadingStatus = !1;
         }
       }
     }
   };
 };
 export {
-  E as usePreviewMode
+  g as usePreviewMode
 };

package/dist/composables/useSave.js

@@ -1,21 +1,23 @@
-import { useConfig as d } from "./useConfig.js";
-import { useSaveStart as p, useSaveComplete as f } from "./useGuidoActions.js";
-import { useSyncModuleExtractor as v } from "./useSyncModuleExtractor.js";
-import { useStripoApi as S } from "../services/stripoApi.js";
-import { useTemplatePreparation as x } from "../utils/templatePreparation.js";
-import { useHtmlValidator as V } from "./useHtmlValidator.js";
-const g = () => {
-  const o = p(), s = f(), { validateHtml: i } = V(), { callbacks: a } = d(), { extractSyncModuleData: r } = v(), { setSyncModuleUnsubscriptionPages: n } = S();
-  return { save: async (l = !1) => {
+import { useActionsApi as d } from "./useActionsApi.js";
+import { useConfig as f } from "./useConfig.js";
+import { useSaveStart as v, useSaveComplete as S } from "./useGuidoActions.js";
+import { useSyncModuleExtractor as x } from "./useSyncModuleExtractor.js";
+import { useStripoApi as V } from "../services/stripoApi.js";
+import { useTemplatePreparation as y } from "../utils/templatePreparation.js";
+import { useHtmlValidator as w } from "./useHtmlValidator.js";
+const k = () => {
+  const o = v(), s = S(), { validateHtml: i } = w(), { callbacks: a } = f(), { extractSyncModuleData: r } = x(), { setSyncModuleUnsubscriptionPages: n } = V(), { editorSave: l } = d();
+  return { save: async (c = !1) => {
     var e;
     o();
-    const { prepareTemplateDetails: c } = x(), t = await c();
+    const { prepareTemplateDetails: m } = y(), t = await m();
     if (!await i(t.compiledHtml, t.dynamicContentList, !0) || (e = a.value) != null && e.externalValidation && !await a.value.externalValidation(t))
       return;
-    const { unsubscribePayload: m, stripoModules: u } = r(t.rawHtml);
-    return await n(m), t.modules = u, l || s(t), t;
+    l();
+    const { unsubscribePayload: u, stripoModules: p } = r(t.rawHtml);
+    return await n(u), t.modules = p, c || s(t), t;
   } };
 };
 export {
-  g as useSave
+  k as useSave
 };

package/dist/config/compiler/recommendationCompilerRules.js

@@ -1,16 +1,16 @@
 import { useRecommendation as N } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as M, REGEX as _, VerticalOrientation as h, CSS as d, ATTRIBUTES as R, CONDITIONS as y, HTML as C } from "../../enums/recommendation.js";
+import { DUMMY_IMAGE_MAPPINGS as C, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as R, CONDITIONS as $, HTML as h } from "../../enums/recommendation.js";
 import { prepareRecommendationBlocks as x } from "./utils/recommendationCompilerUtils.js";
 const w = [
   {
     id: "replace-images-with-variable-names",
     description: "Replacing dummy images with variable names in recommendation module",
     type: "custom",
-    processor: (n) => {
-      let e = n;
-      return Object.entries(M).forEach(([, l]) => {
-        Object.entries(l).forEach(([s, r]) => {
-          e = e.replaceAll(r, `{{${s}}}`);
+    processor: (i) => {
+      let e = i;
+      return Object.entries(C).forEach(([, p]) => {
+        Object.entries(p).forEach(([c, n]) => {
+          e = e.replaceAll(n, `{{${c}}}`);
         });
       }), e;
     },
@@ -29,21 +29,21 @@ const w = [
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
-    processor: (n) => {
-      const { calculateCardWidth: e, getRecommendationCampaignData: l } = N();
-      let s = n;
-      const r = s.match(_.ID);
-      if (r) {
-        const i = [];
-        if (r.forEach((p) => {
-          const u = /recommendation-id="(.*?)"/i.exec(p), I = u ? u[1].trim() : "", E = l(I);
-          E.textTrimming && E.orientation === h && i.push(e(E));
-        }), i.length) {
-          const p = `width:${Math.min(...i)}px!important;`;
-          s = s.replace(d.REGULAR_NAME_HEIGHT, `${d.TRIMMED_NAME_HEIGHT} ${p} ${d.ELLIPSIS}`).replace(d.REGULAR_NAME_CONTAINER_HEIGHT, d.TRIMMED_NAME_CONTAINER_CSS).replace(d.RESPONSIVE_NAME_SIZE, `${d.RESPONSIVE_NAME_HEIGHT} ${p} ${d.ELLIPSIS}`).replace(d.RESPONSIVE_NAME_CONTAINER_HEIGHT, d.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
+    processor: (i) => {
+      const { calculateCardWidth: e, getRecommendationCampaignData: p } = N();
+      let c = i;
+      const n = c.match(T.ID);
+      if (n) {
+        const a = [];
+        if (n.forEach((s) => {
+          const d = /recommendation-id="(.*?)"/i.exec(s), _ = d ? d[1].trim() : "", A = p(_);
+          A.textTrimming && A.orientation === M && a.push(e(A));
+        }), a.length) {
+          const s = `width:${Math.min(...a)}px!important;`;
+          c = c.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
         }
       }
-      return s;
+      return c;
     },
     priority: 52
   },
@@ -51,34 +51,34 @@ const w = [
     id: "prepare-recommendations",
     description: "Replacing product data with template variables in recommendation blocks",
     type: "custom",
-    processor: (n) => x(n),
+    processor: (i) => x(i),
     priority: 48
   },
   {
     id: "add-discount-conditions",
     description: "Adding discount conditions to the recommendation block",
     type: "custom",
-    processor: (n) => {
-      let e = n;
-      const l = e.match(_.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: s } = N();
-      return l !== null && l.forEach((r) => {
-        const i = r.match(_.CUSTOM_FIELD);
-        if (!i)
+    processor: (i) => {
+      let e = i;
+      const p = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: c } = N();
+      return p !== null && p.forEach((n) => {
+        const a = n.match(T.CUSTOM_FIELD);
+        if (!a)
           return;
-        const [p] = i, u = p.match(_.CUSTOM_FIELD_INDEXES_PART), I = p.match(_.CUSTOM_FIELD_NAME_PART), E = r.match(_.ATTRIBUTE_PARAGRAPH_START_TAG);
-        if (!u || !I || !E)
+        const [s] = a, d = s.match(T.CUSTOM_FIELD_INDEXES_PART), _ = s.match(T.CUSTOM_FIELD_NAME_PART), A = n.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
+        if (!d || !_ || !A)
           return;
-        const [S] = u, [m] = I, [t] = E, o = m.substring(1, m.length - 2), c = t.match(_.COMPOSITION) !== null;
-        let a = p;
-        if (c) {
-          const b = S.substring(2, S.length - 3), A = s(b);
-          o === R.OMNIBUS_PRICE && (A.priceBeforeTextValue && (a = `${A.priceBeforeTextValue}${a}`), A.priceAfterTextValue && (a = `${a}${A.priceAfterTextValue}`)), o === R.OMNIBUS_DISCOUNT && (A.discountBeforeTextValue && (a = `${A.discountBeforeTextValue}${a}`), A.discountAfterTextValue && (a = `${a}${A.discountAfterTextValue}`));
+        const [I] = d, [S] = _, [m] = A, o = S.substring(1, S.length - 2), r = m.match(T.COMPOSITION) !== null;
+        let t = s;
+        if (r) {
+          const b = I.substring(2, I.length - 3), l = c(b);
+          o === R.OMNIBUS_PRICE && (l.priceBeforeTextValue && (t = `${l.priceBeforeTextValue}${t}`), l.priceAfterTextValue && (t = `${t}${l.priceAfterTextValue}`)), o === R.OMNIBUS_DISCOUNT && (l.discountBeforeTextValue && (t = `${l.discountBeforeTextValue}${t}`), l.discountAfterTextValue && (t = `${t}${l.discountAfterTextValue}`));
         }
-        const f = S.substring(2);
-        let T = "";
-        o in y.IF && (T = y.IF[o].replaceAll(`{${R.DISCOUNT}}`, `${f}${R.DISCOUNT}`).replaceAll(`{${R.OMNIBUS_DISCOUNT}}`, `${f}${R.OMNIBUS_DISCOUNT}`).replaceAll(`{${R.OMNIBUS_PRICE}}`, `${f}${R.OMNIBUS_PRICE}`));
-        const $ = `${t}${a}${C.PARAGRAPH_END_TAG}`, g = `${T}${c ? $ : r}${y.ELSE}${t}${C.PARAGRAPH_END_TAG}${y.END_IF}`;
-        e = e.replace(r, g);
+        const u = I.substring(2);
+        let f = "";
+        o in $.IF && (f = $.IF[o].replaceAll(`{${R.DISCOUNT}}`, `${u}${R.DISCOUNT}`).replaceAll(`{${R.OMNIBUS_DISCOUNT}}`, `${u}${R.OMNIBUS_DISCOUNT}`).replaceAll(`{${R.OMNIBUS_PRICE}}`, `${u}${R.OMNIBUS_PRICE}`));
+        const g = `${m}${t}${h.PARAGRAPH_END_TAG}`, y = `${f}${r ? g : n}${$.ELSE}${m}${h.PARAGRAPH_END_TAG}${$.END_IF}`;
+        e = e.replace(n, y);
       }), e;
     },
     priority: 53
@@ -106,8 +106,8 @@ const w = [
     id: "strip-unused-recommendation-classes",
     description: "Remove CSS classes not referenced by any style rule from recommendation elements",
     type: "custom",
-    processor: (n) => {
-      let e = n.replace(
+    processor: (i) => {
+      let e = i.replace(
         / 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,
         ""
       );
@@ -119,8 +119,8 @@ const w = [
     id: "remove-empty-mobile-layout-artifacts",
     description: "Remove empty mobile container rows and unused mobile layout CSS",
     type: "custom",
-    processor: (n) => {
-      let e = n;
+    processor: (i) => {
+      let e = i;
       return e = e.replace(
         /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
         ""
@@ -129,9 +129,9 @@ const w = [
         ""
       ), e = e.replace(
         /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
-        (l, s) => {
-          const r = s.match(/[^{}]+\{[^{}]*\}/g) || [], i = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
-          return r.every((u) => i.test(u)) ? "" : l;
+        (p, c) => {
+          const n = c.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
+          return n.every((d) => a.test(d)) ? "" : p;
         }
       )), e;
     },
@@ -141,51 +141,57 @@ const w = [
     id: "deduplicate-inline-styles",
     description: "Replace repeated inline styles with CSS class references within recommendation blocks",
     type: "custom",
-    processor: (n) => {
-      const e = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, l = / style="([^"]*)"/g, s = /* @__PURE__ */ new Map();
-      let r = e.exec(n);
-      for (; r !== null; ) {
-        let t = l.exec(r[1]);
-        for (; t !== null; ) {
-          const [, o] = t;
-          s.set(o, (s.get(o) || 0) + 1), t = l.exec(r[1]);
+    processor: (i) => {
+      const e = i.replace(
+        /<a\b[^>]*\bes-button\b[^>]*>/g,
+        (o) => o.replace(
+          /([;"]color:)([^;"]+)/g,
+          (r, t, u) => u.includes("!important") ? r : `${t}${u} !important`
+        )
+      ), p = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, c = / style="([^"]*)"/g, n = /* @__PURE__ */ new Map();
+      let a = p.exec(e);
+      for (; a !== null; ) {
+        let o = c.exec(a[1]);
+        for (; o !== null; ) {
+          const [, r] = o;
+          n.set(r, (n.get(r) || 0) + 1), o = c.exec(a[1]);
         }
-        l.lastIndex = 0, r = e.exec(n);
+        c.lastIndex = 0, a = p.exec(e);
       }
-      const i = /* @__PURE__ */ new Map(), p = [];
-      let u = 0;
-      if (s.forEach((t, o) => {
-        if (t >= 6) {
-          const c = `rc${u++}`;
-          i.set(o, c), p.push(`.${c}{${o}}`);
+      const s = /* @__PURE__ */ new Map(), d = [];
+      let _ = 0;
+      if (n.forEach((o, r) => {
+        if (o >= 6) {
+          const t = `rc${_++}`;
+          s.set(r, t), d.push(`.${t}{${r}}`);
         }
-      }), i.size === 0) {
-        let t = n;
-        return t = t.replaceAll("<!--REC_START-->", ""), t = t.replaceAll("<!--REC_END-->", ""), t;
+      }), s.size === 0) {
+        let o = e;
+        return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
       }
-      const I = (t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), E = (t, o) => `${t.slice(0, -1)} ${o}"`, S = /* @__PURE__ */ new Map();
-      i.forEach((t, o) => {
-        const c = I(o);
-        S.set(o, {
-          caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${c}"`, "g"),
-          caseB: new RegExp(` style="${c}"((?:[^>]*?))(class="[^"]*")`, "g")
+      const A = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), I = (o, r) => `${o.slice(0, -1)} ${r}"`, S = /* @__PURE__ */ new Map();
+      s.forEach((o, r) => {
+        const t = A(r);
+        S.set(r, {
+          caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
+          caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
         });
       });
-      let m = n.replace("</style>", `${p.join("")}</style>`);
+      let m = e.replace("</style>", `${d.join("")}</style>`);
       return m = m.replace(
         /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
-        (t, o) => {
-          let c = o;
-          return i.forEach((a, f) => {
-            const T = S.get(f);
-            T.caseA.lastIndex = 0, c = c.replace(
-              T.caseA,
-              ($, g, b) => E(g, a) + b
-            ), T.caseB.lastIndex = 0, c = c.replace(
-              T.caseB,
-              ($, g, b) => g + E(b, a)
-            ), c = c.replaceAll(` style="${f}"`, ` class="${a}"`);
-          }), c;
+        (o, r) => {
+          let t = r;
+          return s.forEach((u, f) => {
+            const g = S.get(f);
+            t = t.replace(
+              g.caseA,
+              (y, b, l) => I(b, u) + l
+            ), t = t.replace(
+              g.caseB,
+              (y, b, l) => b + I(l, u)
+            ), t = t.replaceAll(` style="${f}"`, ` class="${u}"`);
+          }), t;
         }
       ), m = m.replaceAll("<!--REC_START-->", ""), m = m.replaceAll("<!--REC_END-->", ""), m;
     },

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,133 +1,135 @@
-import { useRecommendation as S } from "../../../composables/useRecommendation.js";
-function b(e, n, r, c) {
-  const u = `{{${e}_${n}_${r}}}`, t = `{{${e}_${n}_currency}}`;
-  return c === "before" ? `${t} ${u}` : `${u} ${t}`;
+import { useConfig as S } from "../../../composables/useConfig.js";
+import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
+function y(e, u, r, o, s = "") {
+  const n = `{{${s}${e}_${u}_${r}}}`, t = `{{${s}${e}_${u}_currency}}`;
+  return o === "before" ? `${t} ${n}` : `${n} ${t}`;
 }
-function p(e, n, r, c, u) {
-  switch (n) {
+function p(e, u, r, o, s, n) {
+  switch (u) {
     case "productImage": {
       const t = e.querySelector("img");
-      t && (t.setAttribute("src", `{{${r}_${c}_image_url}}`), t.setAttribute("alt", `{{${r}_${c}_name}}`));
-      const o = e.querySelector("a");
-      o && o.setAttribute("href", `{{${r}_${c}_url}}`);
+      t && (t.setAttribute("src", `{{${n}${r}_${o}_image_url}}`), t.setAttribute("alt", `{{${n}${r}_${o}_name}}`));
+      const c = e.querySelector("a");
+      c && c.setAttribute("href", `{{${n}${r}_${o}_url}}`);
       break;
     }
     case "productName": {
       const t = e.querySelector("p");
       if (t) {
-        const o = t.querySelector("strong") || t;
-        o.textContent = `{{${r}_${c}_name}}`;
+        const c = t.querySelector("strong") || t;
+        c.textContent = `{{${n}${r}_${o}_name}}`;
       }
       break;
     }
     case "productPrice": {
       const t = e.querySelector("p");
       if (t) {
-        const o = t.querySelector("strong") || t;
-        o.textContent = b(r, c, "price", u);
+        const c = t.querySelector("strong") || t;
+        c.textContent = y(r, o, "price", s, n);
       }
       break;
     }
     case "productOldPrice": {
       const t = e.querySelector("p");
       if (t) {
-        const o = t.querySelector("strong") || t;
-        o.textContent = b(
+        const c = t.querySelector("strong") || t;
+        c.textContent = y(
           r,
-          c,
+          o,
           "original_price",
-          u
+          s,
+          n
         ), t.setAttribute("product-attr", "discount");
       }
       break;
     }
     case "productButton": {
       const t = e.querySelector("a");
-      t && t.setAttribute("href", `{{${r}_${c}_url}}`);
+      t && t.setAttribute("href", `{{${n}${r}_${o}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
       const t = e.querySelector(".omnibus-price-value");
       if (t) {
-        t.textContent = `{{${r}_${c}_omnibus_price}}`;
-        const o = t.closest("p");
-        o && (o.setAttribute("product-attr", "omnibus_price"), o.setAttribute("composition", "true"));
+        t.textContent = `{{${n}${r}_${o}_omnibus_price}}`;
+        const c = t.closest("p");
+        c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
       }
       break;
     }
     case "productOmnibusDiscount": {
       const t = e.querySelector(".omnibus-discount-value");
       if (t) {
-        t.textContent = `{{${r}_${c}_omnibus_discount}}`;
-        const o = t.closest("p");
-        o && (o.setAttribute("product-attr", "omnibus_discount"), o.setAttribute("composition", "true"));
+        t.textContent = `{{${n}${r}_${o}_omnibus_discount}}`;
+        const c = t.closest("p");
+        c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
       }
       break;
     }
     default: {
       const t = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
       if (t) {
-        const o = t.getAttribute("product-attr"), s = t.querySelector("p");
-        if (s) {
-          const i = s.querySelector("strong") || s;
-          i.textContent = `{{${r}_${c}_${o}}}`;
+        const c = t.getAttribute("product-attr"), i = t.querySelector("p");
+        if (i) {
+          const a = i.querySelector("strong") || i;
+          a.textContent = `{{${n}${r}_${o}_${c}}}`;
         }
       }
       break;
     }
   }
 }
-function _(e, n, r) {
-  e.querySelectorAll(".recommendation-product-row").forEach((u, t) => {
-    u.querySelectorAll("[data-attribute-type]").forEach((s) => {
-      const i = s.getAttribute("data-attribute-type") || "", a = s.querySelectorAll(".attribute-cell");
-      a.length > 0 ? a.forEach((l) => {
-        p(l, i, n, t, r);
-      }) : p(s, i, n, t, r);
+function d(e, u, r, o) {
+  e.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
+    n.querySelectorAll("[data-attribute-type]").forEach((i) => {
+      const a = i.getAttribute("data-attribute-type") || "", b = i.querySelectorAll(".attribute-cell");
+      b.length > 0 ? b.forEach((l) => {
+        p(l, a, u, t, r, o);
+      }) : p(i, a, u, t, r, o);
     });
   });
 }
-function $(e, n, r) {
-  const c = e.querySelectorAll(".recommendation-product-row");
-  if (!c.length)
+function q(e, u, r, o) {
+  const s = e.querySelectorAll(".recommendation-product-row");
+  if (!s.length)
     return;
-  const [u] = c, t = u.querySelector("[data-attribute-type]"), o = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  c.forEach((s, i) => {
-    s.querySelectorAll("[data-attribute-type]").forEach((l) => {
-      const f = l.getAttribute("data-attribute-type") || "";
-      l.querySelectorAll(".attribute-cell").forEach((y, m) => {
-        const A = i * o + m;
-        p(y, f, n, A, r);
+  const [n] = s, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
+  s.forEach((i, a) => {
+    i.querySelectorAll("[data-attribute-type]").forEach((l) => {
+      const m = l.getAttribute("data-attribute-type") || "";
+      l.querySelectorAll(".attribute-cell").forEach(($, f) => {
+        const A = a * c + f;
+        p($, m, u, A, r, o);
       });
     });
   });
 }
-function d(e, n, r) {
-  e.querySelectorAll(".ins-recommendation-product-container").forEach((u) => {
-    $(u, n, r);
+function g(e, u, r, o) {
+  e.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
+    q(n, u, r, o);
   });
 }
-function q(e, n) {
-  const r = e.getAttribute("data-layout") || "grid", c = e.getAttribute("currency-alignment") || "after";
-  r === "list" ? _(e, n, c) : d(e, n, c);
+function h(e, u, r) {
+  const o = e.getAttribute("data-layout") || "grid", s = e.getAttribute("currency-alignment") || "after";
+  o === "list" ? d(e, u, s, r) : g(e, u, s, r);
 }
-function g(e, n) {
+function C(e, u) {
   const r = e.match(/<!DOCTYPE[^>]*>/i);
   return (r ? `${r[0]}
-` : "") + n.documentElement.outerHTML;
+` : "") + u.documentElement.outerHTML;
 }
-function E(e) {
-  const n = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(n, "text/html"), c = r.querySelectorAll(".recommendation-block-v2");
-  if (!c.length)
+function P(e) {
+  const u = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(u, "text/html"), o = r.querySelectorAll(".recommendation-block-v2");
+  if (!o.length)
     return e;
-  const { buildCampaignUrl: u } = S();
-  return c.forEach((o) => {
-    var i, a;
-    const s = o.getAttribute("recommendation-id");
-    s && ((i = o.parentNode) == null || i.insertBefore(r.createComment("REC_START"), o), (a = o.parentNode) == null || a.insertBefore(r.createComment("REC_END"), o.nextSibling), u(s), q(o, s));
-  }), g(n, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  const { buildCampaignUrl: s } = _(), { isFeatureEnabled: n } = S(), t = n("liquidSyntax") ? "reco_" : "";
+  return o.forEach((i) => {
+    var b, l;
+    const a = i.getAttribute("recommendation-id");
+    a && ((b = i.parentNode) == null || b.insertBefore(r.createComment("REC_START"), i), (l = i.parentNode) == null || l.insertBefore(r.createComment("REC_END"), i.nextSibling), s(a), h(i, a, t));
+  }), C(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
-  b as formatPriceVariable,
-  E as prepareRecommendationBlocks
+  y as formatPriceVariable,
+  P as prepareRecommendationBlocks
 };

package/dist/config/migrator/checkboxMigrator.js

@@ -11,6 +11,8 @@ class f {
     try {
       const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.checkbox-block");
       return i.length === 0 ? t : (i.forEach((r) => {
+        if (r.classList.contains("checkbox-block-v2"))
+          return;
         const n = r.getAttribute("id"), l = this.extractTextFromElement(r, "ins-title"), c = this.extractTextFromElement(r, "ins-description"), a = this.buildTextBlock(l), p = this.buildTextBlock(c), g = b.replace("{-{-TITLE-}-}", a).replace("{-{-DESCRIPTION-}-}", p), o = this.parser.parseFromString(
           `<table id="tempDoc"><tbody><tr>${g}</tr></tbody></table>`,
           "text/html"
@@ -22,7 +24,7 @@ class f {
     }
   }
   extractTextFromElement(t, e) {
-    var o, u;
+    var o, d;
     const i = t.querySelector(`.${e}`);
     if (!i)
       return {
@@ -41,13 +43,13 @@ class f {
         align: i.getAttribute("align") || "left",
         styles: ""
       };
-    const n = ((u = r.textContent) == null ? void 0 : u.trim()) || (e === "ins-title" ? "Title" : "Description"), l = r.getAttribute("style") || "", c = i.getAttribute("align") || r.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(l) || !!r.querySelector("b, strong"), p = /font-style\s*:\s*italic/i.test(l) || !!r.querySelector("i, em"), g = this.removeStyleProperties(l, ["font-weight", "font-style"]), d = this.convertInlineToBlock(g);
+    const n = ((d = r.textContent) == null ? void 0 : d.trim()) || (e === "ins-title" ? "Title" : "Description"), l = r.getAttribute("style") || "", c = i.getAttribute("align") || r.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(l) || !!r.querySelector("b, strong"), p = /font-style\s*:\s*italic/i.test(l) || !!r.querySelector("i, em"), g = this.removeStyleProperties(l, ["font-weight", "font-style"]), u = this.convertInlineToBlock(g);
     return {
       text: n,
       isBold: a,
       isItalic: p,
       align: c,
-      styles: d
+      styles: u
     };
   }
   buildTextBlock(t) {