@useinsider/guido 3.1.1-beta.cdcd41d → 3.1.1-beta.d3c42de

package/dist/composables/useStripo.js

@@ -1,42 +1,42 @@
-import { useActionsApi as A } from "./useActionsApi.js";
-import { useBlocksConfig as F } from "./useBlocksConfig.js";
-import { useConfig as D } from "./useConfig.js";
-import { useCustomInterfaceAppearance as I } from "./useCustomInterfaceAppearance.js";
-import { useStripoEventHandler as P } from "./useStripoEventHandler.js";
-import { useToaster as U } from "./useToaster.js";
-import { localePatch as R } from "../config/i18n/index.js";
-import { displayConditions as H } from "../enums/displayConditions.js";
-import { useStripoApi as O } from "../services/stripoApi.js";
-import q from "../static/styles/customEditorStyle.css.js";
+import { useActionsApi as F } from "./useActionsApi.js";
+import { useBlocksConfig as D } from "./useBlocksConfig.js";
+import { useConfig as I } from "./useConfig.js";
+import { useCustomInterfaceAppearance as P } from "./useCustomInterfaceAppearance.js";
+import { useStripoEventHandler as U } from "./useStripoEventHandler.js";
+import { useToaster as R } from "./useToaster.js";
+import { localePatch as H } from "../config/i18n/index.js";
+import { displayConditions as q } from "../enums/displayConditions.js";
+import { useStripoApi as x } from "../services/stripoApi.js";
+import O from "../static/styles/customEditorStyle.css.js";
 import { useEditorStore as S } from "../stores/editor.js";
