@useinsider/guido 2.0.0-beta.9b144a9 → 2.0.0-beta.b46bbf6
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 +6 -4
- package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue.js +2 -2
- package/dist/components/organisms/email-preview/mobile-preview/ContentView.vue.js +5 -5
- package/dist/composables/useStripo.js +54 -55
- package/dist/config/migrator/index.js +9 -8
- package/dist/config/migrator/itemsBlockMigrator.js +283 -0
- package/dist/extensions/Blocks/Items/block.js +39 -40
- package/dist/extensions/Blocks/Items/controls/cardComposition.js +46 -49
- package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +28 -26
- package/dist/extensions/Blocks/Items/controls/settingsControl.js +132 -127
- package/dist/extensions/Blocks/Items/enums/settingsEnums.js +2 -2
- package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +58 -48
- package/dist/extensions/Blocks/Items/layouts/vertical.html.js +48 -58
- package/dist/extensions/Blocks/Items/store/items-block.js +2 -2
- package/dist/extensions/Blocks/Items/template.js +296 -123
- package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js +172 -0
- package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +11 -20
- package/dist/extensions/Blocks/Recommendation/control.js +1 -1
- package/dist/extensions/Blocks/common-control.js +64 -53
- package/dist/guido.css +1 -1
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +366 -287
- package/dist/src/@types/config/schemas.d.ts +4 -0
- package/dist/src/composables/useConfig.d.ts +2 -0
- package/dist/src/config/migrator/itemsBlockMigrator.d.ts +6 -0
- package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +1 -1
- package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts +0 -4
- package/dist/src/extensions/Blocks/Items/template.d.ts +20 -1
- package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts +71 -0
- package/dist/src/extensions/Blocks/common-control.d.ts +13 -8
- package/dist/src/stores/config.d.ts +17 -0
- package/dist/static/styles/components/narrow-panel.css.js +0 -10
- package/package.json +3 -3
- package/dist/package.json.js +0 -7
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { useOnboardingStore as
|
|
2
|
-
import { Block as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { useItemsBlockStore as
|
|
6
|
-
import { getDefaultTemplate as
|
|
7
|
-
import {
|
|
8
|
-
const
|
|
9
|
-
class
|
|
1
|
+
import { useOnboardingStore as d } from "../../../stores/onboarding.js";
|
|
2
|
+
import { Block as u, BlockCompositionType as p, ModificationDescription as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
3
|
+
import { ItemsBlockId as f } from "./enums/controlEnums.js";
|
|
4
|
+
import { SETTINGS_ENUMS as c, DefaultConfigValues as o } from "./enums/settingsEnums.js";
|
|
5
|
+
import { useItemsBlockStore as g } from "./store/items-block.js";
|
|
6
|
+
import { getDefaultTemplate as y } from "./template.js";
|
|
7
|
+
import { getItemsBlockContainer as C, getItemsBlockConfig as a, getDefaultItemsBlockConfig as I } from "./utils/nodeConfigUtils.js";
|
|
8
|
+
const b = "items-block";
|
|
9
|
+
class O extends u {
|
|
10
10
|
getId() {
|
|
11
|
-
return
|
|
11
|
+
return b;
|
|
12
12
|
}
|
|
13
13
|
getIcon() {
|
|
14
14
|
return "items-icon";
|
|
15
15
|
}
|
|
16
16
|
getBlockCompositionType() {
|
|
17
|
-
return
|
|
17
|
+
return p.CONTAINER;
|
|
18
18
|
}
|
|
19
19
|
getName() {
|
|
20
20
|
return this.api.translate("Items");
|
|
@@ -23,45 +23,44 @@ class x extends R {
|
|
|
23
23
|
return this.api.translate("Items lets you display personalized products based on user behavior.");
|
|
24
24
|
}
|
|
25
25
|
getTemplate() {
|
|
26
|
-
return
|
|
27
|
-
orientation:
|
|
28
|
-
itemsType:
|
|
26
|
+
return y({
|
|
27
|
+
orientation: c.ORIENTATION.VERTICAL,
|
|
28
|
+
itemsType: c.ITEMS_TYPE.CART_ITEMS,
|
|
29
29
|
itemId: "{{Abandoned Cart Item (1) Url}}",
|
|
30
|
-
currencySymbol:
|
|
31
|
-
currencyLocation:
|
|
32
|
-
formattedPrice:
|
|
30
|
+
currencySymbol: o.productPriceCurrencySymbolControlValue,
|
|
31
|
+
currencyLocation: o.productPriceCurrencyLocationControlValue,
|
|
32
|
+
formattedPrice: o.productPriceFormattedControlValue === "1"
|
|
33
33
|
});
|
|
34
34
|
}
|
|
35
35
|
allowInnerBlocksDND() {
|
|
36
36
|
return !1;
|
|
37
37
|
}
|
|
38
|
-
onCreated(
|
|
39
|
-
const
|
|
40
|
-
if (!
|
|
38
|
+
onCreated(i) {
|
|
39
|
+
const e = C(i);
|
|
40
|
+
if (!e)
|
|
41
41
|
return;
|
|
42
|
-
const
|
|
43
|
-
if (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
} else {
|
|
49
|
-
const i = e.itemsType, I = e.cartItemsSelectControlValue, d = e.cardOrientationControlValue, m = e.productNameTrimmingControlValue, C = e.productPriceHideDiscountControlValue, b = e.productPriceFormattedControlValue, T = e.productPriceCurrencySymbolControlValue, A = e.productPriceCurrencyLocationControlValue, E = e.productButtonLinkControlValue, O = e.productImageLinkControlValue, _ = e.productImageVisible, p = e.productNameVisible, N = e.productQuantityVisible, f = e.productPriceVisible, g = e.productOriginalPriceVisible, D = e.productButtonVisible, P = c();
|
|
50
|
-
this.api.getDocumentModifier().modifyHtml(o).setAttribute("data-source", i).setAttribute(t.TYPE, i).setAttribute(t.ITEMS_INDEX_SELECT_CONTROL_VALUE, I).setAttribute(t.ORIENTATION, d).setAttribute(t.PRODUCT_NAME_TRIMMING, m).setAttribute(t.PRODUCT_PRICE_HIDE_DISCOUNT, C).setAttribute(t.PRODUCT_PRICE_FORMATTED, b).setAttribute(t.PRODUCT_PRICE_CURRENCY_SYMBOL, T).setAttribute(t.PRODUCT_PRICE_CURRENCY_LOCATION, A).setAttribute(t.PRODUCT_BUTTON_LINK, E).setAttribute(t.PRODUCT_IMAGE_LINK, O).setAttribute(t.BLOCK_INSTANCE_ID, P).setAttribute("data-initialized", "1").setAttribute(t.NAME_CONTROL_ENABLED, e.productNameControlEnabled).setAttribute(
|
|
51
|
-
t.QUANTITY_CONTROL_ENABLED,
|
|
52
|
-
e.productQuantityControlEnabled
|
|
53
|
-
).setAttribute(t.PRICE_CONTROL_OPENED, e.productPriceControlOpened).setAttribute(t.PRODUCT_IMAGE_VISIBLE, _).setAttribute(t.PRODUCT_NAME_VISIBLE, p).setAttribute(t.PRODUCT_QUANTITY_VISIBLE, N).setAttribute(t.PRODUCT_PRICE_VISIBLE, f).setAttribute(t.PRODUCT_ORIGINAL_PRICE_VISIBLE, g).setAttribute(t.PRODUCT_BUTTON_VISIBLE, D).apply(new a("Initialize config block attributes with defaults")), y().startOnboarding("itemsOnboarding");
|
|
42
|
+
const t = e.getNodeConfig(), l = t && Object.keys(t).length > 0, r = a(i);
|
|
43
|
+
if (r != null && r.initialized)
|
|
44
|
+
l ? r.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...r, blockInstanceId: String(Date.now()) }).apply(new n("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(r).apply(new n("Migrate legacy esd-config-block to nodeConfig"));
|
|
45
|
+
else {
|
|
46
|
+
const m = I();
|
|
47
|
+
this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(m).apply(new n("Initialize Items block with default configuration")), d().startOnboarding("itemsOnboarding");
|
|
54
48
|
}
|
|
49
|
+
const s = `[esd-extension-block-id="${f.IMAGE}"] img`;
|
|
50
|
+
this.api.getDocumentModifier().modifyHtml(i.querySelector(s)).setStyle("object-fit", "contain").apply(new n("Updated image object-fit"));
|
|
55
51
|
}
|
|
56
|
-
onSelect(
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
52
|
+
onSelect(i) {
|
|
53
|
+
const e = g(), t = a(i);
|
|
54
|
+
t && (e.setItemsType(t.type || o.itemsType), e.setItemIds(t.itemsSelectValue || o.cartItemsSelectControlValue), e.setOrientation(t.orientation || o.cardOrientationControlValue), e.setCurrencySymbol(
|
|
55
|
+
t.priceCurrencySymbol || o.productPriceCurrencySymbolControlValue
|
|
56
|
+
), e.setCurrencyLocation(
|
|
57
|
+
t.priceCurrencyLocation || o.productPriceCurrencyLocationControlValue
|
|
58
|
+
), e.setFormattedPrice(
|
|
59
|
+
t.priceFormatted ?? o.productPriceFormattedControlValue === "1"
|
|
60
|
+
));
|
|
62
61
|
}
|
|
63
62
|
}
|
|
64
63
|
export {
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
b as BLOCK_ID,
|
|
65
|
+
O as ItemsBlock
|
|
67
66
|
};
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { ModificationDescription as
|
|
5
|
-
import { CommonControl as
|
|
1
|
+
var P = Object.defineProperty;
|
|
2
|
+
var _ = (a, n, t) => n in a ? P(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
|
|
3
|
+
var d = (a, n, t) => _(a, typeof n != "symbol" ? n + "" : n, t);
|
|
4
|
+
import { ModificationDescription as r } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as u } from "../../common-control.js";
|
|
6
6
|
import { ItemsBlockId as s } from "../enums/controlEnums.js";
|
|
7
|
-
import {
|
|
8
|
-
import { SETTINGS_ENUMS as u } from "../enums/settingsEnums.js";
|
|
7
|
+
import { SETTINGS_ENUMS as R } from "../enums/settingsEnums.js";
|
|
9
8
|
import { useItemsBlockStore as O } from "../store/items-block.js";
|
|
10
|
-
import {
|
|
11
|
-
const
|
|
9
|
+
import { getItemsBlockConfig as C, setItemsBlockConfig as h } from "../utils/nodeConfigUtils.js";
|
|
10
|
+
const I = "ui-elements-items-card-composition-block", i = {
|
|
12
11
|
PRODUCT_IMAGE: "image",
|
|
13
12
|
PRODUCT_NAME: "name",
|
|
14
13
|
PRODUCT_QUANTITY: "quantity",
|
|
@@ -16,11 +15,11 @@ const h = "ui-elements-items-card-composition-block", i = {
|
|
|
16
15
|
PRODUCT_ORIGINAL_PRICE: "originalPrice",
|
|
17
16
|
PRODUCT_BUTTON: "button"
|
|
18
17
|
};
|
|
19
|
-
class
|
|
18
|
+
class N extends u {
|
|
20
19
|
constructor() {
|
|
21
20
|
super(...arguments);
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
d(this, "store", O());
|
|
22
|
+
d(this, "visibilityState", {
|
|
24
23
|
[i.PRODUCT_IMAGE]: !0,
|
|
25
24
|
[i.PRODUCT_NAME]: !0,
|
|
26
25
|
[i.PRODUCT_QUANTITY]: !0,
|
|
@@ -30,7 +29,7 @@ class g extends R {
|
|
|
30
29
|
});
|
|
31
30
|
}
|
|
32
31
|
getId() {
|
|
33
|
-
return
|
|
32
|
+
return I;
|
|
34
33
|
}
|
|
35
34
|
getTemplate() {
|
|
36
35
|
return `
|
|
@@ -83,20 +82,20 @@ class g extends R {
|
|
|
83
82
|
});
|
|
84
83
|
}
|
|
85
84
|
_syncVisibilityFromAttributes() {
|
|
86
|
-
const t =
|
|
85
|
+
const t = C(this.currentNode);
|
|
87
86
|
if (!t)
|
|
88
87
|
return;
|
|
89
88
|
const e = {
|
|
90
|
-
[i.PRODUCT_IMAGE]: "
|
|
91
|
-
[i.PRODUCT_NAME]: "
|
|
92
|
-
[i.PRODUCT_QUANTITY]: "
|
|
93
|
-
[i.PRODUCT_PRICE]: "
|
|
94
|
-
[i.PRODUCT_ORIGINAL_PRICE]: "
|
|
95
|
-
[i.PRODUCT_BUTTON]: "
|
|
89
|
+
[i.PRODUCT_IMAGE]: "imageVisible",
|
|
90
|
+
[i.PRODUCT_NAME]: "nameVisible",
|
|
91
|
+
[i.PRODUCT_QUANTITY]: "quantityControlEnabled",
|
|
92
|
+
[i.PRODUCT_PRICE]: "priceVisible",
|
|
93
|
+
[i.PRODUCT_ORIGINAL_PRICE]: "originalPriceVisible",
|
|
94
|
+
[i.PRODUCT_BUTTON]: "buttonVisible"
|
|
96
95
|
};
|
|
97
|
-
Object.entries(e).forEach(([o,
|
|
98
|
-
const T = t
|
|
99
|
-
this.visibilityState[o] =
|
|
96
|
+
Object.entries(e).forEach(([o, l]) => {
|
|
97
|
+
const T = t[l];
|
|
98
|
+
this.visibilityState[o] = T !== !1;
|
|
100
99
|
});
|
|
101
100
|
}
|
|
102
101
|
/**
|
|
@@ -105,11 +104,10 @@ class g extends R {
|
|
|
105
104
|
* and mark it as '0'
|
|
106
105
|
*/
|
|
107
106
|
_handleBrowsedItemsQuantity() {
|
|
108
|
-
|
|
109
|
-
const t = this.store.itemsType !== u.ITEMS_TYPE.BROWSED_ITEMS, e = (r = this.currentNode) == null ? void 0 : r.querySelector("esd-config-block");
|
|
107
|
+
const t = this.store.itemsType !== R.ITEMS_TYPE.BROWSED_ITEMS, e = C(this.currentNode);
|
|
110
108
|
if (!e)
|
|
111
109
|
return;
|
|
112
|
-
const o = e.
|
|
110
|
+
const o = e.quantityControlEnabled !== !1;
|
|
113
111
|
this.visibilityState[i.PRODUCT_QUANTITY] = t && o, this.api.setVisibility(`${i.PRODUCT_QUANTITY}Container`, t), this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, t && o);
|
|
114
112
|
}
|
|
115
113
|
_applyVisibilityStyles() {
|
|
@@ -122,27 +120,26 @@ class g extends R {
|
|
|
122
120
|
[i.PRODUCT_BUTTON]: s.BUTTON
|
|
123
121
|
};
|
|
124
122
|
Object.entries(t).forEach(([e, o]) => {
|
|
125
|
-
var
|
|
126
|
-
const
|
|
127
|
-
if (!
|
|
123
|
+
var c;
|
|
124
|
+
const l = (c = this.currentNode) == null ? void 0 : c.querySelector(`[esd-extension-block-id="${o}"]`);
|
|
125
|
+
if (!l)
|
|
128
126
|
return;
|
|
129
127
|
const T = this.visibilityState[e];
|
|
130
|
-
this.api.getDocumentModifier().modifyHtml(
|
|
128
|
+
this.api.getDocumentModifier().modifyHtml(l).setStyle("display", T ? "table-cell" : "none").apply(new r(`Applied ${e} visibility from attributes`));
|
|
131
129
|
});
|
|
132
130
|
}
|
|
133
131
|
_updateVisibilityAttribute(t, e) {
|
|
134
|
-
const
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
[i.
|
|
139
|
-
[i.
|
|
140
|
-
[i.
|
|
141
|
-
[i.PRODUCT_PRICE]: "PRODUCT_PRICE_VISIBLE",
|
|
142
|
-
[i.PRODUCT_ORIGINAL_PRICE]: "PRODUCT_ORIGINAL_PRICE_VISIBLE",
|
|
143
|
-
[i.PRODUCT_BUTTON]: "PRODUCT_BUTTON_VISIBLE"
|
|
132
|
+
const l = {
|
|
133
|
+
[i.PRODUCT_IMAGE]: "imageVisible",
|
|
134
|
+
[i.PRODUCT_NAME]: "nameVisible",
|
|
135
|
+
[i.PRODUCT_QUANTITY]: "quantityControlEnabled",
|
|
136
|
+
[i.PRODUCT_PRICE]: "priceVisible",
|
|
137
|
+
[i.PRODUCT_ORIGINAL_PRICE]: "originalPriceVisible",
|
|
138
|
+
[i.PRODUCT_BUTTON]: "buttonVisible"
|
|
144
139
|
}[t];
|
|
145
|
-
|
|
140
|
+
l && h(this.currentNode, this.api, {
|
|
141
|
+
[l]: e
|
|
142
|
+
});
|
|
146
143
|
}
|
|
147
144
|
_listenToFormUpdates() {
|
|
148
145
|
this.api.onValueChanged(i.PRODUCT_IMAGE, (t) => this._onProductImageChange(t)), this.api.onValueChanged(i.PRODUCT_NAME, (t) => this._onProductNameChange(t)), this.api.onValueChanged(i.PRODUCT_QUANTITY, (t) => this._onProductQuantityChange(t)), this.api.onValueChanged(i.PRODUCT_PRICE, (t) => this._onProductPriceChange(t)), this.api.onValueChanged(
|
|
@@ -153,41 +150,41 @@ class g extends R {
|
|
|
153
150
|
_onProductImageChange(t) {
|
|
154
151
|
var o;
|
|
155
152
|
const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.IMAGE}"]`);
|
|
156
|
-
e && (this.visibilityState[i.PRODUCT_IMAGE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new
|
|
153
|
+
e && (this.visibilityState[i.PRODUCT_IMAGE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new r(`Product image visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_IMAGE, t));
|
|
157
154
|
}
|
|
158
155
|
_onProductNameChange(t) {
|
|
159
156
|
var o;
|
|
160
157
|
const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.NAME}"]`);
|
|
161
|
-
e && (this.visibilityState[i.PRODUCT_NAME] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new
|
|
158
|
+
e && (this.visibilityState[i.PRODUCT_NAME] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new r(`Product name visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_NAME, t));
|
|
162
159
|
}
|
|
163
160
|
_onProductQuantityChange(t) {
|
|
164
161
|
var o;
|
|
165
162
|
const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.QUANTITY}"]`);
|
|
166
|
-
e && (this.visibilityState[i.PRODUCT_QUANTITY] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new
|
|
163
|
+
e && (this.visibilityState[i.PRODUCT_QUANTITY] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new r(
|
|
167
164
|
`Product quantity visibility changed to ${t ? "visible" : "hidden"}`
|
|
168
165
|
)), this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, t));
|
|
169
166
|
}
|
|
170
167
|
_onProductPriceChange(t) {
|
|
171
168
|
var o;
|
|
172
169
|
const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.PRICE}"]`);
|
|
173
|
-
e && (this.visibilityState[i.PRODUCT_PRICE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new
|
|
170
|
+
e && (this.visibilityState[i.PRODUCT_PRICE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new r(`Product price visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_PRICE, t));
|
|
174
171
|
}
|
|
175
172
|
_onProductOriginalPriceChange(t) {
|
|
176
173
|
var o;
|
|
177
174
|
const e = (o = this.currentNode) == null ? void 0 : o.querySelector(
|
|
178
175
|
`[esd-extension-block-id="${s.ORIGINAL_PRICE}"]`
|
|
179
176
|
);
|
|
180
|
-
e && (this.visibilityState[i.PRODUCT_ORIGINAL_PRICE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new
|
|
177
|
+
e && (this.visibilityState[i.PRODUCT_ORIGINAL_PRICE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new r(
|
|
181
178
|
`Product original price visibility changed to ${t ? "visible" : "hidden"}`
|
|
182
179
|
)), this._updateVisibilityAttribute(i.PRODUCT_ORIGINAL_PRICE, t));
|
|
183
180
|
}
|
|
184
181
|
_onProductButtonChange(t) {
|
|
185
182
|
var o;
|
|
186
183
|
const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.BUTTON}"]`);
|
|
187
|
-
e && (this.visibilityState[i.PRODUCT_BUTTON] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new
|
|
184
|
+
e && (this.visibilityState[i.PRODUCT_BUTTON] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new r(`Product button visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_BUTTON, t));
|
|
188
185
|
}
|
|
189
186
|
}
|
|
190
187
|
export {
|
|
191
|
-
|
|
192
|
-
|
|
188
|
+
I as COMPOSITION_CONTROL_BLOCK_ID,
|
|
189
|
+
N as ItemsBlockCardCompositionControl
|
|
193
190
|
};
|
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
var I = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
var m = (n, o, t) =>
|
|
4
|
-
import { ModificationDescription as
|
|
5
|
-
import { CommonControl as
|
|
2
|
+
var f = (n, o, t) => o in n ? I(n, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[o] = t;
|
|
3
|
+
var m = (n, o, t) => f(n, typeof o != "symbol" ? o + "" : o, t);
|
|
4
|
+
import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as y } from "../../../common-control.js";
|
|
6
6
|
import { ItemsBlockControlId as O } from "../../enums/controlEnums.js";
|
|
7
|
-
import { SETTINGS_ENUMS as
|
|
8
|
-
import { useItemsBlockStore as
|
|
9
|
-
import {
|
|
10
|
-
import { updateConfigBlockAttributes as P } from "../../utils/updateAttributes.js";
|
|
7
|
+
import { SETTINGS_ENUMS as E } from "../../enums/settingsEnums.js";
|
|
8
|
+
import { useItemsBlockStore as N } from "../../store/items-block.js";
|
|
9
|
+
import { getItemsBlockConfig as T, setItemsBlockConfig as C } from "../../utils/nodeConfigUtils.js";
|
|
11
10
|
const _ = O.PRICE_ORIENTATION, p = {
|
|
12
11
|
PRICE_ORIENTATION: "priceOrientation"
|
|
13
|
-
},
|
|
12
|
+
}, P = [
|
|
14
13
|
{ icon: "vertical-orientation", value: "vertical" },
|
|
15
14
|
{ icon: "horizontal-orientation", value: "horizontal" }
|
|
16
15
|
];
|
|
17
|
-
class
|
|
16
|
+
class H extends y {
|
|
18
17
|
constructor() {
|
|
19
18
|
super(...arguments);
|
|
20
|
-
m(this, "store",
|
|
19
|
+
m(this, "store", N());
|
|
21
20
|
}
|
|
22
21
|
getId() {
|
|
23
22
|
return _;
|
|
@@ -31,13 +30,14 @@ class v extends E {
|
|
|
31
30
|
}
|
|
32
31
|
onRender() {
|
|
33
32
|
this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation }), this.api.onValueChanged(p.PRICE_ORIENTATION, (t) => {
|
|
34
|
-
this._onPriceOrientationChange(t);
|
|
33
|
+
typeof t == "string" && this._onPriceOrientationChange(t);
|
|
35
34
|
});
|
|
36
35
|
}
|
|
37
36
|
onTemplateNodeUpdated(t) {
|
|
38
37
|
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
|
|
39
38
|
() => {
|
|
40
|
-
T(this.currentNode);
|
|
39
|
+
const i = T(this.currentNode);
|
|
40
|
+
i && this.store.setPriceOrientation(i.priceOrientation || "horizontal");
|
|
41
41
|
},
|
|
42
42
|
() => {
|
|
43
43
|
this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation });
|
|
@@ -45,24 +45,26 @@ class v extends E {
|
|
|
45
45
|
);
|
|
46
46
|
}
|
|
47
47
|
_onPriceOrientationChange(t) {
|
|
48
|
-
if (
|
|
48
|
+
if (this.store.setPriceOrientation(t), C(this.currentNode, this.api, {
|
|
49
|
+
priceOrientation: t
|
|
50
|
+
}), !this.currentNode)
|
|
49
51
|
return;
|
|
50
|
-
const { orientation: i } = this.store, r = i ===
|
|
52
|
+
const { orientation: i } = this.store, r = i === E.ORIENTATION.VERTICAL, e = t === "horizontal";
|
|
51
53
|
r ? this._updateVerticalLayout(e) : this._updateHorizontalLayout(e);
|
|
52
54
|
}
|
|
53
|
-
|
|
55
|
+
_updateVerticalLayout(t) {
|
|
54
56
|
var c, l, d, a;
|
|
55
57
|
const i = ((l = (c = this.currentNode) == null ? void 0 : c.closest(".ins-product-td")) == null ? void 0 : l.querySelectorAll(".product-price-class")) || [], r = ((a = (d = this.currentNode) == null ? void 0 : d.closest(".ins-product-td")) == null ? void 0 : a.querySelectorAll(".product-original-price-class")) || [];
|
|
56
58
|
if (!i || !r)
|
|
57
59
|
return;
|
|
58
60
|
const e = t ? "50%" : "100%", s = this.api.getDocumentModifier();
|
|
59
|
-
i.forEach((
|
|
60
|
-
s.modifyHtml(
|
|
61
|
-
}), r.forEach((
|
|
62
|
-
s.modifyHtml(
|
|
63
|
-
}), s.apply(new
|
|
61
|
+
i.forEach((h) => {
|
|
62
|
+
s.modifyHtml(h).setAttribute("width", e).setStyle("width", e);
|
|
63
|
+
}), r.forEach((h) => {
|
|
64
|
+
s.modifyHtml(h).setAttribute("width", e).setStyle("width", e);
|
|
65
|
+
}), s.apply(new u(`Updated original price element width to ${e}`));
|
|
64
66
|
}
|
|
65
|
-
|
|
67
|
+
_updateHorizontalLayout(t) {
|
|
66
68
|
var s, c, l, d;
|
|
67
69
|
const i = ((c = (s = this.currentNode) == null ? void 0 : s.closest(".ins-product-td")) == null ? void 0 : c.querySelectorAll(".horizontal-price")) || [], r = (d = (l = this.currentNode) == null ? void 0 : l.closest(".ins-product-td")) == null ? void 0 : d.querySelector(".vertical-price");
|
|
68
70
|
if (!i || !r || i.length === 0)
|
|
@@ -70,9 +72,9 @@ class v extends E {
|
|
|
70
72
|
const e = this.api.getDocumentModifier();
|
|
71
73
|
t ? (i.forEach((a) => {
|
|
72
74
|
e.modifyHtml(a).setStyle("display", "table-cell");
|
|
73
|
-
}), e.modifyHtml(r).setStyle("display", "none").apply(new
|
|
75
|
+
}), e.modifyHtml(r).setStyle("display", "none"), e.apply(new u("Show horizontal price orientation"))) : (i.forEach((a) => {
|
|
74
76
|
e.modifyHtml(a).setStyle("display", "none");
|
|
75
|
-
}), e.modifyHtml(r).setStyle("display", "table-cell").apply(new
|
|
77
|
+
}), e.modifyHtml(r).setStyle("display", "table-cell"), e.apply(new u("Show vertical price orientation")));
|
|
76
78
|
}
|
|
77
79
|
_getPriceOrientation() {
|
|
78
80
|
return `
|
|
@@ -80,7 +82,7 @@ class v extends E {
|
|
|
80
82
|
this._GuLabel({ text: "Price Orientation" }),
|
|
81
83
|
this._GuRadioButton({
|
|
82
84
|
name: p.PRICE_ORIENTATION,
|
|
83
|
-
buttons:
|
|
85
|
+
buttons: P
|
|
84
86
|
})
|
|
85
87
|
])}
|
|
86
88
|
`;
|
|
@@ -88,5 +90,5 @@ class v extends E {
|
|
|
88
90
|
}
|
|
89
91
|
export {
|
|
90
92
|
_ as CONTROL_BLOCK_ID,
|
|
91
|
-
|
|
93
|
+
H as PriceOrientationControl
|
|
92
94
|
};
|