@useinsider/guido 1.0.3-beta.294f9bc → 1.0.3-beta.2cf8046
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -0
- package/dist/components/organisms/onboarding/ItemsOnboarding.vue.js +21 -0
- package/dist/components/organisms/onboarding/ItemsOnboarding.vue2.js +99 -0
- package/dist/components/organisms/onboarding/OnboardingWrapper.vue2.js +20 -18
- package/dist/composables/useBlocksConfig.js +1 -2
- package/dist/composables/useStripo.js +9 -9
- package/dist/enums/extensions/recommendationBlock.js +2 -2
- package/dist/enums/onboarding.js +7 -3
- package/dist/enums/unsubscribe.js +26 -27
- package/dist/extensions/Blocks/Checkbox/block.js +5 -2
- package/dist/extensions/Blocks/Checkbox/control.js +14 -15
- package/dist/extensions/Blocks/Items/block.js +67 -0
- package/dist/extensions/Blocks/Items/controls/button/link.js +68 -0
- package/dist/extensions/Blocks/Items/controls/cardComposition.js +193 -0
- package/dist/extensions/Blocks/Items/controls/image/link.js +68 -0
- package/dist/extensions/Blocks/Items/controls/index.js +217 -0
- package/dist/extensions/Blocks/Items/controls/name/trimming.js +70 -0
- package/dist/extensions/Blocks/Items/controls/price/currencyLocation.js +107 -0
- package/dist/extensions/Blocks/Items/controls/price/currencySymbol.js +123 -0
- package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js +76 -0
- package/dist/extensions/Blocks/Items/controls/price/hideDiscount.js +61 -0
- package/dist/extensions/Blocks/Items/controls/settingsControl.js +280 -0
- package/dist/extensions/Blocks/Items/enums/controlEnums.js +5 -0
- package/dist/extensions/Blocks/Items/enums/productEnums.js +201 -0
- package/dist/extensions/Blocks/Items/enums/settingsEnums.js +76 -0
- package/dist/extensions/Blocks/Items/extension.js +19 -0
- package/dist/extensions/Blocks/Items/iconsRegistry.js +32 -0
- package/dist/extensions/Blocks/Items/items.css.js +23 -0
- package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +61 -0
- package/dist/extensions/Blocks/Items/layouts/vertical.html.js +61 -0
- package/dist/extensions/Blocks/Items/settingsPanel.js +106 -0
- package/dist/extensions/Blocks/Items/store/items-block.js +71 -0
- package/dist/extensions/Blocks/Items/template.js +110 -0
- package/dist/extensions/Blocks/Items/utils/configBlockUtils.js +17 -0
- package/dist/extensions/Blocks/Items/utils/syncAttributeFromConfigBlock.js +28 -0
- package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +67 -0
- package/dist/extensions/Blocks/Items/utils/updateAttributes.js +44 -0
- package/dist/extensions/Blocks/RadioButton/block.js +5 -2
- package/dist/extensions/Blocks/RadioButton/control.js +17 -18
- package/dist/extensions/Blocks/Recommendation/iconsRegistry.js +43 -43
- package/dist/extensions/Blocks/common-control.js +174 -110
- package/dist/extensions/Blocks/controlFactories.js +223 -0
- package/dist/guido.css +1 -1
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +213 -168
- package/dist/package.json.js +1 -1
- package/dist/services/recommendationApi.js +13 -19
- package/dist/src/components/organisms/onboarding/ItemsOnboarding.vue.d.ts +2 -0
- package/dist/src/enums/onboarding.d.ts +4 -0
- package/dist/src/extensions/Blocks/Checkbox/block.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/block.d.ts +13 -0
- package/dist/src/extensions/Blocks/Items/controls/button/link.d.ts +14 -0
- package/dist/src/extensions/Blocks/Items/controls/cardComposition.d.ts +33 -0
- package/dist/src/extensions/Blocks/Items/controls/image/link.d.ts +14 -0
- package/dist/src/extensions/Blocks/Items/controls/index.d.ts +501 -0
- package/dist/src/extensions/Blocks/Items/controls/name/trimming.d.ts +14 -0
- package/dist/src/extensions/Blocks/Items/controls/price/currencyLocation.d.ts +19 -0
- package/dist/src/extensions/Blocks/Items/controls/price/currencySymbol.d.ts +21 -0
- package/dist/src/extensions/Blocks/Items/controls/price/formattedPrice.d.ts +14 -0
- package/dist/src/extensions/Blocks/Items/controls/price/hideDiscount.d.ts +13 -0
- package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts +42 -0
- package/dist/src/extensions/Blocks/Items/enums/controlEnums.d.ts +61 -0
- package/dist/src/extensions/Blocks/Items/enums/productEnums.d.ts +160 -0
- package/dist/src/extensions/Blocks/Items/enums/settingsEnums.d.ts +49 -0
- package/dist/src/extensions/Blocks/Items/extension.d.ts +2 -0
- package/dist/src/extensions/Blocks/Items/iconsRegistry.d.ts +4 -0
- package/dist/src/extensions/Blocks/Items/settingsPanel.d.ts +4 -0
- package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +41 -0
- package/dist/src/extensions/Blocks/Items/template.d.ts +16 -0
- package/dist/src/extensions/Blocks/Items/utils/configBlockUtils.d.ts +23 -0
- package/dist/src/extensions/Blocks/Items/utils/syncAttributeFromConfigBlock.d.ts +32 -0
- package/dist/src/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.d.ts +44 -0
- package/dist/src/extensions/Blocks/Items/utils/updateAttributes.d.ts +8 -0
- package/dist/src/extensions/Blocks/RadioButton/block.d.ts +1 -0
- package/dist/src/extensions/Blocks/common-control.d.ts +44 -7
- package/dist/src/extensions/Blocks/controlFactories.d.ts +312 -0
- package/dist/src/stores/onboarding.d.ts +334 -0
- package/dist/static/styles/customEditorStyle.css.js +1 -1
- package/dist/stores/onboarding.js +20 -12
- package/dist/utils/genericUtil.js +16 -17
- package/package.json +11 -4
- package/dist/src/utils/environmentUtil.d.ts +0 -5
- package/dist/utils/environmentUtil.js +0 -4
|
@@ -0,0 +1,123 @@
|
|
|
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 { syncCurrencySymbolFromAttributes as N } from "../../utils/syncAttributesFromConfigBlock.js";
|
|
9
|
+
import { updateConfigBlockAttributes as B } from "../../utils/updateAttributes.js";
|
|
10
|
+
const E = h.PRICE_CURRENCY_SYMBOL, m = {
|
|
11
|
+
CURRENCY_SYMBOL: "currencySymbol"
|
|
12
|
+
};
|
|
13
|
+
class P extends R {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
u(this, "store", f());
|
|
17
|
+
u(this, "originalPriceContents", /* @__PURE__ */ new Map());
|
|
18
|
+
}
|
|
19
|
+
getId() {
|
|
20
|
+
return E;
|
|
21
|
+
}
|
|
22
|
+
getTemplate() {
|
|
23
|
+
return `
|
|
24
|
+
<div class="${h.PRICE_CURRENCY_SYMBOL}">
|
|
25
|
+
${this._getCurrencySymbol()}
|
|
26
|
+
</div>
|
|
27
|
+
`;
|
|
28
|
+
}
|
|
29
|
+
onRender() {
|
|
30
|
+
this.api.updateValues({ [m.CURRENCY_SYMBOL]: this.store.currencySymbol }), this._storeOriginalContents(), this.api.onValueChanged(m.CURRENCY_SYMBOL, (e) => {
|
|
31
|
+
this._onCurrencySymbolChange(e);
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
onDestroy() {
|
|
35
|
+
super.onDestroy(), this.originalPriceContents.clear();
|
|
36
|
+
}
|
|
37
|
+
onTemplateNodeUpdated(e) {
|
|
38
|
+
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
|
|
39
|
+
() => N(this.currentNode),
|
|
40
|
+
() => {
|
|
41
|
+
this.api.updateValues({ [m.CURRENCY_SYMBOL]: this.store.currencySymbol }), this._storeOriginalContents();
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
_onCurrencySymbolChange(e) {
|
|
46
|
+
var i;
|
|
47
|
+
console.debug("Currency symbol changed to: ", e);
|
|
48
|
+
const r = ((i = this.store.currencySymbol) == null ? void 0 : i.trim()) || "";
|
|
49
|
+
if (this.store.setCurrencySymbol(e), B(this.currentNode, this.api), !this.currentNode)
|
|
50
|
+
return;
|
|
51
|
+
const t = this._getPriceBlocks();
|
|
52
|
+
if (!t || t.length === 0)
|
|
53
|
+
return;
|
|
54
|
+
const o = (e == null ? void 0 : e.trim()) || "", { currencyLocation: n } = this.store;
|
|
55
|
+
t.forEach((l) => {
|
|
56
|
+
const a = this._getParagraph(l);
|
|
57
|
+
if (!a)
|
|
58
|
+
return;
|
|
59
|
+
const y = a.getInnerHTML() || "", p = a.getInnerText() || "", C = this._removeCurrencySymbol(p, r), g = this._buildPriceContent(C, o, n), d = y.replace(p, g);
|
|
60
|
+
this.api.getDocumentModifier().modifyHtml(a).setInnerHtml(d).apply(new b(
|
|
61
|
+
`Updated currency symbol to ${o || "removed"}`
|
|
62
|
+
));
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
_storeOriginalContents() {
|
|
66
|
+
if (!this.currentNode)
|
|
67
|
+
return;
|
|
68
|
+
this.currentNode.querySelectorAll(
|
|
69
|
+
".items-block-price"
|
|
70
|
+
).forEach((r) => {
|
|
71
|
+
var o;
|
|
72
|
+
const t = r.querySelector("p");
|
|
73
|
+
if (t && !this.originalPriceContents.has(t)) {
|
|
74
|
+
const n = t.getInnerText() || "", i = ((o = this.store.currencySymbol) == null ? void 0 : o.trim()) || "", l = this._removeCurrencySymbol(n, i);
|
|
75
|
+
this.originalPriceContents.set(t, l);
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
_getPriceBlocks() {
|
|
80
|
+
var e, r;
|
|
81
|
+
return ((r = (e = this.currentNode) == null ? void 0 : e.closest(".items-block")) == null ? void 0 : r.querySelectorAll(".items-block-price")) || [];
|
|
82
|
+
}
|
|
83
|
+
_getParagraph(e) {
|
|
84
|
+
return e.querySelector("p");
|
|
85
|
+
}
|
|
86
|
+
_escapeRegex(e) {
|
|
87
|
+
return e.replace(/[-\\^$*+?().|[\]{}]/g, "\\$&");
|
|
88
|
+
}
|
|
89
|
+
_removeCurrencySymbol(e, r) {
|
|
90
|
+
const t = e || "";
|
|
91
|
+
let o = t;
|
|
92
|
+
if (r) {
|
|
93
|
+
const n = new RegExp(`\\s*${this._escapeRegex(r)}\\s*`);
|
|
94
|
+
o = t.replace(n, "").trim();
|
|
95
|
+
} else {
|
|
96
|
+
const n = t.match(/([^0-9.,\s]+)/);
|
|
97
|
+
if (n && n[1]) {
|
|
98
|
+
const i = n[1].trim(), l = new RegExp(`\\s*${this._escapeRegex(i)}\\s*`);
|
|
99
|
+
o = t.replace(l, "").trim();
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
return o;
|
|
103
|
+
}
|
|
104
|
+
_buildPriceContent(e, r, t) {
|
|
105
|
+
return r ? t === "1" ? `${e} ${r}` : `${r} ${e}` : e;
|
|
106
|
+
}
|
|
107
|
+
_getCurrencySymbol() {
|
|
108
|
+
return `
|
|
109
|
+
${this._GuTwoColumns([
|
|
110
|
+
this._GuLabel({ text: "Currency Symbol" }),
|
|
111
|
+
this._GuTextInput({
|
|
112
|
+
name: m.CURRENCY_SYMBOL,
|
|
113
|
+
placeholder: "Enter Currency Symbol",
|
|
114
|
+
className: "es-180w"
|
|
115
|
+
})
|
|
116
|
+
])}
|
|
117
|
+
`;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
export {
|
|
121
|
+
E as CONTROL_BLOCK_ID,
|
|
122
|
+
P as PriceCurrencySymbolControl
|
|
123
|
+
};
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
var _ = Object.defineProperty;
|
|
2
|
+
var I = (r, e, t) => e in r ? _(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
|
|
3
|
+
var P = (r, e, t) => I(r, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
import { ModificationDescription as F, UIElementType as m, UEAttr as C } 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 A } from "../../enums/controlEnums.js";
|
|
7
|
+
import { productPairs as T } from "../../enums/productEnums.js";
|
|
8
|
+
import { useItemsBlockStore as u } from "../../store/items-block.js";
|
|
9
|
+
import { syncFormattedPriceFromAttributes as g } from "../../utils/syncAttributesFromConfigBlock.js";
|
|
10
|
+
import { updateConfigBlockAttributes as D } from "../../utils/updateAttributes.js";
|
|
11
|
+
const f = l.PRICE_FORMATTED_PRICE, n = {
|
|
12
|
+
FORMATTED_PRICE: "formattedPrice"
|
|
13
|
+
};
|
|
14
|
+
class y extends h {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments);
|
|
17
|
+
P(this, "store", u());
|
|
18
|
+
}
|
|
19
|
+
getId() {
|
|
20
|
+
return f;
|
|
21
|
+
}
|
|
22
|
+
getTemplate() {
|
|
23
|
+
return `
|
|
24
|
+
<div class="${l.PRICE_FORMATTED_PRICE}">
|
|
25
|
+
${this._getFormattedPrice()}
|
|
26
|
+
</div>
|
|
27
|
+
`;
|
|
28
|
+
}
|
|
29
|
+
onRender() {
|
|
30
|
+
this.api.updateValues({ [n.FORMATTED_PRICE]: this.store.formattedPrice }), this.api.onValueChanged(n.FORMATTED_PRICE, (t) => {
|
|
31
|
+
this._onFormattedPriceChange(t);
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
onTemplateNodeUpdated(t) {
|
|
35
|
+
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
|
|
36
|
+
() => g(this.currentNode),
|
|
37
|
+
() => {
|
|
38
|
+
this.api.updateValues({ [n.FORMATTED_PRICE]: this.store.formattedPrice });
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
_onFormattedPriceChange(t) {
|
|
43
|
+
if (console.debug("Formatted price changed to: ", t), this.store.setFormattedPrice(t), D(this.currentNode, this.api), !this.currentNode)
|
|
44
|
+
return;
|
|
45
|
+
const { itemsType: s } = this.store, i = T.PAIRS_FOR_EXTENSION.price[s], o = T.PAIRS_FOR_EXTENSION.originalPrice[s], [c, a] = t ? [i.DEFAULT_PRICE, i.DEFAULT_PRICE_FORMATTED] : [i.DEFAULT_PRICE_FORMATTED, i.DEFAULT_PRICE], [p, R] = t ? [o.DEFAULT_PRICE, o.DEFAULT_PRICE_FORMATTED] : [o.DEFAULT_PRICE_FORMATTED, o.DEFAULT_PRICE];
|
|
46
|
+
this._updatePriceBlock(
|
|
47
|
+
this.currentNode,
|
|
48
|
+
c,
|
|
49
|
+
a,
|
|
50
|
+
"price"
|
|
51
|
+
);
|
|
52
|
+
const d = this.currentNode.closest(".items-block"), E = d == null ? void 0 : d.querySelector(`[esd-extension-block-id="${A.ORIGINAL_PRICE}"]`);
|
|
53
|
+
E && this._updatePriceBlock(E, p, R, "original price");
|
|
54
|
+
}
|
|
55
|
+
_updatePriceBlock(t, s, i, o) {
|
|
56
|
+
const c = t.getInnerHTML().replace(s, i), a = `Updated ${o} to ${this.store.formattedPrice ? "formatted" : "unformatted"}`;
|
|
57
|
+
this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(c).apply(new F(a));
|
|
58
|
+
}
|
|
59
|
+
_getFormattedPrice() {
|
|
60
|
+
return `
|
|
61
|
+
<div class="container">
|
|
62
|
+
<div class="display-flex align-items-center justify-content-between">
|
|
63
|
+
<${m.LABEL}
|
|
64
|
+
${C.LABEL.text}="${this.api.translate("Formatted Price (e.g. $9.90)")}"
|
|
65
|
+
>
|
|
66
|
+
</${m.LABEL}>
|
|
67
|
+
${this._GuToggle(n.FORMATTED_PRICE)}
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
`;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
export {
|
|
74
|
+
f as CONTROL_BLOCK_ID,
|
|
75
|
+
y as PriceFormattedPriceControl
|
|
76
|
+
};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
var d = Object.defineProperty;
|
|
2
|
+
var a = (i, e, t) => e in i ? d(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
|
|
3
|
+
var o = (i, e, t) => a(i, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
import { UIElementType as n, UEAttr as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as u } from "../../../common-control.js";
|
|
6
|
+
import { ItemsBlockControlId as r } from "../../enums/controlEnums.js";
|
|
7
|
+
import { useItemsBlockStore as D } from "../../store/items-block.js";
|
|
8
|
+
import { syncHideDiscountFromAttributes as p } from "../../utils/syncAttributesFromConfigBlock.js";
|
|
9
|
+
import { updateConfigBlockAttributes as I } from "../../utils/updateAttributes.js";
|
|
10
|
+
const l = r.PRICE_HIDE_DISCOUNT, s = {
|
|
11
|
+
HIDE_DISCOUNT: "hideDiscount"
|
|
12
|
+
};
|
|
13
|
+
class N extends u {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
o(this, "store", D());
|
|
17
|
+
}
|
|
18
|
+
getId() {
|
|
19
|
+
return l;
|
|
20
|
+
}
|
|
21
|
+
getTemplate() {
|
|
22
|
+
return `
|
|
23
|
+
<div class="${r.PRICE_HIDE_DISCOUNT}">
|
|
24
|
+
${this._getHideDiscount()}
|
|
25
|
+
</div>
|
|
26
|
+
`;
|
|
27
|
+
}
|
|
28
|
+
onRender() {
|
|
29
|
+
this.api.updateValues({ [s.HIDE_DISCOUNT]: this.store.hideDiscount }), this.api.onValueChanged(s.HIDE_DISCOUNT, (t) => {
|
|
30
|
+
this._onHideDiscountChange(t);
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
onTemplateNodeUpdated(t) {
|
|
34
|
+
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
|
|
35
|
+
() => p(this.currentNode),
|
|
36
|
+
() => {
|
|
37
|
+
this.api.updateValues({ [s.HIDE_DISCOUNT]: this.store.hideDiscount });
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
_onHideDiscountChange(t) {
|
|
42
|
+
this.store.setHideDiscount(t), I(this.currentNode, this.api), this.api.updateValues({ [s.HIDE_DISCOUNT]: t });
|
|
43
|
+
}
|
|
44
|
+
_getHideDiscount() {
|
|
45
|
+
return `
|
|
46
|
+
<div class="container">
|
|
47
|
+
<div class="display-flex align-items-center justify-content-between">
|
|
48
|
+
<${n.LABEL}
|
|
49
|
+
${c.LABEL.text}="${this.api.translate("Hide if same as discounted ")}"
|
|
50
|
+
>
|
|
51
|
+
</${n.LABEL}>
|
|
52
|
+
${this._GuToggle(s.HIDE_DISCOUNT)}
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
export {
|
|
59
|
+
l as CONTROL_BLOCK_ID,
|
|
60
|
+
N as PriceHideDiscountControl
|
|
61
|
+
};
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
var M = Object.defineProperty;
|
|
2
|
+
var A = (u, d, e) => d in u ? M(u, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[d] = e;
|
|
3
|
+
var R = (u, d, e) => A(u, typeof d != "symbol" ? d + "" : d, e);
|
|
4
|
+
import { UEAttr as f, ModificationDescription as m } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as b } from "../../common-control.js";
|
|
6
|
+
import { ItemsBlockId as c } from "../enums/controlEnums.js";
|
|
7
|
+
import { productPairs as p } from "../enums/productEnums.js";
|
|
8
|
+
import { ItemTypeOptions as P, OrientationOptions as x, ItemInCartOptions as S, SETTINGS_ENUMS as N } from "../enums/settingsEnums.js";
|
|
9
|
+
import D from "../layouts/horizontal.html.js";
|
|
10
|
+
import L from "../layouts/vertical.html.js";
|
|
11
|
+
import { useItemsBlockStore as H } from "../store/items-block.js";
|
|
12
|
+
import { getDefaultTemplate as U } from "../template.js";
|
|
13
|
+
import { updateConfigBlockAttributes as O } from "../utils/updateAttributes.js";
|
|
14
|
+
const $ = "ui-elements-items-block", s = {
|
|
15
|
+
ITEMS_TYPE: "itemsType",
|
|
16
|
+
ORIENTATION: "orientation",
|
|
17
|
+
ITEM_IDS: "itemIds"
|
|
18
|
+
};
|
|
19
|
+
class z extends b {
|
|
20
|
+
constructor() {
|
|
21
|
+
super(...arguments);
|
|
22
|
+
R(this, "store", H());
|
|
23
|
+
}
|
|
24
|
+
getId() {
|
|
25
|
+
return $;
|
|
26
|
+
}
|
|
27
|
+
getTemplate() {
|
|
28
|
+
return `
|
|
29
|
+
<div class="items-controls-container">
|
|
30
|
+
${this._getItemsType()}
|
|
31
|
+
${this._getItemInCart()}
|
|
32
|
+
${this._getOrientation()}
|
|
33
|
+
</div>
|
|
34
|
+
`;
|
|
35
|
+
}
|
|
36
|
+
onRender() {
|
|
37
|
+
this.api.updateValues({
|
|
38
|
+
[s.ORIENTATION]: this.store.orientation,
|
|
39
|
+
[s.ITEMS_TYPE]: this.store.itemsType,
|
|
40
|
+
[s.ITEM_IDS]: this.store.itemIds
|
|
41
|
+
}), this._listenToFormUpdates();
|
|
42
|
+
}
|
|
43
|
+
onTemplateNodeUpdated(e) {
|
|
44
|
+
this.currentNode = e, this.api.updateValues({
|
|
45
|
+
[s.ORIENTATION]: this.store.orientation,
|
|
46
|
+
[s.ITEMS_TYPE]: this.store.itemsType,
|
|
47
|
+
[s.ITEM_IDS]: this.store.itemIds
|
|
48
|
+
}), this._initializeSelectItems();
|
|
49
|
+
}
|
|
50
|
+
onDestroy() {
|
|
51
|
+
const e = this._getTemplateData();
|
|
52
|
+
this.store.setTemplateData(e);
|
|
53
|
+
}
|
|
54
|
+
_getItemsType() {
|
|
55
|
+
return `
|
|
56
|
+
${this._GuOneColumn([
|
|
57
|
+
this._GuLabel({ text: "Item Type" }),
|
|
58
|
+
this._GuSelect({
|
|
59
|
+
name: s.ITEMS_TYPE,
|
|
60
|
+
className: "es-100",
|
|
61
|
+
placeholder: "Select Item Type",
|
|
62
|
+
options: P
|
|
63
|
+
})
|
|
64
|
+
])}
|
|
65
|
+
`;
|
|
66
|
+
}
|
|
67
|
+
_getOrientation() {
|
|
68
|
+
return `
|
|
69
|
+
${this._GuTwoColumns([
|
|
70
|
+
this._GuLabel({ text: "Orientation" }),
|
|
71
|
+
this._GuRadioButton({
|
|
72
|
+
name: s.ORIENTATION,
|
|
73
|
+
buttons: x
|
|
74
|
+
})
|
|
75
|
+
])}
|
|
76
|
+
`;
|
|
77
|
+
}
|
|
78
|
+
_getItemInCart() {
|
|
79
|
+
return `
|
|
80
|
+
${this._GuTwoColumns([
|
|
81
|
+
this._GuLabel({ text: "Item in Cart" }),
|
|
82
|
+
this._GuSelect({
|
|
83
|
+
name: s.ITEM_IDS,
|
|
84
|
+
className: "es-100",
|
|
85
|
+
placeholder: "Select Item In Cart",
|
|
86
|
+
options: []
|
|
87
|
+
})
|
|
88
|
+
])}
|
|
89
|
+
`;
|
|
90
|
+
}
|
|
91
|
+
_onOrientationChange(e) {
|
|
92
|
+
console.debug("Orientation changed to: ", e), this.store.setOrientation(e), this.api.updateValues({ [s.ORIENTATION]: e }), O(this.currentNode, this.api), this._reOrderTemplate(), this._recalculateTrimming();
|
|
93
|
+
}
|
|
94
|
+
_onItemsTypeChange(e, t) {
|
|
95
|
+
const { itemIds: i } = this.store, r = N.ITEMS_TYPE[e], n = S[t].findIndex((a) => a.value === i), o = S[e][n];
|
|
96
|
+
r && (this.store.setItemsType(r), this.store.setItemIds(o.value), O(this.currentNode, this.api), this._initializeSelectItems(), this._reFillTemplate());
|
|
97
|
+
}
|
|
98
|
+
_onItemIdsChange(e) {
|
|
99
|
+
console.debug("Item ids changed to: ", e), this.store.setItemIds(e), this.api.updateValues({ [s.ITEM_IDS]: e }), O(this.currentNode, this.api), this._reFillTemplate();
|
|
100
|
+
}
|
|
101
|
+
_initializeSelectItems() {
|
|
102
|
+
this.api.setUIEAttribute(
|
|
103
|
+
s.ITEMS_TYPE,
|
|
104
|
+
f.SELECTPICKER.items,
|
|
105
|
+
P
|
|
106
|
+
);
|
|
107
|
+
const { itemsType: e, itemIds: t } = this.store;
|
|
108
|
+
this.api.updateValues({
|
|
109
|
+
[s.ITEMS_TYPE]: e
|
|
110
|
+
});
|
|
111
|
+
const i = S[e];
|
|
112
|
+
this.api.setUIEAttribute(
|
|
113
|
+
s.ITEM_IDS,
|
|
114
|
+
f.SELECTPICKER.items,
|
|
115
|
+
i
|
|
116
|
+
), this.api.updateValues({
|
|
117
|
+
[s.ITEM_IDS]: t
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
_listenToFormUpdates() {
|
|
121
|
+
this.api.onValueChanged(
|
|
122
|
+
s.ITEMS_TYPE,
|
|
123
|
+
(e, t) => this._onItemsTypeChange(e, t)
|
|
124
|
+
), this.api.onValueChanged(
|
|
125
|
+
s.ORIENTATION,
|
|
126
|
+
(e) => this._onOrientationChange(e)
|
|
127
|
+
), this.api.onValueChanged(
|
|
128
|
+
s.ITEM_IDS,
|
|
129
|
+
(e) => this._onItemIdsChange(e)
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
_renderTemplate() {
|
|
133
|
+
const {
|
|
134
|
+
orientation: e,
|
|
135
|
+
itemsType: t,
|
|
136
|
+
itemIds: i,
|
|
137
|
+
currencySymbol: r,
|
|
138
|
+
currencyLocation: n,
|
|
139
|
+
formattedPrice: o
|
|
140
|
+
} = this.store;
|
|
141
|
+
this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(U({
|
|
142
|
+
orientation: e,
|
|
143
|
+
itemsType: t,
|
|
144
|
+
itemId: i,
|
|
145
|
+
currencySymbol: r,
|
|
146
|
+
currencyLocation: n,
|
|
147
|
+
formattedPrice: o
|
|
148
|
+
})).apply(new m("Updated template"));
|
|
149
|
+
}
|
|
150
|
+
_getTemplateData() {
|
|
151
|
+
const { itemsType: e, itemIds: t, formattedPrice: i } = this.store, r = S[e].findIndex((o) => o.value === t), n = r > -1 ? r : 0;
|
|
152
|
+
return {
|
|
153
|
+
imageSrc: p.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[n],
|
|
154
|
+
name: p.PAIRS_FOR_EXTENSION.name[e].DEFAULT[n],
|
|
155
|
+
price: i ? p.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE_FORMATTED : p.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE,
|
|
156
|
+
originalPrice: i ? p.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE_FORMATTED : p.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE,
|
|
157
|
+
quantity: p.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT,
|
|
158
|
+
button: p.PAIRS_FOR_EXTENSION.button[e].DEFAULT_LABEL
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
_updateImageSrc(e) {
|
|
162
|
+
var i;
|
|
163
|
+
const t = (i = this.currentNode) == null ? void 0 : i.querySelector(`[esd-extension-block-id="${c.IMAGE}"] img`);
|
|
164
|
+
t && this.api.getDocumentModifier().modifyHtml(t).setAttribute("src", e).apply(new m("Updated image src"));
|
|
165
|
+
}
|
|
166
|
+
_updateName(e) {
|
|
167
|
+
var n;
|
|
168
|
+
const t = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${c.NAME}"]`);
|
|
169
|
+
if (!t)
|
|
170
|
+
return;
|
|
171
|
+
const i = t.getInnerText().trim();
|
|
172
|
+
let r = t.getInnerHTML();
|
|
173
|
+
r = r.replace(i, e), this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(r).apply(new m("Updated name"));
|
|
174
|
+
}
|
|
175
|
+
_updatePrice(e) {
|
|
176
|
+
var g;
|
|
177
|
+
const t = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${c.PRICE}"]`);
|
|
178
|
+
if (!t)
|
|
179
|
+
return;
|
|
180
|
+
const i = this._getParagraphFromBlock(t);
|
|
181
|
+
if (!i)
|
|
182
|
+
return;
|
|
183
|
+
const r = i.getInnerHTML() || "", n = i.getInnerText() || "", { currencySymbol: o, currencyLocation: a } = this.store, I = (o == null ? void 0 : o.trim()) || "", l = this._removeCurrencySymbol(n, I), T = this._replacePriceNumber(l, e), h = this._buildPriceContent(T, I, a), _ = r.replace(n, h);
|
|
184
|
+
this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(_).apply(new m("Updated price"));
|
|
185
|
+
}
|
|
186
|
+
_updateOriginalPrice(e) {
|
|
187
|
+
var E;
|
|
188
|
+
const t = (E = this.currentNode) == null ? void 0 : E.querySelector(
|
|
189
|
+
`[esd-extension-block-id="${c.ORIGINAL_PRICE}"]`
|
|
190
|
+
);
|
|
191
|
+
if (!t)
|
|
192
|
+
return;
|
|
193
|
+
const i = this._getParagraphFromBlock(t);
|
|
194
|
+
if (!i)
|
|
195
|
+
return;
|
|
196
|
+
const r = i.querySelector("s");
|
|
197
|
+
if (!r)
|
|
198
|
+
return;
|
|
199
|
+
const n = r.getInnerHTML() || "", o = r.getInnerText() || "", { currencySymbol: a, currencyLocation: I } = this.store, l = (a == null ? void 0 : a.trim()) || "", T = this._removeCurrencySymbol(o, l), h = this._replacePriceNumber(T, e), _ = this._buildPriceContent(h, l, I), y = `<s>${n.replace(o, _)}</s>`;
|
|
200
|
+
this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(y).apply(new m("Updated original price"));
|
|
201
|
+
}
|
|
202
|
+
_updateQuantity(e) {
|
|
203
|
+
var a;
|
|
204
|
+
const t = this.store.itemsType !== N.ITEMS_TYPE.BROWSED_ITEMS, i = (a = this.currentNode) == null ? void 0 : a.querySelector(`[esd-extension-block-id="${c.QUANTITY}"]`);
|
|
205
|
+
if (!i)
|
|
206
|
+
return;
|
|
207
|
+
const r = i.getStyle("display") === "none", n = i.getInnerText().trim();
|
|
208
|
+
let o = i.getInnerHTML();
|
|
209
|
+
o = o.replace(n, e), this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(o).setStyle("display", t && !r ? "table-cell" : "none").apply(new m("Updated quantity"));
|
|
210
|
+
}
|
|
211
|
+
_updateButton(e) {
|
|
212
|
+
var n;
|
|
213
|
+
const t = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${c.BUTTON}"]`);
|
|
214
|
+
if (!t)
|
|
215
|
+
return;
|
|
216
|
+
const i = t.getInnerText().trim();
|
|
217
|
+
let r = t.getInnerHTML();
|
|
218
|
+
r = r.replace(i, e), this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(r).apply(new m("Updated button"));
|
|
219
|
+
}
|
|
220
|
+
_reOrderTemplate() {
|
|
221
|
+
var T, h, _, g, y, E, C;
|
|
222
|
+
const e = (T = this.currentNode) == null ? void 0 : T.querySelector(`[esd-extension-block-id="${c.IMAGE}"]`), t = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${c.NAME}"]`), i = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${c.PRICE}"]`), r = (g = this.currentNode) == null ? void 0 : g.querySelector(
|
|
223
|
+
`[esd-extension-block-id="${c.ORIGINAL_PRICE}"]`
|
|
224
|
+
), n = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${c.QUANTITY}"]`), o = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${c.BUTTON}"]`), a = (C = this.currentNode) == null ? void 0 : C.querySelector("esd-config-block");
|
|
225
|
+
if (!e || !t || !i || !r || !n || !o || !a)
|
|
226
|
+
return;
|
|
227
|
+
const { orientation: I } = this.store;
|
|
228
|
+
let l = I === N.ORIENTATION.VERTICAL ? L : D;
|
|
229
|
+
l = l.replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", t.getOuterHTML()).replace("{-{-PRODUCT_PRICE-}-}", i.getOuterHTML()).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", o.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", a.getOuterHTML()), l = l.trim().replace('<td align="center" class="ins-product-td items-block">', "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(l).apply(new m("Reordered template"));
|
|
230
|
+
}
|
|
231
|
+
_reFillTemplate() {
|
|
232
|
+
const e = this._getTemplateData();
|
|
233
|
+
this._updateImageSrc(e.imageSrc), this._updateName(e.name), this._updatePrice(e.price), this._updateOriginalPrice(e.originalPrice), this._updateQuantity(e.quantity), this._updateButton(e.button);
|
|
234
|
+
}
|
|
235
|
+
_recalculateTrimming() {
|
|
236
|
+
var r;
|
|
237
|
+
if (!this.store.nameTrimming || !this.currentNode)
|
|
238
|
+
return;
|
|
239
|
+
const e = (r = this.currentNode) == null ? void 0 : r.querySelector(`[esd-extension-block-id="${c.NAME}"]`);
|
|
240
|
+
if (!e)
|
|
241
|
+
return;
|
|
242
|
+
const t = e.querySelector("p");
|
|
243
|
+
if (!t)
|
|
244
|
+
return;
|
|
245
|
+
const i = this.store.orientation === N.ORIENTATION.VERTICAL;
|
|
246
|
+
this.api.getDocumentModifier().modifyHtml(t).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", i ? "130px" : "100%").apply(new m("Recalculated trimming after orientation change"));
|
|
247
|
+
}
|
|
248
|
+
_getParagraphFromBlock(e) {
|
|
249
|
+
return e.querySelector("p");
|
|
250
|
+
}
|
|
251
|
+
_escapeRegex(e) {
|
|
252
|
+
return e.replace(/[-\\^$*+?().|[\]{}]/g, "\\$&");
|
|
253
|
+
}
|
|
254
|
+
_removeCurrencySymbol(e, t) {
|
|
255
|
+
const i = e || "";
|
|
256
|
+
let r = i;
|
|
257
|
+
if (t) {
|
|
258
|
+
const n = new RegExp(`\\s*${this._escapeRegex(t)}\\s*`);
|
|
259
|
+
r = i.replace(n, "").trim();
|
|
260
|
+
} else {
|
|
261
|
+
const n = i.match(/([^0-9.,\s]+)/);
|
|
262
|
+
if (n && n[1]) {
|
|
263
|
+
const o = n[1].trim(), a = new RegExp(`\\s*${this._escapeRegex(o)}\\s*`);
|
|
264
|
+
r = i.replace(a, "").trim();
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
return r;
|
|
268
|
+
}
|
|
269
|
+
_replacePriceNumber(e, t) {
|
|
270
|
+
const i = /([0-9][0-9,.]*)/;
|
|
271
|
+
return e.replace(i, t).trim();
|
|
272
|
+
}
|
|
273
|
+
_buildPriceContent(e, t, i) {
|
|
274
|
+
return t ? i === "1" ? `${e} ${t} ` : `${t} ${e}` : e;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
export {
|
|
278
|
+
$ as CONTROL_BLOCK_ID,
|
|
279
|
+
z as ItemsBlockControl
|
|
280
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
var c = /* @__PURE__ */ ((i) => (i.BUTTON = "items-block-button", i.IMAGE = "items-block-image", i.ORIGINAL_PRICE = "items-block-original-price", i.PRICE = "items-block-price", i.QUANTITY = "items-block-quantity", i.NAME = "items-block-name", i))(c || {}), b = /* @__PURE__ */ ((i) => (i.BUTTON_ALIGN = "items-block-button-align-control", i.BUTTON_BORDER = "items-block-button-border-control", i.BUTTON_BORDER_RADIUS = "items-block-button-border-radius-control", i.BUTTON_COLOR = "items-block-button-color-control", i.BUTTON_FIT_TO_CONTENT = "items-block-button-fit-to-content-control", i.BUTTON_FONT_FAMILY = "items-block-button-font-family-control", i.BUTTON_MARGINS = "items-block-button-margins-control", i.BUTTON_PADDINGS = "items-block-button-paddings-control", i.BUTTON_TEXT = "items-block-button-text-control", i.BUTTON_TEXT_SIZE = "items-block-button-text-size-control", i.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "items-block-button-text-style-and-font-color-control", i.BUTTON_LINK = "items-block-button-link-control", i.IMAGE_SIZE = "items-block-image-size-control", i.IMAGE_MARGINS = "items-block-image-margins-control", i.IMAGE_LINK = "items-block-image-link-control", i.ORIGINAL_PRICE_ALIGN = "items-block-original-price-align-control", i.ORIGINAL_PRICE_COLOR = "items-block-original-price-color-control", i.ORIGINAL_PRICE_SIZE = "items-block-original-price-size-control", i.ORIGINAL_PRICE_STYLE = "items-block-original-price-style-control", i.ORIGINAL_PRICE_FONT_FAMILY = "items-block-original-price-font-family-control", i.ORIGINAL_PRICE_BACKGROUND = "items-block-original-price-background-control", i.ORIGINAL_PRICE_PADDINGS = "items-block-original-price-paddings-control", i.PRICE_ALIGN = "items-block-price-align-control", i.PRICE_COLOR = "items-block-price-color-control", i.PRICE_SIZE = "items-block-price-size-control", i.PRICE_STYLE = "items-block-price-style-control", i.PRICE_FONT_FAMILY = "items-block-price-font-family-control", i.PRICE_BACKGROUND = "items-block-price-background-control", i.PRICE_PADDINGS = "items-block-price-paddings-control", i.PRICE_HIDE_DISCOUNT = "items-block-price-hide-discount-control", i.PRICE_FORMATTED_PRICE = "items-block-price-formatted-price-control", i.PRICE_CURRENCY_SYMBOL = "items-block-price-currency-symbol-control", i.PRICE_CURRENCY_LOCATION = "items-block-price-currency-location-control", i.NAME_ALIGN = "items-block-name-align-control", i.NAME_COLOR = "items-block-name-color-control", i.NAME_SIZE = "items-block-name-size-control", i.NAME_STYLE = "items-block-name-style-control", i.NAME_FONT_FAMILY = "items-block-name-font-family-control", i.NAME_BACKGROUND = "items-block-name-background-control", i.NAME_TRIMMING = "items-block-name-trimming-control", i.NAME_PADDINGS = "items-block-name-paddings-control", i.QUANTITY_ALIGN = "items-block-quantity-align-control", i.QUANTITY_COLOR = "items-block-quantity-color-control", i.QUANTITY_FONT_FAMILY = "items-block-quantity-font-family-control", i.QUANTITY_PADDINGS = "items-block-quantity-paddings-control", i.QUANTITY_SIZE = "items-block-quantity-size-control", i.QUANTITY_STYLE = "items-block-quantity-style-control", i))(b || {});
|
|
2
|
+
export {
|
|
3
|
+
b as ItemsBlockControlId,
|
|
4
|
+
c as ItemsBlockId
|
|
5
|
+
};
|