@useinsider/guido 1.0.3-beta.45db97c → 1.0.3-beta.46b1cdf
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.
- package/README.md +3 -140
- package/dist/components/Guido.vue.js +1 -1
- package/dist/components/Guido.vue2.js +73 -79
- package/dist/components/organisms/header/LeftSlot.vue.js +1 -1
- package/dist/components/organisms/header/LeftSlot.vue2.js +15 -16
- package/dist/components/organisms/header/RightSlot.vue.js +11 -11
- package/dist/components/organisms/header/RightSlot.vue2.js +22 -23
- package/dist/composables/useGuidoActions.js +9 -19
- package/dist/composables/useStripo.js +58 -49
- package/dist/config/compiler/unsubscribeCompilerRules.js +28 -33
- package/dist/config/migrator/radioButtonMigrator.js +5 -5
- package/dist/enums/defaults.js +9 -16
- package/dist/enums/unsubscribe.js +25 -27
- package/dist/extensions/Blocks/Checkbox/control.js +14 -15
- package/dist/extensions/Blocks/Checkbox/extension.js +2 -2
- package/dist/extensions/Blocks/CouponBlock/extension.js +2 -2
- package/dist/extensions/Blocks/RadioButton/control.js +17 -18
- package/dist/extensions/Blocks/RadioButton/template.js +4 -4
- package/dist/extensions/Blocks/Recommendation/extension.js +4 -4
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +1 -1
- package/dist/extensions/Blocks/Recommendation/templates/blockTemplate.js +4 -4
- package/dist/extensions/DynamicContent/dynamic-content-modal.js +19 -25
- package/dist/extensions/DynamicContent/dynamic-content.js +33 -128
- package/dist/guido.css +1 -1
- package/dist/package.json.js +1 -1
- package/dist/services/stripoApi.js +1 -1
- package/dist/src/@types/generic.d.ts +6 -36
- package/dist/src/components/Guido.vue.d.ts +2 -3
- package/dist/src/components/wrappers/WpModal.vue.d.ts +1 -1
- package/dist/src/composables/useGuidoActions.d.ts +0 -9
- package/dist/src/extensions/Blocks/RadioButton/template.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +1 -1
- package/dist/src/extensions/DynamicContent/dynamic-content-modal.d.ts +2 -9
- package/dist/src/extensions/DynamicContent/dynamic-content.d.ts +2 -52
- package/dist/src/stores/config.d.ts +2 -9
- package/dist/src/stores/dynamic-content.d.ts +3 -3
- package/dist/src/stores/editor.d.ts +1 -1
- package/dist/src/stores/onboarding.d.ts +1 -1
- package/dist/src/stores/preview.d.ts +1 -1
- package/dist/src/stores/recommendation.d.ts +1 -1
- package/dist/src/stores/save-as-template.d.ts +1 -1
- package/dist/src/stores/toaster.d.ts +1 -1
- package/dist/src/stores/unsubscribe.d.ts +1 -1
- package/dist/src/stores/version-history.d.ts +1 -1
- package/dist/src/utils/genericUtil.d.ts +0 -1
- package/dist/static/styles/components/narrow-panel.css.js +0 -10
- package/dist/stores/config.js +5 -5
- package/dist/stores/dynamic-content.js +2 -2
- package/dist/stores/editor.js +1 -1
- package/dist/stores/onboarding.js +27 -27
- package/dist/stores/preview.js +1 -1
- package/dist/stores/recommendation.js +3 -3
- package/dist/stores/save-as-template.js +2 -2
- package/dist/stores/toaster.js +1 -1
- package/dist/stores/unsubscribe.js +1 -1
- package/dist/stores/version-history.js +4 -4
- package/dist/utils/genericUtil.js +9 -20
- package/package.json +2 -2
- package/dist/composables/useBlocksConfig.js +0 -49
- package/dist/src/composables/useBlocksConfig.d.ts +0 -11
- package/dist/src/utils/environmentUtil.d.ts +0 -5
- package/dist/utils/environmentUtil.js +0 -4
|
@@ -31,15 +31,15 @@ import { OldPriceSizeControl as I } from "./controls/oldPrice/size.js";
|
|
|
31
31
|
import { OldPriceStyleControl as T } from "./controls/oldPrice/style.js";
|
|
32
32
|
import { PriceAlignControl as w } from "./controls/price/align.js";
|
|
33
33
|
import { PriceBackgroundControl as h } from "./controls/price/background.js";
|
|
34
|
-
import { PriceColorControl as
|
|
35
|
-
import { PriceFontFamilyControl as
|
|
36
|
-
import { PricePaddingsControl as
|
|
34
|
+
import { PriceColorControl as E } from "./controls/price/color.js";
|
|
35
|
+
import { PriceFontFamilyControl as M } from "./controls/price/fontFamily.js";
|
|
36
|
+
import { PricePaddingsControl as b } from "./controls/price/paddings.js";
|
|
37
37
|
import { PriceSizeControl as j } from "./controls/price/size.js";
|
|
38
38
|
import { PriceStyleControl as q } from "./controls/price/style.js";
|
|
39
39
|
import { RecommendationIconsRegistry as v } from "./iconsRegistry.js";
|
|
40
40
|
import D from "./recommendation.css.js";
|
|
41
41
|
import { SettingsPanel as G } from "./settingsPanel.js";
|
|
42
|
-
const Io = new o().addBlock(r).withSettingsPanelRegistry(G).addControl(n).addControl(d).addControl(l).addControl(m).addControl(i).addControl(C).addControl(a).addControl(e).addControl(p).addControl(f).addControl(c).addControl(s).addControl(g).addControl(B).addControl(P).addControl(u).addControl(y).addControl(S).addControl(F).addControl(R).addControl(N).addControl(O).addControl(k).addControl(x).addControl(z).addControl(A).addControl(I).addControl(T).addControl(w).addControl(h).addControl(
|
|
42
|
+
const Io = new o().addBlock(r).withSettingsPanelRegistry(G).addControl(n).addControl(d).addControl(l).addControl(m).addControl(i).addControl(C).addControl(a).addControl(e).addControl(p).addControl(f).addControl(c).addControl(s).addControl(g).addControl(B).addControl(P).addControl(u).addControl(y).addControl(S).addControl(F).addControl(R).addControl(N).addControl(O).addControl(k).addControl(x).addControl(z).addControl(A).addControl(I).addControl(T).addControl(w).addControl(h).addControl(E).addControl(M).addControl(b).addControl(j).addControl(q).addControl(t).addStyles(D).withIconsRegistry(v).build();
|
|
43
43
|
export {
|
|
44
44
|
Io as default
|
|
45
45
|
};
|
|
@@ -133,7 +133,7 @@ const a = c(), d = () => ({
|
|
|
133
133
|
filterSelectionDrawerStatus: !1,
|
|
134
134
|
filterList: {},
|
|
135
135
|
filterGroup: 1
|
|
136
|
-
}), G = p("
|
|
136
|
+
}), G = p("recommendationExtension", {
|
|
137
137
|
state: () => d(),
|
|
138
138
|
getters: {
|
|
139
139
|
hasFilters: (e) => !!e.recommendationConfigs.filters.length,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BlockType as t, BlockAttr as n } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
2
|
import { RecommendationBlockId as o } from "../constants.js";
|
|
3
|
-
import {
|
|
3
|
+
import { spacer as l, generateTemplate as s, prepareProductRows as d, DEFAULTS as p, getDefaultProducts as i } from "./templateUtils.js";
|
|
4
4
|
import { DEFAULT_CARD_COMPOSITION as $ } from "./templateUtils.js";
|
|
5
5
|
const g = `
|
|
6
6
|
<td align="left" class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20">
|
|
@@ -33,7 +33,7 @@ const g = `
|
|
|
33
33
|
</table>
|
|
34
34
|
</td>
|
|
35
35
|
</tr>
|
|
36
|
-
${
|
|
36
|
+
${l}
|
|
37
37
|
<tr>
|
|
38
38
|
<td>
|
|
39
39
|
<table
|
|
@@ -134,7 +134,7 @@ const g = `
|
|
|
134
134
|
};
|
|
135
135
|
function x() {
|
|
136
136
|
const e = i();
|
|
137
|
-
return
|
|
137
|
+
return s(
|
|
138
138
|
g,
|
|
139
139
|
e,
|
|
140
140
|
3,
|
|
@@ -143,7 +143,7 @@ function x() {
|
|
|
143
143
|
);
|
|
144
144
|
}
|
|
145
145
|
function f(e, r, c) {
|
|
146
|
-
return
|
|
146
|
+
return d(
|
|
147
147
|
e,
|
|
148
148
|
r,
|
|
149
149
|
a,
|
|
@@ -1,33 +1,27 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
class
|
|
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
|
-
|
|
7
|
-
|
|
6
|
+
a(this, "selectedDynamicContent", null);
|
|
7
|
+
a(this, "dataSelectCallback", () => {
|
|
8
8
|
});
|
|
9
|
-
c(this, "closeDynamicContentHandler", null);
|
|
10
9
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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)
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
-
|
|
26
|
+
y as ExternalMergeTagsLibrary
|
|
33
27
|
};
|
|
@@ -1,156 +1,61 @@
|
|
|
1
|
-
var
|
|
2
|
-
var g = (
|
|
3
|
-
var
|
|
4
|
-
import {
|
|
5
|
-
import { UIElement as
|
|
6
|
-
import { ExternalMergeTagsLibrary as
|
|
7
|
-
const
|
|
8
|
-
class p extends
|
|
9
|
-
registerUiElements(
|
|
10
|
-
|
|
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
|
|
13
|
+
class C extends c {
|
|
14
14
|
constructor() {
|
|
15
15
|
super(...arguments);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
|
23
|
+
return a;
|
|
25
24
|
}
|
|
26
|
-
onRender(
|
|
27
|
-
var
|
|
28
|
-
this.mergeTagsButton =
|
|
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
|
|
32
|
-
|
|
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
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
<${
|
|
47
|
+
<${r.BUTTON}
|
|
143
48
|
id="guido__btn-add-dynamic-content"
|
|
144
49
|
class="btn btn-primary"
|
|
145
|
-
${
|
|
146
|
-
<${
|
|
147
|
-
</${
|
|
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
|
-
</${
|
|
54
|
+
</${r.BUTTON}>
|
|
150
55
|
</div>`;
|
|
151
56
|
}
|
|
152
57
|
}
|
|
153
58
|
export {
|
|
154
59
|
p as DynamicContentTagRegistry,
|
|
155
|
-
|
|
60
|
+
C as DynamicContentUiElementExtension
|
|
156
61
|
};
|
package/dist/guido.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-
|
|
1
|
+
.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-2c168944] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.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}.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}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-3c910a93],.guido-editor__container[data-v-3c910a93]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-3c910a93]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
|
package/dist/package.json.js
CHANGED
|
@@ -6,20 +6,12 @@ type Features = {
|
|
|
6
6
|
dynamicContent?: boolean;
|
|
7
7
|
saveAsTemplate?: boolean;
|
|
8
8
|
versionHistory?: boolean;
|
|
9
|
-
testMessage?: boolean;
|
|
10
|
-
displayConditions?: boolean;
|
|
11
9
|
};
|
|
12
10
|
type Partner = {
|
|
13
11
|
partnerName: string;
|
|
14
12
|
productType: number;
|
|
15
13
|
messageType: number;
|
|
16
14
|
};
|
|
17
|
-
export type GuidoBlockType = 'amp-accordion' | 'amp-carousel' | 'amp-form-controls' | 'banner-block' | 'button-block' | 'html-block' | 'image-block' | 'menu-block' | 'social-block' | 'spacer-block' | 'text-block' | 'timer-block' | 'video-block';
|
|
18
|
-
export type GuidoCustomBlockType = 'dynamic-content' | 'checkbox-block' | 'radio-button-block' | 'recommendation-block' | 'unsubscribe-block' | 'coupon-block' | 'items-block';
|
|
19
|
-
type BlocksConfig = {
|
|
20
|
-
excludeDefaults?: GuidoBlockType[];
|
|
21
|
-
includeCustoms?: GuidoCustomBlockType[];
|
|
22
|
-
};
|
|
23
15
|
export type GuidoConfig = {
|
|
24
16
|
translationsPath: string;
|
|
25
17
|
htmlCompilerRules?: CompilerRule[];
|
|
@@ -30,47 +22,21 @@ export type GuidoConfig = {
|
|
|
30
22
|
partner?: Partner;
|
|
31
23
|
extensions?: Extensions;
|
|
32
24
|
features?: Features;
|
|
33
|
-
blocks?: BlocksConfig;
|
|
34
|
-
backButtonLabel?: string;
|
|
35
25
|
};
|
|
36
26
|
export type TemplateConfig = {
|
|
37
27
|
preselectedDynamicContentList?: DynamicContent[];
|
|
38
28
|
selectedUnsubscribePages?: number[];
|
|
39
29
|
variationId?: string;
|
|
40
30
|
};
|
|
41
|
-
export type
|
|
31
|
+
export type DynamicContent = {
|
|
42
32
|
value: string;
|
|
33
|
+
text: string;
|
|
43
34
|
fallback?: string;
|
|
44
35
|
format?: {
|
|
45
36
|
key: string;
|
|
46
37
|
value: string;
|
|
47
38
|
};
|
|
48
39
|
};
|
|
49
|
-
export type DynamicContent = BaseDynamicContent & {
|
|
50
|
-
text: string;
|
|
51
|
-
};
|
|
52
|
-
export type MergeTag = BaseDynamicContent & {
|
|
53
|
-
label: string;
|
|
54
|
-
selStart?: number;
|
|
55
|
-
selEnd?: number;
|
|
56
|
-
hidden?: boolean;
|
|
57
|
-
};
|
|
58
|
-
export type PositionData = {
|
|
59
|
-
x: number;
|
|
60
|
-
y: number;
|
|
61
|
-
width?: number;
|
|
62
|
-
height?: number;
|
|
63
|
-
};
|
|
64
|
-
export type DynamicContentEvent = {
|
|
65
|
-
attribute: DynamicContent;
|
|
66
|
-
position?: PositionData;
|
|
67
|
-
};
|
|
68
|
-
export type MergeTagClickEvent = {
|
|
69
|
-
position: PositionData;
|
|
70
|
-
element: HTMLElement;
|
|
71
|
-
tagValue: string | null;
|
|
72
|
-
tagLabel: string | null;
|
|
73
|
-
};
|
|
74
40
|
export interface EmailHeader {
|
|
75
41
|
senderName: string;
|
|
76
42
|
subject: string;
|
|
@@ -86,6 +52,10 @@ export interface TooltipOptions {
|
|
|
86
52
|
};
|
|
87
53
|
preventXss?: boolean;
|
|
88
54
|
}
|
|
55
|
+
export type MergeTag = {
|
|
56
|
+
label: string;
|
|
57
|
+
value: string;
|
|
58
|
+
};
|
|
89
59
|
export type TextValueObject = {
|
|
90
60
|
text: string;
|
|
91
61
|
value: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { DynamicContent, GuidoConfig,
|
|
1
|
+
import type { DynamicContent, GuidoConfig, TemplateConfig } from '@@/Types/generic';
|
|
2
2
|
import type { SavedTemplateDetails } from '@@/Types/stripo';
|
|
3
3
|
type __VLS_Props = {
|
|
4
4
|
templateId: string;
|
|
@@ -20,14 +20,13 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
|
|
|
20
20
|
hasChanges: import("vue").ComputedRef<boolean>;
|
|
21
21
|
saveSilent: () => Promise<SavedTemplateDetails | undefined> | undefined;
|
|
22
22
|
}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
|
|
23
|
-
"dynamic-content:open": (detail: DynamicContent | null
|
|
23
|
+
"dynamic-content:open": (detail: DynamicContent | null) => void;
|
|
24
24
|
back: () => void;
|
|
25
25
|
"save:start": () => void;
|
|
26
26
|
"save:complete": (data: Omit<SavedTemplateDetails, "forceRecreate">) => void;
|
|
27
27
|
"on-change": (hasChanges: boolean) => void;
|
|
28
28
|
ready: () => void;
|
|
29
29
|
"onboarding:finished": () => void;
|
|
30
|
-
"test-email:click": () => void;
|
|
31
30
|
}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
|
|
32
31
|
export default _default;
|
|
33
32
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -32,8 +32,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
|
|
|
32
32
|
closeOnOutsideClick: boolean;
|
|
33
33
|
footerStatus: boolean;
|
|
34
34
|
}>>>, {
|
|
35
|
-
size: "small" | "medium" | "large";
|
|
36
35
|
description: string;
|
|
36
|
+
size: "small" | "medium" | "large";
|
|
37
37
|
closeOnOutsideClick: boolean;
|
|
38
38
|
footerButtonOptions: FooterButtonGroup;
|
|
39
39
|
closeButtonStatus: boolean;
|
|
@@ -3,11 +3,9 @@ import type { InjectionKey } from 'vue';
|
|
|
3
3
|
export type BackHandler = () => void;
|
|
4
4
|
export type SaveStartHandler = () => void;
|
|
5
5
|
export type SaveCompleteHandler = (template: Omit<SavedTemplateDetails, 'forceRecreate'>) => void;
|
|
6
|
-
export type TestEmailClickHandler = () => void;
|
|
7
6
|
export declare const BACK_KEY: InjectionKey<BackHandler>;
|
|
8
7
|
export declare const SAVE_START_KEY: InjectionKey<SaveStartHandler>;
|
|
9
8
|
export declare const SAVE_COMPLETE_KEY: InjectionKey<SaveCompleteHandler>;
|
|
10
|
-
export declare const TEST_EMAIL_CLICK_KEY: InjectionKey<TestEmailClickHandler>;
|
|
11
9
|
/**
|
|
12
10
|
* Provides Guido action handlers to child components
|
|
13
11
|
*/
|
|
@@ -15,7 +13,6 @@ export declare const provideGuidoActions: (actions: {
|
|
|
15
13
|
onBack: BackHandler;
|
|
16
14
|
onSaveStart: SaveStartHandler;
|
|
17
15
|
onSaveComplete: SaveCompleteHandler;
|
|
18
|
-
onTestEmailClick: TestEmailClickHandler;
|
|
19
16
|
}) => void;
|
|
20
17
|
/**
|
|
21
18
|
* Provides individual Guido action handlers
|
|
@@ -38,11 +35,6 @@ export declare const useSaveStart: () => SaveStartHandler;
|
|
|
38
35
|
* @returns Save complete function
|
|
39
36
|
*/
|
|
40
37
|
export declare const useSaveComplete: () => SaveCompleteHandler;
|
|
41
|
-
/**
|
|
42
|
-
* Hook to use the test email click handler
|
|
43
|
-
* @returns Test email click function
|
|
44
|
-
*/
|
|
45
|
-
export declare const useTestEmailClick: () => TestEmailClickHandler;
|
|
46
38
|
/**
|
|
47
39
|
* Convenience hook to get all Guido actions
|
|
48
40
|
* @returns Object containing all action handlers
|
|
@@ -51,5 +43,4 @@ export declare const useGuidoActions: () => {
|
|
|
51
43
|
back: BackHandler;
|
|
52
44
|
saveStart: SaveStartHandler;
|
|
53
45
|
saveComplete: SaveCompleteHandler;
|
|
54
|
-
testEmailClick: TestEmailClickHandler;
|
|
55
46
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const migrationTemplate = "\n <td \n align=\"left\" \n esd-extension-block-id=\"radio-button-block\" \n esd-handler-name=\"esd-extension-RadioButtonBlock\"\n class=\"radio-button-v2 esd-block-ra esd-radio-button-block esd-extension-block es-p10t es-p10b es-p30r es-p30l\"\n >\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n {-{-TITLE-}-}\n </tr>\n <tr>\n {-{-DESCRIPTION-}-}\n </tr>\n </tbody>\n </table>\n </td>\n <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n <td width=\"50%\">\n <table width=\"100%\">\n <tr>\n <td width=\"24\">\n <input\n type=\"radio\"\n id=\"radioYes\"\n name=\"unsubscribe
|
|
1
|
+
declare const migrationTemplate = "\n <td \n align=\"left\" \n esd-extension-block-id=\"radio-button-block\" \n esd-handler-name=\"esd-extension-RadioButtonBlock\"\n class=\"radio-button-v2 esd-block-ra esd-radio-button-block esd-extension-block es-p10t es-p10b es-p30r es-p30l\"\n >\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n {-{-TITLE-}-}\n </tr>\n <tr>\n {-{-DESCRIPTION-}-}\n </tr>\n </tbody>\n </table>\n </td>\n <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n <td width=\"50%\">\n <table width=\"100%\">\n <tr>\n <td width=\"24\">\n <input\n type=\"radio\"\n id=\"radioYes\"\n name=\"unsubscribe\"\n data-cke-editable=\"1\"\n style=\"margin: 0px; vertical-align: middle;>\n </td>\n {-{-YES-}-}\n </tr>\n </table>\n </td>\n <td width=\"50%\">\n <table width=\"100%\">\n <tr>\n <td width=\"24\">\n <input\n type=\"radio\"\n id=\"radioNo\"\n name=\"unsubscribe\"\n data-cke-editable=\"1\"\n style=\"margin: 0px; vertical-align: middle;\">\n </td>\n {-{-NO-}-}\n </tr>\n </table>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n";
|
|
2
2
|
/**
|
|
3
3
|
* @returns The template for the default checkbox block
|
|
4
4
|
*/
|
|
@@ -34,7 +34,7 @@ interface StoreState {
|
|
|
34
34
|
filterList: FiltersResponse;
|
|
35
35
|
filterGroup: number;
|
|
36
36
|
}
|
|
37
|
-
export declare const useRecommendationExtensionStore: import("pinia").StoreDefinition<"
|
|
37
|
+
export declare const useRecommendationExtensionStore: import("pinia").StoreDefinition<"recommendationExtension", StoreState, {
|
|
38
38
|
hasFilters: (state: {
|
|
39
39
|
recommendationCampaignUrls: Record<string, string>;
|
|
40
40
|
recommendationConfigs: {
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
import type { DynamicContent
|
|
1
|
+
import type { DynamicContent } from '@@/Types/generic';
|
|
2
2
|
export declare class ExternalMergeTagsLibrary {
|
|
3
3
|
selectedDynamicContent: DynamicContent | null;
|
|
4
4
|
dataSelectCallback: (data: DynamicContent) => void;
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Opens the merge tags library modal
|
|
8
|
-
* @param dynamicContent - Currently selected dynamic content (if any)
|
|
9
|
-
* @param onDataSelectCallback - Callback invoked when user selects a merge tag
|
|
10
|
-
* @param position - Optional position data to place the modal
|
|
11
|
-
*/
|
|
12
|
-
openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void, position?: PositionData): void;
|
|
5
|
+
openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void): void;
|
|
13
6
|
}
|
|
@@ -1,66 +1,16 @@
|
|
|
1
|
-
import type { MergeTag } from '@@/Types/generic';
|
|
2
1
|
import { UIElementType, UIElement, UIElementTagRegistry } from '@stripoinc/ui-editor-extensions';
|
|
3
2
|
export declare class DynamicContentTagRegistry extends UIElementTagRegistry {
|
|
4
3
|
registerUiElements(uiElementsTagsMap: Record<UIElementType, string>): void;
|
|
5
4
|
}
|
|
6
5
|
export declare class DynamicContentUiElementExtension extends UIElement {
|
|
7
6
|
private mergeTagsButton;
|
|
7
|
+
private listener;
|
|
8
8
|
private mergeTagsLibrary;
|
|
9
|
-
private
|
|
10
|
-
private lastClickedElement;
|
|
11
|
-
private lastClickedFrame;
|
|
12
|
-
private mousedownListener;
|
|
9
|
+
private selectedDynamicContent;
|
|
13
10
|
getId(): string;
|
|
14
11
|
onRender(container: HTMLElement): void;
|
|
15
12
|
onDestroy(): void;
|
|
16
13
|
_onClick(): void;
|
|
17
|
-
/**
|
|
18
|
-
* Called when Stripo detects merge tag interactions
|
|
19
|
-
* This is the key method that receives notifications about merge tag clicks
|
|
20
|
-
* @param name - Attribute name (e.g., 'mergeTag')
|
|
21
|
-
* @param value - MergeTag object with label, value, selStart, selEnd, etc.
|
|
22
|
-
*/
|
|
23
|
-
onAttributeUpdated(name: string, value: MergeTag | null | undefined): void;
|
|
24
14
|
openMergeTagLibrary(): void;
|
|
25
|
-
/**
|
|
26
|
-
* Opens the dynamic content library for external apps
|
|
27
|
-
* Dispatches event with dynamic content data and position
|
|
28
|
-
*/
|
|
29
|
-
private _openDynamicContentLibrary;
|
|
30
|
-
/**
|
|
31
|
-
* Gets the button's position on the screen
|
|
32
|
-
* Used to position the modal or anything else near the button
|
|
33
|
-
*/
|
|
34
|
-
private _getButtonPosition;
|
|
35
|
-
/**
|
|
36
|
-
* Sets up coordinate tracking for merge tag clicks in the iframe
|
|
37
|
-
* Workaround from Stripo intercepting click events - tracks mousedown events instead
|
|
38
|
-
*/
|
|
39
|
-
private _setupCoordinateTracking;
|
|
40
|
-
/**
|
|
41
|
-
* Gets the editor iframe element
|
|
42
|
-
*/
|
|
43
|
-
private _getEditorFrame;
|
|
44
|
-
/**
|
|
45
|
-
* Finds merge tag element in the element tree
|
|
46
|
-
*/
|
|
47
|
-
private _findMergeTagElement;
|
|
48
|
-
/**
|
|
49
|
-
* Gets the position of the last clicked element, calculated on-demand
|
|
50
|
-
* This ensures we always use the correct element's position even with rapid clicks
|
|
51
|
-
*/
|
|
52
|
-
private _getLastClickedPosition;
|
|
53
|
-
/**
|
|
54
|
-
* Calculates absolute position of element relative to page
|
|
55
|
-
*/
|
|
56
|
-
private _calculateAbsolutePosition;
|
|
57
|
-
/**
|
|
58
|
-
* Cleans up the coordinate tracking event listener
|
|
59
|
-
*/
|
|
60
|
-
private _cleanupCoordinateTracking;
|
|
61
|
-
/**
|
|
62
|
-
* Returns the HTML template for the "Add Dynamic Content" button
|
|
63
|
-
* This button is placed in the merge tags selector UI
|
|
64
|
-
*/
|
|
65
15
|
getTemplate(): string;
|
|
66
16
|
}
|