@useinsider/guido 1.0.3-beta.a024c62 → 1.0.3-beta.a058e8a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +0 -5
  2. package/dist/components/Guido.vue.js +1 -1
  3. package/dist/components/Guido.vue2.js +61 -64
  4. package/dist/composables/useStripo.js +35 -37
  5. package/dist/enums/defaults.js +1 -2
  6. package/dist/enums/environment.js +5 -0
  7. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +1 -1
  8. package/dist/extensions/DynamicContent/dynamic-content-modal.js +19 -25
  9. package/dist/extensions/DynamicContent/dynamic-content.js +33 -128
  10. package/dist/guido.css +1 -1
  11. package/dist/package.json.js +1 -1
  12. package/dist/src/@types/generic.d.ts +6 -27
  13. package/dist/src/components/Guido.vue.d.ts +2 -2
  14. package/dist/src/enums/environment.d.ts +5 -0
  15. package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +1 -1
  16. package/dist/src/extensions/DynamicContent/dynamic-content-modal.d.ts +2 -9
  17. package/dist/src/extensions/DynamicContent/dynamic-content.d.ts +2 -52
  18. package/dist/src/stores/config.d.ts +2 -3
  19. package/dist/src/stores/dynamic-content.d.ts +3 -3
  20. package/dist/src/stores/editor.d.ts +1 -1
  21. package/dist/src/stores/onboarding.d.ts +1 -1
  22. package/dist/src/stores/preview.d.ts +1 -1
  23. package/dist/src/stores/recommendation.d.ts +1 -1
  24. package/dist/src/stores/save-as-template.d.ts +1 -1
  25. package/dist/src/stores/toaster.d.ts +1 -1
  26. package/dist/src/stores/unsubscribe.d.ts +1 -1
  27. package/dist/src/stores/version-history.d.ts +1 -1
  28. package/dist/src/utils/environmentUtil.d.ts +5 -2
  29. package/dist/src/utils/genericUtil.d.ts +0 -1
  30. package/dist/stores/config.js +5 -5
  31. package/dist/stores/dynamic-content.js +2 -2
  32. package/dist/stores/editor.js +1 -1
  33. package/dist/stores/onboarding.js +27 -27
  34. package/dist/stores/preview.js +1 -1
  35. package/dist/stores/recommendation.js +3 -3
  36. package/dist/stores/save-as-template.js +2 -2
  37. package/dist/stores/toaster.js +1 -1
  38. package/dist/stores/unsubscribe.js +1 -1
  39. package/dist/stores/version-history.js +4 -4
  40. package/dist/utils/environmentUtil.js +4 -2
  41. package/dist/utils/genericUtil.js +9 -20
  42. package/package.json +3 -3
package/README.md CHANGED
@@ -198,7 +198,6 @@ interface GuidoConfig {
198
198
  saveAsTemplate: boolean;
199
199
  versionHistory: boolean;
200
200
  testMessage: boolean;
201
- displayConditions: boolean;
202
201
  };
