@useinsider/guido 3.1.1-beta.5ad1748 → 3.1.1-beta.5b87594

package/dist/@types/config/schemas.js

@@ -121,7 +121,9 @@ const m = {
   /** Enable unsubscribe block */
   unsubscribe: e(a(), !0),
   /** Disable modules panel in the editor */
-  modulesDisabled: e(a(), !1)
+  modulesDisabled: e(a(), !1),
+  /** Enable Liquid template syntax */
+  liquidSyntax: e(a(), !1)
 }), g = n([
   "amp-accordion",
   "amp-carousel",
@@ -193,14 +195,14 @@ const m = {
     (i) => typeof i == "function",
     "processor must be a function"
   )
-}), U = k("type", [
+}), x = k("type", [
   M,
   N,
   D,
   v
-]), x = o({
+]), U = o({
   /** Custom compiler rules to apply */
-  customRules: e(c(U), []),
+  customRules: e(c(x), []),
   /** Skip default compiler rules */
   ignoreDefaultRules: e(a(), !1)
 }), B = o({
@@ -232,15 +234,15 @@ const m = {
   /** Block configuration */
   blocks: e(L, {}),
   /** Compiler configuration */
-  compiler: e(x, {}),
+  compiler: e(U, {}),
   /** Callbacks and event handlers */
   callbacks: e(B, {})
 });
 export {
   L as BlocksSchema,
   B as CallbacksSchema,
-  U as CompilerRuleSchema,
-  x as CompilerSchema,
+  x as CompilerRuleSchema,
+  U as CompilerSchema,
   O as CustomBlockTypeSchema,
   v as CustomRuleSchema,
   g as DefaultBlockTypeSchema,

package/dist/components/Guido.vue.js

@@ -3,7 +3,7 @@ import i from "./Guido.vue2.js";
 import a from "../_virtual/_plugin-vue2_normalizer.js";
 var t = function() {
   var o = this, r = o._self._c, e = o._self._setupProxy;
-  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(_) {
+  return r("div", { ref: "wrapperRef", staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(p) {
     return e.emit("onboarding:finished");
   } } }), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
 }, n = [], s = /* @__PURE__ */ a(
@@ -12,9 +12,9 @@ var t = function() {
   n,
   !1,
   null,
-  "a26d7792"
+  "25780af6"
 );
-const v = s.exports;
+const u = s.exports;
 export {
-  v as default
+  u as default
 };

package/dist/components/Guido.vue2.js

@@ -1,121 +1,131 @@
-import { defineComponent as K, defineAsyncComponent as _, ref as V, computed as P, watch as j, onMounted as q, onUnmounted as J } from "vue";
-import { provideGuidoActions as Q } from "../composables/useGuidoActions.js";
-import { usePartner as X } from "../composables/usePartner.js";
-import { useStripo as Y } from "../composables/useStripo.js";
-import { useTimerClone as Z } from "../composables/useTimerClone.js";
-import { migrate as A } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as N } from "../enums/defaults.js";
-import $ from "./organisms/base/Toaster.vue.js";
-import ee from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import oe from "./organisms/header/HeaderWrapper.vue.js";
-import te from "./organisms/LoadingWrapper.vue.js";
-import ne from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import se from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as re } from "../services/stripoApi.js";
-import { useConfigStore as ce } from "../stores/config.js";
-import { useDynamicContentStore as ae } from "../stores/dynamic-content.js";
-import { useEditorStore as ie } from "../stores/editor.js";
-import { usePreviewStore as me } from "../stores/preview.js";
-import { useUnsubscribeStore as de } from "../stores/unsubscribe.js";
-const Me = /* @__PURE__ */ K({
+import { defineComponent as j, defineAsyncComponent as R, ref as A, computed as I, watch as J, onMounted as Q, onUnmounted as X } from "vue";
+import { provideGuidoActions as Y } from "../composables/useGuidoActions.js";
+import { usePartner as Z } from "../composables/usePartner.js";
+import { useStripo as ee } from "../composables/useStripo.js";
+import { useTimerClone as te } from "../composables/useTimerClone.js";
+import { migrate as W } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as B } from "../enums/defaults.js";
+import { RIBBON_SELECTOR as oe } from "../enums/onboarding.js";
+import ne from "./organisms/base/Toaster.vue.js";
+import se from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import re from "./organisms/header/HeaderWrapper.vue.js";
+import ce from "./organisms/LoadingWrapper.vue.js";
+import ae from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import ie from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as me } from "../services/stripoApi.js";
+import { useConfigStore as de } from "../stores/config.js";
+import { useDynamicContentStore as le } from "../stores/dynamic-content.js";
+import { useEditorStore as ue } from "../stores/editor.js";
+import { usePreviewStore as pe } from "../stores/preview.js";
+import { useUnsubscribeStore as fe } from "../stores/unsubscribe.js";
+const Re = /* @__PURE__ */ j({
   __name: "Guido",
   props: {
     config: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(W, { expose: I, emit: t }) {
-    const v = W, O = _(
+  setup(H, { expose: x, emit: s }) {
+    const b = H, G = R(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), G = _(
+    ), z = R(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), h = V(), i = ae(), y = de(), s = ce();
-    s.init(v.config);
-    const m = ie(), H = me(), c = P(() => m.hasChanges), { isTestPartner: x } = X(), f = () => {
+    ), S = A(), d = A(), l = le(), g = fe(), a = de();
+    a.init(b.config);
+    const u = ue(), q = pe(), i = I(() => u.hasChanges), { isTestPartner: K } = Z(), w = () => {
       var e;
-      return (e = h.value) == null ? void 0 : e.handleSave(!0);
+      return (e = S.value) == null ? void 0 : e.handleSave(!0);
     }, {
-      templateId: d,
-      userId: b,
-      partnerName: S,
-      username: g,
-      template: o,
-      editor: n
-    } = s, a = (o == null ? void 0 : o.html) || "", D = (o == null ? void 0 : o.css) || "", l = (o == null ? void 0 : o.preselectedDynamicContent) || [], w = (n == null ? void 0 : n.savedModulesFolderName) || N.SAVED_MODULES, E = (n == null ? void 0 : n.defaultModulesFolderName) || N.DEFAULT_MODULES;
-    m.templateId = d;
-    const u = {
-      emailId: d,
-      userId: b,
-      username: g,
-      partnerName: S,
-      savedModulesFolderName: w,
-      defaultModulesFolderName: E
-    }, C = {
-      preselectedDynamicContentList: l,
+      templateId: p,
+      userId: E,
+      partnerName: D,
+      username: C,
+      template: t,
+      editor: r
+    } = a, m = (t == null ? void 0 : t.html) || "", T = (t == null ? void 0 : t.css) || "", f = (t == null ? void 0 : t.preselectedDynamicContent) || [], k = (r == null ? void 0 : r.savedModulesFolderName) || B.SAVED_MODULES, F = (r == null ? void 0 : r.defaultModulesFolderName) || B.DEFAULT_MODULES;
+    u.templateId = p;
+    const v = {
+      emailId: p,
+      userId: E,
+      username: C,
+      partnerName: D,
+      savedModulesFolderName: k,
+      defaultModulesFolderName: F
+    }, L = {
+      preselectedDynamicContentList: f,
       onReady: () => {
-        console.debug("guido:ready"), t("ready");
+        console.debug("guido:ready"), s("ready");
       }
-    }, { initPlugin: T } = Y(u, C), { getDefaultTemplate: k } = re(), { cloneTimersOnSave: F, hasTimerBlocks: U } = Z(), B = P(() => {
+    }, { initPlugin: U } = ee(v, L), { getDefaultTemplate: _ } = me(), { cloneTimersOnSave: M, hasTimerBlocks: O } = te(), V = I(() => {
       var e;
-      return !((e = s.ui) != null && e.showHeader);
+      return !((e = a.ui) != null && e.showHeader);
     });
-    Q({
+    Y({
       onBack: () => {
-        console.debug("guido:back"), t("back");
+        console.debug("guido:back"), s("back");
       },
       onSaveStart: () => {
-        console.debug("guido:save:start"), t("save:start");
+        console.debug("guido:save:start"), s("save:start");
       },
       onSaveComplete: (e) => {
-        const r = { ...e, metadata: u };
-        console.debug("guido:save:complete", r), t("save:complete", r);
+        const n = { ...e, metadata: v };
+        console.debug("guido:save:complete", n), s("save:complete", n);
       },
       onTestEmailClick: () => {
-        console.debug("guido:test-email:click"), t("test-email:click");
+        console.debug("guido:test-email:click"), s("test-email:click");
       }
     });
-    const L = (e) => {
-      console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, M = () => {
+    const P = (e) => {
+      console.debug("dynamic-content:close", e), l.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    }, N = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    j(() => c.value, () => {
-      t("on-change", c.value);
+    J(() => i.value, () => {
+      s("on-change", i.value);
     });
-    const p = (e) => {
-      const r = e, { attribute: R, position: z } = r.detail;
-      console.debug("dynamic-content:open", r.detail), t("dynamic-content:open", R, z);
+    const y = (e) => {
+      const n = e, { attribute: o, position: $ } = n.detail;
+      console.debug("dynamic-content:open", n.detail), s("dynamic-content:open", o, $);
     };
-    return q(async () => {
-      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
+    let c = null;
+    const h = () => {
+      var n;
+      const e = document.querySelector(oe);
+      (n = d.value) == null || n.style.setProperty("--ribbon-offset", `${(e == null ? void 0 : e.offsetHeight) ?? 0}px`);
+    };
+    return Q(async () => {
+      var n;
+      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), h();
+      const e = (n = d.value) == null ? void 0 : n.parentElement;
+      e && (c = new ResizeObserver(h), c.observe(e));
       try {
-        y.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
-        let e = {
-          html: a && await A(a),
-          css: D
+        g.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
+        let o = {
+          html: m && await W(m),
+          css: T
         };
-        e.html || (e = await k(), e.html = await A(e.html)), U(e.html) && (e.html = await F(e.html)), await T(e), i.selectedDynamicContentList = l;
-      } catch (e) {
-        console.error("Failed to initialize Stripo editor:", e);
+        o.html || (o = await _(), o.html = await W(o.html)), O(o.html) && (o.html = await M(o.html)), await U(o), l.selectedDynamicContentList = f;
+      } catch (o) {
+        console.error("Failed to initialize Stripo editor:", o);
       }
-      document.addEventListener("dynamic-content:open", p);
-    }), J(() => {
-      document.removeEventListener("dynamic-content:open", p);
+      document.addEventListener("dynamic-content:open", y);
+    }), X(() => {
+      c == null || c.disconnect(), document.removeEventListener("dynamic-content:open", y);
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-      s.reset();
-    }), I({
+      a.reset();
+    }), x({
       dynamicContent: {
-        insert: L,
-        close: M
+        insert: P,
+        close: N
       },
-      hasChanges: c,
-      saveSilent: f
-    }), { __sfc: !0, PreviewContainer: O, OnboardingWrapper: G, headerWrapperRef: h, dynamicContentStore: i, unsubscribeStore: y, props: v, configStore: s, editorStore: m, previewStore: H, hasChanges: c, isTestPartner: x, saveSilent: f, templateId: d, userId: b, partnerName: S, username: g, templateConfig: o, editorConfig: n, html: a, css: D, preselectedDynamicContentList: l, savedModulesFolderName: w, defaultModulesFolderName: E, emit: t, metadata: u, options: C, initPlugin: T, getDefaultTemplate: k, cloneTimersOnSave: F, hasTimerBlocks: U, noHeader: B, insertDynamicContent: L, closeDynamicContent: M, handleDynamicContentOpen: p, Toaster: $, FilterSelectionDrawer: ee, HeaderWrapper: oe, LoadingWrapper: te, SaveAsTemplateDrawer: ne, UnsubscribeWrapper: se };
+      hasChanges: i,
+      saveSilent: w
+    }), { __sfc: !0, PreviewContainer: G, OnboardingWrapper: z, headerWrapperRef: S, wrapperRef: d, dynamicContentStore: l, unsubscribeStore: g, props: b, configStore: a, editorStore: u, previewStore: q, hasChanges: i, isTestPartner: K, saveSilent: w, templateId: p, userId: E, partnerName: D, username: C, templateConfig: t, editorConfig: r, html: m, css: T, preselectedDynamicContentList: f, savedModulesFolderName: k, defaultModulesFolderName: F, emit: s, metadata: v, options: L, initPlugin: U, getDefaultTemplate: _, cloneTimersOnSave: M, hasTimerBlocks: O, noHeader: V, insertDynamicContent: P, closeDynamicContent: N, handleDynamicContentOpen: y, ribbonObserver: c, updateRibbonOffset: h, Toaster: ne, FilterSelectionDrawer: se, HeaderWrapper: re, LoadingWrapper: ce, SaveAsTemplateDrawer: ae, UnsubscribeWrapper: ie };
   }
 });
 export {
-  Me as default
+  Re as default
 };

package/dist/config/compiler/recommendationCompilerRules.js

@@ -1,18 +1,18 @@
-import { useRecommendation as f } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as P, REGEX as m, VerticalOrientation as g, CSS as e, ATTRIBUTES as a, CONDITIONS as A, HTML as h } from "../../enums/recommendation.js";
-import { prepareRecommendationBlocks as D } from "./utils/recommendationCompilerUtils.js";
-const G = [
+import { useRecommendation as N } from "../../composables/useRecommendation.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: (s) => {
-      let t = s;
-      return Object.entries(P).forEach(([, l]) => {
-        Object.entries(l).forEach(([n, o]) => {
-          t = t.replaceAll(o, `{{${n}}}`);
+    processor: (i) => {
+      let e = i;
+      return Object.entries(C).forEach(([, p]) => {
+        Object.entries(p).forEach(([c, n]) => {
+          e = e.replaceAll(n, `{{${c}}}`);
         });
-      }), t;
+      }), e;
     },
     priority: 50
   },
@@ -29,21 +29,21 @@ const G = [
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
-    processor: (s) => {
-      const { calculateCardWidth: t, getRecommendationCampaignData: l } = f();
-      let n = s;
-      const o = n.match(m.ID);
-      if (o) {
-        const d = [];
-        if (o.forEach((c) => {
-          const E = /recommendation-id="(.*?)"/i.exec(c), I = E ? E[1].trim() : "", p = l(I);
-          p.textTrimming && p.orientation === g && d.push(t(p));
-        }), d.length) {
-          const c = `width:${Math.min(...d)}px!important;`;
-          n = n.replace(e.REGULAR_NAME_HEIGHT, `${e.TRIMMED_NAME_HEIGHT} ${c} ${e.ELLIPSIS}`).replace(e.REGULAR_NAME_CONTAINER_HEIGHT, e.TRIMMED_NAME_CONTAINER_CSS).replace(e.RESPONSIVE_NAME_SIZE, `${e.RESPONSIVE_NAME_HEIGHT} ${c} ${e.ELLIPSIS}`).replace(e.RESPONSIVE_NAME_CONTAINER_HEIGHT, e.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 n;
+      return c;
     },
     priority: 52
   },
@@ -51,39 +51,153 @@ const G = [
     id: "prepare-recommendations",
     description: "Replacing product data with template variables in recommendation blocks",
     type: "custom",
-    processor: (s) => D(s),
+    processor: (i) => x(i),
     priority: 48
   },
   {
     id: "add-discount-conditions",
     description: "Adding discount conditions to the recommendation block",
     type: "custom",
-    processor: (s) => {
-      let t = s;
-      const l = t.match(m.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = f();
-      return l !== null && l.forEach((o) => {
-        const d = o.match(m.CUSTOM_FIELD);
-        if (!d)
+    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 [c] = d, E = c.match(m.CUSTOM_FIELD_INDEXES_PART), I = c.match(m.CUSTOM_FIELD_NAME_PART), p = o.match(m.ATTRIBUTE_PARAGRAPH_START_TAG);
-        if (!E || !I || !p)
+        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 [u] = E, [R] = I, [_] = p, T = R.substring(1, R.length - 2), S = _.match(m.COMPOSITION) !== null;
-        let i = c;
-        if (S) {
-          const $ = u.substring(2, u.length - 3), r = n($);
-          T === a.OMNIBUS_PRICE && (r.priceBeforeTextValue && (i = `${r.priceBeforeTextValue}${i}`), r.priceAfterTextValue && (i = `${i}${r.priceAfterTextValue}`)), T === a.OMNIBUS_DISCOUNT && (r.discountBeforeTextValue && (i = `${r.discountBeforeTextValue}${i}`), r.discountAfterTextValue && (i = `${i}${r.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 N = u.substring(2);
-        let M = "";
-        T in A.IF && (M = A.IF[T].replaceAll(`{${a.DISCOUNT}}`, `${N}${a.DISCOUNT}`).replaceAll(`{${a.OMNIBUS_DISCOUNT}}`, `${N}${a.OMNIBUS_DISCOUNT}`).replaceAll(`{${a.OMNIBUS_PRICE}}`, `${N}${a.OMNIBUS_PRICE}`));
-        const O = `${_}${i}${h.PARAGRAPH_END_TAG}`, C = `${M}${S ? O : o}${A.ELSE}${_}${h.PARAGRAPH_END_TAG}${A.END_IF}`;
-        t = t.replace(o, C);
-      }), t;
+        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
+  },
+  {
+    id: "strip-empty-omnibus-spans",
+    description: "Remove empty omnibus text-before and text-after span elements",
+    type: "regex",
+    pattern: '<span class="omnibus-text-(?:before|after)">\\s*</span>',
+    replacement: "",
+    flags: "g",
+    priority: 54
+  },
+  {
+    id: "strip-recommendation-editor-attributes",
+    description: "Strip editor-only attributes from compiled recommendation output",
+    type: "regex",
+    // eslint-disable-next-line @stylistic/max-len
+    pattern: '\\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"',
+    replacement: "",
+    flags: "g",
+    priority: 55
+  },
+  {
+    id: "strip-unused-recommendation-classes",
+    description: "Remove CSS classes not referenced by any style rule from recommendation elements",
+    type: "custom",
+    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,
+        ""
+      );
+      return e = e.replaceAll("es-button buy-button", "es-button"), e = e.replaceAll("ins-recommendation-product-container ", ""), e;
+    },
+    priority: 56
+  },
+  {
+    id: "remove-empty-mobile-layout-artifacts",
+    description: "Remove empty mobile container rows and unused mobile layout CSS",
+    type: "custom",
+    processor: (i) => {
+      let e = i;
+      return e = e.replace(
+        /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
+        ""
+      ), /class="[^"]*ins-recommendation-mobile-container/.test(e) || (e = e.replace(
+        /\.ins-recommendation-mobile-container\s*\{\s*display\s*:\s*none\s*;?\s*\}/g,
+        ""
+      ), e = e.replace(
+        /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
+        (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;
+    },
+    priority: 57
+  },
+  {
+    id: "deduplicate-inline-styles",
+    description: "Replace repeated inline styles with CSS class references within recommendation blocks",
+    type: "custom",
+    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]);
+        }
+        c.lastIndex = 0, a = p.exec(e);
+      }
+      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}}`);
+        }
+      }), s.size === 0) {
+        let o = e;
+        return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
+      }
+      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 = e.replace("</style>", `${d.join("")}</style>`);
+      return m = m.replace(
+        /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
+        (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;
+    },
+    priority: 58
   }
 ];
 export {
-  G as recommendationCompilerRules
+  w as recommendationCompilerRules
 };

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

@@ -1,22 +1,23 @@
-import { useRecommendation as $ } from "../../../composables/useRecommendation.js";
-function b(e, u, r, o) {
-  const n = `{{${e}_${u}_${r}}}`, t = `{{${e}_${u}_currency}}`;
+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, u, r, o, n) {
+function p(e, u, r, o, s, n) {
   switch (u) {
     case "productImage": {
       const t = e.querySelector("img");
-      t && (t.setAttribute("src", `{{${r}_${o}_image_url}}`), t.setAttribute("alt", `{{${r}_${o}_name}}`));
+      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", `{{${r}_${o}_url}}`);
+      c && c.setAttribute("href", `{{${n}${r}_${o}_url}}`);
       break;
     }
     case "productName": {
       const t = e.querySelector("p");
       if (t) {
         const c = t.querySelector("strong") || t;
-        c.textContent = `{{${r}_${o}_name}}`;
+        c.textContent = `{{${n}${r}_${o}_name}}`;
       }
       break;
     }
@@ -24,7 +25,7 @@ function p(e, u, r, o, n) {
       const t = e.querySelector("p");
       if (t) {
         const c = t.querySelector("strong") || t;
-        c.textContent = b(r, o, "price", n);
+        c.textContent = y(r, o, "price", s, n);
       }
       break;
     }
@@ -32,10 +33,11 @@ function p(e, u, r, o, n) {
       const t = e.querySelector("p");
       if (t) {
         const c = t.querySelector("strong") || t;
-        c.textContent = b(
+        c.textContent = y(
           r,
           o,
           "original_price",
+          s,
           n
         ), t.setAttribute("product-attr", "discount");
       }
@@ -43,13 +45,13 @@ function p(e, u, r, o, n) {
     }
     case "productButton": {
       const t = e.querySelector("a");
-      t && t.setAttribute("href", `{{${r}_${o}_url}}`);
+      t && t.setAttribute("href", `{{${n}${r}_${o}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
       const t = e.querySelector(".omnibus-price-value");
       if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_price}}`;
+        t.textContent = `{{${n}${r}_${o}_omnibus_price}}`;
         const c = t.closest("p");
         c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
       }
@@ -58,7 +60,7 @@ function p(e, u, r, o, n) {
     case "productOmnibusDiscount": {
       const t = e.querySelector(".omnibus-discount-value");
       if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_discount}}`;
+        t.textContent = `{{${n}${r}_${o}_omnibus_discount}}`;
         const c = t.closest("p");
         c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
       }
@@ -67,66 +69,67 @@ function p(e, u, r, o, n) {
     default: {
       const t = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
       if (t) {
-        const c = t.getAttribute("product-attr"), s = t.querySelector("p");
-        if (s) {
-          const i = s.querySelector("strong") || s;
-          i.textContent = `{{${r}_${o}_${c}}}`;
+        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 S(e, u, r) {
+function d(e, u, r, o) {
   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);
+    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, u, r) {
-  const o = e.querySelectorAll(".recommendation-product-row");
-  if (!o.length)
+function q(e, u, r, o) {
+  const s = e.querySelectorAll(".recommendation-product-row");
+  if (!s.length)
     return;
-  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);
+  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 q(e, u, r) {
+function g(e, u, r, o) {
   e.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
-    _(n, u, r);
+    q(n, u, r, o);
   });
 }
-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 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, u) {
+function C(e, u) {
   const r = e.match(/<!DOCTYPE[^>]*>/i);
   return (r ? `${r[0]}
 ` : "") + u.documentElement.outerHTML;
 }
-function E(e) {
+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: 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;", "%}");
+  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/enums/extensions/recommendationBlock.js

@@ -1,6 +1,8 @@
 const s = {
   RECOMMENDATION_API_URL: "https://recommendationv2.api.useinsider.com"
-}, i = [
+}, i = {
+  CLIENT_ID: "clientId"
+}, u = [
   { id: 11, key: "similarViewed", name: "Viewed Together", path: "viewed-together" },
   { id: 12, key: "similarBought", name: "Purchased Together", path: "purchased-together" },
   { id: 13, key: "userBased", name: "User Based", path: "user-based" },
@@ -11,13 +13,13 @@ const s = {
   { id: 46, key: "mostValuableOfPartner", name: "Most Valuable Products", path: "most-valuable" },
   { id: 61, key: "mostPopular", name: "Most Popular Items", path: "most-popular" },
   { id: 62, key: "mostPurchased", name: "Top Sellers", path: "top-sellers" }
-], u = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], l = [
+], l = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], c = [
   { text: "before the amount", value: "0" },
   { text: "after the amount", value: "1" }
-], c = [
+], d = [
   { text: "dot(.)", value: "." },
   { text: "comma(,)", value: "," }
-], d = [
+], p = [
   { text: "0", value: "0" },
   { text: "1", value: "1" },
   { text: "2", value: "2" },
@@ -46,7 +48,7 @@ const s = {
 ], n = [
   { text: "true", value: "==" },
   { text: "false", value: "!=" }
-], p = (t) => {
+], m = (t) => {
   if (!t)
     return e;
   switch (t) {
@@ -65,13 +67,14 @@ const s = {
   }
 };
 export {
-  u as PriceAttributes,
-  i as RecommendationFeedSourceMaps,
+  l as PriceAttributes,
+  i as QUERY_PARAMS,
+  u as RecommendationFeedSourceMaps,
   s as URLS,
-  d as currencyDecimalCounts,
-  l as currencyLocationMaps,
-  c as currencyOperators,
-  p as getOperatorOptions,
+  p as currencyDecimalCounts,
+  c as currencyLocationMaps,
+  d as currencyOperators,
+  m as getOperatorOptions,
   a as operatorOptionsForArrayOfStrings,
   n as operatorOptionsForBooleans,
   o as operatorOptionsForDates,

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: /{{[0-9]+_[0-8]_(discount|omnibus_discount|omnibus_price)}}/gm,
-  CUSTOM_FIELD_INDEXES_PART: /{{[0-9]+_[0-8]_/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_NAME_PART: /_(discount|omnibus_discount|omnibus_price)}}/gm
 }, n = {
   PARAGRAPH_END_TAG: "</p>"

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-acff76a8]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-acff76a8]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-25780af6]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-25780af6]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-25780af6]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/services/recommendationApi.js

@@ -1,34 +1,34 @@
-import { useHttp as c } from "../composables/useHttp.js";
-import { URLS as m } from "../enums/extensions/recommendationBlock.js";
-const f = () => {
-  const { get: o } = c();
+import { useHttp as a } from "../composables/useHttp.js";
+import { QUERY_PARAMS as d, URLS as h } from "../enums/extensions/recommendationBlock.js";
+const y = () => {
+  const { get: r } = a(), { get: s } = a({ headers: {} }), m = "6KcLM9TwheVB1mgK";
   return {
     fetchRecommendationCreateData: async () => {
       try {
-        return (await o("/newsletter/recommendations/create-data")).data;
+        return (await r("/newsletter/recommendations/create-data")).data;
       } catch (e) {
         throw console.error("fetchUserModalState error:", e), e;
       }
     },
     fetchRecommendationFilters: async () => {
       try {
-        const { data: e } = await o("/stripo/email-recommendation-attributes");
+        const { data: e } = await r("/stripo/email-recommendation-attributes");
         return e;
       } catch (e) {
         throw console.error("fetchRecommendationFilters error:", e), e;
       }
     },
-    fetchRecommendationProducts: async (e, a) => {
+    fetchRecommendationProducts: async (e, i) => {
       var n;
       try {
-        const t = decodeURIComponent(new URLSearchParams(Object.entries(a)).toString());
-        console.debug("🏁 Recommendation API Query:", t);
-        const { get: s } = c({
-          headers: {}
-        }), r = await s(
-          `${m.RECOMMENDATION_API_URL}/v2/${e}?${t}`
+        const t = new URLSearchParams(Object.entries(i));
+        t.set(d.CLIENT_ID, m);
+        const c = decodeURIComponent(t.toString());
+        console.debug("🏁 Recommendation API Query:", c);
+        const o = await s(
+          `${h.RECOMMENDATION_API_URL}/v2/${e}?${c}`
         );
-        return ((n = r == null ? void 0 : r.data) == null ? void 0 : n.data) ?? [];
+        return ((n = o == null ? void 0 : o.data) == null ? void 0 : n.data) ?? [];
       } catch (t) {
         throw console.error("fetchRecommendationProducts error:", t), t;
       }
@@ -36,5 +36,5 @@ const f = () => {
   };
 };
 export {
-  f as useRecommendationApi
+  y as useRecommendationApi
 };

package/dist/services/stripoApi.js

@@ -1,15 +1,15 @@
 import { useHttp as d } from "../composables/useHttp.js";
 import { useToaster as m } from "../composables/useToaster.js";
 import { MAX_DEFAULT_TEMPLATE_ID as y } from "../enums/defaults.js";
-import g from "../static/templates/empty/index.html.js";
-import f from "../static/templates/empty/style.css.js";
+import f from "../static/templates/empty/index.html.js";
+import g from "../static/templates/empty/style.css.js";
 const E = () => {
   const { get: s, post: c } = d(), { handleError: r } = m();
   return {
     getToken: async () => {
       try {
-        const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await s(`/stripo/get-user-token?test=${t}`);
-        return e.body.token;
+        const { data: t } = await s("/stripo/get-user-token");
+        return t.body.token;
       } catch (t) {
         return r(t, "Failed to fetch token"), "";
       }
@@ -27,14 +27,14 @@ const E = () => {
     },
     getDefaultTemplate: async () => {
       const t = {
-        html: g,
-        css: f
+        html: f,
+        css: g
       };
       try {
-        const e = new URLSearchParams(window.location.search), u = e.get("default-template"), l = e.get("master"), a = u ? parseInt(u) : 0, i = a >= 1 && a <= y ? a : 0;
-        if (!i && !l)
+        const e = new URLSearchParams(window.location.search), u = e.get("default-template"), p = e.get("master"), a = u ? parseInt(u) : 0, i = a >= 1 && a <= y ? a : 0;
+        if (!i && !p)
           return t;
-        const p = `/stripo/default-template/${i}`, { data: n } = await s(p), o = typeof n == "string" ? JSON.parse(n) : n;
+        const l = `/stripo/default-template/${i}`, { data: n } = await s(l), o = typeof n == "string" ? JSON.parse(n) : n;
         return !o || typeof o != "object" || !("html" in o) || !("css" in o) ? t : o;
       } catch (e) {
         return r(e, "Failed to fetch default template"), t;

package/dist/src/@types/config/schemas.d.ts

@@ -176,6 +176,8 @@ export declare const FeaturesSchema: v.ObjectSchema<{
     readonly unsubscribe: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
     /** Disable modules panel in the editor */
     readonly modulesDisabled: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
+    /** Enable Liquid template syntax */
+    readonly liquidSyntax: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
 }, undefined>;
 /**
  * Default block types available in Stripo
@@ -497,6 +499,8 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
         readonly unsubscribe: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
         /** Disable modules panel in the editor */
         readonly modulesDisabled: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
+        /** Enable Liquid template syntax */
+        readonly liquidSyntax: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
     }, undefined>, {}>;
     /** Block configuration */
     readonly blocks: v.OptionalSchema<v.ObjectSchema<{

package/dist/src/composables/useConfig.d.ts

@@ -61,6 +61,7 @@ export declare const useConfig: () => {
             displayConditions: boolean;
             unsubscribe: boolean;
             modulesDisabled: boolean;
+            liquidSyntax: boolean;
         };
         blocks: {
             excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -157,6 +158,7 @@ export declare const useConfig: () => {
         displayConditions: boolean;
         unsubscribe: boolean;
         modulesDisabled: boolean;
+        liquidSyntax: boolean;
     } | null>;
     blocks: import("vue").ComputedRef<{
         excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];

package/dist/src/config/compiler/utils/recommendationCompilerUtils.d.ts

@@ -6,7 +6,7 @@
  * @param alignment - Currency alignment from block config: 'before' or 'after'
  * @returns Formatted price string with currency variable in correct position
  */
-export declare function formatPriceVariable(campaignId: string, productIndex: number, attribute: string, alignment: string): string;
+export declare function formatPriceVariable(campaignId: string, productIndex: number, attribute: string, alignment: string, prefix?: string): string;
 /**
  * Transforms recommendation block HTML by replacing product data with
  * template variables.

package/dist/src/enums/extensions/recommendationBlock.d.ts

@@ -3,6 +3,9 @@ import type { RecommendationFeedItem } from '@@/Types/recommendation';
 export declare const URLS: {
     RECOMMENDATION_API_URL: string;
 };
+export declare const QUERY_PARAMS: {
+    CLIENT_ID: string;
+};
 export declare const RecommendationFeedSourceMaps: RecommendationFeedItem[];
 export declare const PriceAttributes: string[];
 export declare const currencyLocationMaps: TextValueObject[];

package/dist/src/stores/config.d.ts

@@ -66,6 +66,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -168,6 +169,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -270,6 +272,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -372,6 +375,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -474,6 +478,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -576,6 +581,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -678,6 +684,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -780,6 +787,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -882,6 +890,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -984,6 +993,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1086,6 +1096,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1188,6 +1199,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1290,6 +1302,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1392,6 +1405,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1494,6 +1508,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1596,6 +1611,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1698,6 +1714,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1800,6 +1817,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 displayConditions: boolean;
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
+                liquidSyntax: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];

package/dist/static/styles/base.css.js

@@ -1,11 +1,16 @@
-const t = `.amp-input-list,
+const n = `.amp-input-list,
 .button,
 .base-input,
 ue-stripe-thumb,
 .ue-stripe-thumb {
     transition: all .5s ease;
 }
+
+:host {
+    height: 100% !important;
+    min-height: 0 !important;
+}
 `;
 export {
-  t as default
+  n as default
 };

package/dist/utils/templatePreparation.js

@@ -1,44 +1,53 @@
-import { useActionsApi as S } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as f } from "../composables/useHtmlCompiler.js";
-import { useRecommendationExtensionStore as C } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useDynamicContentStore as T } from "../stores/dynamic-content.js";
-import { useUnsubscribeStore as x } from "../stores/unsubscribe.js";
-const h = () => {
-  const o = T(), e = x(), { getCompiledEmail: i, getTemplateData: s } = S(), { compileHtml: n } = f();
+import { useActionsApi as T } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as P } from "../composables/useHtmlCompiler.js";
+import { useRecommendationExtensionStore as A } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { DATA_ATTRIBUTES as l } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { parsePageList as h } from "../extensions/Blocks/Unsubscribe/utils/utils.js";
+import { useDynamicContentStore as C } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as D } from "../stores/unsubscribe.js";
+function x(i, e) {
+  const r = new DOMParser().parseFromString(i, "text/html").querySelectorAll(`[${l.PAGE_LIST}]`), n = [];
+  return r.forEach((t) => {
+    const o = t.getAttribute(l.PAGE_LIST);
+    o && n.push(...h(o));
+  }), e.filter((t) => n.includes(t));
+}
+const I = () => {
+  const i = C(), e = D(), { getCompiledEmail: a, getTemplateData: m } = T(), { compileHtml: r } = P();
   return {
     prepareTemplateDetails: async () => {
-      const { html: a, ampHtml: m = "", ampErrors: r = [] } = await i({
+      const { html: t, ampHtml: o = "", ampErrors: p = [] } = await a({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: c, css: l, syncModulesIds: p = [] } = await s();
+      }), { html: u, css: d, syncModulesIds: g = [] } = await m();
       e.selectedUnsubscribePages.length && await e.fetchTemplates();
-      const { compiledHtml: u, stats: t, appliedRules: d } = n(a), g = o.getSelectedDynamicContentList, b = C();
+      const { compiledHtml: c, stats: s, appliedRules: S } = r(t), b = i.getSelectedDynamicContentList, f = A();
       return console.debug("HTML Compilation Stats:", {
-        originalSize: t.originalSize,
-        compiledSize: t.compiledSize,
-        reduction: `${t.reductionPercentage.toFixed(2)}%`,
-        appliedRules: d,
-        executionTime: `${t.executionTime.toFixed(2)}ms`
+        originalSize: s.originalSize,
+        compiledSize: s.compiledSize,
+        reduction: `${s.reductionPercentage.toFixed(2)}%`,
+        appliedRules: S,
+        executionTime: `${s.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: g,
-        compiledHtml: u,
-        rawHtml: c,
-        css: l,
-        ampHtml: m,
-        ampErrors: r,
-        modules: p.map(Number),
+        dynamicContentList: b,
+        compiledHtml: c,
+        rawHtml: u,
+        css: d,
+        ampHtml: o,
+        ampErrors: p,
+        modules: g.map(Number),
         recommendation: {
-          campaignUrls: b.recommendationCampaignUrls,
+          campaignUrls: f.recommendationCampaignUrls,
           configs: {}
         },
         unsubscribe: {
           status: e.unsubscribePagesStatus,
-          config: e.selectedUnsubscribePages
+          config: x(c, e.selectedUnsubscribePages)
         }
       };
     }
   };
 };
 export {
-  h as useTemplatePreparation
+  I as useTemplatePreparation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.1.1-beta.5ad1748",
+  "version": "3.1.1-beta.5b87594",
   "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",