@useinsider/guido 2.1.0-beta.01eaf27 → 2.1.0-beta.13ada05
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/composables/useActionsApi.js +15 -13
- package/dist/extensions/Blocks/Items/block.js +27 -25
- package/dist/extensions/Blocks/Items/controls/cardComposition.js +117 -94
- package/dist/extensions/Blocks/Items/controls/price/currencyLocation.js +29 -29
- package/dist/extensions/Blocks/Items/controls/price/currencySymbol.js +29 -29
- package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js +31 -29
- package/dist/extensions/Blocks/Items/controls/price/hideDiscount.js +0 -1
- package/dist/extensions/Blocks/Items/controls/price/singlePrice.js +29 -27
- package/dist/extensions/Blocks/Items/controls/settingsControl.js +164 -158
- package/dist/extensions/Blocks/Items/extension.js +8 -9
- package/dist/extensions/Blocks/Items/template.js +5 -4
- package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js +16 -16
- package/dist/package.json.js +1 -1
- package/dist/src/extensions/Blocks/Items/controls/cardComposition.d.ts +5 -4
- package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts +9 -9
- package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts +2 -1
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useToaster as w } from "./useToaster.js";
|
|
2
2
|
const v = () => {
|
|
3
|
-
const { handleError:
|
|
3
|
+
const { handleError: n } = w(), m = (t = {}) => new Promise((e, a) => {
|
|
4
4
|
const o = { ...{
|
|
5
5
|
minimize: !0,
|
|
6
6
|
utmEntity: {
|
|
@@ -21,9 +21,9 @@ const v = () => {
|
|
|
21
21
|
resetDataSavedFlag: !1,
|
|
22
22
|
disableLineHeightsReplace: !0
|
|
23
23
|
}, ...t }, s = {
|
|
24
|
-
callback: (
|
|
25
|
-
|
|
26
|
-
html:
|
|
24
|
+
callback: (l, r, d, c, u) => {
|
|
25
|
+
l ? a(l) : e({
|
|
26
|
+
html: r,
|
|
27
27
|
ampHtml: d,
|
|
28
28
|
ampErrors: c,
|
|
29
29
|
displayConditions: u
|
|
@@ -34,15 +34,15 @@ const v = () => {
|
|
|
34
34
|
window.StripoEditorApi.actionsApi.compileEmail(s);
|
|
35
35
|
});
|
|
36
36
|
return {
|
|
37
|
-
getCompiledEmail:
|
|
37
|
+
getCompiledEmail: m,
|
|
38
38
|
getTemplateData: () => new Promise((t) => {
|
|
39
|
-
const e = ({ html: a, css: i, width: o, height:
|
|
39
|
+
const e = ({ html: a, css: i, width: o, height: p, utmParams: s, syncModulesIds: l }) => t({
|
|
40
40
|
html: a,
|
|
41
41
|
css: i,
|
|
42
42
|
width: o,
|
|
43
|
-
height:
|
|
43
|
+
height: p,
|
|
44
44
|
utmParams: s,
|
|
45
|
-
syncModulesIds:
|
|
45
|
+
syncModulesIds: l
|
|
46
46
|
});
|
|
47
47
|
window.StripoEditorApi.actionsApi.getTemplateData(e);
|
|
48
48
|
}),
|
|
@@ -56,7 +56,7 @@ const v = () => {
|
|
|
56
56
|
displayConditions: a,
|
|
57
57
|
ampHtml: i = "",
|
|
58
58
|
ampErrors: o = []
|
|
59
|
-
} = await
|
|
59
|
+
} = await m({ minimize: !1, resetDataSavedFlag: !1, ...t });
|
|
60
60
|
return {
|
|
61
61
|
html: e,
|
|
62
62
|
ampHtml: i,
|
|
@@ -64,7 +64,7 @@ const v = () => {
|
|
|
64
64
|
displayConditions: a
|
|
65
65
|
};
|
|
66
66
|
} catch (e) {
|
|
67
|
-
return
|
|
67
|
+
return n(e, "Error loading preview"), {
|
|
68
68
|
html: "",
|
|
69
69
|
ampHtml: "",
|
|
70
70
|
ampErrors: [],
|
|
@@ -80,17 +80,19 @@ const v = () => {
|
|
|
80
80
|
}
|
|
81
81
|
try {
|
|
82
82
|
window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((i, o) => {
|
|
83
|
-
i ? (
|
|
83
|
+
i ? (n(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
|
|
84
84
|
});
|
|
85
85
|
} catch (i) {
|
|
86
|
-
|
|
86
|
+
n(i, "Failed to call updateTimerInClonedTemplate"), t(null);
|
|
87
87
|
}
|
|
88
88
|
}),
|
|
89
89
|
updateHtmlAndCss: (t, e) => {
|
|
90
90
|
window.StripoEditorApi.actionsApi.updateHtmlAndCss(t, e);
|
|
91
91
|
},
|
|
92
92
|
editorSave: () => {
|
|
93
|
-
window.StripoEditorApi.actionsApi.save()
|
|
93
|
+
window.StripoEditorApi.actionsApi.save((t) => {
|
|
94
|
+
t && n(t, "Failed to save template");
|
|
95
|
+
});
|
|
94
96
|
}
|
|
95
97
|
};
|
|
96
98
|
};
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { useOnboardingStore as
|
|
2
|
-
import { Block as
|
|
3
|
-
import { SETTINGS_ENUMS as
|
|
4
|
-
import { getDefaultTemplate as
|
|
5
|
-
import { getItemsBlockContainer as
|
|
6
|
-
const
|
|
7
|
-
class
|
|
1
|
+
import { useOnboardingStore as d } from "../../../stores/onboarding.js";
|
|
2
|
+
import { Block as g, BlockCompositionType as f, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
3
|
+
import { SETTINGS_ENUMS as c, DefaultConfigValues as i } from "./enums/settingsEnums.js";
|
|
4
|
+
import { getDefaultTemplate as p } from "./template.js";
|
|
5
|
+
import { getItemsBlockContainer as u, getItemsBlockConfig as C, getDefaultItemsBlockConfig as I } from "./utils/nodeConfigUtils.js";
|
|
6
|
+
const y = "items-block";
|
|
7
|
+
class B extends g {
|
|
8
8
|
getId() {
|
|
9
|
-
return
|
|
9
|
+
return y;
|
|
10
10
|
}
|
|
11
11
|
getIcon() {
|
|
12
12
|
return "items-icon";
|
|
13
13
|
}
|
|
14
14
|
getBlockCompositionType() {
|
|
15
|
-
return
|
|
15
|
+
return f.CONTAINER;
|
|
16
16
|
}
|
|
17
17
|
getName() {
|
|
18
18
|
return this.api.translate("Items");
|
|
@@ -21,32 +21,34 @@ class S extends m {
|
|
|
21
21
|
return this.api.translate("Items lets you display personalized products based on user behavior.");
|
|
22
22
|
}
|
|
23
23
|
getTemplate() {
|
|
24
|
-
return
|
|
25
|
-
orientation:
|
|
26
|
-
itemsType:
|
|
24
|
+
return p({
|
|
25
|
+
orientation: c.ORIENTATION.VERTICAL,
|
|
26
|
+
itemsType: c.ITEMS_TYPE.CART_ITEMS,
|
|
27
27
|
itemId: "{{Abandoned Cart Item (1) Url}}",
|
|
28
|
-
currencySymbol:
|
|
29
|
-
currencyLocation:
|
|
30
|
-
formattedPrice:
|
|
28
|
+
currencySymbol: i.productPriceCurrencySymbolControlValue,
|
|
29
|
+
currencyLocation: i.productPriceCurrencyLocationControlValue,
|
|
30
|
+
formattedPrice: i.productPriceFormattedControlValue === "1"
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
33
|
allowInnerBlocksDND() {
|
|
34
34
|
return !1;
|
|
35
35
|
}
|
|
36
|
-
onCreated(
|
|
37
|
-
const
|
|
38
|
-
|
|
36
|
+
onCreated(n) {
|
|
37
|
+
const s = this.api.getDocumentModifier(), r = this.api.getDocumentRootCssNode();
|
|
38
|
+
r.querySelector('[product-attr="imageSrc"] img') || s.modifyCss(r).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
|
|
39
|
+
const e = u(n);
|
|
40
|
+
if (!e)
|
|
39
41
|
return;
|
|
40
|
-
const
|
|
41
|
-
if (
|
|
42
|
-
|
|
42
|
+
const a = e.getNodeConfig(), l = a && Object.keys(a).length > 0, t = C(n);
|
|
43
|
+
if (t != null && t.initialized)
|
|
44
|
+
l ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new o("Migrate legacy config to nodeConfig"));
|
|
43
45
|
else {
|
|
44
|
-
const
|
|
45
|
-
this.api.getDocumentModifier().modifyHtml(
|
|
46
|
+
const m = I();
|
|
47
|
+
this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(m).apply(new o("Initialize Items block with default configuration")), d().startOnboarding("itemsOnboarding");
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
}
|
|
49
51
|
export {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
+
y as BLOCK_ID,
|
|
53
|
+
B as ItemsBlock
|
|
52
54
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
var I = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { ModificationDescription as
|
|
5
|
-
import { CommonControl as
|
|
6
|
-
import { ItemsBlockId as
|
|
7
|
-
import { SETTINGS_ENUMS as
|
|
8
|
-
import { getItemsBlockConfig as
|
|
9
|
-
const
|
|
2
|
+
var U = (d, a, t) => a in d ? I(d, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[a] = t;
|
|
3
|
+
var p = (d, a, t) => U(d, typeof a != "symbol" ? a + "" : a, t);
|
|
4
|
+
import { ModificationDescription as c } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as b } from "../../common-control.js";
|
|
6
|
+
import { ItemsBlockId as r } from "../enums/controlEnums.js";
|
|
7
|
+
import { SETTINGS_ENUMS as h } from "../enums/settingsEnums.js";
|
|
8
|
+
import { getItemsBlockConfig as R, setItemsBlockConfig as m } from "../utils/nodeConfigUtils.js";
|
|
9
|
+
const g = "ui-elements-items-card-composition-block", i = {
|
|
10
10
|
PRODUCT_IMAGE: "image",
|
|
11
11
|
PRODUCT_NAME: "name",
|
|
12
12
|
PRODUCT_QUANTITY: "quantity",
|
|
@@ -14,10 +14,10 @@ const m = "ui-elements-items-card-composition-block", i = {
|
|
|
14
14
|
PRODUCT_ORIGINAL_PRICE: "originalPrice",
|
|
15
15
|
PRODUCT_BUTTON: "button"
|
|
16
16
|
};
|
|
17
|
-
class
|
|
17
|
+
class M extends b {
|
|
18
18
|
constructor() {
|
|
19
19
|
super(...arguments);
|
|
20
|
-
|
|
20
|
+
p(this, "visibilityState", {
|
|
21
21
|
[i.PRODUCT_IMAGE]: !0,
|
|
22
22
|
[i.PRODUCT_NAME]: !0,
|
|
23
23
|
[i.PRODUCT_QUANTITY]: !0,
|
|
@@ -27,7 +27,7 @@ class S extends U {
|
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
29
|
getId() {
|
|
30
|
-
return
|
|
30
|
+
return g;
|
|
31
31
|
}
|
|
32
32
|
getTemplate() {
|
|
33
33
|
return `
|
|
@@ -39,7 +39,7 @@ class S extends U {
|
|
|
39
39
|
{ name: i.PRODUCT_PRICE, label: "Product Price" },
|
|
40
40
|
{ name: i.PRODUCT_ORIGINAL_PRICE, label: "Product Original Price" },
|
|
41
41
|
{ name: i.PRODUCT_BUTTON, label: "Product Button" }
|
|
42
|
-
].map((
|
|
42
|
+
].map((e) => this._getToggleContainer(e)).join("")}
|
|
43
43
|
</div>
|
|
44
44
|
`;
|
|
45
45
|
}
|
|
@@ -48,14 +48,14 @@ class S extends U {
|
|
|
48
48
|
}
|
|
49
49
|
onTemplateNodeUpdated(t) {
|
|
50
50
|
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(() => {
|
|
51
|
-
this._syncVisibilityFromAttributes(), this._handleBrowsedItemsQuantity(), this.
|
|
51
|
+
this._syncVisibilityFromAttributes(), this._handleBrowsedItemsQuantity(!0), this._updateTogglesFromState();
|
|
52
52
|
});
|
|
53
53
|
}
|
|
54
|
-
_getToggleContainer({ name: t, label:
|
|
54
|
+
_getToggleContainer({ name: t, label: e }) {
|
|
55
55
|
return `
|
|
56
56
|
<div class="container" name="${t}Container">
|
|
57
57
|
<div class="display-flex align-items-center justify-content-between">
|
|
58
|
-
${this._GuLabel({ text:
|
|
58
|
+
${this._GuLabel({ text: e, name: `${t}Label` })}
|
|
59
59
|
${this._GuToggle(t)}
|
|
60
60
|
</div>
|
|
61
61
|
</div>
|
|
@@ -75,10 +75,10 @@ class S extends U {
|
|
|
75
75
|
});
|
|
76
76
|
}
|
|
77
77
|
_syncVisibilityFromAttributes() {
|
|
78
|
-
const t =
|
|
78
|
+
const t = R(this.currentNode);
|
|
79
79
|
if (!t)
|
|
80
80
|
return;
|
|
81
|
-
const
|
|
81
|
+
const e = {
|
|
82
82
|
[i.PRODUCT_IMAGE]: "imageVisible",
|
|
83
83
|
[i.PRODUCT_NAME]: "nameVisible",
|
|
84
84
|
[i.PRODUCT_QUANTITY]: "quantityControlEnabled",
|
|
@@ -86,44 +86,45 @@ class S extends U {
|
|
|
86
86
|
[i.PRODUCT_ORIGINAL_PRICE]: "originalPriceVisible",
|
|
87
87
|
[i.PRODUCT_BUTTON]: "buttonVisible"
|
|
88
88
|
};
|
|
89
|
-
Object.entries(
|
|
90
|
-
const
|
|
91
|
-
this.visibilityState[
|
|
89
|
+
Object.entries(e).forEach(([o, n]) => {
|
|
90
|
+
const s = t[n];
|
|
91
|
+
this.visibilityState[o] = s !== !1;
|
|
92
92
|
});
|
|
93
93
|
}
|
|
94
94
|
/**
|
|
95
95
|
* If itemsType is not BROWSED_ITEMS, show quantity
|
|
96
96
|
* If itemsType is BROWSED_ITEMS, hide quantity
|
|
97
97
|
* and mark it as '0'
|
|
98
|
+
* @param syncOnly - If true, only sync local state and UI without modifying the document
|
|
98
99
|
*/
|
|
99
|
-
_handleBrowsedItemsQuantity() {
|
|
100
|
-
const
|
|
101
|
-
if (!
|
|
100
|
+
_handleBrowsedItemsQuantity(t = !1) {
|
|
101
|
+
const e = R(this.currentNode), n = ((e == null ? void 0 : e.type) ?? h.ITEMS_TYPE.CART_ITEMS) !== h.ITEMS_TYPE.BROWSED_ITEMS;
|
|
102
|
+
if (!e)
|
|
102
103
|
return;
|
|
103
|
-
const s =
|
|
104
|
-
this.visibilityState[i.PRODUCT_QUANTITY] =
|
|
105
|
-
}
|
|
106
|
-
_applyVisibilityStyles() {
|
|
107
|
-
const
|
|
108
|
-
[i.PRODUCT_IMAGE]:
|
|
109
|
-
[i.PRODUCT_NAME]:
|
|
110
|
-
[i.PRODUCT_QUANTITY]:
|
|
111
|
-
[i.PRODUCT_PRICE]:
|
|
112
|
-
[i.PRODUCT_ORIGINAL_PRICE]:
|
|
113
|
-
[i.PRODUCT_BUTTON]:
|
|
114
|
-
};
|
|
115
|
-
Object.entries(
|
|
104
|
+
const s = e.quantityControlEnabled !== !1;
|
|
105
|
+
this.visibilityState[i.PRODUCT_QUANTITY] = n && s, this.api.setVisibility(`${i.PRODUCT_QUANTITY}Container`, n), t || this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, n && s);
|
|
106
|
+
}
|
|
107
|
+
_applyVisibilityStyles(t) {
|
|
108
|
+
const e = {
|
|
109
|
+
[i.PRODUCT_IMAGE]: r.IMAGE,
|
|
110
|
+
[i.PRODUCT_NAME]: r.NAME,
|
|
111
|
+
[i.PRODUCT_QUANTITY]: r.QUANTITY,
|
|
112
|
+
[i.PRODUCT_PRICE]: r.PRICE,
|
|
113
|
+
[i.PRODUCT_ORIGINAL_PRICE]: r.ORIGINAL_PRICE,
|
|
114
|
+
[i.PRODUCT_BUTTON]: r.BUTTON
|
|
115
|
+
}, o = t ?? this.api.getDocumentModifier();
|
|
116
|
+
Object.entries(e).forEach(([n, s]) => {
|
|
116
117
|
var C;
|
|
117
|
-
const
|
|
118
|
-
if (!
|
|
118
|
+
const l = (C = this.currentNode) == null ? void 0 : C.querySelectorAll(`[esd-extension-block-id="${s}"]`);
|
|
119
|
+
if (!l)
|
|
119
120
|
return;
|
|
120
|
-
const
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
})
|
|
124
|
-
}), this._updatePriceCellWidthsForVerticalLayout();
|
|
121
|
+
const P = this.visibilityState[n];
|
|
122
|
+
l.forEach((T) => {
|
|
123
|
+
o.modifyHtml(T).setStyle("display", P ? "table-cell" : "none");
|
|
124
|
+
});
|
|
125
|
+
}), this._updatePriceCellWidthsForVerticalLayout(o), t || o.apply(new c("Applied visibility styles"));
|
|
125
126
|
}
|
|
126
|
-
_updateVisibilityAttribute(t, o) {
|
|
127
|
+
_updateVisibilityAttribute(t, e, o) {
|
|
127
128
|
const s = {
|
|
128
129
|
[i.PRODUCT_IMAGE]: "imageVisible",
|
|
129
130
|
[i.PRODUCT_NAME]: "nameVisible",
|
|
@@ -132,9 +133,9 @@ class S extends U {
|
|
|
132
133
|
[i.PRODUCT_ORIGINAL_PRICE]: "originalPriceVisible",
|
|
133
134
|
[i.PRODUCT_BUTTON]: "buttonVisible"
|
|
134
135
|
}[t];
|
|
135
|
-
s &&
|
|
136
|
-
[s]:
|
|
137
|
-
});
|
|
136
|
+
s && m(this.currentNode, this.api, {
|
|
137
|
+
[s]: e
|
|
138
|
+
}, o);
|
|
138
139
|
}
|
|
139
140
|
_listenToFormUpdates() {
|
|
140
141
|
this.api.onValueChanged(i.PRODUCT_IMAGE, (t) => {
|
|
@@ -152,51 +153,67 @@ class S extends U {
|
|
|
152
153
|
});
|
|
153
154
|
}
|
|
154
155
|
_onProductImageChange(t) {
|
|
155
|
-
var
|
|
156
|
-
const
|
|
157
|
-
|
|
156
|
+
var s;
|
|
157
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${r.IMAGE}"]`);
|
|
158
|
+
if (!e)
|
|
159
|
+
return;
|
|
160
|
+
this.visibilityState[i.PRODUCT_IMAGE] = t;
|
|
161
|
+
const o = this.api.getDocumentModifier();
|
|
162
|
+
o.modifyHtml(e).setStyle("display", t ? "table-cell" : "none"), this._updateVisibilityAttribute(i.PRODUCT_IMAGE, t, o);
|
|
163
|
+
const n = `Product image visibility changed to ${t ? "visible" : "hidden"}`;
|
|
164
|
+
o.apply(new c(n));
|
|
158
165
|
}
|
|
159
166
|
_onProductNameChange(t) {
|
|
160
|
-
var
|
|
161
|
-
const
|
|
162
|
-
|
|
167
|
+
var s;
|
|
168
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${r.NAME}"]`);
|
|
169
|
+
if (!e)
|
|
170
|
+
return;
|
|
171
|
+
this.visibilityState[i.PRODUCT_NAME] = t;
|
|
172
|
+
const o = this.api.getDocumentModifier();
|
|
173
|
+
o.modifyHtml(e).setStyle("display", t ? "table-cell" : "none"), this._updateVisibilityAttribute(i.PRODUCT_NAME, t, o);
|
|
174
|
+
const n = `Product name visibility changed to ${t ? "visible" : "hidden"}`;
|
|
175
|
+
o.apply(new c(n));
|
|
163
176
|
}
|
|
164
177
|
_onProductQuantityChange(t) {
|
|
165
|
-
var
|
|
166
|
-
const
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
178
|
+
var s;
|
|
179
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${r.QUANTITY}"]`);
|
|
180
|
+
if (!e)
|
|
181
|
+
return;
|
|
182
|
+
this.visibilityState[i.PRODUCT_QUANTITY] = t;
|
|
183
|
+
const o = this.api.getDocumentModifier();
|
|
184
|
+
o.modifyHtml(e).setStyle("display", t ? "table-cell" : "none"), this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, t, o);
|
|
185
|
+
const n = `Product quantity visibility changed to ${t ? "visible" : "hidden"}`;
|
|
186
|
+
o.apply(new c(n));
|
|
170
187
|
}
|
|
171
188
|
_onProductPriceChange(t) {
|
|
172
189
|
var s;
|
|
173
|
-
const
|
|
174
|
-
`[esd-extension-block-id="${
|
|
190
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelectorAll(
|
|
191
|
+
`[esd-extension-block-id="${r.PRICE}"]`
|
|
175
192
|
);
|
|
176
|
-
if (!
|
|
193
|
+
if (!e)
|
|
177
194
|
return;
|
|
178
195
|
this.visibilityState[i.PRODUCT_PRICE] = t;
|
|
179
|
-
const
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}),
|
|
183
|
-
|
|
184
|
-
|
|
196
|
+
const o = this.api.getDocumentModifier();
|
|
197
|
+
e.forEach((l) => {
|
|
198
|
+
o.modifyHtml(l).setStyle("display", t ? "table-cell" : "none");
|
|
199
|
+
}), this._updateVisibilityAttribute(i.PRODUCT_PRICE, t, o), this._updatePriceCellWidthsForVerticalLayout(o);
|
|
200
|
+
const n = `Product price visibility changed to ${t ? "visible" : "hidden"}`;
|
|
201
|
+
o.apply(new c(n));
|
|
185
202
|
}
|
|
186
203
|
_onProductOriginalPriceChange(t) {
|
|
187
204
|
var s;
|
|
188
|
-
const
|
|
189
|
-
`[esd-extension-block-id="${
|
|
205
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelectorAll(
|
|
206
|
+
`[esd-extension-block-id="${r.ORIGINAL_PRICE}"]`
|
|
190
207
|
);
|
|
191
|
-
if (!
|
|
208
|
+
if (!e)
|
|
192
209
|
return;
|
|
193
210
|
this.visibilityState[i.PRODUCT_ORIGINAL_PRICE] = t;
|
|
194
|
-
const
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
}),
|
|
198
|
-
|
|
199
|
-
|
|
211
|
+
const o = this.api.getDocumentModifier();
|
|
212
|
+
e.forEach((l) => {
|
|
213
|
+
o.modifyHtml(l).setStyle("display", t ? "table-cell" : "none");
|
|
214
|
+
}), this._updateVisibilityAttribute(i.PRODUCT_ORIGINAL_PRICE, t, o), this._updatePriceCellWidthsForVerticalLayout(o);
|
|
215
|
+
const n = `Product original price visibility changed to ${t ? "visible" : "hidden"}`;
|
|
216
|
+
o.apply(new c(n));
|
|
200
217
|
}
|
|
201
218
|
/**
|
|
202
219
|
* Updates both price cell widths in vertical layout based on priceOrientation and visibility.
|
|
@@ -206,33 +223,39 @@ class S extends U {
|
|
|
206
223
|
* - When price is hidden, original price cell expands to 100%
|
|
207
224
|
* - When both are visible, they share 50% each
|
|
208
225
|
*/
|
|
209
|
-
_updatePriceCellWidthsForVerticalLayout() {
|
|
210
|
-
var
|
|
211
|
-
const
|
|
212
|
-
if (!((
|
|
226
|
+
_updatePriceCellWidthsForVerticalLayout(t) {
|
|
227
|
+
var O, y;
|
|
228
|
+
const e = R(this.currentNode);
|
|
229
|
+
if (!((e == null ? void 0 : e.orientation) === h.ORIENTATION.VERTICAL))
|
|
213
230
|
return;
|
|
214
|
-
const
|
|
215
|
-
if (
|
|
216
|
-
const
|
|
217
|
-
|
|
218
|
-
|
|
231
|
+
const n = (O = this.currentNode) == null ? void 0 : O.querySelectorAll(".product-price-class"), s = (y = this.currentNode) == null ? void 0 : y.querySelectorAll(".product-original-price-class"), l = (e == null ? void 0 : e.priceOrientation) === "vertical", P = this.visibilityState[i.PRODUCT_PRICE], C = this.visibilityState[i.PRODUCT_ORIGINAL_PRICE], T = t ?? this.api.getDocumentModifier();
|
|
232
|
+
if (n && n.length > 0) {
|
|
233
|
+
const _ = l || !C ? "100%" : "50%";
|
|
234
|
+
n.forEach((u) => {
|
|
235
|
+
T.modifyHtml(u).setStyle("width", _);
|
|
219
236
|
});
|
|
220
237
|
}
|
|
221
238
|
if (s && s.length > 0) {
|
|
222
|
-
const
|
|
223
|
-
s.forEach((
|
|
224
|
-
|
|
239
|
+
const _ = l || !P ? "100%" : "50%";
|
|
240
|
+
s.forEach((u) => {
|
|
241
|
+
T.modifyHtml(u).setStyle("width", _);
|
|
225
242
|
});
|
|
226
243
|
}
|
|
227
|
-
|
|
244
|
+
t || T.apply(new c("Updated price cell widths for vertical layout"));
|
|
228
245
|
}
|
|
229
246
|
_onProductButtonChange(t) {
|
|
230
|
-
var
|
|
231
|
-
const
|
|
232
|
-
|
|
247
|
+
var s;
|
|
248
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${r.BUTTON}"]`);
|
|
249
|
+
if (!e)
|
|
250
|
+
return;
|
|
251
|
+
this.visibilityState[i.PRODUCT_BUTTON] = t;
|
|
252
|
+
const o = this.api.getDocumentModifier();
|
|
253
|
+
o.modifyHtml(e).setStyle("display", t ? "table-cell" : "none"), this._updateVisibilityAttribute(i.PRODUCT_BUTTON, t, o);
|
|
254
|
+
const n = `Product button visibility changed to ${t ? "visible" : "hidden"}`;
|
|
255
|
+
o.apply(new c(n));
|
|
233
256
|
}
|
|
234
257
|
}
|
|
235
258
|
export {
|
|
236
|
-
|
|
237
|
-
|
|
259
|
+
g as COMPOSITION_CONTROL_BLOCK_ID,
|
|
260
|
+
M as ItemsBlockCardCompositionControl
|
|
238
261
|
};
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
import { currencyLocationMaps as
|
|
2
|
-
import { UEAttr as
|
|
3
|
-
import { CommonControl as
|
|
4
|
-
import { ItemsBlockControlId as
|
|
5
|
-
import { getItemsBlockConfig as
|
|
6
|
-
const
|
|
1
|
+
import { currencyLocationMaps as u } from "../../../../../enums/extensions/recommendationBlock.js";
|
|
2
|
+
import { UEAttr as R, ModificationDescription as L } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
3
|
+
import { CommonControl as N } from "../../../common-control.js";
|
|
4
|
+
import { ItemsBlockControlId as m } from "../../enums/controlEnums.js";
|
|
5
|
+
import { getItemsBlockConfig as C, setItemsBlockConfig as I, escapeReplacement as T } from "../../utils/nodeConfigUtils.js";
|
|
6
|
+
const E = m.PRICE_CURRENCY_LOCATION, c = {
|
|
7
7
|
CURRENCY_LOCATION: "currencyLocation"
|
|
8
8
|
};
|
|
9
|
-
class
|
|
9
|
+
class A extends N {
|
|
10
10
|
getId() {
|
|
11
|
-
return
|
|
11
|
+
return E;
|
|
12
12
|
}
|
|
13
13
|
getTemplate() {
|
|
14
14
|
return `
|
|
15
|
-
<div class="container ${
|
|
15
|
+
<div class="container ${m.PRICE_CURRENCY_LOCATION}">
|
|
16
16
|
${this._getCurrencyLocation()}
|
|
17
17
|
</div>
|
|
18
18
|
`;
|
|
19
19
|
}
|
|
20
20
|
onRender() {
|
|
21
|
-
const e =
|
|
22
|
-
this.api.setUIEAttribute(
|
|
21
|
+
const e = C(this.currentNode);
|
|
22
|
+
this.api.setUIEAttribute(c.CURRENCY_LOCATION, R.SELECTPICKER.items, u), this.api.updateValues({ [c.CURRENCY_LOCATION]: (e == null ? void 0 : e.priceCurrencyLocation) ?? "0" }), this.api.onValueChanged(c.CURRENCY_LOCATION, (t) => {
|
|
23
23
|
this._onCurrencyLocationChange(t);
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
26
|
onTemplateNodeUpdated(e) {
|
|
27
27
|
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
|
|
28
|
-
const t =
|
|
29
|
-
this.api.updateValues({ [
|
|
28
|
+
const t = C(this.currentNode);
|
|
29
|
+
this.api.updateValues({ [c.CURRENCY_LOCATION]: (t == null ? void 0 : t.priceCurrencyLocation) ?? "0" });
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
_onCurrencyLocationChange(e) {
|
|
33
|
-
if (console.debug("Currency location changed to: ", e),
|
|
33
|
+
if (console.debug("Currency location changed to: ", e), I(this.currentNode, this.api, { priceCurrencyLocation: e }), !this.currentNode)
|
|
34
34
|
return;
|
|
35
35
|
const t = this._getPriceBlocks();
|
|
36
36
|
if (!t || t.length === 0)
|
|
37
37
|
return;
|
|
38
|
-
const r =
|
|
39
|
-
t.forEach((
|
|
40
|
-
const
|
|
41
|
-
if (!
|
|
38
|
+
const r = C(this.currentNode), n = e || "0", o = (r == null ? void 0 : r.priceCurrencySymbol) ?? "", i = this.api.getDocumentModifier();
|
|
39
|
+
t.forEach((a) => {
|
|
40
|
+
const s = this._getParagraph(a);
|
|
41
|
+
if (!s)
|
|
42
42
|
return;
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
const h = s.getInnerHTML().trim() || "", l = s.getInnerText().trim() || "", p = (o == null ? void 0 : o.trim()) || "", d = this._removeCurrencySymbol(l, p), g = this._detectSymbolInText(l) || p, _ = this._buildPriceContent(d, g, n), y = h.replace(l, T(_));
|
|
44
|
+
i.modifyHtml(s).setInnerHtml(y);
|
|
45
|
+
}), i.apply(new L(
|
|
46
|
+
`Updated currency location to ${n === "1" ? "after" : "before"}`
|
|
47
|
+
));
|
|
48
48
|
}
|
|
49
49
|
_getPriceBlocks() {
|
|
50
50
|
var e, t;
|
|
@@ -65,8 +65,8 @@ class $ extends L {
|
|
|
65
65
|
} else {
|
|
66
66
|
const o = r.match(/([^0-9.,\s]+)/);
|
|
67
67
|
if (o && o[1]) {
|
|
68
|
-
const
|
|
69
|
-
n = r.replace(
|
|
68
|
+
const i = o[1].trim(), a = new RegExp(`\\s*${this._escapeRegex(i)}\\s*`);
|
|
69
|
+
n = r.replace(a, "").trim();
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
return n;
|
|
@@ -83,15 +83,15 @@ class $ extends L {
|
|
|
83
83
|
${this._GuTwoColumns([
|
|
84
84
|
this._GuLabel({ text: "Currency Location" }),
|
|
85
85
|
this._GuSelect({
|
|
86
|
-
name:
|
|
86
|
+
name: c.CURRENCY_LOCATION,
|
|
87
87
|
placeholder: "",
|
|
88
|
-
options:
|
|
88
|
+
options: u
|
|
89
89
|
})
|
|
90
90
|
])}
|
|
91
91
|
`;
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
export {
|
|
95
|
-
|
|
96
|
-
|
|
95
|
+
E as CONTROL_BLOCK_ID,
|
|
96
|
+
A as PriceCurrencyLocationControl
|
|
97
97
|
};
|