203
202
  blocks?: {
204
203
  excludeDefaults?: GuidoBlockType[];
@@ -217,7 +216,6 @@ interface GuidoConfig {
217
216
  | `features.dynamicContent` | `boolean` | `true` | Enable dynamic content insertion feature |
218
217
  | `features.saveAsTemplate` | `boolean` | `true` | Enable save as template feature |
219
218
  | `features.versionHistory` | `boolean` | `true` | Enable version history feature |
220
- | `features.displayConditions` | `boolean` | `true` | Enable display conditions |
221
219
  | `blocks` | `BlocksConfig` | `{ excludeDefaults: [], includeCustoms: [] }` | Block configuration for excluding default blocks and including custom blocks. See [Blocks Configuration](#-blocks-configuration) section below |
222
220
  | `blocks.excludeDefaults` | `GuidoBlockType[]` | `[]` | Array of default Stripo blocks to exclude from the editor |
223
221
  | `blocks.includeCustoms` | `GuidoCustomBlockType[]` | `[]` | Array of custom blocks to include in the editor |
@@ -600,9 +598,6 @@ Create a `.env` file with the following variables: (You can get env variables fr
600
598
  VITE_STRIPO_PLUGIN_ID=your_plugin_id
601
599
  VITE_STRIPO_SECRET_KEY=your_secret_key
602
600
  VITE_STRIPO_ROLE=your_role
603
-
604
- # Playwright Test Configuration (Optional - for local debugging only)
605
- HEADED=false # Set to 'true' to run tests with visible browser
606
601
  ```
607
602
 
608
603
  ### Project Structure
@@ -12,7 +12,7 @@ var t = function() {
12
12
  n,
13
13
  !1,
14
14
  null,
15
- "23c413c9"
15
+ "e299731b"
16
16
  );
17
17
  const v = s.exports;
18
18
  export {
@@ -1,23 +1,23 @@
1
- import { defineComponent as O, defineAsyncComponent as I, ref as z, computed as U, watch as B, onMounted as K, onUnmounted as j } from "vue";
2
- import { provideGuidoActions as q } from "../composables/useGuidoActions.js";
3
- import { usePartner as J } from "../composables/usePartner.js";
4
- import { useStripo as Q } from "../composables/useStripo.js";
5
- import { migrate as L } from "../config/migrator/index.js";
6
- import { DefaultUsername as V, DefaultMessageType as X, DefaultGuidoConfig as Y } from "../enums/defaults.js";
7
- import Z from "./organisms/base/Toaster.vue.js";
8
- import $ from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
9
- import ee from "./organisms/header/HeaderWrapper.vue.js";
10
- import oe from "./organisms/LoadingWrapper.vue.js";
11
- import te from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
12
- import ne from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
13
- import { useStripoApi as re } from "../services/stripoApi.js";
14
- import { useConfigStore as ie } from "../stores/config.js";
15
- import { useDynamicContentStore as se } from "../stores/dynamic-content.js";
16
- import { useEditorStore as ae } from "../stores/editor.js";
17
- import { usePreviewStore as ce } from "../stores/preview.js";
18
- import { useUnsubscribeStore as me } from "../stores/unsubscribe.js";
19
- import de from "../node_modules/lodash-es/merge.js";
20
- const Ue = /* @__PURE__ */ O({
1
+ import { defineComponent as R, defineAsyncComponent as G, ref as x, computed as I, watch as M, onMounted as z, onUnmounted as B } from "vue";
2
+ import { provideGuidoActions as K } from "../composables/useGuidoActions.js";
3
+ import { usePartner as O } from "../composables/usePartner.js";
4
+ import { useStripo as j } from "../composables/useStripo.js";
5
+ import { migrate as U } from "../config/migrator/index.js";
6
+ import { DefaultUsername as q, DefaultMessageType as J, DefaultGuidoConfig as Q } from "../enums/defaults.js";
7
+ import V from "./organisms/base/Toaster.vue.js";
8
+ import X from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
9
+ import Y from "./organisms/header/HeaderWrapper.vue.js";
10
+ import Z from "./organisms/LoadingWrapper.vue.js";
11
+ import $ from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
12
+ import ee from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
13
+ import { useStripoApi as oe } from "../services/stripoApi.js";
14
+ import { useConfigStore as te } from "../stores/config.js";
15
+ import { useDynamicContentStore as ne } from "../stores/dynamic-content.js";
16
+ import { useEditorStore as re } from "../stores/editor.js";
17
+ import { usePreviewStore as ie } from "../stores/preview.js";
18
+ import { useUnsubscribeStore as se } from "../stores/unsubscribe.js";
19
+ import ae from "../node_modules/lodash-es/merge.js";
20
+ const ke = /* @__PURE__ */ R({
21
21
  __name: "Guido",
22
22
  props: {
23
23
  templateId: null,
@@ -33,45 +33,45 @@ const Ue = /* @__PURE__ */ O({
33
33
  },
34
34
  emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
35
35
  setup(W, { expose: _, emit: o }) {
36
- const u = W, A = I(
36
+ const l = W, L = G(
37
37
  () => import("./organisms/email-preview/PreviewContainer.vue.js")
38
- ), N = I(
38
+ ), A = G(
39
39
  () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
40
- ), p = z(), i = se(), g = me(), f = ie(), s = ae(), F = ce(), n = U(() => s.hasChanges), { getPartnerName: y, getProductType: v, isTestPartner: H } = J(), b = () => {
40
+ ), u = x(), i = ne(), p = se(), g = te(), s = re(), N = ie(), n = I(() => s.hasChanges), { getPartnerName: f, getProductType: y, isTestPartner: F } = O(), v = () => {
41
41
  var e;
42
- return (e = p.value) == null ? void 0 : e.handleSave(!0);
42
+ return (e = u.value) == null ? void 0 : e.handleSave(!0);
43
43
  }, {
44
44
  templateId: a,
45
- userId: C,
46
- guidoConfig: h,
45
+ userId: b,
46
+ guidoConfig: C,
47
47
  templateConfig: t,
48
48
  html: r = "",
49
- css: S = "",
50
- partnerName: c = y(),
51
- productType: m = v(),
52
- messageType: w = X,
53
- username: D = V
54
- } = u, d = (t == null ? void 0 : t.preselectedDynamicContentList) || [];
55
- s.templateId = a, window.GuidoConfig = de(Y, h), window.GuidoConfig.partner = {
49
+ css: h = "",
50
+ partnerName: c = f(),
51
+ productType: d = y(),
52
+ messageType: S = J,
53
+ username: w = q
54
+ } = l, m = (t == null ? void 0 : t.preselectedDynamicContentList) || [];
55
+ s.templateId = a, window.GuidoConfig = ae(Q, C), window.GuidoConfig.partner = {
56
56
  partnerName: c,
57
- productType: m,
58
- messageType: w
59
- }, f.templateConfig = t;
60
- const { initPlugin: E } = Q({
57
+ productType: d,
58
+ messageType: S
59
+ }, g.templateConfig = t;
60
+ const { initPlugin: D } = j({
61
61
  emailId: a,
62
- userId: C,
63
- username: D,
62
+ userId: b,
63
+ username: w,
64
64
  partnerName: c,
65
- productType: m,
66
- preselectedDynamicContentList: d,
65
+ productType: d,
66
+ preselectedDynamicContentList: m,
67
67
  onReady: () => {
68
68
  console.debug("guido:ready"), o("ready");
69
69
  }
70
- }), { getDefaultTemplate: T } = re(), R = U(() => {
70
+ }), { getDefaultTemplate: T } = oe(), H = I(() => {
71
71
  var e;
72
72
  return !((e = window.GuidoConfig) != null && e.useHeader);
73
73
  });
74
- q({
74
+ K({
75
75
  onBack: () => {
76
76
  console.debug("guido:back"), o("back");
77
77
  },
@@ -85,35 +85,32 @@ const Ue = /* @__PURE__ */ O({
85
85
  console.debug("guido:test-email:click"), o("test-email:click");
86
86
  }
87
87
  });
88
- const P = (e) => {
88
+ const E = (e) => {
89
89
  console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
90
- }, k = () => {
90
+ }, P = () => {
91
91
  console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
92
92
  };
93
- B(() => n.value, () => {
93
+ return M(() => n.value, () => {
94
94
  o("on-change", n.value);
95
- });
96
- const l = (e) => {
97
- const G = e, { attribute: x, position: M } = G.detail;
98
- console.debug("dynamic-content:open", G.detail), o("dynamic-content:open", x, M);
99
- };
100
- return K(async () => {
95
+ }), z(async () => {
101
96
  console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
102
97
  try {
103
- g.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
98
+ p.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
104
99
  let e = {
105
- html: r && await L(r),
106
- css: S,
100
+ html: r && await U(r),
101
+ css: h,
107
102
  forceRecreate: !0
108
103
  // TODO: It should be false for old templates. We will communicate with Stripo
109
104
  };
110
- e.html || (e = await T(), e.html = await L(e.html)), await E(e), i.selectedDynamicContentList = d;
105
+ e.html || (e = await T(), e.html = await U(e.html)), await D(e), i.selectedDynamicContentList = m;
111
106
  } catch (e) {
112
107
  console.error("Failed to initialize Stripo editor:", e);
113
108
  }
114
- document.addEventListener("dynamic-content:open", l);
115
- }), j(() => {
116
- document.removeEventListener("dynamic-content:open", l);
109
+ document.addEventListener("dynamic-content:open", (e) => {
110
+ const k = e;
111
+ console.debug("dynamic-content:open", k.detail), o("dynamic-content:open", k.detail);
112
+ });
113
+ }), B(() => {
117
114
  try {
118
115
  window.UIEditor.removeEditor();
119
116
  } catch {
@@ -121,14 +118,14 @@ const Ue = /* @__PURE__ */ O({
121
118
  }
122
119
  }), _({
123
120
  dynamicContent: {
124
- insert: P,
125
- close: k
121
+ insert: E,
122
+ close: P
126
123
  },
127
124
  hasChanges: n,
128
- saveSilent: b
129
- }), { __sfc: !0, PreviewContainer: A, OnboardingWrapper: N, headerWrapperRef: p, dynamicContentStore: i, unsubscribeStore: g, props: u, configStore: f, editorStore: s, previewStore: F, hasChanges: n, getPartnerName: y, getProductType: v, isTestPartner: H, saveSilent: b, templateId: a, userId: C, guidoConfig: h, templateConfig: t, html: r, css: S, partnerName: c, productType: m, messageType: w, username: D, preselectedDynamicContentList: d, emit: o, initPlugin: E, getDefaultTemplate: T, noHeader: R, insertDynamicContent: P, closeDynamicContent: k, handleDynamicContentOpen: l, Toaster: Z, FilterSelectionDrawer: $, HeaderWrapper: ee, LoadingWrapper: oe, SaveAsTemplateDrawer: te, UnsubscribeWrapper: ne };
125
+ saveSilent: v
126
+ }), { __sfc: !0, PreviewContainer: L, OnboardingWrapper: A, headerWrapperRef: u, dynamicContentStore: i, unsubscribeStore: p, props: l, configStore: g, editorStore: s, previewStore: N, hasChanges: n, getPartnerName: f, getProductType: y, isTestPartner: F, saveSilent: v, templateId: a, userId: b, guidoConfig: C, templateConfig: t, html: r, css: h, partnerName: c, productType: d, messageType: S, username: w, preselectedDynamicContentList: m, emit: o, initPlugin: D, getDefaultTemplate: T, noHeader: H, insertDynamicContent: E, closeDynamicContent: P, Toaster: V, FilterSelectionDrawer: X, HeaderWrapper: Y, LoadingWrapper: Z, SaveAsTemplateDrawer: $, UnsubscribeWrapper: ee };
130
127
  }
131
128
  });
132
129
  export {
133
- Ue as default
130
+ ke as default
134
131
  };
@@ -1,25 +1,23 @@
1
- import { useActionsApi as h } from "./useActionsApi.js";
2
- import { useBlocksConfig as b } from "./useBlocksConfig.js";
3
- import { useConfig as k } from "./useConfig.js";
4
- import { useCustomInterfaceAppearance as B } from "./useCustomInterfaceAppearance.js";
5
- import { useStripoEventHandler as V } from "./useStripoEventHandler.js";
6
- import { useToaster as _ } from "./useToaster.js";
7
- import { displayConditions as F } from "../enums/displayConditions.js";
8
- import { useStripoApi as A } from "../services/stripoApi.js";
9
- import T from "../static/styles/customEditorStyle.css.js";
10
- import { useEditorStore as v } from "../stores/editor.js";
11
- import { dynamicContentToMergeTags as I } from "../utils/genericUtil.js";
12
- import M from "../package.json.js";
13
- const N = (d) => {
14
- const { config: u } = k(), { handleError: l } = _(), { getToken: f, getCustomFonts: S } = A(), { handleEvent: C } = V(), { getStripoBlocksConfig: y } = b(), E = async (i, r = []) => {
15
- var m, g;
16
- const t = v(), { html: n, css: p, forceRecreate: a } = i, { baseBlocks: e, extensions: c } = await y();
1
+ import { useActionsApi as y } from "./useActionsApi.js";
2
+ import { useBlocksConfig as E } from "./useBlocksConfig.js";
3
+ import { useCustomInterfaceAppearance as w } from "./useCustomInterfaceAppearance.js";
4
+ import { useStripoEventHandler as h } from "./useStripoEventHandler.js";
5
+ import { useToaster as b } from "./useToaster.js";
6
+ import { displayConditions as k } from "../enums/displayConditions.js";
7
+ import { useStripoApi as B } from "../services/stripoApi.js";
8
+ import V from "../static/styles/customEditorStyle.css.js";
9
+ import { useEditorStore as _ } from "../stores/editor.js";
10
+ import { dynamicContentToMergeTags as F } from "../utils/genericUtil.js";
11
+ import A from "../package.json.js";
12
+ const L = (d) => {
13
+ const { handleError: u } = b(), { getToken: p, getCustomFonts: m } = B(), { handleEvent: g } = h(), { getStripoBlocksConfig: f } = E(), S = async (r, i = []) => {
14
+ const t = _(), { html: n, css: l, forceRecreate: a } = r, { baseBlocks: e, extensions: c } = await f();
17
15
  window.UIEditor.initEditor(
18
16
  document.querySelector("#guido-editor"),
19
17
  {
20
18
  metadata: d,
21
19
  html: n,
22
- css: p,
20
+ css: l,
23
21
  forceRecreate: a,
24
22
  locale: "en",
25
23
  undoButtonSelector: "#guido__undo-button",
@@ -30,10 +28,10 @@ const N = (d) => {
30
28
  customAppearanceMergetags: !0,
31
29
  customAppearanceMergetagsBorderColor: "#f1f3fe",
32
30
  customAppearanceMergetagsBackgroundColor: "#f1f3fe",
33
- customViewStyles: T,
34
- conditionsEnabled: ((m = u.features) == null ? void 0 : m.displayConditions) ?? !0,
35
- customConditionsEnabled: ((g = u.features) == null ? void 0 : g.displayConditions) ?? !0,
36
- conditionCategories: F,
31
+ customViewStyles: V,
32
+ conditionsEnabled: !0,
33
+ customConditionsEnabled: !0,
34
+ conditionCategories: k,
37
35
  enableXSSSecurity: !0,
38
36
  messageSettingsEnabled: !1,
39
37
  selectBlockAfterDropFromSettingsPanel: !0,
@@ -41,29 +39,29 @@ const N = (d) => {
41
39
  editorFonts: {
42
40
  showDefaultStandardFonts: !0,
43
41
  showDefaultNotStandardFonts: !0,
44
- customFonts: r
42
+ customFonts: i
45
43
  },
46
44
  mergeTags: [
47
45
  {
48
- entries: I(d.preselectedDynamicContentList)
46
+ entries: F(d.preselectedDynamicContentList)
49
47
  }
50
48
  ],
51
49
  async onTokenRefreshRequest(o) {
52
50
  try {
53
- const s = await f();
51
+ const s = await p();
54
52
  o(s);
55
53
  } catch (s) {
56
- l(s, "Failed to refresh token");
54
+ u(s, "Failed to refresh token");
57
55
  }
58
56
  },
59
57
  onTemplateLoaded() {
60
58
  try {
61
- const { importCss: o } = B(), { activateCustomViewStyles: s } = h();
59
+ const { importCss: o } = w(), { activateCustomViewStyles: s } = y();
62
60
  o(), s(), d.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
63
61
  t.hasChanges = !1;
64
62
  }, 1e3);
65
63
  } catch (o) {
66
- l(o, "Failed to load custom interface appearance");
64
+ u(o, "Failed to load custom interface appearance");
67
65
  }
68
66
  },
69
67
  onCodeEditorVisibilityChanged(o) {
@@ -78,7 +76,7 @@ const N = (d) => {
78
76
  onDataChanged() {
79
77
  t.hasChanges = !0;
80
78
  },
81
- onEvent: C,
79
+ onEvent: g,
82
80
  ignoreClickOutsideSelectors: [
83
81
  "#guido-dynamic-content-modal",
84
82
  ".in-on-board-wrapper",
@@ -87,26 +85,26 @@ const N = (d) => {
87
85
  extensions: c
88
86
  }
89
87
  );
90
- }, w = (i) => new Promise((r, t) => {
88
+ }, C = (r) => new Promise((i, t) => {
91
89
  var c;
92
90
  if (document.getElementById("UiEditorScript")) {
93
- i(), r();
91
+ r(), i();
94
92
  return;
95
93
  }
96
- const n = M.guido, a = `https://email-static.useinsider.com/guido/${(c = n == null ? void 0 : n.stripo) == null ? void 0 : c.version}/UIEditor.js`, e = document.createElement("script");
94
+ const n = A.guido, a = `https://email-static.useinsider.com/guido/${(c = n == null ? void 0 : n.stripo) == null ? void 0 : c.version}/UIEditor.js`, e = document.createElement("script");
97
95
  e.id = "UiEditorScript", e.type = "module", e.src = a, e.onload = () => {
98
- i(), r();
96
+ r(), i();
99
97
  }, e.onerror = () => {
100
98
  t(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
101
99
  }, document.body.appendChild(e);
102
100
  });
103
- return { initPlugin: async (i) => {
104
- await w(async () => {
105
- const r = await S();
106
- await E(i, r);
101
+ return { initPlugin: async (r) => {
102
+ await C(async () => {
103
+ const i = await m();
104
+ await S(r, i);
107
105
  });
108
106
  } };
109
107
  };
110
108
  export {
111
- N as useStripo
109
+ L as useStripo
112
110
  };
@@ -16,8 +16,7 @@ const e = {
16
16
  dynamicContent: !0,
17
17
  saveAsTemplate: !0,
18
18
  versionHistory: !0,
19
- testMessage: !0,
20
- displayConditions: !0
19
+ testMessage: !0
21
20
  },
22
21
  useHeader: !0
23
22
  }, t = {
@@ -0,0 +1,5 @@
1
+ const e = "insidethekube", s = "useinsider";
2
+ export {
3
+ e as KUBE_ENV_PREFIX,
4
+ s as PROD_ENV_PREFIX
5
+ };
@@ -133,7 +133,7 @@ const a = c(), d = () => ({
133
133
  filterSelectionDrawerStatus: !1,
134
134
  filterList: {},
135
135
  filterGroup: 1
136
- }), G = p("guidoRecommendationExtension", {
136
+ }), G = p("recommendationExtension", {
137
137
  state: () => d(),
138
138
  getters: {
139
139
  hasFilters: (e) => !!e.recommendationConfigs.filters.length,
@@ -1,33 +1,27 @@
1
- var d = Object.defineProperty;
2
- var m = (t, e, n) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
3
- var c = (t, e, n) => m(t, typeof e != "symbol" ? e + "" : e, n);
4
- class C {
1
+ var i = Object.defineProperty;
2
+ var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
3
+ var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
4
+ class y {
5
5
  constructor() {
6
- c(this, "selectedDynamicContent", null);
7
- c(this, "dataSelectCallback", () => {
6
+ a(this, "selectedDynamicContent", null);
7
+ a(this, "dataSelectCallback", () => {
8
8
  });
9
- c(this, "closeDynamicContentHandler", null);
10
9
  }
11
- /**
12
- * Opens the merge tags library modal
13
- * @param dynamicContent - Currently selected dynamic content (if any)
14
- * @param onDataSelectCallback - Callback invoked when user selects a merge tag
15
- * @param position - Optional position data to place the modal
16
- */
17
- openMergeTagsLibrary(e, n, l) {
18
- this.closeDynamicContentHandler && (document.removeEventListener("dynamic-content:close", this.closeDynamicContentHandler), this.closeDynamicContentHandler = null), this.dataSelectCallback = n, this.selectedDynamicContent = e;
19
- const o = {
20
- attribute: e,
21
- position: l
22
- }, s = new CustomEvent("dynamic-content:open", {
23
- detail: o
10
+ openMergeTagsLibrary(e, n) {
11
+ this.dataSelectCallback = n, this.selectedDynamicContent = e;
12
+ const s = new CustomEvent("dynamic-content:open", {
13
+ detail: {
14
+ attribute: e
15
+ }
24
16
  });
25
- document.dispatchEvent(s), this.closeDynamicContentHandler = (i) => {
26
- const a = i.detail;
27
- this.selectedDynamicContent = a, a.text && a.value && this.dataSelectCallback(a);
28
- }, document.addEventListener("dynamic-content:close", this.closeDynamicContentHandler);
17
+ document.dispatchEvent(s);
18
+ const o = (l) => {
19
+ const c = l.detail;
20
+ this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
21
+ };
22
+ document.addEventListener("dynamic-content:close", o);
29
23
  }
30
24
  }
31
25
  export {
32
- C as ExternalMergeTagsLibrary
26
+ y as ExternalMergeTagsLibrary
33
27
  };
@@ -1,156 +1,61 @@
1
- var c = Object.defineProperty;
2
- var g = (o, s, t) => s in o ? c(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
3
- var r = (o, s, t) => g(o, typeof s != "symbol" ? s + "" : s, t);
4
- import { mergeTagToDynamicContent as d, dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
5
- import { UIElement as u, UIElementType as a, UEAttr as h, UIElementTagRegistry as T } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
6
- import { ExternalMergeTagsLibrary as y } from "./dynamic-content-modal.js";
7
- const l = "external-dynamic-content-ui-element", C = "button-add-dynamic-content";
8
- class p extends T {
9
- registerUiElements(s) {
10
- s[a.MERGETAGS] = l;
1
+ var o = Object.defineProperty;
2
+ var g = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
3
+ var i = (n, t, e) => g(n, typeof t != "symbol" ? t + "" : t, e);
4
+ import { dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
5
+ import { UIElement as c, UIElementType as r, UEAttr as l, UIElementTagRegistry as d } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
6
+ import { ExternalMergeTagsLibrary as T } from "./dynamic-content-modal.js";
7
+ const a = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
8
+ class p extends d {
9
+ registerUiElements(t) {
10
+ t[r.MERGETAGS] = a;
11
11
  }
12
12
  }
13
- class b extends u {
13
+ class C extends c {
14
14
  constructor() {
15
15
  super(...arguments);
16
- r(this, "mergeTagsButton", null);
17
- r(this, "mergeTagsLibrary", null);
18
- r(this, "clickListener", null);
19
- r(this, "lastClickedElement", null);
20
- r(this, "lastClickedFrame", null);
21
- r(this, "mousedownListener", null);
16
+ i(this, "mergeTagsButton", null);
17
+ i(this, "listener", () => {
18
+ });
19
+ i(this, "mergeTagsLibrary", null);
20
+ i(this, "selectedDynamicContent", { value: "", text: "" });
22
21
  }
23
22
  getId() {
24
- return l;
23
+ return a;
25
24
  }
26
- onRender(t) {
27
- var e;
28
- this.mergeTagsButton = t.querySelector("#guido__btn-add-dynamic-content"), this.clickListener = this._onClick.bind(this), (e = this.mergeTagsButton) == null || e.addEventListener("click", this.clickListener), this._setupCoordinateTracking();
25
+ onRender(e) {
26
+ var s;
27
+ this.listener = this._onClick.bind(this), this.mergeTagsButton = e.querySelector("#guido__btn-add-dynamic-content"), (s = this.mergeTagsButton) == null || s.addEventListener("click", this.listener);
29
28
  }
30
29
  onDestroy() {
31
- var t;
32
- this.clickListener && ((t = this.mergeTagsButton) == null || t.removeEventListener("click", this.clickListener)), this._cleanupCoordinateTracking(), this.mergeTagsButton = null, this.clickListener = null, this.lastClickedElement = null, this.lastClickedFrame = null;
30
+ var e;
31
+ (e = this.mergeTagsButton) == null || e.removeEventListener("click", this.listener);
33
32
  }
34
33
  _onClick() {
35
34
  this.openMergeTagLibrary();
36
35
  }
37
- /**
38
- * Called when Stripo detects merge tag interactions
39
- * This is the key method that receives notifications about merge tag clicks
40
- * @param name - Attribute name (e.g., 'mergeTag')
41
- * @param value - MergeTag object with label, value, selStart, selEnd, etc.
42
- */
43
- onAttributeUpdated(t, e) {
44
- if (t !== "mergeTag" || !(e != null && e.value))
45
- return;
46
- const n = d(e), i = this._getLastClickedPosition();
47
- this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
48
- }
49
36
  openMergeTagLibrary() {
50
- const t = this._getButtonPosition(), e = { value: "", text: "" };
51
- this._openDynamicContentLibrary(e, t);
52
- }
53
- /**
54
- * Opens the dynamic content library for external apps
55
- * Dispatches event with dynamic content data and position
56
- */
57
- _openDynamicContentLibrary(t, e) {
58
- this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
59
- t,
60
- (n) => {
61
- n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
62
- },
63
- e
37
+ this.mergeTagsLibrary || (this.mergeTagsLibrary = new T()), this.mergeTagsLibrary.openMergeTagsLibrary(
38
+ this.selectedDynamicContent,
39
+ (e) => {
40
+ this.api.onValueChanged(m([e])[0]);
41
+ }
64
42
  );
65
43
  }
66
- /**
67
- * Gets the button's position on the screen
68
- * Used to position the modal or anything else near the button
69
- */
70
- _getButtonPosition() {
71
- if (!this.mergeTagsButton)
72
- return { x: 0, y: 0, width: 0, height: 0 };
73
- const { x: t, y: e, width: n, height: i } = this.mergeTagsButton.getBoundingClientRect();
74
- return { x: t, y: e, width: n, height: i };
75
- }
76
- /**
77
- * Sets up coordinate tracking for merge tag clicks in the iframe
78
- * Workaround from Stripo intercepting click events - tracks mousedown events instead
79
- */
80
- _setupCoordinateTracking() {
81
- var e;
82
- const t = this._getEditorFrame();
83
- (e = t == null ? void 0 : t.contentWindow) != null && e.document && (this.mousedownListener = (n) => {
84
- const i = this._findMergeTagElement(n.target);
85
- i && (this.lastClickedElement = i, this.lastClickedFrame = t);
86
- }, t.contentWindow.document.addEventListener("mousedown", this.mousedownListener));
87
- }
88
- /**
89
- * Gets the editor iframe element
90
- */
91
- _getEditorFrame() {
92
- var n;
93
- const t = document.querySelector("ui-editor");
94
- if (!(t != null && t.shadowRoot))
95
- return null;
96
- const e = t.shadowRoot.querySelector("iframe");
97
- return (n = e == null ? void 0 : e.contentWindow) != null && n.document ? e : null;
98
- }
99
- /**
100
- * Finds merge tag element in the element tree
101
- */
102
- _findMergeTagElement(t) {
103
- return t.closest(".target, .esd-merge-tag");
104
- }
105
- /**
106
- * Gets the position of the last clicked element, calculated on-demand
107
- * This ensures we always use the correct element's position even with rapid clicks
108
- */
109
- _getLastClickedPosition() {
110
- if (!(!this.lastClickedElement || !this.lastClickedFrame))
111
- return this._calculateAbsolutePosition(this.lastClickedFrame, this.lastClickedElement);
112
- }
113
- /**
114
- * Calculates absolute position of element relative to page
115
- */
116
- _calculateAbsolutePosition(t, e) {
117
- const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
118
- return {
119
- x: n.x + i.x,
120
- y: n.y + i.y,
121
- width: i.width,
122
- height: i.height
123
- };
124
- }
125
- /**
126
- * Cleans up the coordinate tracking event listener
127
- */
128
- _cleanupCoordinateTracking() {
129
- var e;
130
- if (!this.mousedownListener)
131
- return;
132
- const t = this._getEditorFrame();
133
- (e = t == null ? void 0 : t.contentWindow) != null && e.document && t.contentWindow.document.removeEventListener("mousedown", this.mousedownListener), this.mousedownListener = null;
134
- }
135
- /**
136
- * Returns the HTML template for the "Add Dynamic Content" button
137
- * This button is placed in the merge tags selector UI
138
- */
139
44
  getTemplate() {
140
45
  return `
141
46
  <div>
142
- <${a.BUTTON}
47
+ <${r.BUTTON}
143
48
  id="guido__btn-add-dynamic-content"
144
49
  class="btn btn-primary"
145
- ${h.BUTTON.name}="${C}">
146
- <${a.ICON} src="plus" class="icon icon-button color-primary">
147
- </${a.ICON}>
50
+ ${l.BUTTON.name}="${y}">
51
+ <${r.ICON} src="plus" class="icon icon-button color-primary">
52
+ </${r.ICON}>
148
53
  ${this.api.translate("Add Dynamic Content")}
149
- </${a.BUTTON}>
54
+ </${r.BUTTON}>
150
55
  </div>`;
151
56
  }
152
57
  }
153
58
  export {
154
59
  p as DynamicContentTagRegistry,
155
- b as DynamicContentUiElementExtension
60
+ C as DynamicContentUiElementExtension
156
61
  };