-import { dynamicContentToMergeTags as x } from "../utils/genericUtil.js";
-import L from "../package.json.js";
-const oe = (C, c) => {
-  const { features: l, template: E } = D(), { handleError: u } = U(), { getToken: h, getCustomFonts: w, getSyncModulesStatus: b } = O(), { handleEvent: k } = P(), { getStripoBlocksConfig: T } = F(), V = async (i, n = [], r = !1) => {
+import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
+import $ from "../package.json.js";
+const ie = (C, c) => {
+  const { features: l, template: E, isFeatureEnabled: h } = I(), { handleError: u } = R(), { getToken: b, getCustomFonts: w, getSyncModulesStatus: k } = x(), { handleEvent: T } = U(), { getStripoBlocksConfig: V } = D(), _ = async (i, n = [], r = !1) => {
     var f, g, y;
-    const e = S(), { html: m, css: a } = i, { baseBlocks: o, extensions: d } = await T(), p = ((f = l.value) == null ? void 0 : f.displayConditions) ?? !0, B = ((g = l.value) == null ? void 0 : g.modulesDisabled) ?? !1, v = ((y = E.value) == null ? void 0 : y.forceRecreate) ?? !1;
+    const e = S(), { html: m, css: a } = i, { baseBlocks: o, extensions: d } = await V(), p = ((f = l.value) == null ? void 0 : f.displayConditions) ?? !0, v = ((g = l.value) == null ? void 0 : g.modulesDisabled) ?? !1, M = ((y = E.value) == null ? void 0 : y.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: C,
         html: m,
         css: a,
-        forceRecreate: v,
+        forceRecreate: M,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
         mobileViewButtonSelector: ".guido__view-option-selection-mobile",
         desktopViewButtonSelector: ".guido__view-option-selection-desktop",
         codeEditorButtonSelector: "#guido__code-button",
-        customAppearanceMergetags: !0,
+        customAppearanceMergetags: !h("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: q,
+        customViewStyles: O,
         conditionsEnabled: p,
         customConditionsEnabled: p,
-        conditionCategories: H,
+        conditionCategories: q,
         enableXSSSecurity: !0,
-        modulesDisabled: B,
+        modulesDisabled: v,
         syncModulesEnabled: r,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
@@ -52,12 +52,12 @@ const oe = (C, c) => {
         },
         mergeTags: [
           {
-            entries: x(c.preselectedDynamicContentList)
+            entries: L(c.preselectedDynamicContentList)
           }
         ],
         async onTokenRefreshRequest(t) {
           try {
-            const s = await h();
+            const s = await b();
             t(s);
           } catch (s) {
             u(s, "Failed to refresh token");
@@ -65,8 +65,8 @@ const oe = (C, c) => {
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = I(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: M } = A();
-            t(), s(), M(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+            const { importCss: t } = P(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: A } = F();
+            t(), s(), A(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
               e.hasChanges = !1;
             }, 1e3);
           } catch (t) {
@@ -85,23 +85,23 @@ const oe = (C, c) => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: k,
+        onEvent: T,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
         extensions: d,
-        localePatch: R
+        localePatch: H
       }
     );
-  }, _ = (i) => new Promise((n, r) => {
+  }, B = (i) => new Promise((n, r) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
       i(), n();
       return;
     }
-    const e = L.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
+    const e = $.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
     o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
       i(), n();
     }, o.onerror = () => {
@@ -109,15 +109,15 @@ const oe = (C, c) => {
     }, document.body.appendChild(o);
   });
   return { initPlugin: async (i) => {
-    await _(async () => {
+    await B(async () => {
       const n = S(), [r, e] = await Promise.all([
         w(),
-        b()
+        k()
       ]);
-      n.syncModulesEnabled = e, await V(i, r, e);
+      n.syncModulesEnabled = e, await _(i, r, e);
     });
   } };
 };
 export {
-  oe as useStripo
+  ie as useStripo
 };

package/dist/composables/validators/useLiquidValidator.js

@@ -0,0 +1,36 @@
+import { ToasterTypeOptions as i } from "../../enums/toaster.js";
+import { base64EncodeWithSpecialChars as d } from "../../utils/base64.js";
+import { useHttp as u } from "../useHttp.js";
+import { useToaster as m } from "../useToaster.js";
+import { useTranslations as p } from "../useTranslations.js";
+const x = () => {
+  const { post: o } = u(), { showToaster: a } = m(), r = p();
+  return { validateLiquidSyntax: async (n) => {
+    var s;
+    const e = await o("/newsletter/contents/validate-syntax", [{
+      identifier: "default",
+      syntax: "liquid",
+      contents: {
+        subject: null,
+        preheader: null,
+        html: d(n),
+        ampHtml: null
+      }
+    }]);
+    if (!Array.isArray(e.data)) {
+      const l = e.data;
+      return a({
+        type: i.Alert,
+        message: l.message ?? r("journey-builder.liquid-validation-failed")
+      }), !1;
+    }
+    const [t] = e.data;
+    return t != null && t.success ? !0 : (a({
+      type: i.Alert,
+      message: ((s = t == null ? void 0 : t.errors) == null ? void 0 : s.html) ?? r("journey-builder.liquid-validation-failed")
+    }), !1);
+  } };
+};
+export {
+  x as useLiquidValidator
+};

package/dist/config/compiler/liquidCompilerRules.js

@@ -0,0 +1,15 @@
+import { COUPON_PLACEHOLDER_LIQUID as e, COUPON_PLACEHOLDER_DEFAULT as i } from "../../extensions/Blocks/CouponBlock/template.js";
+const o = [
+  {
+    id: "liquid-coupon-code",
+    description: "Replace legacy coupon placeholder with liquid syntax",
+    type: "replace",
+    search: i,
+    replacement: e,
+    replaceAll: !0,
+    priority: 50
+  }
+];
+export {
+  o as liquidCompilerRules
+};

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

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

package/dist/config/migrator/radioButtonMigrator.js

@@ -1,28 +1,30 @@
-var b = Object.defineProperty;
-var f = (r, t, e) => t in r ? b(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var x = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
+var x = Object.defineProperty;
+var f = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var b = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
 import h from "../../extensions/Blocks/RadioButton/template.js";
 class T {
   constructor() {
-    x(this, "parser");
+    b(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(t) {
     try {
       const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.radio-button-block");
       return i.length === 0 ? t : (i.forEach((s) => {
-        const o = s.getAttribute("id"), l = this.extractTextFromElement(s, "ins-title"), a = this.extractTextFromElement(s, "ins-description"), p = this.extractTextFromElement(s, "ins-subscribe"), u = this.extractTextFromElement(s, "ins-unsubscribe"), d = this.buildTextBlock(l), g = this.buildTextBlock(a), m = this.buildTextBlock({ ...p, classList: "" }), n = this.buildTextBlock({ ...u, classList: "" }), c = h.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", g).replace("{-{-YES-}-}", m).replace("{-{-NO-}-}", n), y = this.parser.parseFromString(
+        if (s.classList.contains("radio-button-v2"))
+          return;
+        const n = s.getAttribute("id"), l = this.extractTextFromElement(s, "ins-title"), a = this.extractTextFromElement(s, "ins-description"), p = this.extractTextFromElement(s, "ins-subscribe"), u = this.extractTextFromElement(s, "ins-unsubscribe"), d = this.buildTextBlock(l), g = this.buildTextBlock(a), m = this.buildTextBlock({ ...p, classList: "" }), o = this.buildTextBlock({ ...u, classList: "" }), c = h.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", g).replace("{-{-YES-}-}", m).replace("{-{-NO-}-}", o), y = this.parser.parseFromString(
           `<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".radio-button-v2");
-        y && s.parentNode && (y.setAttribute("id", o || ""), s.parentNode.replaceChild(y, s));
+        y && s.parentNode && (y.setAttribute("id", n || ""), s.parentNode.replaceChild(y, s));
       }), e.documentElement.outerHTML);
     } catch (e) {
       return console.error("RadioButtonMigrator failed:", e), t;
     }
   }
   extractTextFromElement(t, e) {
-    var n, c;
+    var o, c;
     const i = t.querySelector(`.${e}`);
     if (!i)
       return {
@@ -36,16 +38,16 @@ class T {
     const s = i.querySelector("p");
     if (!s)
       return {
-        text: ((n = i.textContent) == null ? void 0 : n.trim()) || (e === "ins-title" ? "Title" : "Description"),
+        text: ((o = i.textContent) == null ? void 0 : o.trim()) || (e === "ins-title" ? "Title" : "Description"),
         isBold: !1,
         isItalic: !1,
         align: i.getAttribute("align") || "left",
         styles: "",
         classList: ""
       };
-    const o = ((c = s.textContent) == null ? void 0 : c.trim()) || (e === "ins-title" ? "Title" : "Description"), l = s.getAttribute("style") || "", a = i.getAttribute("align") || s.getAttribute("align") || "left", p = /font-weight\s*:\s*bold/i.test(l) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(l) || !!s.querySelector("i, em"), d = this.removeStyleProperties(l, ["font-weight", "font-style"]), g = this.convertInlineToBlock(d), m = i.getAttribute("class") || "";
+    const n = ((c = s.textContent) == null ? void 0 : c.trim()) || (e === "ins-title" ? "Title" : "Description"), l = s.getAttribute("style") || "", a = i.getAttribute("align") || s.getAttribute("align") || "left", p = /font-weight\s*:\s*bold/i.test(l) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(l) || !!s.querySelector("i, em"), d = this.removeStyleProperties(l, ["font-weight", "font-style"]), g = this.convertInlineToBlock(d), m = i.getAttribute("class") || "";
     return {
-      text: o,
+      text: n,
       isBold: p,
       isItalic: u,
       align: a,
@@ -66,8 +68,8 @@ class T {
         `;
   }
   removeStyleProperties(t, e) {
-    return t ? e.reduce((s, o) => {
-      const l = new RegExp(`${o}\\s*:\\s*[^;]*;?`, "gi");
+    return t ? e.reduce((s, n) => {
+      const l = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
       return s.replace(l, "");
     }, t).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
   }

package/dist/enums/recommendation.js

@@ -28,8 +28,8 @@ const e = 20, s = 320, t = "vertical", m = {
   ATTRIBUTE_PARAGRAPH: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>[\S\s]*?<\/p>/gm,
   ATTRIBUTE_PARAGRAPH_START_TAG: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>/gm,
   COMPOSITION: /composition="true"/gm,
-  CUSTOM_FIELD: /{{(?:reco_)?[0-9]+_[0-8]_(discount|omnibus_discount|omnibus_price)}}/gm,
-  CUSTOM_FIELD_INDEXES_PART: /{{(?:reco_)?[0-9]+_[0-8]_/gm,
+  CUSTOM_FIELD: /{{[0-9]+_[0-8]_(discount|omnibus_discount|omnibus_price)}}/gm,
+  CUSTOM_FIELD_INDEXES_PART: /{{[0-9]+_[0-8]_/gm,
   CUSTOM_FIELD_NAME_PART: /_(discount|omnibus_discount|omnibus_price)}}/gm
 }, n = {
   PARAGRAPH_END_TAG: "</p>"

package/dist/extensions/Blocks/CouponBlock/template.js

@@ -1,29 +1,40 @@
-import { BlockType as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { COUPON_BLOCK_ID as e } from "./block.js";
-const t = `
-    <${o.BLOCK_TEXT}
+import { useConfig as n } from "../../../composables/useConfig.js";
+import { BlockType as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { COUPON_BLOCK_ID as t } from "./block.js";
+const c = "{@COUPON_CODE}", s = "{{ins_coupon_code}}";
+function l() {
+  const { isFeatureEnabled: o } = n();
+  return o("liquidSyntax") ? s : c;
+}
+function i(o) {
+  return `
+    <${e.BLOCK_TEXT}
         class="coupon-block ins-coupon-code coupon-block-v2 es-p10"
         align="center"
-        esd-extension-block-id="${e}">
+        esd-extension-block-id="${t}">
         <p
             path="1"
             contenteditable="false"
             style="font-size: 16px; color: #333333;">
-            <strong path="1,0">{@COUPON_CODE}</strong>
+            <strong path="1,0">${o}</strong>
         </p>
-    </${o.BLOCK_TEXT}>
-    `, l = `
+    </${e.BLOCK_TEXT}>
+    `;
+}
+const u = `
     <td
         class="coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block"
-        esd-extension-block-id="${e}"
+        esd-extension-block-id="${t}"
     >
         <p class="ins-title" contenteditable="false">{@COUPON_CODE}</p>
     </td>
 `;
-function s() {
-  return t;
+function d() {
+  return i(l());
 }
 export {
-  l as default,
-  s as getDefaultTemplate
+  c as COUPON_PLACEHOLDER_DEFAULT,
+  s as COUPON_PLACEHOLDER_LIQUID,
+  u as default,
+  d as getDefaultTemplate
 };

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

@@ -169,7 +169,7 @@ class q extends b {
       if (e && e.includes(a))
         return t;
     }
-    return "querySelector" in t ? t.querySelector(`.${a}`) : null;
+    return "querySelector" in t ? t.querySelector(`.${a}`) ?? null : null;
   }
   /**
    * Migrate configuration from legacy format

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

@@ -1,26 +1,42 @@
-const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", t = ".ins-recommendation-mobile-container", n = ".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 = {
   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", O = "productName", _ = "productPrice", e = "productOldPrice", s = "productOmnibusPrice", C = "productOmnibusDiscount", E = "productButton", A = "customAttr:", i = "data-custom-attributes", u = "product-attr";
+}, 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([
+  "name",
+  // productName
+  "price",
+  // productPrice
+  "original_price",
+  // productOldPrice
+  "image_url",
+  // productImage
+  "url",
+  // productButton
+  "omnibus_price",
+  // productOmnibusPrice
+  "omnibus_discount"
+  // productOmnibusDiscount
+]);
 export {
   A as ATTR_CUSTOM_PREFIX,
-  i as ATTR_DATA_CUSTOM_ATTRIBUTES,
+  C as ATTR_DATA_CUSTOM_ATTRIBUTES,
   u as ATTR_PRODUCT_ATTR,
   E as ATTR_PRODUCT_BUTTON,
-  r as ATTR_PRODUCT_IMAGE,
-  O as ATTR_PRODUCT_NAME,
-  e as ATTR_PRODUCT_OLD_PRICE,
-  C as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  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,
-  _ as ATTR_PRODUCT_PRICE,
+  e as ATTR_PRODUCT_PRICE,
   T as BLOCK_ROOT_SELECTOR,
+  m as BUILT_IN_DEFAULT_ATTRIBUTES,
   c as CONTAINER_SELECTOR,
-  R as CURRENCY_ATTR,
+  r as CURRENCY_ATTR,
   o as DESKTOP_CONTAINER_SELECTOR,
-  t as MOBILE_CONTAINER_SELECTOR,
-  n as MOBILE_ROW_SELECTOR
+  n as MOBILE_CONTAINER_SELECTOR,
+  t as MOBILE_ROW_SELECTOR
 };