@useinsider/guido 3.21.1-beta.f5fb7ac → 3.21.2-beta.cfc5be2

package/README.md

@@ -150,6 +150,7 @@ const config: GuidoConfigInput = {
   ui?: {
     showHeader?: boolean,         // Default: true
     backButtonLabel?: string,
+    externalDisplayConditions?: boolean, // Default: false - Replace Stripo's display-condition UI with a Conditions tab in the settings panel and create/select drawers for reusable Liquid/Pongo display conditions.
   },
 
   // Optional: Feature toggles (defaults apply once initialized — see `ready` prop below)
@@ -166,7 +167,6 @@ const config: GuidoConfigInput = {
     allowlistEnabled?: boolean,   // Default: false - Pre-save domain-allowlist check (opt-in). Guido self-serves the block toaster (role lookup, deep-link, copy from window.trans).
     allowSaveWithErrors?: boolean, // Default: true - Allow the validation drawer's "Save and Continue" soft-save. Set false to hard-block invalid saves (transactional + unsubscribe pages).
     reusableRecommendationStrategy?: boolean, // Default: false - Assign an RRS strategy to recommendation blocks instead of per-block algorithm/filters/shuffle/product-count settings.
-    legacyUnsubscribeConversion?: boolean, // Default: false - Convert legacy unsubscribe blocks that have no unsubscribe link into text blocks (on load and on module drop/copy) and show a warning modal.
   },
 
   // Optional: Callbacks
@@ -668,14 +668,6 @@ multiple partners (e.g. architect) should key by partner and place the active pa
 first. Omit the prop and the repair is a safe no-op — nothing is rewritten and no
 toaster fires (useful before the host has wired the catalog).
 
-With `features.legacyUnsubscribeConversion: true`, a dropped or copied module's legacy
-unsubscribe block that has no unsubscribe link (the old editor reused it as plain text,
-e.g. a company address) becomes a plain text block that keeps its content, and a warning
-modal explains it. The same conversion runs when a template is opened. Register these
-keys host-side: `email-editor.legacy-unsubscribe-converted-modal-title`,
-`email-editor.legacy-unsubscribe-converted-modal-message` and
-`email-editor.legacy-unsubscribe-converted-modal-visit-academy` (OK reuses `action-builder.ok`).
-
 ---
 
 ## Development

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

@@ -84,10 +84,10 @@ const p = {
   children: e(n(f)),
   // eslint-disable-next-line camelcase -- backend field name
   select_items: e(n(f))
-})), v = g(
+})), x = g(
   t(),
   R(n(f), [])
-), N = C({
+), D = C({
   /** Block ID (matches the dictionary key and the legacy HTML element id) */
   id: e(s()),
   /** Decimal places for price display (legacy data may use string or number) */
@@ -132,7 +132,7 @@ const p = {
   isPriceMovedToNextLine: e(o()),
   /** Legacy "Hide if same as discounted" / delete-price-for-zero-sale toggle */
   isPriceDeletedForZeroSale: e(o())
-}), P = a({
+}), N = a({
   /**
    * Legacy recommendation block configs keyed by block ID.
    * Pass this when loading a template authored with the v1
@@ -140,10 +140,10 @@ const p = {
    * strategy, currency, locale, and layout data.
    */
   recommendationConfigs: e(
-    g(t(), N),
+    g(t(), D),
     {}
   )
-}), x = a({
+}), P = a({
   /** Initial HTML content */
   html: e(t(), ""),
   /** Initial CSS content */
@@ -159,7 +159,7 @@ const p = {
    * (first) partner's leaf attributes into the label→token map that repairs
    * label-form placeholders (`{{ Phone Number }}`) in dropped saved modules.
    */
-  dynamicContentList: e(v, {}),
+  dynamicContentList: e(x, {}),
   /** Valid custom field attribute names from the partner's categorized fields */
   customFieldAttributes: e(n(t()), []),
   /** Selected unsubscribe page IDs */
@@ -194,8 +194,8 @@ const p = {
     )
   ),
   /** Migration-only inputs (legacy block configs) */
-  migration: e(P, {})
-}), D = a({
+  migration: e(N, {})
+}), v = a({
   /** Sender display name */
   senderName: e(t(), ""),
   /** Email subject line */
@@ -208,7 +208,7 @@ const p = {
   /** Migration date for template compatibility */
   migrationDate: e(s(), 1759696858),
   /** Email header settings */
-  emailHeader: e(D, { senderName: "", subject: "" }),
+  emailHeader: e(v, { senderName: "", subject: "" }),
   /** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
   savedModulesFolderName: e(t(), S.SAVED_MODULES),
   /** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
@@ -217,7 +217,9 @@ const p = {
   /** Whether to show the header bar */
   showHeader: e(o(), !0),
   /** Custom label for back button (if shown) */
-  backButtonLabel: e(t())
+  backButtonLabel: e(t()),
+  /** Replace Stripo's display-condition UI with the Conditions tab and create/select drawers */
+  externalDisplayConditions: e(o(), !1)
 }), U = a({
   /** Enable dynamic content insertion */
   dynamicContent: e(o(), !0),
@@ -243,9 +245,7 @@ const p = {
   linkTrackingIds: e(o(), !1),
   /** Allow persisting a template that still has validation errors (drawer "Save and Continue" soft-save). Host sets false for transactional + unsubscribe. */
   allowSaveWithErrors: e(o(), !0),
-  reusableRecommendationStrategy: e(o(), !1),
-  /** Convert linkless legacy unsubscribe blocks into text blocks and warn with a modal (opt-in) */
-  legacyUnsubscribeConversion: e(o(), !1)
+  reusableRecommendationStrategy: e(o(), !1)
 }), w = m([
   "amp-accordion",
   "amp-carousel",
@@ -346,7 +346,7 @@ const p = {
   partner: E,
   // Optional sections (with defaults)
   /** Template content and presets */
-  template: e(x, {}),
+  template: e(P, {}),
   /** Editor settings */
   editor: e(O, {}),
   /** UI configuration */
@@ -368,23 +368,23 @@ export {
   B as CustomBlockTypeSchema,
   G as CustomRuleSchema,
   w as DefaultBlockTypeSchema,
-  v as DynamicContentListSchema,
+  x as DynamicContentListSchema,
   f as DynamicContentNodeSchema,
   M as DynamicContentSchema,
   O as EditorSchema,
-  D as EmailHeaderSchema,
+  v as EmailHeaderSchema,
   L as FallbackFontSchema,
   U as FeaturesSchema,
   K as GuidoConfigSchema,
   A as IdentitySchema,
-  N as LegacyRecommendationConfigSchema,
+  D as LegacyRecommendationConfigSchema,
   p as MessageType,
   E as PartnerSchema,
   l as ProductType,
   _ as RegexRuleSchema,
   q as RemoveRuleSchema,
   H as ReplaceRuleSchema,
-  P as TemplateMigrationSchema,
-  x as TemplateSchema,
+  N as TemplateMigrationSchema,
+  P as TemplateSchema,
   F as UISchema
 };

package/dist/@types/display-condition.js

@@ -0,0 +1,25 @@
+import { object as e, optional as a, string as o, nullish as i, number as t, picklist as n, array as c } from "../node_modules/valibot/dist/index.js";
+const s = n(["liquid", "pongo"]), d = n(["codeOnly", "logicBuilder"]), r = e({
+  id: t(),
+  name: o(),
+  description: i(o(), ""),
+  syntax: s,
+  method: d,
+  codeBefore: o(),
+  codeAfter: i(o(), ""),
+  createdAt: a(o())
+}), p = e({
+  data: c(r),
+  meta: e({
+    totalCount: t(),
+    perPage: t(),
+    currentPage: t(),
+    lastPage: t()
+  })
+});
+export {
+  p as DisplayConditionListResponseSchema,
+  d as DisplayConditionMethodSchema,
+  s as DisplayConditionSyntaxSchema,
+  r as SavedDisplayConditionSchema
+};

package/dist/components/Guido.vue.js

@@ -1,18 +1,18 @@
-import o from "./Guido.vue2.js";
+import i from "./Guido.vue2.js";
 /* empty css           */
-import i from "../_virtual/_plugin-vue2_normalizer.js";
-var s = function() {
+import o from "../_virtual/_plugin-vue2_normalizer.js";
+var t = function() {
   var a = this, r = a._self._c, e = a._self._setupProxy;
-  return r("div", { ref: "wrapperRef", staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), r(e.AutoSaveController), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : a._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.AuthErrorModal), r(e.FilterSelectionDrawer), e.isRrsEnabled || e.hasAssignedStrategy ? r(e.AssignStrategyDrawer) : a._e(), e.isRrsEnabled || e.hasAssignedStrategy ? r(e.RemoveStrategyModal) : a._e(), e.isRrsEnabled ? r(e.LegacyStrategyUpdatedModal) : a._e(), e.isLegacyUnsubscribeConversionEnabled ? r(e.LegacyUnsubscribeConvertedModal) : a._e(), r(e.SaveAsTemplateDrawer), e.isSaveValidationEnabled ? r(e.ValidationErrorDrawer) : a._e(), e.isTestPartner() ? a._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" }), r(e.AutoSaveController), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : a._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.AuthErrorModal), r(e.FilterSelectionDrawer), e.isRrsEnabled || e.hasAssignedStrategy ? r(e.AssignStrategyDrawer) : a._e(), e.isRrsEnabled || e.hasAssignedStrategy ? r(e.RemoveStrategyModal) : a._e(), e.isRrsEnabled ? r(e.LegacyStrategyUpdatedModal) : a._e(), r(e.SaveAsTemplateDrawer), e.isSaveValidationEnabled ? r(e.ValidationErrorDrawer) : a._e(), e.isExternalDisplayConditionsEnabled ? r(e.DisplayConditionsHost) : a._e(), e.isTestPartner() ? a._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(_) {
     return e.emit("onboarding:finished");
   } } }), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
-}, t = [], n = /* @__PURE__ */ i(
-  o,
-  s,
+}, s = [], n = /* @__PURE__ */ o(
+  i,
   t,
+  s,
   !1,
   null,
-  "6cdd5182"
+  "5d5e32de"
 );
 const v = n.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -4,33 +4,33 @@ import { useEditorLock as pe } from "../composables/useEditorLock.js";
 import { provideGuidoActions as fe } from "../composables/useGuidoActions.js";
 import { useGuidoStateBridge as ye } from "../composables/useGuidoStateBridge.js";
 import { usePartner as ge } from "../composables/usePartner.js";
-import { useSaveValidationRollout as be } from "../composables/useSaveValidationRollout.js";
+import { useSaveValidationRollout as Se } from "../composables/useSaveValidationRollout.js";
 import { useStripo as ve } from "../composables/useStripo.js";
-import { useTimerClone as Se } from "../composables/useTimerClone.js";
-import { migrate as V } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as $ } from "../enums/defaults.js";
+import { useTimerClone as be } from "../composables/useTimerClone.js";
+import { migrate as H } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as V } from "../enums/defaults.js";
 import { RIBBON_SELECTOR as he } from "../enums/onboarding.js";
-import { useRecommendationExtensionStore as z, disposeStrategyPageReturnListeners as Ee } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { disposeUnsubscribeListeners as we } from "../extensions/Blocks/Unsubscribe/block.js";
-import Ce from "./organisms/AutoSaveController.vue.js";
-import De from "./organisms/base/AuthErrorModal.vue.js";
+import { useRecommendationExtensionStore as $, disposeStrategyPageReturnListeners as Ee } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { disposeUnsubscribeListeners as De } from "../extensions/Blocks/Unsubscribe/block.js";
+import we from "./organisms/AutoSaveController.vue.js";
+import Ce from "./organisms/base/AuthErrorModal.vue.js";
 import ke from "./organisms/base/Toaster.vue.js";
-import Fe from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import Le from "./organisms/header/HeaderWrapper.vue.js";
-import Re from "./organisms/LoadingWrapper.vue.js";
+import Re from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import Fe from "./organisms/header/HeaderWrapper.vue.js";
+import Le from "./organisms/LoadingWrapper.vue.js";
 import Me from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import Ue from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import Te from "./organisms/validation/ValidationErrorDrawer.vue.js";
-import { useStripoApi as Ie } from "../services/stripoApi.js";
+import Te from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import Ie from "./organisms/validation/ValidationErrorDrawer.vue.js";
+import { useStripoApi as Ue } from "../services/stripoApi.js";
 import { useConfigStore as Ae } from "../stores/config.js";
 import { useDynamicContentStore as Be } from "../stores/dynamic-content.js";
 import { useEditorStore as E } from "../stores/editor.js";
 import { usePreviewStore as Ne } from "../stores/preview.js";
-import { useSaveValidationStore as Pe } from "../stores/save-validation.js";
-import { useTemplateStore as _e } from "../stores/template.js";
-import { useUnsubscribeStore as Oe } from "../stores/unsubscribe.js";
-import { readTrackFloor as H } from "../utils/linkTrackingIds.js";
-const vo = /* @__PURE__ */ de({
+import { useSaveValidationStore as xe } from "../stores/save-validation.js";
+import { useTemplateStore as Pe } from "../stores/template.js";
+import { useUnsubscribeStore as _e } from "../stores/unsubscribe.js";
+import { readTrackFloor as z } from "../utils/linkTrackingIds.js";
+const St = /* @__PURE__ */ de({
   __name: "Guido",
   props: {
     config: null,
@@ -47,37 +47,35 @@ const vo = /* @__PURE__ */ de({
     ), X = c(
       () => import("./organisms/extensions/recommendation/RemoveStrategyModal.vue.js")
     ), Y = c(
-      () => import("./organisms/extensions/recommendation/LegacyStrategyUpdatedModal.vue.js")
+      () => import("./organisms/display-conditions/DisplayConditionsHost.vue.js")
     ), Z = c(
-      () => import("./organisms/unsubscribe/LegacyUnsubscribeConvertedModal.vue.js")
-    ), w = W(), f = W(), y = Be(), C = Oe(), t = Ae();
-    a.ready && t.init(a.config);
-    const d = E(), ee = Ne(), u = l(() => d.hasChanges), { isTestPartner: oe } = ge(), { isEnabled: te, loadRollout: D } = be(), k = () => {
-      var o;
-      return (o = w.value) == null ? void 0 : o.handleSave(!0);
-    }, F = (o) => {
-      d.loadingStatus = o;
+      () => import("./organisms/extensions/recommendation/LegacyStrategyUpdatedModal.vue.js")
+    ), D = W(), f = W(), y = Be(), w = _e(), o = Ae();
+    a.ready && o.init(a.config);
+    const d = E(), ee = Ne(), u = l(() => d.hasChanges), { isTestPartner: te } = ge(), { isEnabled: oe, loadRollout: C } = Se(), k = () => {
+      var t;
+      return (t = D.value) == null ? void 0 : t.handleSave(!0);
+    }, R = (t) => {
+      d.loadingStatus = t;
     };
     ue(), ye();
     const g = () => {
-      var o, e;
+      var t, e;
       return {
-        emailId: t.templateId,
-        userId: t.userId,
-        username: t.username,
-        partnerName: t.partnerName,
-        savedModulesFolderName: ((o = t.editor) == null ? void 0 : o.savedModulesFolderName) || $.SAVED_MODULES,
-        defaultModulesFolderName: ((e = t.editor) == null ? void 0 : e.defaultModulesFolderName) || $.DEFAULT_MODULES
+        emailId: o.templateId,
+        userId: o.userId,
+        username: o.username,
+        partnerName: o.partnerName,
+        savedModulesFolderName: ((t = o.editor) == null ? void 0 : t.savedModulesFolderName) || V.SAVED_MODULES,
+        defaultModulesFolderName: ((e = o.editor) == null ? void 0 : e.defaultModulesFolderName) || V.DEFAULT_MODULES
       };
-    }, { initPlugin: L, preloadRuntime: R } = ve(), { runExclusive: M, beginMount: U, isCurrentMount: b } = pe();
+    }, { initPlugin: F, preloadRuntime: L } = ve(), { runExclusive: M, beginMount: T, isCurrentMount: S } = pe();
     let p = 0;
-    const { getDefaultTemplate: T } = Ie(), { cloneTimersOnSave: I, hasTimerBlocks: A } = Se(), ne = l(() => {
-      var o;
-      return !((o = t.ui) != null && o.showHeader);
-    }), re = l(() => t.isFeatureEnabled("reusableRecommendationStrategy")), se = l(
-      () => t.isFeatureEnabled("legacyUnsubscribeConversion")
-    ), ae = l(
-      () => !!z().recommendationConfigs.strategyId
+    const { getDefaultTemplate: I } = Ue(), { cloneTimersOnSave: U, hasTimerBlocks: A } = be(), ne = l(() => {
+      var t;
+      return !((t = o.ui) != null && t.showHeader);
+    }), re = l(() => o.isFeatureEnabled("reusableRecommendationStrategy")), se = l(() => o.externalDisplayConditions), ae = l(
+      () => !!$().recommendationConfigs.strategyId
     );
     fe({
       onBack: () => {
@@ -86,65 +84,65 @@ const vo = /* @__PURE__ */ de({
       onSaveStart: () => {
         console.debug("guido:save:start"), r("save:start");
       },
-      onSaveComplete: (o) => {
-        const e = { ...o, metadata: g() };
+      onSaveComplete: (t) => {
+        const e = { ...t, metadata: g() };
         console.debug("guido:save:complete", e), r("save:complete", e);
       },
       onTestEmailClick: () => {
         console.debug("guido:test-email:click"), r("test-email:click");
       }
     });
-    const B = (o) => {
-      console.debug("dynamic-content:close", o), y.setSelectedDynamicContent(o), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: o }));
+    const B = (t) => {
+      console.debug("dynamic-content:close", t), y.setSelectedDynamicContent(t), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: t }));
     }, N = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
     G(() => u.value, () => {
       r("on-change", u.value);
     });
-    const v = (o) => {
-      const e = o, { attribute: s, position: m } = e.detail;
+    const v = (t) => {
+      const e = t, { attribute: s, position: m } = e.detail;
       console.debug("dynamic-content:open", e.detail), r("dynamic-content:open", s, m);
     };
     let i = null;
-    const S = () => {
+    const b = () => {
       var e;
-      const o = document.querySelector(he);
-      (e = f.value) == null || e.style.setProperty("--ribbon-offset", `${(o == null ? void 0 : o.offsetHeight) ?? 0}px`);
+      const t = document.querySelector(he);
+      (e = f.value) == null || e.style.setProperty("--ribbon-offset", `${(t == null ? void 0 : t.offsetHeight) ?? 0}px`);
     }, h = async () => {
-      var o;
+      var t;
       try {
-        t.initialized || t.init(a.config), d.templateId = t.templateId;
-        const e = t.template, s = (e == null ? void 0 : e.html) || "", m = (e == null ? void 0 : e.css) || "", P = (e == null ? void 0 : e.preselectedDynamicContent) || [];
-        C.selectedUnsubscribePages = (e == null ? void 0 : e.selectedUnsubscribePages) || [];
-        const _ = ((o = e == null ? void 0 : e.migration) == null ? void 0 : o.recommendationConfigs) ?? {}, O = t.isFeatureEnabled("linkTrackingIds"), x = {
-          partnerName: t.partnerName,
+        o.initialized || o.init(a.config), d.templateId = o.templateId;
+        const e = o.template, s = (e == null ? void 0 : e.html) || "", m = (e == null ? void 0 : e.css) || "", x = (e == null ? void 0 : e.preselectedDynamicContent) || [];
+        w.selectedUnsubscribePages = (e == null ? void 0 : e.selectedUnsubscribePages) || [];
+        const P = ((t = e == null ? void 0 : e.migration) == null ? void 0 : t.recommendationConfigs) ?? {}, _ = o.isFeatureEnabled("linkTrackingIds"), O = {
+          partnerName: o.partnerName,
           campaignUrls: e == null ? void 0 : e.recommendationCampaignUrls,
-          rrsEnabled: t.isFeatureEnabled("reusableRecommendationStrategy")
+          rrsEnabled: o.isFeatureEnabled("reusableRecommendationStrategy")
         };
         let n = {
-          html: s && await V(s, _, x),
+          html: s && await H(s, P, O),
           css: m
         };
-        n.html || (n = await T(), n.html = await V(n.html, _, x));
-        const ie = O ? H(n.html, (e == null ? void 0 : e.trackIdCounter) || 0) : 0;
-        A(n.html) && (n.html = await I(n.html)), O && (d.trackIdSessionFloor = Math.max(ie, H(n.html)));
+        n.html || (n = await I(), n.html = await H(n.html, P, O));
+        const ie = _ ? z(n.html, (e == null ? void 0 : e.trackIdCounter) || 0) : 0;
+        A(n.html) && (n.html = await U(n.html)), _ && (d.trackIdSessionFloor = Math.max(ie, z(n.html)));
         const ce = {
-          preselectedDynamicContentList: P,
+          preselectedDynamicContentList: x,
           onReady: () => {
             console.debug("guido:ready"), r("ready");
           }
         };
-        p = U(), await L(n, g(), ce), y.selectedDynamicContentList = P;
+        p = T(), await F(n, g(), ce), y.selectedDynamicContentList = x;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
     };
     return me(async () => {
       var e;
-      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), z().$reset(), E().$reset(), _e().$reset(), Pe().$reset(), D(), S();
-      const o = (e = f.value) == null ? void 0 : e.parentElement;
-      if (o && (i = new ResizeObserver(S), i.observe(o)), R(), a.ready)
+      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), $().$reset(), E().$reset(), Pe().$reset(), xe().$reset(), C(), b();
+      const t = (e = f.value) == null ? void 0 : e.parentElement;
+      if (t && (i = new ResizeObserver(b), i.observe(t)), L(), a.ready)
         await h();
       else {
         const s = G(() => a.ready, (m) => {
@@ -153,20 +151,20 @@ const vo = /* @__PURE__ */ de({
       }
       document.addEventListener("dynamic-content:open", v);
     }), le(() => {
-      if (we(), Ee(), i == null || i.disconnect(), document.removeEventListener("dynamic-content:open", v), b(p))
+      if (De(), Ee(), i == null || i.disconnect(), document.removeEventListener("dynamic-content:open", v), S(p))
         try {
           E().isStripoInitialized = !1;
-        } catch (o) {
-          console.debug("Failed to close the editor readiness gate on unmount", o);
+        } catch (t) {
+          console.debug("Failed to close the editor readiness gate on unmount", t);
         }
       M(async () => {
-        if (b(p))
+        if (S(p))
           try {
             window.UIEditor.removeEditor();
           } catch {
             console.debug("Failed to remove Stripo editor: No editor found");
           }
-      }), t.reset();
+      }), o.reset();
     }), K({
       dynamicContent: {
         insert: B,
@@ -174,10 +172,10 @@ const vo = /* @__PURE__ */ de({
       },
       hasChanges: u,
       saveSilent: k,
-      setLoading: F
-    }), { __sfc: !0, PreviewContainer: j, OnboardingWrapper: J, AssignStrategyDrawer: Q, RemoveStrategyModal: X, LegacyStrategyUpdatedModal: Y, LegacyUnsubscribeConvertedModal: Z, headerWrapperRef: w, wrapperRef: f, dynamicContentStore: y, unsubscribeStore: C, props: a, configStore: t, editorStore: d, previewStore: ee, hasChanges: u, isTestPartner: oe, isSaveValidationEnabled: te, loadRollout: D, saveSilent: k, setLoading: F, emit: r, buildMetadata: g, initPlugin: L, preloadRuntime: R, runExclusive: M, beginMount: U, isCurrentMount: b, mountGeneration: p, getDefaultTemplate: T, cloneTimersOnSave: I, hasTimerBlocks: A, noHeader: ne, isRrsEnabled: re, isLegacyUnsubscribeConversionEnabled: se, hasAssignedStrategy: ae, insertDynamicContent: B, closeDynamicContent: N, handleDynamicContentOpen: v, ribbonObserver: i, updateRibbonOffset: S, startEditor: h, AutoSaveController: Ce, AuthErrorModal: De, Toaster: ke, FilterSelectionDrawer: Fe, HeaderWrapper: Le, LoadingWrapper: Re, SaveAsTemplateDrawer: Me, UnsubscribeWrapper: Ue, ValidationErrorDrawer: Te };
+      setLoading: R
+    }), { __sfc: !0, PreviewContainer: j, OnboardingWrapper: J, AssignStrategyDrawer: Q, RemoveStrategyModal: X, DisplayConditionsHost: Y, LegacyStrategyUpdatedModal: Z, headerWrapperRef: D, wrapperRef: f, dynamicContentStore: y, unsubscribeStore: w, props: a, configStore: o, editorStore: d, previewStore: ee, hasChanges: u, isTestPartner: te, isSaveValidationEnabled: oe, loadRollout: C, saveSilent: k, setLoading: R, emit: r, buildMetadata: g, initPlugin: F, preloadRuntime: L, runExclusive: M, beginMount: T, isCurrentMount: S, mountGeneration: p, getDefaultTemplate: I, cloneTimersOnSave: U, hasTimerBlocks: A, noHeader: ne, isRrsEnabled: re, isExternalDisplayConditionsEnabled: se, hasAssignedStrategy: ae, insertDynamicContent: B, closeDynamicContent: N, handleDynamicContentOpen: v, ribbonObserver: i, updateRibbonOffset: b, startEditor: h, AutoSaveController: we, AuthErrorModal: Ce, Toaster: ke, FilterSelectionDrawer: Re, HeaderWrapper: Fe, LoadingWrapper: Le, SaveAsTemplateDrawer: Me, UnsubscribeWrapper: Te, ValidationErrorDrawer: Ie };
   }
 });
 export {
-  vo as default
+  St as default
 };

package/dist/components/organisms/display-conditions/CodeEditorField.vue.js

@@ -0,0 +1,20 @@
+import i from "./CodeEditorField.vue2.js";
+/* empty css                     */
+import s from "../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
+  var e = this, r = e._self._c, o = e._self._setupProxy;
+  return r("div", { staticClass: "guido-code-editor-field", attrs: { id: e.id } }, [r("p", { staticClass: "guido-code-editor-field__label" }, [e._v(" " + e._s(e.label) + " ")]), r(o.InCodeSnippet, { attrs: { code: e.value, disable: e.disabled, "focus-editor": !1, invalid: !!e.error, "invalid-message": e.error, options: o.options, size: { height: e.error ? 196 : 216 }, "syntax-check": !1 }, on: { input: function(t) {
+    return o.emit("input", t);
+  }, ready: o.onReady } })], 1);
+}, n = [], d = /* @__PURE__ */ s(
+  i,
+  a,
+  n,
+  !1,
+  null,
+  "e96c7aa3"
+);
+const p = d.exports;
+export {
+  p as default
+};

package/dist/components/organisms/display-conditions/CodeEditorField.vue2.js

@@ -0,0 +1,30 @@
+import { defineComponent as s, computed as u } from "vue";
+import { InCodeSnippet as i } from "@useinsider/design-system-vue";
+const m = /* @__PURE__ */ s({
+  __name: "CodeEditorField",
+  props: {
+    id: null,
+    label: null,
+    value: null,
+    placeholder: { default: "" },
+    error: { default: "" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["input"],
+  setup(t, { expose: n, emit: d }) {
+    const l = t;
+    let e = null;
+    const a = u(() => ({
+      mode: "liquid",
+      lint: !1,
+      foldGutter: !1,
+      placeholder: l.placeholder
+    })), r = (p) => {
+      e = p;
+    }, o = () => (e == null ? void 0 : e.state.doc.toString()) ?? l.value;
+    return n({ read: o }), { __sfc: !0, props: l, emit: d, view: e, options: a, onReady: r, read: o, InCodeSnippet: i };
+  }
+});
+export {
+  m as default
+};

package/dist/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue.js

@@ -0,0 +1,30 @@
+import a from "./DisplayConditionCreateDrawer.vue2.js";
+/* empty css                                  */
+import r from "../../../_virtual/_plugin-vue2_normalizer.js";
+var n = function() {
+  var i = this, t = i._self._c, e = i._self._setupProxy;
+  return t(e.WpDrawer, { attrs: { id: "guido__display-condition-create-drawer", "description-status": "", "class-name": "guido-display-condition-create-drawer", size: "large", "close-on-outside-click": !1, "description-text": e.descriptionText, "footer-button-group-options": e.footerButtonGroupOptions, status: e.store.isCreateOpen, "title-text": e.trans(`${e.KEY}.create-title`) }, on: { cancelOrBackButtonEvent: e.close, onCloseEvent: e.close, primaryButtonEvent: function(o) {
+    return e.submit("inline");
+  }, secondaryButtonEvent: function(o) {
+    return e.submit("save");
+  } } }, [t("div", { staticClass: "guido-display-condition-create" }, [t(e.InBasicTextInput, { staticClass: "mb-4 w-1", attrs: { id: "guido__display-condition-name-input", name: "displayConditionName", "character-counter-status": !1, "disabled-status": e.isSaving, "label-text": e.trans(`${e.KEY}.condition-name`), "max-character-length": e.DISPLAY_CONDITION_LIMITS.NAME_MAX, "placeholder-text": e.trans(`${e.KEY}.condition-name-placeholder`), "state-message": e.errors.name || "", states: e.errors.name ? "error" : "default", "tooltip-status": !1, value: e.draft.name }, on: { input: function(o) {
+    return e.updateField("name", o);
+  } } }), t(e.InBasicTextInput, { staticClass: "mb-4 w-1", attrs: { id: "guido__display-condition-description-input", name: "displayConditionDescription", "character-counter-status": !1, "disabled-status": e.isSaving, "label-text": e.descriptionLabel, "max-character-length": e.DISPLAY_CONDITION_LIMITS.DESCRIPTION_MAX, "placeholder-text": e.trans(`${e.KEY}.condition-description-placeholder`), "state-message": e.errors.description || "", states: e.errors.description ? "error" : "default", "tooltip-status": !1, value: e.draft.description }, on: { input: function(o) {
+    return e.updateField("description", o);
+  } } }), t("div", { staticClass: "guido-display-condition-create__separator" }), t("p", { staticClass: "guido-display-condition-create__method-title" }, [i._v(" " + i._s(e.trans(`${e.KEY}.select-method`)) + " ")]), t("div", { staticClass: "guido-display-condition-create__methods" }, [t(e.InRadioButton, { attrs: { id: "guido__display-condition-method-logic-builder", disable: "", disabled: "", name: "displayConditionMethod", selected: "codeOnly", value: "logicBuilder", label: e.trans(`${e.KEY}.logic-builder`) } }), t(e.InRadioButton, { attrs: { id: "guido__display-condition-method-code-only", name: "displayConditionMethod", selected: "codeOnly", value: "codeOnly", label: e.trans(`${e.KEY}.code-only`) } })], 1), t(e.CodeEditorField, { ref: "codeBeforeRef", staticClass: "mb-3", attrs: { id: "guido__display-condition-code-before", disabled: e.isSaving, error: e.errors.codeBefore, label: e.trans(`${e.KEY}.code-before`), placeholder: e.trans(`${e.KEY}.code-placeholder`), value: e.draft.codeBefore }, on: { input: function(o) {
+    return e.updateField("codeBefore", o);
+  } } }), t(e.CodeEditorField, { ref: "codeAfterRef", attrs: { id: "guido__display-condition-code-after", disabled: e.isSaving, error: e.errors.codeAfter, label: e.trans(`${e.KEY}.code-after`), placeholder: e.trans(`${e.KEY}.code-placeholder`), value: e.draft.codeAfter }, on: { input: function(o) {
+    return e.updateField("codeAfter", o);
+  } } })], 1)]);
+}, s = [], d = /* @__PURE__ */ r(
+  a,
+  n,
+  s,
+  !1,
+  null,
+  "a4b2ccb9"
+);
+const f = d.exports;
+export {
+  f as default
+};

package/dist/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue2.js

@@ -0,0 +1,71 @@
+import { defineComponent as D, reactive as $, ref as s, watch as C, computed as u } from "vue";
+import O from "../../wrappers/WpDrawer.vue.js";
+import { useDisplayConditions as T } from "../../../composables/useDisplayConditions.js";
+import { useTranslations as L } from "../../../composables/useTranslations.js";
+import { ACADEMY_LINKS as x } from "../../../enums/academy.js";
+import { DISPLAY_CONDITION_LIMITS as h } from "../../../enums/display-condition.js";
+import { useDisplayConditionStore as k } from "../../../stores/display-condition.js";
+import { InRadioButton as N, InBasicTextInput as w } from "@useinsider/design-system-vue";
+import E from "./CodeEditorField.vue.js";
+const J = /* @__PURE__ */ D({
+  __name: "DisplayConditionCreateDrawer",
+  setup(Y) {
+    const r = "email-editor.display-conditions", i = L(), c = k(), { validate: p, notifyInvalid: l, createInline: f, createAndSave: m, cancel: y } = T(), d = () => ({ name: "", description: "", codeBefore: "", codeAfter: "" }), e = $(d()), o = s({}), a = s(!1), v = s(), _ = s();
+    C(() => c.isCreateOpen, (n) => {
+      if (!n)
+        return;
+      const { editing: t } = c;
+      Object.assign(e, t ? {
+        name: t.name,
+        description: t.description,
+        codeBefore: t.beforeScript,
+        codeAfter: t.afterScript
+      } : d()), o.value = {}, a.value = !1;
+    }, { immediate: !0 });
+    const g = u(() => i(`${r}.create-description`, {
+      academyLink: `<a href="${x.EMAIL_DISPLAY_CONDITIONS}" class="guido-display-condition-academy" target="_blank">${i(`${r}.academy`)}</a>`
+    })), S = u(() => ({
+      cancelOrBackButton: {
+        styling: "ghost",
+        type: "secondary",
+        labelText: i(`${r}.cancel`),
+        disabledStatus: a.value
+      },
+      secondaryButton: {
+        styling: "solid",
+        type: "subtle-primary",
+        labelText: i(`${r}.create-and-save`),
+        loadingStatus: a.value
+      },
+      primaryButton: {
+        styling: "solid",
+        type: "primary",
+        labelText: i(`${r}.create`),
+        disabledStatus: a.value
+      }
+    })), B = (n, t) => {
+      t !== e[n] && (e[n] = t, o.value[n] && (o.value = { ...o.value, [n]: void 0 }));
+    }, A = u(() => `${i(`${r}.condition-description`)} <span class="guido-display-condition-create__optional">(${i(`${r}.optional`)})</span>`);
+    return { __sfc: !0, KEY: r, trans: i, store: c, validate: p, notifyInvalid: l, createInline: f, createAndSave: m, cancel: y, emptyDraft: d, draft: e, errors: o, isSaving: a, codeBeforeRef: v, codeAfterRef: _, descriptionText: g, footerButtonGroupOptions: S, updateField: B, descriptionLabel: A, submit: async (n) => {
+      var I, b;
+      if (a.value)
+        return;
+      if (e.codeBefore = ((I = v.value) == null ? void 0 : I.read()) ?? e.codeBefore, e.codeAfter = ((b = _.value) == null ? void 0 : b.read()) ?? e.codeAfter, o.value = p(e), Object.keys(o.value).length) {
+        l();
+        return;
+      }
+      if (n === "inline") {
+        f({ ...e });
+        return;
+      }
+      a.value = !0;
+      const t = await m({ ...e });
+      a.value = !1, o.value = t ?? {}, Object.keys(o.value).length && l();
+    }, close: () => {
+      a.value || y();
+    }, WpDrawer: O, DISPLAY_CONDITION_LIMITS: h, InBasicTextInput: w, InRadioButton: N, CodeEditorField: E };
+  }
+});
+export {
+  J as default
+};