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

package/README.md

@@ -143,6 +143,7 @@ const config: GuidoConfigInput = {
     displayConditions?: boolean,  // Default: true
     unsubscribe?: boolean,        // Default: true
     modulesDisabled?: boolean,    // Default: false - Disable modules panel
+    liquidSyntax?: boolean,      // Default: false - Enable Liquid template syntax
   },
 
   // Optional: Callbacks

package/dist/components/organisms/header/EditorActions.vue.js

@@ -4,7 +4,7 @@ import d from "../../../_virtual/_plugin-vue2_normalizer.js";
 var u = function() {
   var s, i, n, a;
   var o = this, e = o._self._c, t = o._self._setupProxy;
-  return e("div", { staticClass: "d-f editor-actions" }, [t.isVersionHistoryButtonVisible ? e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : o._e(), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = (s = t.config) == null ? void 0 : s.features) != null && i.saveAsTemplate ? e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : o._e(), (a = (n = t.config) == null ? void 0 : n.features) != null && a.testMessage ? e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.testEmailClick } }) : o._e(), t.editorStore.isPreviewModeOpen ? o._e() : e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(r) {
+  return e("div", { staticClass: "d-f editor-actions" }, [t.isVersionHistoryButtonVisible ? e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : o._e(), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = (s = t.config) == null ? void 0 : s.features) != null && i.saveAsTemplate ? e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : o._e(), (a = (n = t.config) == null ? void 0 : n.features) != null && a.testMessage ? e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.handleTestEmail } }) : o._e(), t.editorStore.isPreviewModeOpen ? o._e() : e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(r) {
     return t.handleSave(!1);
   } } }), e(t.MigrationConfirmModal, { ref: "migrationModalRef", on: { confirm: function(r) {
     return t.executeSave(!1);
@@ -15,7 +15,7 @@ var u = function() {
   p,
   !1,
   null,
-  "acff76a8"
+  "4e2a4adb"
 );
 const v = c.exports;
 export {

package/dist/components/organisms/header/EditorActions.vue2.js

@@ -1,51 +1,66 @@
-import { defineComponent as E, ref as n, computed as g } from "vue";
-import { useConfig as w } from "../../../composables/useConfig.js";
-import { useExport as C } from "../../../composables/useExport.js";
-import { useTestEmailClick as M } from "../../../composables/useGuidoActions.js";
-import { useSave as O } from "../../../composables/useSave.js";
-import { useTranslations as A } from "../../../composables/useTranslations.js";
-import { useVersionHistoryApi as k } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as B } from "../../../stores/editor.js";
-import { useTemplateStore as R } from "../../../stores/template.js";
-import { getTooltipOptions as b } from "../../../utils/tooltipUtils.js";
-import { InButtonV2 as D } from "@useinsider/design-system-vue";
-import { storeToRefs as I } from "pinia";
-import P from "./MigrationConfirmModal.vue.js";
-const Z = /* @__PURE__ */ E({
+import { defineComponent as O, ref as n, computed as h } from "vue";
+import { useActionsApi as q } from "../../../composables/useActionsApi.js";
+import { useConfig as b } from "../../../composables/useConfig.js";
+import { useExport as k } from "../../../composables/useExport.js";
+import { useTestEmailClick as B } from "../../../composables/useGuidoActions.js";
+import { useHtmlCompiler as D } from "../../../composables/useHtmlCompiler.js";
+import { useSave as F } from "../../../composables/useSave.js";
+import { useTranslations as L } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as R } from "../../../composables/useVersionHistoryApi.js";
+import { useLiquidValidator as z } from "../../../composables/validators/useLiquidValidator.js";
+import { useEditorStore as I } from "../../../stores/editor.js";
+import { useTemplateStore as P } from "../../../stores/template.js";
+import { getTooltipOptions as j } from "../../../utils/tooltipUtils.js";
+import { InButtonV2 as G } from "@useinsider/design-system-vue";
+import { storeToRefs as J } from "pinia";
+import K from "./MigrationConfirmModal.vue.js";
+const ut = /* @__PURE__ */ O({
   __name: "EditorActions",
-  setup(j, { expose: H }) {
-    const { config: a } = w(), { exportHtml: m } = C(), { save: p } = O(), { openVersionHistory: l, closeVersionHistory: u } = k(), e = B(), c = R(), { hasMigrations: f } = I(c), r = A(), s = n(!1), i = n(!1), v = n(), S = M(), V = () => {
+  setup(N, { expose: x }) {
+    const { config: a, isFeatureEnabled: l } = b(), { exportHtml: m } = k(), { save: u } = F(), { openVersionHistory: c, closeVersionHistory: p } = R(), { getCompiledEmail: f } = q(), { compileHtml: d } = D(), { validateLiquidSyntax: v } = z(), e = I(), y = P(), { hasMigrations: S } = J(y), s = L(), i = n(!1), r = n(!1), g = n(), H = B(), T = () => {
       if (e.isVersionHistoryOpen) {
-        u();
+        p();
         return;
       }
-      l();
-    }, T = async () => {
-      s.value = !0, await m(), s.value = !1;
+      c();
+    }, w = async () => {
+      i.value = !0, await m(), i.value = !1;
     }, _ = () => {
       e.isSaveAsTemplateDrawerOpen = !0;
-    }, h = g(() => e.isVersionHistoryOpen ? r("newsletter.close-version-history") : r("newsletter.version-history")), x = g(
+    }, C = h(() => e.isVersionHistoryOpen ? s("newsletter.close-version-history") : s("newsletter.version-history")), A = h(
       () => {
-        var o, t;
-        return ((t = (o = a.value) == null ? void 0 : o.features) == null ? void 0 : t.versionHistory) && !e.isPreviewModeOpen;
+        var t, o;
+        return ((o = (t = a.value) == null ? void 0 : t.features) == null ? void 0 : o.versionHistory) && !e.isPreviewModeOpen;
       }
-    ), d = async (o) => {
-      i.value = !0, e.loadingStatus = !0;
-      const t = await p(o);
-      return i.value = !1, (o || !t) && (e.loadingStatus = !1), t;
-    }, y = (o) => {
-      var t;
-      if (!o && f.value) {
-        (t = v.value) == null || t.open();
+    ), V = async (t) => {
+      r.value = !0, e.loadingStatus = !0;
+      const o = await u(t);
+      return r.value = !1, (t || !o) && (e.loadingStatus = !1), o;
+    }, E = (t) => {
+      var o;
+      if (!t && S.value) {
+        (o = g.value) == null || o.open();
         return;
       }
-      return d(o);
+      return V(t);
+    }, M = async () => {
+      if (l("liquidSyntax")) {
+        e.loadingStatus = !0;
+        try {
+          const { html: t } = await f({ minimize: !0, resetDataSavedFlag: !1 }), { compiledHtml: o } = d(t);
+          if (!await v(o))
+            return;
+        } finally {
+          e.loadingStatus = !1;
+        }
+      }
+      H();
     };
-    return H({
-      handleSave: y
-    }), { __sfc: !0, config: a, exportHtml: m, save: p, openVersionHistory: l, closeVersionHistory: u, editorStore: e, templateStore: c, hasMigrations: f, trans: r, isExporting: s, isSaving: i, migrationModalRef: v, testEmailClick: S, handleVersionHistory: V, handleExport: T, handleSaveAs: _, versionHistoryTooltipText: h, isVersionHistoryButtonVisible: x, executeSave: d, handleSave: y, getTooltipOptions: b, InButtonV2: D, MigrationConfirmModal: P };
+    return x({
+      handleSave: E
+    }), { __sfc: !0, config: a, isFeatureEnabled: l, exportHtml: m, save: u, openVersionHistory: c, closeVersionHistory: p, getCompiledEmail: f, compileHtml: d, validateLiquidSyntax: v, editorStore: e, templateStore: y, hasMigrations: S, trans: s, isExporting: i, isSaving: r, migrationModalRef: g, testEmailClick: H, handleVersionHistory: T, handleExport: w, handleSaveAs: _, versionHistoryTooltipText: C, isVersionHistoryButtonVisible: A, executeSave: V, handleSave: E, handleTestEmail: M, getTooltipOptions: j, InButtonV2: G, MigrationConfirmModal: K };
   }
 });
 export {
-  Z as default
+  ut as default
 };

package/dist/components/organisms/header/RightSlot.vue.js

@@ -1,17 +1,17 @@
-import o from "./RightSlot.vue2.js";
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
-  var r = this, t = r._self._c, e = r._self._setupProxy;
-  return t("div", { staticClass: "d-f" }, [e.editorStore.isVersionHistoryOpen ? t(e.RestoreButton) : t(e.EditorActions, { ref: "editorActionsRef" })], 1);
-}, i = [], _ = /* @__PURE__ */ s(
-  o,
-  n,
+import i from "./RightSlot.vue2.js";
+import r from "../../../_virtual/_plugin-vue2_normalizer.js";
+var o = function() {
+  var s = this, e = s._self._c, t = s._self._setupProxy;
+  return e("div", { staticClass: "d-f a-i-c" }, [t.isLiquidEnabled && !t.editorStore.isVersionHistoryOpen ? e(t.InChips, { staticClass: "mr-3", attrs: { id: "guido__liquid-tag-chip", styles: "stroke", type: "default", value: "liquid-tags", "close-button": !1, "disabled-status": t.editorStore.loadingStatus, interactive: !1, text: t.trans("email-editor.liquid-tags-enabled") } }) : s._e(), t.editorStore.isVersionHistoryOpen ? e(t.RestoreButton) : e(t.EditorActions, { ref: "editorActionsRef" })], 1);
+}, a = [], n = /* @__PURE__ */ r(
   i,
+  o,
+  a,
   !1,
   null,
   null
 );
-const l = _.exports;
+const u = n.exports;
 export {
-  l as default
+  u as default
 };

package/dist/components/organisms/header/RightSlot.vue2.js

@@ -1,19 +1,22 @@
-import { defineComponent as i, ref as s } from "vue";
-import { useEditorStore as m } from "../../../stores/editor.js";
-import f from "./EditorActions.vue.js";
-import a from "./version-history/RestoreButton.vue.js";
-const l = /* @__PURE__ */ i({
+import { defineComponent as a, ref as f, computed as p } from "vue";
+import { useConfig as u } from "../../../composables/useConfig.js";
+import { useTranslations as d } from "../../../composables/useTranslations.js";
+import { useEditorStore as c } from "../../../stores/editor.js";
+import { InChips as l } from "@useinsider/design-system-vue";
+import _ from "./EditorActions.vue.js";
+import S from "./version-history/RestoreButton.vue.js";
+const x = /* @__PURE__ */ a({
   __name: "RightSlot",
-  setup(p, { expose: e }) {
-    const r = m(), o = s(null);
-    return e({
-      handleSave: (n) => {
-        var t;
-        return (t = o.value) == null ? void 0 : t.handleSave(n);
+  setup(h, { expose: r }) {
+    const { isFeatureEnabled: o } = u(), n = d(), i = c(), t = f(null), s = p(() => o("liquidSyntax"));
+    return r({
+      handleSave: (m) => {
+        var e;
+        return (e = t.value) == null ? void 0 : e.handleSave(m);
       }
-    }), { __sfc: !0, editorStore: r, editorActionsRef: o, EditorActions: f, RestoreButton: a };
+    }), { __sfc: !0, isFeatureEnabled: o, trans: n, editorStore: i, editorActionsRef: t, isLiquidEnabled: s, InChips: l, EditorActions: _, RestoreButton: S };
   }
 });
 export {
-  l as default
+  x as default
 };

package/dist/components/organisms/save-as-template/SaveAsTemplateDrawer.vue2.js

@@ -10,29 +10,29 @@ import { useDebounceFn as V } from "../../../node_modules/@vueuse/shared/index.j
 const H = /* @__PURE__ */ A({
   __name: "SaveAsTemplateDrawer",
   setup(E) {
-    const s = O(), o = D(), t = k(), { createTemplate: m } = B(), a = c(!1), n = c(!1), r = c(""), f = b(() => ({
+    const o = O(), n = D(), t = k(), { createTemplate: m } = B(), a = c(!1), r = c(!1), l = c(""), f = b(() => ({
       primaryButton: {
         styling: "solid",
         type: "primary",
-        labelText: s(a.value ? "newsletter.saving" : "products.save"),
+        labelText: o(a.value ? "newsletter.saving" : "products.save"),
         loadingStatus: a.value,
         disabledStatus: t.skeletonStatus
       },
       cancelOrBackButton: {
         styling: "ghost",
         type: "secondary",
-        labelText: s("products.cancel"),
+        labelText: o("products.cancel"),
         disabledStatus: a.value
       }
-    })), p = () => {
-      r.value = "", o.isSaveAsTemplateDrawerOpen = !1;
-    }, l = async () => {
-      const e = h(t, "templateName"), { success: i, errorMessage: _ } = await x(e).validate();
-      return r.value = _, i;
+    })), u = () => {
+      l.value = "", n.isSaveAsTemplateDrawerOpen = !1;
+    }, i = async () => {
+      const e = h(t, "templateName"), { success: s, errorMessage: _ } = await x(e).validate();
+      return l.value = _, s;
     }, v = V(async (e) => {
-      t.templateName = e, await l();
+      t.templateName = e, await i();
     }, 500), g = async (e) => {
-      n.value = !0, await t.addCategory(e), n.value = !1;
+      r.value = !0, await t.addCategory(e), r.value = !1;
     }, y = (e) => {
       t.selectedCategories = e;
     }, S = (e) => {
@@ -40,22 +40,23 @@ const H = /* @__PURE__ */ A({
     }, T = () => {
       t.selectedCategories = [];
     }, w = async () => {
-      if (a.value = !0, !await l()) {
+      if (a.value = !0, !await i()) {
         a.value = !1;
         return;
       }
-      await m(), a.value = !1, p();
-    }, u = () => {
+      const s = await m();
+      a.value = !1, s && u();
+    }, p = () => {
       C(() => {
         const e = document.querySelector("input#guido__template-name-input");
         e == null || e.focus();
       });
     }, d = async () => {
-      t.$reset(), await t.fetchCategories(), t.skeletonStatus = !1, u();
+      t.$reset(), await t.fetchCategories(), t.skeletonStatus = !1, p();
     };
-    return o.$subscribe((e, { isSaveAsTemplateDrawerOpen: i }) => {
-      i && d();
-    }), { __sfc: !0, trans: s, editorStore: o, saveAsTemplateStore: t, createTemplate: m, isSaving: a, isAddingOption: n, templateNameError: r, footerButtonGroupOptions: f, closeModal: p, validateTemplateName: l, handleTemplateName: v, handleAddOption: g, handleCategoryChange: y, handleSelectAllOptions: S, handleResetAllOptions: T, saveTemplate: w, focusToInput: u, initializeDrawer: d, WpDrawer: N, InBasicTextInput: M, InMultiSelect: I };
+    return n.$subscribe((e, { isSaveAsTemplateDrawerOpen: s }) => {
+      s && d();
+    }), { __sfc: !0, trans: o, editorStore: n, saveAsTemplateStore: t, createTemplate: m, isSaving: a, isAddingOption: r, templateNameError: l, footerButtonGroupOptions: f, closeModal: u, validateTemplateName: i, handleTemplateName: v, handleAddOption: g, handleCategoryChange: y, handleSelectAllOptions: S, handleResetAllOptions: T, saveTemplate: w, focusToInput: p, initializeDrawer: d, WpDrawer: N, InBasicTextInput: M, InMultiSelect: I };
   }
 });
 export {

package/dist/composables/useHtmlCompiler.js

@@ -1,28 +1,30 @@
-import { defaultHtmlCompilerRules as n } from "../config/compiler/htmlCompilerRules.js";
-import { itemsCompilerRules as a } from "../config/compiler/itemsCompilerRules.js";
-import { outlookCompilerRules as f } from "../config/compiler/outlookCompilerRules.js";
-import { recommendationCompilerRules as R } from "../config/compiler/recommendationCompilerRules.js";
-import { socialCompilerRules as C } from "../config/compiler/socialCompilerRules.js";
+import { defaultHtmlCompilerRules as c } from "../config/compiler/htmlCompilerRules.js";
+import { itemsCompilerRules as f } from "../config/compiler/itemsCompilerRules.js";
+import { liquidCompilerRules as R } from "../config/compiler/liquidCompilerRules.js";
+import { outlookCompilerRules as C } from "../config/compiler/outlookCompilerRules.js";
+import { recommendationCompilerRules as d } from "../config/compiler/recommendationCompilerRules.js";
+import { socialCompilerRules as b } from "../config/compiler/socialCompilerRules.js";
 import { unsubscribeCompilerRules as g } from "../config/compiler/unsubscribeCompilerRules.js";
 import { createHtmlCompiler as H } from "../utils/htmlCompiler.js";
-import { useConfig as b } from "./useConfig.js";
-const q = () => {
+import { useConfig as v } from "./useConfig.js";
+const w = () => {
   var l, m, r;
-  const { compiler: e, partner: t } = b(), i = ((l = e.value) == null ? void 0 : l.customRules) || [], s = [
-    ...!!((m = e.value) != null && m.ignoreDefaultRules) ? [] : n,
-    ...R,
+  const { compiler: e, isFeatureEnabled: t, partner: i } = v(), s = ((l = e.value) == null ? void 0 : l.customRules) || [], u = [
+    ...!!((m = e.value) != null && m.ignoreDefaultRules) ? [] : c,
+    ...d,
     ...g,
-    ...a,
     ...f,
     ...C,
-    ...i.map((o, c) => ({
+    ...b,
+    ...t("liquidSyntax") ? R : [],
+    ...s.map((o, a) => ({
       ...o,
-      priority: o.priority + 1e3 + c
+      priority: o.priority + 1e3 + a
       // Ensure additional rules run after default rules
     }))
-  ], p = H(s), u = (r = t.value) == null ? void 0 : r.fallbackFont;
-  return { compileHtml: (o) => p.compile(o, void 0, u) };
+  ], p = H(u), n = (r = i.value) == null ? void 0 : r.fallbackFont;
+  return { compileHtml: (o) => p.compile(o, void 0, n) };
 };
 export {
-  q as useHtmlCompiler
+  w as useHtmlCompiler
 };

package/dist/composables/useSave.js

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

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 { 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) => {
-    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;
+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 q } from "../config/i18n/index.js";
+import { displayConditions as x } from "../enums/displayConditions.js";
+import { useStripoApi as H } from "../services/stripoApi.js";
+import O from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as C } from "../stores/editor.js";
+import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
+import $ from "../package.json.js";
+const ie = (E, c) => {
+  const { features: l, template: h, isFeatureEnabled: u } = I(), { handleError: m } = R(), { getToken: b, getCustomFonts: w, getSyncModulesStatus: k } = H(), { handleEvent: T } = U(), { getStripoBlocksConfig: V } = D(), _ = async (i, n = [], r = !1) => {
+    var g, y, S;
+    const e = C(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await V(), f = ((g = l.value) == null ? void 0 : g.displayConditions) ?? !0, v = ((y = l.value) == null ? void 0 : y.modulesDisabled) ?? !1, M = ((S = h.value) == null ? void 0 : S.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: C,
-        html: m,
+        metadata: E,
+        html: p,
         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: !u("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: q,
-        conditionsEnabled: p,
-        customConditionsEnabled: p,
-        conditionCategories: H,
+        customViewStyles: O,
+        conditionsEnabled: f,
+        customConditionsEnabled: f,
+        conditionCategories: x,
         enableXSSSecurity: !0,
-        modulesDisabled: B,
+        modulesDisabled: v,
         syncModulesEnabled: r,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
@@ -52,25 +52,28 @@ const oe = (C, c) => {
         },
         mergeTags: [
           {
-            entries: x(c.preselectedDynamicContentList)
+            entries: L(
+              c.preselectedDynamicContentList,
+              u("liquidSyntax")
+            )
           }
         ],
         async onTokenRefreshRequest(t) {
           try {
-            const s = await h();
+            const s = await b();
             t(s);
           } catch (s) {
-            u(s, "Failed to refresh token");
+            m(s, "Failed to refresh token");
           }
         },
         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) {
-            u(t, "Failed to load custom interface appearance");
+            m(t, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(t) {
@@ -85,23 +88,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: q
       }
     );
-  }, _ = (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 +112,15 @@ const oe = (C, c) => {
     }, document.body.appendChild(o);
   });
   return { initPlugin: async (i) => {
-    await _(async () => {
-      const n = S(), [r, e] = await Promise.all([
+    await B(async () => {
+      const n = C(), [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,42 @@
+import { ToasterTypeOptions as a } from "../../enums/toaster.js";
+import { base64EncodeWithSpecialChars as u } from "../../utils/base64.js";
+import { useHttp as d } from "../useHttp.js";
+import { useToaster as c } from "../useToaster.js";
+import { useTranslations as p } from "../useTranslations.js";
+const v = () => {
+  const { post: i } = d(), { showToaster: e } = c(), s = p();
+  return { validateLiquidSyntax: async (o) => {
+    try {
+      const t = await i("/newsletter/contents/validate-syntax", [{
+        identifier: "default",
+        syntax: "liquid",
+        contents: {
+          subject: null,
+          preheader: null,
+          html: u(o),
+          ampHtml: null
+        }
+      }]);
+      if (!Array.isArray(t.data)) {
+        const l = t.data;
+        return e({
+          type: a.Warning,
+          message: l.message ?? s("journey-builder.liquid-validation-failed")
+        }), !1;
+      }
+      const [r] = t.data, n = Object.values((r == null ? void 0 : r.errors) ?? {});
+      return n.length ? (e({
+        type: a.Warning,
+        message: n[0].replace(/^line \d+:\s*/, "")
+      }), !1) : !0;
+    } catch {
+      return e({
+        type: a.Alert,
+        message: s("journey-builder.liquid-validation-failed")
+      }), !1;
+    }
+  } };
+};
+export {
+  v 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/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/DynamicContent/dynamic-content.js

@@ -1,16 +1,17 @@
 var c = Object.defineProperty;
 var g = (o, s, t) => s in o ? c(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
 var r = (o, s, t) => g(o, typeof s != "symbol" ? s + "" : s, t);
-import { mergeTagToDynamicContent as d, dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
-import { UIElement as u, UIElementType as a, UEAttr as h, UIElementTagRegistry as T } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ExternalMergeTagsLibrary as y } from "./dynamic-content-modal.js";
-const l = "external-dynamic-content-ui-element", C = "button-add-dynamic-content";
-class p extends T {
+import { useConfig as d } from "../../composables/useConfig.js";
+import { mergeTagToDynamicContent as m, dynamicContentToMergeTags as u } from "../../utils/genericUtil.js";
+import { UIElement as h, UIElementType as a, UEAttr as T, UIElementTagRegistry as y } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExternalMergeTagsLibrary as C } from "./dynamic-content-modal.js";
+const l = "external-dynamic-content-ui-element", L = "button-add-dynamic-content";
+class w extends y {
   registerUiElements(s) {
     s[a.MERGETAGS] = l;
   }
 }
-class b extends u {
+class f extends h {
   constructor() {
     super(...arguments);
     r(this, "mergeTagsButton", null);
@@ -43,7 +44,7 @@ class b extends u {
   onAttributeUpdated(t, e) {
     if (t !== "mergeTag" || !(e != null && e.value))
       return;
-    const n = d(e), i = this._getLastClickedPosition();
+    const n = m(e), i = this._getLastClickedPosition();
     this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
   }
   openMergeTagLibrary() {
@@ -55,10 +56,14 @@ class b extends u {
    * Dispatches event with dynamic content data and position
    */
   _openDynamicContentLibrary(t, e) {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new C()), this.mergeTagsLibrary.openMergeTagsLibrary(
       t,
       (n) => {
-        n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
+        if (n.text && n.value) {
+          const { isFeatureEnabled: i } = d();
+          this.api.triggerValueChange(u([n], i("liquidSyntax"))[0]);
+        } else
+          this.api.triggerValueChange(null);
       },
       e
     );
@@ -142,7 +147,7 @@ class b extends u {
                 <${a.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${h.BUTTON.name}="${C}">
+                    ${T.BUTTON.name}="${L}">
                         <${a.ICON} src="plus" class="icon icon-button color-primary">
                         </${a.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
@@ -151,6 +156,6 @@ class b extends u {
   }
 }
 export {
-  p as DynamicContentTagRegistry,
-  b as DynamicContentUiElementExtension
+  w as DynamicContentTagRegistry,
+  f as DynamicContentUiElementExtension
 };

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-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}
+.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-4e2a4adb]{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/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/services/templateLibraryApi.js

@@ -1,14 +1,15 @@
-import { useConfig as T } from "../composables/useConfig.js";
-import { useHttp as f } from "../composables/useHttp.js";
-import { useToaster as w } from "../composables/useToaster.js";
-import { useTranslations as b } from "../composables/useTranslations.js";
-import { EditorType as h } from "../enums/defaults.js";
-import { useRecommendationExtensionStore as C } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useSaveAsTemplateStore as v } from "../stores/save-as-template.js";
-import { base64EncodeWithSpecialChars as a } from "../utils/base64.js";
-import { useTemplatePreparation as S } from "../utils/templatePreparation.js";
-const R = () => {
-  const { get: n, post: c } = f(), { handleError: o, showToaster: i } = w(), { config: l } = T(), p = b();
+import { useConfig as w } from "../composables/useConfig.js";
+import { useHttp as b } from "../composables/useHttp.js";
+import { useToaster as h } from "../composables/useToaster.js";
+import { useTranslations as C } from "../composables/useTranslations.js";
+import { useLiquidValidator as S } from "../composables/validators/useLiquidValidator.js";
+import { EditorType as v } from "../enums/defaults.js";
+import { useRecommendationExtensionStore as N } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { useSaveAsTemplateStore as x } from "../stores/save-as-template.js";
+import { base64EncodeWithSpecialChars as r } from "../utils/base64.js";
+import { useTemplatePreparation as A } from "../utils/templatePreparation.js";
+const $ = () => {
+  const { get: n, post: m } = b(), { handleError: o, showToaster: l } = h(), { config: c, isFeatureEnabled: p } = w(), { validateLiquidSyntax: g } = S(), u = C();
   return {
     getCategories: async () => {
       try {
@@ -26,7 +27,7 @@ const R = () => {
     },
     createCategory: async (e) => {
       try {
-        const { data: { id: t } } = await c(
+        const { data: { id: t } } = await m(
           "/newsletter/template-library/create-category",
           { name: e }
         );
@@ -36,55 +37,56 @@ const R = () => {
       }
     },
     createTemplate: async () => {
-      var e, t, g, y;
+      var e, t, d, y;
       try {
-        const { prepareTemplateDetails: m } = S(), r = v(), s = await m(), u = {
-          name: r.getTemplateName,
-          categories: r.getSelectedCategoryIds,
-          productId: ((t = (e = l.value) == null ? void 0 : e.partner) == null ? void 0 : t.productType) || 0,
-          editorType: h,
-          messageType: ((y = (g = l.value) == null ? void 0 : g.partner) == null ? void 0 : y.messageType) || 0,
-          content: a(s.compiledHtml),
-          css: a(s.css),
+        const { prepareTemplateDetails: i } = A(), s = x(), a = await i();
+        if (p("liquidSyntax") && !await g(a.compiledHtml))
+          return !1;
+        const f = {
+          name: s.getTemplateName,
+          categories: s.getSelectedCategoryIds,
+          productId: ((t = (e = c.value) == null ? void 0 : e.partner) == null ? void 0 : t.productType) || 0,
+          editorType: v,
+          messageType: ((y = (d = c.value) == null ? void 0 : d.partner) == null ? void 0 : y.messageType) || 0,
+          content: r(a.compiledHtml),
+          css: r(a.css),
           unsubscriptionPreferencePageStatus: !1,
           unsubscriptionPreferencePages: [],
-          recommendationCampaignUrls: a(
-            C().recommendationCampaignUrls
+          recommendationCampaignUrls: r(
+            N().recommendationCampaignUrls
           ),
-          recommendationConfigs: a({}),
+          recommendationConfigs: r({}),
           isGuido: !0,
-          stripoConfig: a({
+          // eslint-disable-next-line camelcase
+          template_engine: p("liquidSyntax") ? 1 : 0,
+          stripoConfig: r({
             editor: "stripo",
-            html: s.rawHtml,
-            css: s.css
+            html: a.rawHtml,
+            css: a.css
           })
-        }, { data: { type: d } } = await c(
+        }, { data: { type: T } } = await m(
           "/newsletter/template-library/create-template",
-          u
+          f
         );
-        if (d === "alert") {
-          i({
-            message: p(
-              "newsletter.template-library-save-alert",
-              { templateName: r.getTemplateName }
-            ),
-            type: "alert"
-          });
-          return;
-        }
-        i({
-          message: p(
+        return T === "alert" ? (l({
+          message: u(
+            "newsletter.template-library-save-alert",
+            { templateName: s.getTemplateName }
+          ),
+          type: "alert"
+        }), !1) : (l({
+          message: u(
             "newsletter.template-library-save-success",
-            { templateName: r.getTemplateName }
+            { templateName: s.getTemplateName }
           ),
           type: "success"
-        });
-      } catch (m) {
-        o(m, "Failed to create template");
+        }), !0);
+      } catch (i) {
+        return o(i, "Failed to create template"), !1;
       }
     }
   };
 };
 export {
-  R as useTemplateLibraryApi
+  $ as useTemplateLibraryApi
 };

package/dist/src/@types/save-as-template.d.ts

@@ -26,4 +26,5 @@ export interface CreateTemplateRequest {
     unsubscriptionPreferencePages: number[];
     unsubscriptionPreferencePageStatus: boolean;
     isGuido: boolean;
+    template_engine: number;
 }

package/dist/src/composables/validators/useLiquidValidator.d.ts

@@ -0,0 +1,3 @@
+export declare const useLiquidValidator: () => {
+    validateLiquidSyntax: (compiledHtml: string) => Promise<boolean>;
+};

package/dist/src/config/compiler/liquidCompilerRules.d.ts

@@ -0,0 +1,2 @@
+import type { CompilerRule } from '@@/Types/html-compiler';
+export declare const liquidCompilerRules: CompilerRule[];

package/dist/src/extensions/Blocks/CouponBlock/template.d.ts

@@ -1,3 +1,5 @@
+export declare const COUPON_PLACEHOLDER_DEFAULT = "{@COUPON_CODE}";
+export declare const COUPON_PLACEHOLDER_LIQUID = "{{ins_coupon_code}}";
 declare const migrationTemplate = "\n    <td\n        class=\"coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block\"\n        esd-extension-block-id=\"coupon-block\"\n    >\n        <p class=\"ins-title\" contenteditable=\"false\">{@COUPON_CODE}</p>\n    </td>\n";
 export declare function getDefaultTemplate(): string;
 export default migrationTemplate;

package/dist/src/services/templateLibraryApi.d.ts

@@ -3,5 +3,5 @@ export declare const useTemplateLibraryApi: () => {
     getCategories: () => Promise<Category[]>;
     checkTemplateNameAvailability: (value: string) => Promise<boolean>;
     createCategory: (category: string) => Promise<string>;
-    createTemplate: () => Promise<void>;
+    createTemplate: () => Promise<boolean>;
 };

package/dist/src/utils/genericUtil.d.ts

@@ -1,6 +1,6 @@
 import type { DynamicContent, MergeTag } from '@@/Types/generic';
 export declare const mergeTagToDynamicContent: (mergeTag: MergeTag) => DynamicContent;
-export declare const dynamicContentToMergeTags: (dynamicContentList: DynamicContent[]) => MergeTag[];
+export declare const dynamicContentToMergeTags: (dynamicContentList: DynamicContent[], liquidSyntax?: boolean) => MergeTag[];
 export declare const getCsrfToken: () => string;
 /**
  * URL Parameter utilities

package/dist/utils/genericUtil.js

@@ -1,25 +1,47 @@
-const f = (t) => {
-  const n = t.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((l) => l.trim()), [r] = n, e = {
-    text: t.label,
-    value: r || ""
+const s = (e) => {
+  const a = e.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((l) => l.trim()), [n] = a, c = {
+    text: e.label,
+    value: n || ""
   };
-  if (n.length >= 2) {
-    const [, l, o] = n, c = l.includes("=") ? { key: l.split("=")[0].trim(), value: l.split("=")[1].trim() } : null;
-    c ? e.format = c : o || (e.fallback = l), o && (e.fallback = o);
+  if (a.length >= 2) {
+    const [, l, r] = a;
+    if (l.startsWith("default:")) {
+      let t = l.slice(8).trim();
+      t.startsWith('"') && t.endsWith('"') && (t = t.slice(1, -1)), c.fallback = t;
+    } else {
+      const t = l.includes("=") ? { key: l.split("=")[0].trim(), value: l.split("=")[1].trim() } : null;
+      t ? c.format = t : r || (c.fallback = l), r && (c.fallback = r);
+    }
   }
-  return e;
-}, s = (t) => t.map((a) => a.format ? {
-  label: `${a.text} | ${a.format.key}=${a.format.value}`,
-  value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
-} : {
-  label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
-  value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
-}), u = () => {
-  var t;
-  return ((t = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : t.getAttribute("content")) ?? "";
+  return c;
+}, u = (e, f = !1) => e.map((a) => {
+  if (a.format)
+    return {
+      label: `${a.text} | ${a.format.key}=${a.format.value}`,
+      value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
+    };
+  if (f) {
+    if (!a.fallback)
+      return {
+        label: a.text,
+        value: `{{ ${a.value} }}`
+      };
+    const c = !Number.isNaN(Number(a.fallback)) && a.fallback.trim() !== "" ? a.fallback : `"${a.fallback}"`;
+    return {
+      label: `${a.text} | ${a.fallback}`,
+      value: `{{ ${a.value} | default: ${c} }}`
+    };
+  }
+  return {
+    label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
+    value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
+  };
+}), o = () => {
+  var e;
+  return ((e = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : e.getAttribute("content")) ?? "";
 };
 export {
-  s as dynamicContentToMergeTags,
-  u as getCsrfToken,
-  f as mergeTagToDynamicContent
+  u as dynamicContentToMergeTags,
+  o as getCsrfToken,
+  s as mergeTagToDynamicContent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.0-beta.4aabac5",
+  "version": "3.2.0",
   "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",