@useinsider/guido 3.13.1-beta.695671e → 3.13.1-beta.a1e3c5f
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/dist/@types/config/schemas.js +15 -13
- package/dist/components/Guido.vue.js +1 -1
- package/dist/components/Guido.vue2.js +67 -66
- package/dist/config/migrator/index.js +11 -10
- package/dist/config/migrator/trackIdMigrator.js +11 -0
- package/dist/extensions/Blocks/Items/controls/name/trimming.js +16 -16
- package/dist/extensions/Blocks/Items/controls/settingsControl.js +35 -36
- package/dist/extensions/Blocks/Items/template.js +263 -228
- package/dist/guido.css +1 -1
- package/dist/library.js +14 -9
- package/dist/src/@types/config/schemas.d.ts +4 -0
- package/dist/src/composables/useConfig.d.ts +2 -0
- package/dist/src/config/migrator/index.d.ts +4 -1
- package/dist/src/config/migrator/trackIdMigrator.d.ts +6 -0
- package/dist/src/library.d.ts +2 -0
- package/dist/src/stores/config.d.ts +18 -0
- package/dist/src/stores/editor.d.ts +25 -0
- package/dist/src/utils/linkTrackingIds.d.ts +25 -0
- package/dist/stores/editor.js +4 -1
- package/dist/utils/linkTrackingIds.js +44 -0
- package/dist/utils/pairProductVariables.js +24 -27
- package/dist/utils/templatePreparation.js +70 -59
- package/package.json +1 -1
- package/dist/extensions/Blocks/Items/utils/nameNode.js +0 -4
- package/dist/src/extensions/Blocks/Items/utils/nameNode.d.ts +0 -9
- package/dist/src/utils/unwrapProductNameLink.d.ts +0 -15
- package/dist/utils/unwrapProductNameLink.js +0 -37
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ModuleFolderDefaults as
|
|
2
|
-
import { object as a, number as n, optional as e, string as t, picklist as r, pipe as p, minLength as b, custom as h, boolean as o, array as c, record as k, fallback as C, literal as i, looseObject as g, variant as R, union as
|
|
1
|
+
import { ModuleFolderDefaults as f } from "../../enums/defaults.js";
|
|
2
|
+
import { object as a, number as n, optional as e, string as t, picklist as r, pipe as p, minLength as b, custom as h, boolean as o, array as c, record as k, fallback as C, literal as i, looseObject as g, variant as R, union as y, unknown as s, lazy as T } from "../../node_modules/valibot/dist/index.js";
|
|
3
3
|
const d = {
|
|
4
4
|
/** Promotional/marketing emails */
|
|
5
5
|
PROMOTIONAL: 1,
|
|
@@ -12,7 +12,7 @@ const d = {
|
|
|
12
12
|
ARCHITECT: 49,
|
|
13
13
|
/** Unsubscribe page builder */
|
|
14
14
|
UNSUBSCRIBE_PAGES: 97
|
|
15
|
-
},
|
|
15
|
+
}, I = a({
|
|
16
16
|
/** Unique identifier for the template being edited */
|
|
17
17
|
templateId: p(
|
|
18
18
|
t(),
|
|
@@ -25,7 +25,7 @@ const d = {
|
|
|
25
25
|
),
|
|
26
26
|
/** Optional variation ID for A/B testing */
|
|
27
27
|
variationId: e(t())
|
|
28
|
-
}),
|
|
28
|
+
}), A = a({
|
|
29
29
|
/** Fallback font name (e.g., "Georgia") */
|
|
30
30
|
name: t(),
|
|
31
31
|
/** Fallback font family (e.g., "serif" or "sans-serif") */
|
|
@@ -53,7 +53,7 @@ const d = {
|
|
|
53
53
|
/** Display name for the current user */
|
|
54
54
|
username: e(t(), "Guido User"),
|
|
55
55
|
/** Fallback font settings from partner settings — used to match backend size calculation */
|
|
56
|
-
fallbackFont: e(
|
|
56
|
+
fallbackFont: e(A)
|
|
57
57
|
}), v = a({
|
|
58
58
|
/** Display text for the dynamic content */
|
|
59
59
|
text: t(),
|
|
@@ -83,7 +83,7 @@ const d = {
|
|
|
83
83
|
/** Block ID (matches the dictionary key and the legacy HTML element id) */
|
|
84
84
|
id: e(n()),
|
|
85
85
|
/** Decimal places for price display (legacy data may use string or number) */
|
|
86
|
-
decimalCount: e(
|
|
86
|
+
decimalCount: e(y([t(), n()])),
|
|
87
87
|
/** Pinned product IDs (empty array when filter-driven) */
|
|
88
88
|
productIds: e(c(s())),
|
|
89
89
|
/** Whether the block requested live products at send time */
|
|
@@ -117,7 +117,7 @@ const d = {
|
|
|
117
117
|
/** Block type marker used by some legacy variants */
|
|
118
118
|
blockType: e(t()),
|
|
119
119
|
/** Size variant marker (legacy data may use string or number) */
|
|
120
|
-
size: e(
|
|
120
|
+
size: e(y([t(), n()])),
|
|
121
121
|
/** Vertical responsiveness flag (legacy size=1 variants) */
|
|
122
122
|
verticalResponsiveness: e(o()),
|
|
123
123
|
/** Legacy "Move to next line" price placement toggle (cardPricePlacement.js) */
|
|
@@ -175,9 +175,9 @@ const d = {
|
|
|
175
175
|
/** Email header settings */
|
|
176
176
|
emailHeader: e(N, { senderName: "", subject: "" }),
|
|
177
177
|
/** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
|
|
178
|
-
savedModulesFolderName: e(t(),
|
|
178
|
+
savedModulesFolderName: e(t(), f.SAVED_MODULES),
|
|
179
179
|
/** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
|
|
180
|
-
defaultModulesFolderName: e(t(),
|
|
180
|
+
defaultModulesFolderName: e(t(), f.DEFAULT_MODULES)
|
|
181
181
|
}), x = a({
|
|
182
182
|
/** Whether to show the header bar */
|
|
183
183
|
showHeader: e(o(), !0),
|
|
@@ -203,7 +203,9 @@ const d = {
|
|
|
203
203
|
/** Enable autosave (3-min interval + tab-hide). User toggles on/off from the header. */
|
|
204
204
|
autosave: e(o(), !1),
|
|
205
205
|
/** Enable pre-save domain-allowlist validation (opt-in; Guido self-serves the block toaster) */
|
|
206
|
-
allowlistEnabled: e(o(), !1)
|
|
206
|
+
allowlistEnabled: e(o(), !1),
|
|
207
|
+
/** Enable persistent link tracking-id assignment for the click heatmap (opt-in) */
|
|
208
|
+
linkTrackingIds: e(o(), !1)
|
|
207
209
|
}), U = r([
|
|
208
210
|
"amp-accordion",
|
|
209
211
|
"amp-carousel",
|
|
@@ -299,7 +301,7 @@ const d = {
|
|
|
299
301
|
}), K = a({
|
|
300
302
|
// Required sections
|
|
301
303
|
/** Identity configuration (required) */
|
|
302
|
-
identity:
|
|
304
|
+
identity: I,
|
|
303
305
|
/** Partner configuration (required) */
|
|
304
306
|
partner: L,
|
|
305
307
|
// Optional sections (with defaults)
|
|
@@ -331,10 +333,10 @@ export {
|
|
|
331
333
|
v as DynamicContentSchema,
|
|
332
334
|
O as EditorSchema,
|
|
333
335
|
N as EmailHeaderSchema,
|
|
334
|
-
|
|
336
|
+
A as FallbackFontSchema,
|
|
335
337
|
F as FeaturesSchema,
|
|
336
338
|
K as GuidoConfigSchema,
|
|
337
|
-
|
|
339
|
+
I as IdentitySchema,
|
|
338
340
|
P as LegacyRecommendationConfigSchema,
|
|
339
341
|
d as MessageType,
|
|
340
342
|
L as PartnerSchema,
|
|
@@ -1,49 +1,50 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { useCortexBlueprintBridge as
|
|
3
|
-
import { provideGuidoActions as
|
|
4
|
-
import { useGuidoStateBridge as
|
|
5
|
-
import { usePartner as
|
|
6
|
-
import { useStripo as
|
|
7
|
-
import { useTimerClone as
|
|
8
|
-
import { migrate as
|
|
1
|
+
import { defineComponent as K, defineAsyncComponent as M, ref as O, computed as U, watch as _, onMounted as V, onUnmounted as j } from "vue";
|
|
2
|
+
import { useCortexBlueprintBridge as J } from "../composables/useCortexBlueprintBridge.js";
|
|
3
|
+
import { provideGuidoActions as Q } from "../composables/useGuidoActions.js";
|
|
4
|
+
import { useGuidoStateBridge as X } from "../composables/useGuidoStateBridge.js";
|
|
5
|
+
import { usePartner as Y } from "../composables/usePartner.js";
|
|
6
|
+
import { useStripo as Z } from "../composables/useStripo.js";
|
|
7
|
+
import { useTimerClone as ee } from "../composables/useTimerClone.js";
|
|
8
|
+
import { migrate as B } from "../config/migrator/index.js";
|
|
9
9
|
import { ModuleFolderDefaults as N } from "../enums/defaults.js";
|
|
10
|
-
import { RIBBON_SELECTOR as
|
|
11
|
-
import { useRecommendationExtensionStore as
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import { useStripoApi as
|
|
20
|
-
import { useConfigStore as
|
|
21
|
-
import { useDynamicContentStore as
|
|
22
|
-
import { useEditorStore as
|
|
23
|
-
import { usePreviewStore as
|
|
24
|
-
import { useTemplateStore as
|
|
25
|
-
import { useUnsubscribeStore as
|
|
26
|
-
|
|
10
|
+
import { RIBBON_SELECTOR as te } from "../enums/onboarding.js";
|
|
11
|
+
import { useRecommendationExtensionStore as oe } from "../extensions/Blocks/Recommendation/store/recommendation.js";
|
|
12
|
+
import ne from "./organisms/AutoSaveController.vue.js";
|
|
13
|
+
import re from "./organisms/base/Toaster.vue.js";
|
|
14
|
+
import se from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
|
|
15
|
+
import ie from "./organisms/header/HeaderWrapper.vue.js";
|
|
16
|
+
import ae from "./organisms/LoadingWrapper.vue.js";
|
|
17
|
+
import ce from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
|
|
18
|
+
import de from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
|
|
19
|
+
import { useStripoApi as me } from "../services/stripoApi.js";
|
|
20
|
+
import { useConfigStore as le } from "../stores/config.js";
|
|
21
|
+
import { useDynamicContentStore as ue } from "../stores/dynamic-content.js";
|
|
22
|
+
import { useEditorStore as P } from "../stores/editor.js";
|
|
23
|
+
import { usePreviewStore as pe } from "../stores/preview.js";
|
|
24
|
+
import { useTemplateStore as fe } from "../stores/template.js";
|
|
25
|
+
import { useUnsubscribeStore as ye } from "../stores/unsubscribe.js";
|
|
26
|
+
import { readTrackSeq as ve } from "../utils/linkTrackingIds.js";
|
|
27
|
+
const $e = /* @__PURE__ */ K({
|
|
27
28
|
__name: "Guido",
|
|
28
29
|
props: {
|
|
29
30
|
config: null,
|
|
30
31
|
ready: { type: Boolean, default: !0 }
|
|
31
32
|
},
|
|
32
33
|
emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
|
|
33
|
-
setup(
|
|
34
|
-
const i =
|
|
34
|
+
setup(A, { expose: W, emit: r }) {
|
|
35
|
+
const i = A, x = M(
|
|
35
36
|
() => import("./organisms/email-preview/PreviewContainer.vue.js")
|
|
36
|
-
),
|
|
37
|
+
), G = M(
|
|
37
38
|
() => import("./organisms/onboarding/OnboardingWrapper.vue.js")
|
|
38
|
-
), g =
|
|
39
|
+
), g = O(), l = O(), u = ue(), S = ye(), o = le();
|
|
39
40
|
i.ready && o.init(i.config);
|
|
40
|
-
const
|
|
41
|
+
const c = P(), H = pe(), m = U(() => c.hasChanges), { isTestPartner: $ } = Y(), h = () => {
|
|
41
42
|
var t;
|
|
42
43
|
return (t = g.value) == null ? void 0 : t.handleSave(!0);
|
|
43
44
|
}, b = (t) => {
|
|
44
|
-
|
|
45
|
+
c.loadingStatus = t;
|
|
45
46
|
};
|
|
46
|
-
|
|
47
|
+
J(), X();
|
|
47
48
|
const p = () => {
|
|
48
49
|
var t, e;
|
|
49
50
|
return {
|
|
@@ -54,78 +55,78 @@ const xe = /* @__PURE__ */ q({
|
|
|
54
55
|
savedModulesFolderName: ((t = o.editor) == null ? void 0 : t.savedModulesFolderName) || N.SAVED_MODULES,
|
|
55
56
|
defaultModulesFolderName: ((e = o.editor) == null ? void 0 : e.defaultModulesFolderName) || N.DEFAULT_MODULES
|
|
56
57
|
};
|
|
57
|
-
}, { initPlugin: E, preloadRuntime: w } =
|
|
58
|
+
}, { initPlugin: E, preloadRuntime: w } = Z(), { getDefaultTemplate: C } = me(), { cloneTimersOnSave: D, hasTimerBlocks: k } = ee(), z = U(() => {
|
|
58
59
|
var t;
|
|
59
60
|
return !((t = o.ui) != null && t.showHeader);
|
|
60
61
|
});
|
|
61
|
-
|
|
62
|
+
Q({
|
|
62
63
|
onBack: () => {
|
|
63
|
-
console.debug("guido:back"),
|
|
64
|
+
console.debug("guido:back"), r("back");
|
|
64
65
|
},
|
|
65
66
|
onSaveStart: () => {
|
|
66
|
-
console.debug("guido:save:start"),
|
|
67
|
+
console.debug("guido:save:start"), r("save:start");
|
|
67
68
|
},
|
|
68
69
|
onSaveComplete: (t) => {
|
|
69
70
|
const e = { ...t, metadata: p() };
|
|
70
|
-
console.debug("guido:save:complete", e),
|
|
71
|
+
console.debug("guido:save:complete", e), r("save:complete", e);
|
|
71
72
|
},
|
|
72
73
|
onTestEmailClick: () => {
|
|
73
|
-
console.debug("guido:test-email:click"),
|
|
74
|
+
console.debug("guido:test-email:click"), r("test-email:click");
|
|
74
75
|
}
|
|
75
76
|
});
|
|
76
|
-
const
|
|
77
|
+
const T = (t) => {
|
|
77
78
|
console.debug("dynamic-content:close", t), u.setSelectedDynamicContent(t), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: t }));
|
|
78
|
-
},
|
|
79
|
+
}, F = () => {
|
|
79
80
|
console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
|
|
80
81
|
};
|
|
81
|
-
|
|
82
|
-
|
|
82
|
+
_(() => m.value, () => {
|
|
83
|
+
r("on-change", m.value);
|
|
83
84
|
});
|
|
84
85
|
const f = (t) => {
|
|
85
|
-
const e = t, { attribute: s, position:
|
|
86
|
-
console.debug("dynamic-content:open", e.detail),
|
|
86
|
+
const e = t, { attribute: s, position: d } = e.detail;
|
|
87
|
+
console.debug("dynamic-content:open", e.detail), r("dynamic-content:open", s, d);
|
|
87
88
|
};
|
|
88
89
|
let a = null;
|
|
89
90
|
const y = () => {
|
|
90
91
|
var e;
|
|
91
|
-
const t = document.querySelector(
|
|
92
|
+
const t = document.querySelector(te);
|
|
92
93
|
(e = l.value) == null || e.style.setProperty("--ribbon-offset", `${(t == null ? void 0 : t.offsetHeight) ?? 0}px`);
|
|
93
94
|
}, v = async () => {
|
|
94
95
|
var t;
|
|
95
96
|
try {
|
|
96
|
-
o.initialized || o.init(i.config),
|
|
97
|
-
const e = o.template, s = (e == null ? void 0 : e.html) || "",
|
|
97
|
+
o.initialized || o.init(i.config), c.templateId = o.templateId;
|
|
98
|
+
const e = o.template, s = (e == null ? void 0 : e.html) || "", d = (e == null ? void 0 : e.css) || "", I = (e == null ? void 0 : e.preselectedDynamicContent) || [];
|
|
98
99
|
S.selectedUnsubscribePages = (e == null ? void 0 : e.selectedUnsubscribePages) || [];
|
|
99
|
-
const
|
|
100
|
-
let
|
|
101
|
-
html: s && await
|
|
102
|
-
css:
|
|
100
|
+
const L = ((t = e == null ? void 0 : e.migration) == null ? void 0 : t.recommendationConfigs) ?? {}, R = { linkTrackingIds: o.isFeatureEnabled("linkTrackingIds") };
|
|
101
|
+
let n = {
|
|
102
|
+
html: s && await B(s, L, R),
|
|
103
|
+
css: d
|
|
103
104
|
};
|
|
104
|
-
|
|
105
|
-
const
|
|
106
|
-
preselectedDynamicContentList:
|
|
105
|
+
n.html || (n = await C(), n.html = await B(n.html, L, R)), k(n.html) && (n.html = await D(n.html)), c.trackIdSessionFloor = ve(n.html);
|
|
106
|
+
const q = {
|
|
107
|
+
preselectedDynamicContentList: I,
|
|
107
108
|
onReady: () => {
|
|
108
|
-
console.debug("guido:ready"),
|
|
109
|
+
console.debug("guido:ready"), r("ready");
|
|
109
110
|
}
|
|
110
111
|
};
|
|
111
|
-
await E(
|
|
112
|
+
await E(n, p(), q), u.selectedDynamicContentList = I;
|
|
112
113
|
} catch (e) {
|
|
113
114
|
console.error("Failed to initialize Stripo editor:", e);
|
|
114
115
|
}
|
|
115
116
|
};
|
|
116
|
-
return
|
|
117
|
+
return V(async () => {
|
|
117
118
|
var e;
|
|
118
|
-
console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"),
|
|
119
|
+
console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), oe().$reset(), P().$reset(), fe().$reset(), y();
|
|
119
120
|
const t = (e = l.value) == null ? void 0 : e.parentElement;
|
|
120
121
|
if (t && (a = new ResizeObserver(y), a.observe(t)), w(), i.ready)
|
|
121
122
|
await v();
|
|
122
123
|
else {
|
|
123
|
-
const s =
|
|
124
|
-
|
|
124
|
+
const s = _(() => i.ready, (d) => {
|
|
125
|
+
d && (s(), v());
|
|
125
126
|
});
|
|
126
127
|
}
|
|
127
128
|
document.addEventListener("dynamic-content:open", f);
|
|
128
|
-
}),
|
|
129
|
+
}), j(() => {
|
|
129
130
|
a == null || a.disconnect(), document.removeEventListener("dynamic-content:open", f);
|
|
130
131
|
try {
|
|
131
132
|
window.UIEditor.removeEditor();
|
|
@@ -133,17 +134,17 @@ const xe = /* @__PURE__ */ q({
|
|
|
133
134
|
console.debug("Failed to remove Stripo editor: No editor found");
|
|
134
135
|
}
|
|
135
136
|
o.reset();
|
|
136
|
-
}),
|
|
137
|
+
}), W({
|
|
137
138
|
dynamicContent: {
|
|
138
|
-
insert:
|
|
139
|
-
close:
|
|
139
|
+
insert: T,
|
|
140
|
+
close: F
|
|
140
141
|
},
|
|
141
142
|
hasChanges: m,
|
|
142
143
|
saveSilent: h,
|
|
143
144
|
setLoading: b
|
|
144
|
-
}), { __sfc: !0, PreviewContainer:
|
|
145
|
+
}), { __sfc: !0, PreviewContainer: x, OnboardingWrapper: G, headerWrapperRef: g, wrapperRef: l, dynamicContentStore: u, unsubscribeStore: S, props: i, configStore: o, editorStore: c, previewStore: H, hasChanges: m, isTestPartner: $, saveSilent: h, setLoading: b, emit: r, buildMetadata: p, initPlugin: E, preloadRuntime: w, getDefaultTemplate: C, cloneTimersOnSave: D, hasTimerBlocks: k, noHeader: z, insertDynamicContent: T, closeDynamicContent: F, handleDynamicContentOpen: f, ribbonObserver: a, updateRibbonOffset: y, startEditor: v, AutoSaveController: ne, Toaster: re, FilterSelectionDrawer: se, HeaderWrapper: ie, LoadingWrapper: ae, SaveAsTemplateDrawer: ce, UnsubscribeWrapper: de };
|
|
145
146
|
}
|
|
146
147
|
});
|
|
147
148
|
export {
|
|
148
|
-
|
|
149
|
+
$e as default
|
|
149
150
|
};
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import { migrateCheckbox as
|
|
2
|
-
import { migrateCouponBlock as
|
|
1
|
+
import { migrateCheckbox as i } from "./checkboxMigrator.js";
|
|
2
|
+
import { migrateCouponBlock as a } from "./couponBlockMigrator.js";
|
|
3
3
|
import { migrateItemsBlock as e } from "./itemsBlockMigrator.js";
|
|
4
|
-
import { migrateRadioButton as
|
|
5
|
-
import { migrateRecommendation as
|
|
6
|
-
import { migrateSocialIcons as
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
import { migrateRadioButton as c } from "./radioButtonMigrator.js";
|
|
5
|
+
import { migrateRecommendation as g } from "./recommendationMigrator.js";
|
|
6
|
+
import { migrateSocialIcons as n } from "./socialIconMigrator.js";
|
|
7
|
+
import { migrateTrackIds as p } from "./trackIdMigrator.js";
|
|
8
|
+
import { migrateUnsubscribe as f } from "./unsubscribeMigrator.js";
|
|
9
|
+
const x = async (m, o = {}, t = {}) => {
|
|
10
|
+
let r = m;
|
|
11
|
+
return r = i(r), r = c(r), r = await f(r), r = a(r), r = g(r, o), r = e(r), r = n(r), t.linkTrackingIds && (r = p(r)), r;
|
|
11
12
|
};
|
|
12
13
|
export {
|
|
13
|
-
|
|
14
|
+
x as migrate
|
|
14
15
|
};
|
|
@@ -1,31 +1,30 @@
|
|
|
1
|
-
import { ModificationDescription as
|
|
2
|
-
import { CommonControl as
|
|
3
|
-
import { ItemsBlockControlId as
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
const g = a.NAME_TRIMMING, i = {
|
|
1
|
+
import { ModificationDescription as d, UIElementType as a, UEAttr as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
|
+
import { CommonControl as T } from "../../../common-control.js";
|
|
3
|
+
import { ItemsBlockControlId as l } from "../../enums/controlEnums.js";
|
|
4
|
+
import { getItemsBlockConfig as o, setItemsBlockConfig as c } from "../../utils/nodeConfigUtils.js";
|
|
5
|
+
const g = l.NAME_TRIMMING, i = {
|
|
7
6
|
TRIMMING: "trimming"
|
|
8
7
|
};
|
|
9
|
-
class y extends
|
|
8
|
+
class y extends T {
|
|
10
9
|
getId() {
|
|
11
10
|
return g;
|
|
12
11
|
}
|
|
13
12
|
getTemplate() {
|
|
14
13
|
return `
|
|
15
|
-
<div class="container ${
|
|
14
|
+
<div class="container ${l.NAME_TRIMMING}">
|
|
16
15
|
${this._getTextTrimming()}
|
|
17
16
|
</div>
|
|
18
17
|
`;
|
|
19
18
|
}
|
|
20
19
|
onRender() {
|
|
21
|
-
const e =
|
|
20
|
+
const e = o(this.currentNode);
|
|
22
21
|
this.api.updateValues({ [i.TRIMMING]: (e == null ? void 0 : e.nameTrimming) ?? !0 }), this.api.onValueChanged(i.TRIMMING, (t) => {
|
|
23
22
|
this._onTrimmingChange(t);
|
|
24
23
|
});
|
|
25
24
|
}
|
|
26
25
|
onTemplateNodeUpdated(e) {
|
|
27
26
|
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
|
|
28
|
-
const t =
|
|
27
|
+
const t = o(this.currentNode);
|
|
29
28
|
this.api.updateValues({ [i.TRIMMING]: (t == null ? void 0 : t.nameTrimming) ?? !0 });
|
|
30
29
|
});
|
|
31
30
|
}
|
|
@@ -33,19 +32,20 @@ class y extends p {
|
|
|
33
32
|
c(this.currentNode, this.api, { nameTrimming: e }), this.api.updateValues({ [i.TRIMMING]: e }), this._applyTrimmingStyles(e);
|
|
34
33
|
}
|
|
35
34
|
_applyTrimmingStyles(e) {
|
|
36
|
-
|
|
35
|
+
var m;
|
|
36
|
+
const t = (m = this.currentNode) == null ? void 0 : m.querySelector("p > a");
|
|
37
37
|
if (!t)
|
|
38
38
|
return;
|
|
39
|
-
const n =
|
|
40
|
-
|
|
39
|
+
const n = o(this.currentNode), s = e !== void 0 ? e : (n == null ? void 0 : n.nameTrimming) ?? !0, r = this.api.getDocumentModifier().modifyHtml(t);
|
|
40
|
+
s ? r.setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis") : r.removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow"), r.setStyle("max-width", "100%").apply(new d(`Text Trimming ${s ? "Enabled" : "Disabled"}`));
|
|
41
41
|
}
|
|
42
42
|
_getTextTrimming() {
|
|
43
43
|
return `
|
|
44
44
|
<div class="display-flex align-items-center justify-content-between">
|
|
45
|
-
<${
|
|
46
|
-
${
|
|
45
|
+
<${a.LABEL}
|
|
46
|
+
${p.LABEL.text}="${this.api.translate("Text Trimming")}"
|
|
47
47
|
>
|
|
48
|
-
</${
|
|
48
|
+
</${a.LABEL}>
|
|
49
49
|
${this._GuToggle(i.TRIMMING)}
|
|
50
50
|
</div>
|
|
51
51
|
`;
|
|
@@ -1,21 +1,20 @@
|
|
|
1
|
-
import { ModificationDescription as
|
|
1
|
+
import { ModificationDescription as y, UEAttr as L } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
2
|
import { CommonControl as k } from "../../common-control.js";
|
|
3
3
|
import { ItemsBlockId as I } from "../enums/controlEnums.js";
|
|
4
|
-
import { productPairs as
|
|
4
|
+
import { productPairs as N, templateFirstLine as D } from "../enums/productEnums.js";
|
|
5
5
|
import { SETTINGS_ENUMS as d, ItemTypeOptions as x, OrientationOptions as F, ItemInCartOptions as O, DefaultConfigValues as H } from "../enums/settingsEnums.js";
|
|
6
6
|
import $ from "../layouts/horizontal.html.js";
|
|
7
|
-
import
|
|
8
|
-
import { getDefaultTemplate as
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
const G = "ui-elements-items-block", m = {
|
|
7
|
+
import q from "../layouts/vertical.html.js";
|
|
8
|
+
import { getDefaultTemplate as w, wrapInTableRow as C } from "../template.js";
|
|
9
|
+
import { getItemsBlockConfig as _, setItemsBlockConfig as M, escapeReplacement as g, deriveItemNumber as V } from "../utils/nodeConfigUtils.js";
|
|
10
|
+
const B = "ui-elements-items-block", m = {
|
|
12
11
|
ITEMS_TYPE: "itemsType",
|
|
13
12
|
ORIENTATION: "orientation",
|
|
14
13
|
ITEM_IDS: "itemIds"
|
|
15
14
|
};
|
|
16
|
-
class
|
|
15
|
+
class Z extends k {
|
|
17
16
|
getId() {
|
|
18
|
-
return
|
|
17
|
+
return B;
|
|
19
18
|
}
|
|
20
19
|
getTemplate() {
|
|
21
20
|
return `
|
|
@@ -87,7 +86,7 @@ class te extends k {
|
|
|
87
86
|
M(this.currentNode, this.api, {
|
|
88
87
|
orientation: e,
|
|
89
88
|
priceOrientation: "horizontal"
|
|
90
|
-
}, r), r.apply(new
|
|
89
|
+
}, r), r.apply(new y("Changed orientation")), this._reOrderTemplate(), setTimeout(() => {
|
|
91
90
|
this._recalculateTrimming();
|
|
92
91
|
}, 50);
|
|
93
92
|
}
|
|
@@ -104,7 +103,7 @@ class te extends k {
|
|
|
104
103
|
buttonLink: n
|
|
105
104
|
}, o), this._updateDataTypeAttributes(r, o), this._initializeSelectItems();
|
|
106
105
|
const c = this._getTemplateData(r, i.value);
|
|
107
|
-
this._updateImageSrc(c.imageSrc, o), this._updateName(c.name, o), this._updatePrice(c.price, o), this._updateOriginalPrice(c.originalPrice, o), this._updateQuantity(c.quantity, r, o), o.apply(new
|
|
106
|
+
this._updateImageSrc(c.imageSrc, o), this._updateName(c.name, o), this._updatePrice(c.price, o), this._updateOriginalPrice(c.originalPrice, o), this._updateQuantity(c.quantity, r, o), o.apply(new y("Updated items type"));
|
|
108
107
|
}
|
|
109
108
|
_onItemIdsChange(e) {
|
|
110
109
|
this.api.updateValues({ [m.ITEM_IDS]: e });
|
|
@@ -115,7 +114,7 @@ class te extends k {
|
|
|
115
114
|
buttonLink: r
|
|
116
115
|
}, i), this._updateDataNumberAttributes(e, i);
|
|
117
116
|
const n = this._getTemplateData(void 0, e);
|
|
118
|
-
this._updateImageSrc(n.imageSrc, i), this._updateName(n.name, i), this._updatePrice(n.price, i), this._updateOriginalPrice(n.originalPrice, i), this._updateQuantity(n.quantity, void 0, i), i.apply(new
|
|
117
|
+
this._updateImageSrc(n.imageSrc, i), this._updateName(n.name, i), this._updatePrice(n.price, i), this._updateOriginalPrice(n.originalPrice, i), this._updateQuantity(n.quantity, void 0, i), i.apply(new y("Updated item selection"));
|
|
119
118
|
}
|
|
120
119
|
_initializeSelectItems() {
|
|
121
120
|
this.api.setUIEAttribute(
|
|
@@ -150,25 +149,25 @@ class te extends k {
|
|
|
150
149
|
}
|
|
151
150
|
_renderTemplate() {
|
|
152
151
|
const e = _(this.currentNode), r = (e == null ? void 0 : e.orientation) ?? d.ORIENTATION.VERTICAL, t = (e == null ? void 0 : e.type) ?? d.ITEMS_TYPE.CART_ITEMS, i = (e == null ? void 0 : e.itemsSelectValue) ?? "", n = (e == null ? void 0 : e.priceCurrencySymbol) ?? "", s = (e == null ? void 0 : e.priceCurrencyLocation) ?? "0", o = (e == null ? void 0 : e.priceFormatted) ?? !1;
|
|
153
|
-
this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(
|
|
152
|
+
this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(w({
|
|
154
153
|
orientation: r,
|
|
155
154
|
itemsType: t,
|
|
156
155
|
itemId: i,
|
|
157
156
|
currencySymbol: n,
|
|
158
157
|
currencyLocation: s,
|
|
159
158
|
formattedPrice: o
|
|
160
|
-
})).apply(new
|
|
159
|
+
})).apply(new y("Updated template"));
|
|
161
160
|
}
|
|
162
161
|
_getTemplateData(e, r) {
|
|
163
|
-
const t = _(this.currentNode), i = e ?? (t == null ? void 0 : t.type) ?? d.ITEMS_TYPE.CART_ITEMS, n = r ?? (t == null ? void 0 : t.itemsSelectValue) ?? "", s = (t == null ? void 0 : t.priceFormatted) ?? !1, o = (t == null ? void 0 : t.priceSinglePrice) ?? !1, c = O[i].findIndex((h) => h.value === n), a = c > -1 ? c : 0, l =
|
|
162
|
+
const t = _(this.currentNode), i = e ?? (t == null ? void 0 : t.type) ?? d.ITEMS_TYPE.CART_ITEMS, n = r ?? (t == null ? void 0 : t.itemsSelectValue) ?? "", s = (t == null ? void 0 : t.priceFormatted) ?? !1, o = (t == null ? void 0 : t.priceSinglePrice) ?? !1, c = O[i].findIndex((h) => h.value === n), a = c > -1 ? c : 0, l = N.PAIRS_FOR_EXTENSION.price[i], T = N.PAIRS_FOR_EXTENSION.originalPrice[i];
|
|
164
163
|
let u, p;
|
|
165
164
|
return o ? (u = s ? l.DEFAULT_SINGLE_PRICE_FORMATTED : l.DEFAULT_SINGLE_PRICE, p = s ? T.DEFAULT_SINGLE_PRICE_FORMATTED : T.DEFAULT_SINGLE_PRICE) : (u = s ? l.DEFAULT_PRICE_FORMATTED : l.DEFAULT_PRICE, p = s ? T.DEFAULT_PRICE_FORMATTED : T.DEFAULT_PRICE), {
|
|
166
|
-
imageSrc:
|
|
167
|
-
name:
|
|
165
|
+
imageSrc: N.PAIRS_FOR_EXTENSION.imageSrc[i].DEFAULT[a],
|
|
166
|
+
name: N.PAIRS_FOR_EXTENSION.name[i].DEFAULT[a],
|
|
168
167
|
price: u,
|
|
169
168
|
originalPrice: p,
|
|
170
|
-
quantity:
|
|
171
|
-
button:
|
|
169
|
+
quantity: N.PAIRS_FOR_EXTENSION.quantity[i].DEFAULT,
|
|
170
|
+
button: N.PAIRS_FOR_EXTENSION.button[i].DEFAULT_LABEL
|
|
172
171
|
};
|
|
173
172
|
}
|
|
174
173
|
_updateImageSrc(e, r) {
|
|
@@ -194,8 +193,8 @@ class te extends k {
|
|
|
194
193
|
const a = this._getParagraphFromBlock(c);
|
|
195
194
|
if (!a)
|
|
196
195
|
return;
|
|
197
|
-
const l = a.getInnerHTML().trim() || "", T = a.getInnerText().trim() || "", u = (n == null ? void 0 : n.trim()) || "", p = this._removeCurrencySymbol(T, u), h = this._replacePriceNumber(p, e), E = this._buildPriceContent(h, u, s),
|
|
198
|
-
r.modifyHtml(a).setInnerHtml(
|
|
196
|
+
const l = a.getInnerHTML().trim() || "", T = a.getInnerText().trim() || "", u = (n == null ? void 0 : n.trim()) || "", p = this._removeCurrencySymbol(T, u), h = this._replacePriceNumber(p, e), E = this._buildPriceContent(h, u, s), S = l.replace(T, g(E));
|
|
197
|
+
r.modifyHtml(a).setInnerHtml(S);
|
|
199
198
|
});
|
|
200
199
|
}
|
|
201
200
|
_updateOriginalPrice(e, r) {
|
|
@@ -210,7 +209,7 @@ class te extends k {
|
|
|
210
209
|
const l = a.querySelector("s");
|
|
211
210
|
if (!l)
|
|
212
211
|
return;
|
|
213
|
-
const T = l.getInnerHTML().trim() || "", u = l.getInnerText().trim() || "", p = (n == null ? void 0 : n.trim()) || "", h = this._removeCurrencySymbol(u, p), E = this._replacePriceNumber(h, e),
|
|
212
|
+
const T = l.getInnerHTML().trim() || "", u = l.getInnerText().trim() || "", p = (n == null ? void 0 : n.trim()) || "", h = this._removeCurrencySymbol(u, p), E = this._replacePriceNumber(h, e), S = this._buildPriceContent(E, p, s), R = `<s>${T.replace(u, g(S))}</s>`;
|
|
214
213
|
r.modifyHtml(a).setInnerHtml(R);
|
|
215
214
|
});
|
|
216
215
|
}
|
|
@@ -224,17 +223,17 @@ class te extends k {
|
|
|
224
223
|
return;
|
|
225
224
|
const T = l.getInnerText().trim();
|
|
226
225
|
let u = l.getInnerHTML().trim();
|
|
227
|
-
function p(E,
|
|
226
|
+
function p(E, S, A) {
|
|
228
227
|
return E.replace(
|
|
229
|
-
new RegExp(`(>\\s*)?${
|
|
228
|
+
new RegExp(`(>\\s*)?${S}(\\s*<)?`, "g"),
|
|
230
229
|
`$1${A}$2`
|
|
231
230
|
);
|
|
232
231
|
}
|
|
233
232
|
u = p(u, T, e), t.modifyHtml(l).setInnerHtml(u), t.modifyHtml(a).setStyle("display", c ? "table-cell" : "none");
|
|
234
233
|
}
|
|
235
234
|
_reOrderTemplate(e) {
|
|
236
|
-
var h, E,
|
|
237
|
-
const r = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${I.IMAGE}"]`), t = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${I.NAME}"]`), i = ((
|
|
235
|
+
var h, E, S, A, R, b;
|
|
236
|
+
const r = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${I.IMAGE}"]`), t = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${I.NAME}"]`), i = ((S = this.currentNode) == null ? void 0 : S.querySelectorAll(
|
|
238
237
|
`[esd-extension-block-id="${I.PRICE}"]`
|
|
239
238
|
)) || [], n = ((A = this.currentNode) == null ? void 0 : A.querySelectorAll(
|
|
240
239
|
`[esd-extension-block-id="${I.ORIGINAL_PRICE}"]`
|
|
@@ -242,12 +241,12 @@ class te extends k {
|
|
|
242
241
|
if (!r || !t || !s || !o || !c || !a)
|
|
243
242
|
return;
|
|
244
243
|
const l = _(this.currentNode), u = ((l == null ? void 0 : l.orientation) ?? d.ORIENTATION.VERTICAL) === d.ORIENTATION.VERTICAL;
|
|
245
|
-
let p = u ?
|
|
244
|
+
let p = u ? q : $;
|
|
246
245
|
setTimeout(() => {
|
|
247
|
-
const
|
|
248
|
-
p = p.replace("{-{-TEMPLATE_FIRST_LINE-}-}", u ? D : "").replace("{-{-PRODUCT_IMAGE-}-}", C(r.getOuterHTML())).replace("{-{-PRODUCT_NAME-}-}", C(t.getOuterHTML())).replaceAll("{-{-PRODUCT_PRICE-}-}", C(
|
|
246
|
+
const U = g(s.getOuterHTML()), f = g(o.getOuterHTML());
|
|
247
|
+
p = p.replace("{-{-TEMPLATE_FIRST_LINE-}-}", u ? D : "").replace("{-{-PRODUCT_IMAGE-}-}", C(r.getOuterHTML())).replace("{-{-PRODUCT_NAME-}-}", C(t.getOuterHTML())).replaceAll("{-{-PRODUCT_PRICE-}-}", C(U)).replaceAll("{-{-PRODUCT_ORIGINAL_PRICE-}-}", C(f)).replace("{-{-PRODUCT_QUANTITY-}-}", C(c.getOuterHTML())).replace("{-{-PRODUCT_BUTTON-}-}", C(a.getOuterHTML())), p = p.trim().replace(D, "").slice(0, -5);
|
|
249
248
|
const P = e ?? this.api.getDocumentModifier();
|
|
250
|
-
P.modifyHtml(r.querySelector("img")).setAttribute("width", H.productImageWidth).setAttribute("height", H.productImageWidth), P.modifyHtml(this.currentNode).setInnerHtml(p), e || P.apply(new
|
|
249
|
+
P.modifyHtml(r.querySelector("img")).setAttribute("width", H.productImageWidth).setAttribute("height", H.productImageWidth), P.modifyHtml(this.currentNode).setInnerHtml(p), e || P.apply(new y("Reordered template"));
|
|
251
250
|
}, 50);
|
|
252
251
|
}
|
|
253
252
|
_updateDataTypeAttributes(e, r) {
|
|
@@ -262,7 +261,7 @@ class te extends k {
|
|
|
262
261
|
_updateDataNumberAttributes(e, r) {
|
|
263
262
|
if (!this.currentNode)
|
|
264
263
|
return;
|
|
265
|
-
const t = _(this.currentNode), i = (t == null ? void 0 : t.type) ?? d.ITEMS_TYPE.CART_ITEMS, n =
|
|
264
|
+
const t = _(this.currentNode), i = (t == null ? void 0 : t.type) ?? d.ITEMS_TYPE.CART_ITEMS, n = V(e, i), s = this.currentNode.closest(".ins-product-td");
|
|
266
265
|
s && r.modifyHtml(s).setAttribute("data-number", n), this.currentNode.querySelectorAll("[data-number]").forEach((c) => {
|
|
267
266
|
const a = c;
|
|
268
267
|
r.modifyHtml(a).setAttribute("data-number", n);
|
|
@@ -270,7 +269,7 @@ class te extends k {
|
|
|
270
269
|
}
|
|
271
270
|
_reFillTemplate(e) {
|
|
272
271
|
const r = this._getTemplateData(e), t = this.api.getDocumentModifier();
|
|
273
|
-
this._updateImageSrc(r.imageSrc, t), this._updateName(r.name, t), this._updatePrice(r.price, t), this._updateOriginalPrice(r.originalPrice, t), this._updateQuantity(r.quantity, e, t), t.apply(new
|
|
272
|
+
this._updateImageSrc(r.imageSrc, t), this._updateName(r.name, t), this._updatePrice(r.price, t), this._updateOriginalPrice(r.originalPrice, t), this._updateQuantity(r.quantity, e, t), t.apply(new y("Refilled template"));
|
|
274
273
|
}
|
|
275
274
|
_recalculateTrimming() {
|
|
276
275
|
var n;
|
|
@@ -279,11 +278,11 @@ class te extends k {
|
|
|
279
278
|
const e = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${I.NAME}"]`);
|
|
280
279
|
if (!e)
|
|
281
280
|
return;
|
|
282
|
-
const r =
|
|
281
|
+
const r = e.querySelector("p > a");
|
|
283
282
|
if (!r)
|
|
284
283
|
return;
|
|
285
284
|
const t = _(this.currentNode), i = (t == null ? void 0 : t.nameTrimming) ?? !0;
|
|
286
|
-
this.api.getDocumentModifier().modifyHtml(r).setStyle("overflow", "hidden").setStyle("white-space", i ? "nowrap" : "normal").setStyle("text-overflow", i ? "ellipsis" : "unset").setStyle("max-width", "100%").setStyle("width", "100%").apply(new
|
|
285
|
+
this.api.getDocumentModifier().modifyHtml(r).setStyle("overflow", "hidden").setStyle("white-space", i ? "nowrap" : "normal").setStyle("text-overflow", i ? "ellipsis" : "unset").setStyle("max-width", "100%").setStyle("width", "100%").apply(new y("Recalculated trimming after orientation change"));
|
|
287
286
|
}
|
|
288
287
|
_getParagraphFromBlock(e) {
|
|
289
288
|
return e.querySelector("p");
|
|
@@ -315,6 +314,6 @@ class te extends k {
|
|
|
315
314
|
}
|
|
316
315
|
}
|
|
317
316
|
export {
|
|
318
|
-
|
|
319
|
-
|
|
317
|
+
B as CONTROL_BLOCK_ID,
|
|
318
|
+
Z as ItemsBlockControl
|
|
320
319
|
};
|