@useinsider/guido 2.1.0-beta.411f2a9 → 2.1.0-beta.425dfd0
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/config/migrator/itemsBlockMigrator.js +123 -140
- package/dist/extensions/Blocks/Items/block.js +28 -19
- package/dist/extensions/Blocks/Items/controls/button/link.js +31 -19
- package/dist/extensions/Blocks/Items/controls/cardComposition.js +81 -97
- package/dist/extensions/Blocks/Items/controls/image/link.js +31 -19
- package/dist/extensions/Blocks/Items/controls/name/trimming.js +40 -28
- package/dist/extensions/Blocks/Items/controls/price/currencyLocation.js +46 -34
- package/dist/extensions/Blocks/Items/controls/price/currencySymbol.js +50 -45
- package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js +51 -40
- package/dist/extensions/Blocks/Items/controls/price/hideDiscount.js +35 -23
- package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +57 -45
- package/dist/extensions/Blocks/Items/controls/price/singlePrice.js +62 -42
- package/dist/extensions/Blocks/Items/controls/settingsControl.js +191 -184
- package/dist/extensions/Blocks/Items/enums/settingsEnums.js +2 -0
- package/dist/extensions/Blocks/Items/extension.js +9 -8
- package/dist/extensions/Blocks/Items/store/items-block.js +79 -0
- package/dist/extensions/Blocks/Items/template.js +175 -181
- package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js +65 -65
- package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +3 -3
- package/dist/extensions/Blocks/common-control.js +92 -91
- package/dist/src/extensions/Blocks/Items/block.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/button/link.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/cardComposition.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/image/link.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/name/trimming.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/price/currencyLocation.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/price/currencySymbol.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/price/formattedPrice.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/price/hideDiscount.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/controls/price/singlePrice.d.ts +5 -0
- package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts +12 -10
- package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +45 -0
- package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts +1 -2
- package/dist/src/extensions/Blocks/common-control.d.ts +5 -4
- package/package.json +1 -1
|
@@ -1,75 +1,80 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { ModificationDescription as
|
|
5
|
-
import { CommonControl as
|
|
6
|
-
import { ItemsBlockControlId as
|
|
7
|
-
import {
|
|
8
|
-
|
|
1
|
+
var S = Object.defineProperty;
|
|
2
|
+
var _ = (c, s, e) => s in c ? S(c, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[s] = e;
|
|
3
|
+
var u = (c, s, e) => _(c, typeof s != "symbol" ? s + "" : s, e);
|
|
4
|
+
import { ModificationDescription as b } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as R } from "../../../common-control.js";
|
|
6
|
+
import { ItemsBlockControlId as h } from "../../enums/controlEnums.js";
|
|
7
|
+
import { useItemsBlockStore as f } from "../../store/items-block.js";
|
|
8
|
+
import { getItemsBlockConfig as B, setItemsBlockConfig as N } from "../../utils/nodeConfigUtils.js";
|
|
9
|
+
const E = h.PRICE_CURRENCY_SYMBOL, m = {
|
|
9
10
|
CURRENCY_SYMBOL: "currencySymbol"
|
|
10
11
|
};
|
|
11
|
-
class
|
|
12
|
+
class M extends R {
|
|
12
13
|
constructor() {
|
|
13
14
|
super(...arguments);
|
|
14
|
-
|
|
15
|
+
u(this, "store", f());
|
|
16
|
+
u(this, "originalPriceContents", /* @__PURE__ */ new Map());
|
|
15
17
|
}
|
|
16
18
|
getId() {
|
|
17
|
-
return
|
|
19
|
+
return E;
|
|
18
20
|
}
|
|
19
21
|
getTemplate() {
|
|
20
22
|
return `
|
|
21
|
-
<div class="container ${
|
|
23
|
+
<div class="container ${h.PRICE_CURRENCY_SYMBOL}">
|
|
22
24
|
${this._getCurrencySymbol()}
|
|
23
25
|
</div>
|
|
24
26
|
`;
|
|
25
27
|
}
|
|
26
28
|
onRender() {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
this._onCurrencySymbolChange(t);
|
|
29
|
+
this.api.updateValues({ [m.CURRENCY_SYMBOL]: this.store.currencySymbol }), this._storeOriginalContents(), this.api.onValueChanged(m.CURRENCY_SYMBOL, (e) => {
|
|
30
|
+
this._onCurrencySymbolChange(e);
|
|
30
31
|
});
|
|
31
32
|
}
|
|
32
33
|
onDestroy() {
|
|
33
34
|
super.onDestroy(), this.originalPriceContents.clear();
|
|
34
35
|
}
|
|
35
36
|
onTemplateNodeUpdated(e) {
|
|
36
|
-
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
|
|
38
|
+
() => {
|
|
39
|
+
const t = B(this.currentNode);
|
|
40
|
+
t && this.store.setCurrencySymbol(t.priceCurrencySymbol || "");
|
|
41
|
+
},
|
|
42
|
+
() => {
|
|
43
|
+
this.api.updateValues({ [m.CURRENCY_SYMBOL]: this.store.currencySymbol }), this._storeOriginalContents();
|
|
44
|
+
}
|
|
45
|
+
);
|
|
40
46
|
}
|
|
41
47
|
_onCurrencySymbolChange(e) {
|
|
42
48
|
var i;
|
|
43
49
|
console.debug("Currency symbol changed to: ", e);
|
|
44
|
-
const t =
|
|
45
|
-
if (
|
|
50
|
+
const t = ((i = this.store.currencySymbol) == null ? void 0 : i.trim()) || "";
|
|
51
|
+
if (this.store.setCurrencySymbol(e), N(this.currentNode, this.api, { priceCurrencySymbol: e }), !this.currentNode)
|
|
46
52
|
return;
|
|
47
53
|
const r = this._getPriceBlocks();
|
|
48
54
|
if (!r || r.length === 0)
|
|
49
55
|
return;
|
|
50
|
-
const
|
|
51
|
-
r.forEach((
|
|
52
|
-
const a = this._getParagraph(
|
|
56
|
+
const o = (e == null ? void 0 : e.trim()) || "", { currencyLocation: n } = this.store;
|
|
57
|
+
r.forEach((l) => {
|
|
58
|
+
const a = this._getParagraph(l);
|
|
53
59
|
if (!a)
|
|
54
60
|
return;
|
|
55
|
-
const
|
|
56
|
-
this.api.getDocumentModifier().modifyHtml(a).setInnerHtml(
|
|
57
|
-
`Updated currency symbol to ${
|
|
61
|
+
const y = a.getInnerHTML() || "", p = a.getInnerText() || "", C = this._removeCurrencySymbol(p, t), g = this._buildPriceContent(C, o, n), d = y.replace(p, g);
|
|
62
|
+
this.api.getDocumentModifier().modifyHtml(a).setInnerHtml(d).apply(new b(
|
|
63
|
+
`Updated currency symbol to ${o || "removed"}`
|
|
58
64
|
));
|
|
59
65
|
});
|
|
60
66
|
}
|
|
61
67
|
_storeOriginalContents() {
|
|
62
68
|
if (!this.currentNode)
|
|
63
69
|
return;
|
|
64
|
-
const e = m(this.currentNode);
|
|
65
70
|
this.currentNode.querySelectorAll(
|
|
66
71
|
".items-block-price"
|
|
67
|
-
).forEach((
|
|
68
|
-
var
|
|
69
|
-
const r =
|
|
72
|
+
).forEach((t) => {
|
|
73
|
+
var o;
|
|
74
|
+
const r = t.querySelector("p");
|
|
70
75
|
if (r && !this.originalPriceContents.has(r)) {
|
|
71
|
-
const
|
|
72
|
-
this.originalPriceContents.set(r,
|
|
76
|
+
const n = r.getInnerText() || "", i = ((o = this.store.currencySymbol) == null ? void 0 : o.trim()) || "", l = this._removeCurrencySymbol(n, i);
|
|
77
|
+
this.originalPriceContents.set(r, l);
|
|
73
78
|
}
|
|
74
79
|
});
|
|
75
80
|
}
|
|
@@ -84,29 +89,29 @@ class O extends B {
|
|
|
84
89
|
return e.replace(/[-\\^$*+?().|[\]{}]/g, "\\$&");
|
|
85
90
|
}
|
|
86
91
|
_removeCurrencySymbol(e, t) {
|
|
87
|
-
const
|
|
88
|
-
let
|
|
92
|
+
const r = e || "";
|
|
93
|
+
let o = r;
|
|
89
94
|
if (t) {
|
|
90
95
|
const n = new RegExp(`\\s*${this._escapeRegex(t)}\\s*`);
|
|
91
|
-
|
|
96
|
+
o = r.replace(n, "").trim();
|
|
92
97
|
} else {
|
|
93
|
-
const n =
|
|
98
|
+
const n = r.match(/([^0-9.,\s]+)/);
|
|
94
99
|
if (n && n[1]) {
|
|
95
|
-
const
|
|
96
|
-
|
|
100
|
+
const i = n[1].trim(), l = new RegExp(`\\s*${this._escapeRegex(i)}\\s*`);
|
|
101
|
+
o = r.replace(l, "").trim();
|
|
97
102
|
}
|
|
98
103
|
}
|
|
99
|
-
return
|
|
104
|
+
return o;
|
|
100
105
|
}
|
|
101
|
-
_buildPriceContent(e, t,
|
|
102
|
-
return t ?
|
|
106
|
+
_buildPriceContent(e, t, r) {
|
|
107
|
+
return t ? r === "1" ? `${e} ${t}` : `${t} ${e}` : e;
|
|
103
108
|
}
|
|
104
109
|
_getCurrencySymbol() {
|
|
105
110
|
return `
|
|
106
111
|
${this._GuTwoColumns([
|
|
107
112
|
this._GuLabel({ text: "Currency Symbol" }),
|
|
108
113
|
this._GuTextInput({
|
|
109
|
-
name:
|
|
114
|
+
name: m.CURRENCY_SYMBOL,
|
|
110
115
|
placeholder: "Enter Currency Symbol",
|
|
111
116
|
className: "es-180w"
|
|
112
117
|
})
|
|
@@ -115,6 +120,6 @@ class O extends B {
|
|
|
115
120
|
}
|
|
116
121
|
}
|
|
117
122
|
export {
|
|
118
|
-
|
|
119
|
-
|
|
123
|
+
E as CONTROL_BLOCK_ID,
|
|
124
|
+
M as PriceCurrencySymbolControl
|
|
120
125
|
};
|
|
@@ -1,71 +1,82 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
var C = Object.defineProperty;
|
|
2
|
+
var A = (n, r, e) => r in n ? C(n, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[r] = e;
|
|
3
|
+
var _ = (n, r, e) => A(n, typeof r != "symbol" ? r + "" : r, e);
|
|
4
|
+
import { ModificationDescription as L, UIElementType as m, UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as h } from "../../../common-control.js";
|
|
6
|
+
import { ItemsBlockControlId as l, ItemsBlockId as D } from "../../enums/controlEnums.js";
|
|
4
7
|
import { productPairs as I } from "../../enums/productEnums.js";
|
|
5
|
-
import {
|
|
6
|
-
|
|
8
|
+
import { useItemsBlockStore as O } from "../../store/items-block.js";
|
|
9
|
+
import { getItemsBlockConfig as u, setItemsBlockConfig as f } from "../../utils/nodeConfigUtils.js";
|
|
10
|
+
const N = l.PRICE_FORMATTED_PRICE, c = {
|
|
7
11
|
FORMATTED_PRICE: "formattedPrice"
|
|
8
12
|
};
|
|
9
|
-
class
|
|
13
|
+
class y extends h {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
_(this, "store", O());
|
|
17
|
+
}
|
|
10
18
|
getId() {
|
|
11
|
-
return
|
|
19
|
+
return N;
|
|
12
20
|
}
|
|
13
21
|
getTemplate() {
|
|
14
22
|
return `
|
|
15
|
-
<div class="container ${
|
|
23
|
+
<div class="container ${l.PRICE_FORMATTED_PRICE}">
|
|
16
24
|
${this._getFormattedPrice()}
|
|
17
25
|
</div>
|
|
18
26
|
`;
|
|
19
27
|
}
|
|
20
28
|
onRender() {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
this._onFormattedPriceChange(t);
|
|
29
|
+
this.api.updateValues({ [c.FORMATTED_PRICE]: this.store.formattedPrice }), this.api.onValueChanged(c.FORMATTED_PRICE, (e) => {
|
|
30
|
+
this._onFormattedPriceChange(e);
|
|
24
31
|
});
|
|
25
32
|
}
|
|
26
33
|
onTemplateNodeUpdated(e) {
|
|
27
|
-
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
34
|
+
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
|
|
35
|
+
() => {
|
|
36
|
+
const o = u(this.currentNode);
|
|
37
|
+
o && this.store.setFormattedPrice(o.priceFormatted ?? !0);
|
|
38
|
+
},
|
|
39
|
+
() => {
|
|
40
|
+
this.api.updateValues({ [c.FORMATTED_PRICE]: this.store.formattedPrice });
|
|
41
|
+
}
|
|
42
|
+
);
|
|
31
43
|
}
|
|
32
44
|
_onFormattedPriceChange(e) {
|
|
33
|
-
if (console.debug("Formatted price changed to: ", e),
|
|
45
|
+
if (console.debug("Formatted price changed to: ", e), this.store.setFormattedPrice(e), f(this.currentNode, this.api, { priceFormatted: e }), !this.currentNode)
|
|
34
46
|
return;
|
|
35
|
-
const
|
|
36
|
-
i ?
|
|
37
|
-
i ?
|
|
47
|
+
const { itemsType: o, singlePrice: i } = this.store, t = I.PAIRS_FOR_EXTENSION.price[o], s = I.PAIRS_FOR_EXTENSION.originalPrice[o], [E, R] = e ? [
|
|
48
|
+
i ? t.DEFAULT_SINGLE_PRICE : t.DEFAULT_PRICE,
|
|
49
|
+
i ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_PRICE_FORMATTED
|
|
38
50
|
] : [
|
|
39
|
-
i ?
|
|
40
|
-
i ?
|
|
41
|
-
],
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
});
|
|
51
|
+
i ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_PRICE_FORMATTED,
|
|
52
|
+
i ? t.DEFAULT_SINGLE_PRICE : t.DEFAULT_PRICE
|
|
53
|
+
], d = i ? s.DEFAULT_SINGLE_PRICE : s.DEFAULT_PRICE, P = i ? s.DEFAULT_SINGLE_PRICE_FORMATTED : s.DEFAULT_PRICE_FORMATTED, [p, F] = e ? [d, P] : [P, d];
|
|
54
|
+
this._updatePriceBlock(
|
|
55
|
+
this.currentNode,
|
|
56
|
+
E,
|
|
57
|
+
R,
|
|
58
|
+
"price"
|
|
59
|
+
);
|
|
60
|
+
const a = this.currentNode.closest(".items-block"), T = a == null ? void 0 : a.querySelector(`[esd-extension-block-id="${D.ORIGINAL_PRICE}"]`);
|
|
61
|
+
T && this._updatePriceBlock(T, p, F, "original price");
|
|
51
62
|
}
|
|
52
|
-
_updatePriceBlock(e,
|
|
53
|
-
const
|
|
54
|
-
this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(
|
|
63
|
+
_updatePriceBlock(e, o, i, t) {
|
|
64
|
+
const s = e.getInnerHTML().replace(o, i), E = `Updated ${t} to ${this.store.formattedPrice ? "formatted" : "unformatted"}`;
|
|
65
|
+
this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(s).apply(new L(E));
|
|
55
66
|
}
|
|
56
67
|
_getFormattedPrice() {
|
|
57
68
|
return `
|
|
58
69
|
<div class="display-flex align-items-center justify-content-between">
|
|
59
|
-
<${
|
|
60
|
-
${
|
|
70
|
+
<${m.LABEL}
|
|
71
|
+
${g.LABEL.text}="${this.api.translate("Formatted Price (e.g. $9.90)")}"
|
|
61
72
|
>
|
|
62
|
-
</${
|
|
63
|
-
${this._GuToggle(
|
|
73
|
+
</${m.LABEL}>
|
|
74
|
+
${this._GuToggle(c.FORMATTED_PRICE)}
|
|
64
75
|
</div>
|
|
65
76
|
`;
|
|
66
77
|
}
|
|
67
78
|
}
|
|
68
79
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
80
|
+
N as CONTROL_BLOCK_ID,
|
|
81
|
+
y as PriceFormattedPriceControl
|
|
71
82
|
};
|
|
@@ -1,51 +1,63 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
var c = Object.defineProperty;
|
|
2
|
+
var a = (i, e, t) => e in i ? c(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
|
|
3
|
+
var n = (i, e, t) => a(i, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
import { UIElementType as r, UEAttr as D } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as u } from "../../../common-control.js";
|
|
6
|
+
import { ItemsBlockControlId as d } from "../../enums/controlEnums.js";
|
|
7
|
+
import { useItemsBlockStore as I } from "../../store/items-block.js";
|
|
8
|
+
import { getItemsBlockConfig as p, setItemsBlockConfig as h } from "../../utils/nodeConfigUtils.js";
|
|
9
|
+
const l = d.PRICE_HIDE_DISCOUNT, s = {
|
|
6
10
|
HIDE_DISCOUNT: "hideDiscount"
|
|
7
11
|
};
|
|
8
|
-
class
|
|
12
|
+
class T extends u {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
n(this, "store", I());
|
|
16
|
+
}
|
|
9
17
|
getId() {
|
|
10
|
-
return
|
|
18
|
+
return l;
|
|
11
19
|
}
|
|
12
20
|
getTemplate() {
|
|
13
21
|
return `
|
|
14
|
-
<div class="container ${
|
|
22
|
+
<div class="container ${d.PRICE_HIDE_DISCOUNT}">
|
|
15
23
|
${this._getHideDiscount()}
|
|
16
24
|
</div>
|
|
17
25
|
`;
|
|
18
26
|
}
|
|
19
27
|
onRender() {
|
|
20
|
-
|
|
21
|
-
this.api.updateValues({ [i.HIDE_DISCOUNT]: (e == null ? void 0 : e.priceHideDiscount) ?? !0 }), this.api.onValueChanged(i.HIDE_DISCOUNT, (t) => {
|
|
28
|
+
this.api.updateValues({ [s.HIDE_DISCOUNT]: this.store.hideDiscount }), this.api.onValueChanged(s.HIDE_DISCOUNT, (t) => {
|
|
22
29
|
this._onHideDiscountChange(t);
|
|
23
30
|
});
|
|
24
31
|
}
|
|
25
|
-
onTemplateNodeUpdated(
|
|
26
|
-
super.onTemplateNodeUpdated(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
32
|
+
onTemplateNodeUpdated(t) {
|
|
33
|
+
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
|
|
34
|
+
() => {
|
|
35
|
+
const o = p(this.currentNode);
|
|
36
|
+
o && this.store.setHideDiscount(o.priceHideDiscount ?? !0);
|
|
37
|
+
},
|
|
38
|
+
() => {
|
|
39
|
+
this.api.updateValues({ [s.HIDE_DISCOUNT]: this.store.hideDiscount });
|
|
40
|
+
}
|
|
41
|
+
);
|
|
30
42
|
}
|
|
31
|
-
_onHideDiscountChange(
|
|
32
|
-
|
|
43
|
+
_onHideDiscountChange(t) {
|
|
44
|
+
this.store.setHideDiscount(t), h(this.currentNode, this.api, { priceHideDiscount: t }), this.api.updateValues({ [s.HIDE_DISCOUNT]: t });
|
|
33
45
|
}
|
|
34
46
|
_getHideDiscount() {
|
|
35
47
|
return `
|
|
36
48
|
|
|
37
49
|
<div class="display-flex align-items-center justify-content-between">
|
|
38
|
-
<${
|
|
39
|
-
${
|
|
50
|
+
<${r.LABEL}
|
|
51
|
+
${D.LABEL.text}="${this.api.translate("Hide if same as discounted ")}"
|
|
40
52
|
>
|
|
41
|
-
</${
|
|
42
|
-
${this._GuToggle(
|
|
53
|
+
</${r.LABEL}>
|
|
54
|
+
${this._GuToggle(s.HIDE_DISCOUNT)}
|
|
43
55
|
</div>
|
|
44
56
|
</div>
|
|
45
57
|
`;
|
|
46
58
|
}
|
|
47
59
|
}
|
|
48
60
|
export {
|
|
49
|
-
|
|
50
|
-
|
|
61
|
+
l as CONTROL_BLOCK_ID,
|
|
62
|
+
T as PriceHideDiscountControl
|
|
51
63
|
};
|
|
@@ -1,82 +1,94 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
1
|
+
var I = Object.defineProperty;
|
|
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
|
+
import { ItemsBlockControlId as O } from "../../enums/controlEnums.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";
|
|
10
|
+
const _ = O.PRICE_ORIENTATION, p = {
|
|
7
11
|
PRICE_ORIENTATION: "priceOrientation"
|
|
8
|
-
},
|
|
12
|
+
}, P = [
|
|
9
13
|
{ icon: "vertical-orientation", value: "vertical" },
|
|
10
14
|
{ icon: "horizontal-orientation", value: "horizontal" }
|
|
11
15
|
];
|
|
12
|
-
class
|
|
16
|
+
class H extends y {
|
|
17
|
+
constructor() {
|
|
18
|
+
super(...arguments);
|
|
19
|
+
m(this, "store", N());
|
|
20
|
+
}
|
|
13
21
|
getId() {
|
|
14
|
-
return
|
|
22
|
+
return _;
|
|
15
23
|
}
|
|
16
24
|
getTemplate() {
|
|
17
25
|
return `
|
|
18
|
-
<div class="container ${
|
|
26
|
+
<div class="container ${O.PRICE_ORIENTATION}">
|
|
19
27
|
${this._getPriceOrientation()}
|
|
20
28
|
</div>
|
|
21
29
|
`;
|
|
22
30
|
}
|
|
23
31
|
onRender() {
|
|
24
|
-
|
|
25
|
-
this.api.updateValues({ [c.PRICE_ORIENTATION]: (i == null ? void 0 : i.priceOrientation) ?? "horizontal" }), this.api.onValueChanged(c.PRICE_ORIENTATION, (t) => {
|
|
32
|
+
this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation }), this.api.onValueChanged(p.PRICE_ORIENTATION, (t) => {
|
|
26
33
|
typeof t == "string" && this._onPriceOrientationChange(t);
|
|
27
34
|
});
|
|
28
35
|
}
|
|
29
|
-
onTemplateNodeUpdated(
|
|
30
|
-
super.onTemplateNodeUpdated(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
36
|
+
onTemplateNodeUpdated(t) {
|
|
37
|
+
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
|
|
38
|
+
() => {
|
|
39
|
+
const i = T(this.currentNode);
|
|
40
|
+
i && this.store.setPriceOrientation(i.priceOrientation || "horizontal");
|
|
41
|
+
},
|
|
42
|
+
() => {
|
|
43
|
+
this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation });
|
|
44
|
+
}
|
|
45
|
+
);
|
|
34
46
|
}
|
|
35
|
-
_onPriceOrientationChange(
|
|
36
|
-
if (
|
|
37
|
-
priceOrientation:
|
|
47
|
+
_onPriceOrientationChange(t) {
|
|
48
|
+
if (this.store.setPriceOrientation(t), C(this.currentNode, this.api, {
|
|
49
|
+
priceOrientation: t
|
|
38
50
|
}), !this.currentNode)
|
|
39
51
|
return;
|
|
40
|
-
const
|
|
41
|
-
|
|
52
|
+
const { orientation: i } = this.store, r = i === E.ORIENTATION.VERTICAL, e = t === "horizontal";
|
|
53
|
+
r ? this._updateVerticalLayout(e) : this._updateHorizontalLayout(e);
|
|
42
54
|
}
|
|
43
|
-
_updateVerticalLayout(
|
|
44
|
-
var
|
|
45
|
-
const
|
|
46
|
-
if (!
|
|
55
|
+
_updateVerticalLayout(t) {
|
|
56
|
+
var c, l, d, a;
|
|
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")) || [];
|
|
58
|
+
if (!i || !r)
|
|
47
59
|
return;
|
|
48
|
-
const e =
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}), r.forEach((
|
|
52
|
-
|
|
53
|
-
}),
|
|
60
|
+
const e = t ? "50%" : "100%", s = this.api.getDocumentModifier();
|
|
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}`));
|
|
54
66
|
}
|
|
55
|
-
_updateHorizontalLayout(
|
|
56
|
-
var
|
|
57
|
-
const
|
|
58
|
-
if (!
|
|
67
|
+
_updateHorizontalLayout(t) {
|
|
68
|
+
var s, c, l, d;
|
|
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");
|
|
70
|
+
if (!i || !r || i.length === 0)
|
|
59
71
|
return;
|
|
60
72
|
const e = this.api.getDocumentModifier();
|
|
61
|
-
|
|
62
|
-
e.modifyHtml(
|
|
63
|
-
}), e.modifyHtml(r).setStyle("display", "none"), e.apply(new
|
|
64
|
-
e.modifyHtml(
|
|
65
|
-
}), e.modifyHtml(r).setStyle("display", "table-cell"), e.apply(new
|
|
73
|
+
t ? (i.forEach((a) => {
|
|
74
|
+
e.modifyHtml(a).setStyle("display", "table-cell");
|
|
75
|
+
}), e.modifyHtml(r).setStyle("display", "none"), e.apply(new u("Show horizontal price orientation"))) : (i.forEach((a) => {
|
|
76
|
+
e.modifyHtml(a).setStyle("display", "none");
|
|
77
|
+
}), e.modifyHtml(r).setStyle("display", "table-cell"), e.apply(new u("Show vertical price orientation")));
|
|
66
78
|
}
|
|
67
79
|
_getPriceOrientation() {
|
|
68
80
|
return `
|
|
69
81
|
${this._GuTwoColumns([
|
|
70
82
|
this._GuLabel({ text: "Price Orientation" }),
|
|
71
83
|
this._GuRadioButton({
|
|
72
|
-
name:
|
|
73
|
-
buttons:
|
|
84
|
+
name: p.PRICE_ORIENTATION,
|
|
85
|
+
buttons: P
|
|
74
86
|
})
|
|
75
87
|
])}
|
|
76
88
|
`;
|
|
77
89
|
}
|
|
78
90
|
}
|
|
79
91
|
export {
|
|
80
|
-
|
|
81
|
-
|
|
92
|
+
_ as CONTROL_BLOCK_ID,
|
|
93
|
+
H as PriceOrientationControl
|
|
82
94
|
};
|