@useinsider/guido 2.1.0-beta.e2d48fe → 2.1.0-beta.ee1b589

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.
Files changed (39) hide show
  1. package/dist/composables/useActionsApi.js +15 -13
  2. package/dist/config/migrator/itemsBlockMigrator.js +123 -140
  3. package/dist/extensions/Blocks/Items/block.js +28 -19
  4. package/dist/extensions/Blocks/Items/controls/button/link.js +31 -19
  5. package/dist/extensions/Blocks/Items/controls/cardComposition.js +85 -124
  6. package/dist/extensions/Blocks/Items/controls/image/link.js +31 -19
  7. package/dist/extensions/Blocks/Items/controls/name/trimming.js +40 -28
  8. package/dist/extensions/Blocks/Items/controls/price/currencyLocation.js +46 -34
  9. package/dist/extensions/Blocks/Items/controls/price/currencySymbol.js +50 -45
  10. package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js +51 -40
  11. package/dist/extensions/Blocks/Items/controls/price/hideDiscount.js +35 -23
  12. package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +57 -45
  13. package/dist/extensions/Blocks/Items/controls/price/singlePrice.js +62 -42
  14. package/dist/extensions/Blocks/Items/controls/settingsControl.js +196 -189
  15. package/dist/extensions/Blocks/Items/enums/settingsEnums.js +2 -0
  16. package/dist/extensions/Blocks/Items/extension.js +9 -8
  17. package/dist/extensions/Blocks/Items/store/items-block.js +79 -0
  18. package/dist/extensions/Blocks/Items/template.js +175 -181
  19. package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js +65 -65
  20. package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +3 -3
  21. package/dist/extensions/Blocks/common-control.js +92 -91
  22. package/dist/src/extensions/Blocks/Items/block.d.ts +1 -0
  23. package/dist/src/extensions/Blocks/Items/controls/button/link.d.ts +1 -0
  24. package/dist/src/extensions/Blocks/Items/controls/cardComposition.d.ts +5 -5
  25. package/dist/src/extensions/Blocks/Items/controls/image/link.d.ts +1 -0
  26. package/dist/src/extensions/Blocks/Items/controls/name/trimming.d.ts +1 -0
  27. package/dist/src/extensions/Blocks/Items/controls/price/currencyLocation.d.ts +1 -0
  28. package/dist/src/extensions/Blocks/Items/controls/price/currencySymbol.d.ts +1 -0
  29. package/dist/src/extensions/Blocks/Items/controls/price/formattedPrice.d.ts +1 -0
  30. package/dist/src/extensions/Blocks/Items/controls/price/hideDiscount.d.ts +1 -0
  31. package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +1 -0
  32. package/dist/src/extensions/Blocks/Items/controls/price/singlePrice.d.ts +5 -0
  33. package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts +12 -10
  34. package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +45 -0
  35. package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts +1 -2
  36. package/dist/src/extensions/Blocks/common-control.d.ts +5 -4
  37. package/dist/static/styles/components/version-history.css.js +9 -3
  38. package/dist/static/styles/components/wide-panel.css.js +3 -2
  39. package/package.json +1 -1
@@ -1,75 +1,80 @@
1
- var b = Object.defineProperty;
2
- var R = (s, c, e) => c in s ? b(s, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[c] = e;
3
- var h = (s, c, e) => R(s, typeof c != "symbol" ? c + "" : c, e);
4
- import { ModificationDescription as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
- import { CommonControl as B } from "../../../common-control.js";
6
- import { ItemsBlockControlId as y } from "../../enums/controlEnums.js";
7
- import { getItemsBlockConfig as m, setItemsBlockConfig as E, escapeReplacement as x } from "../../utils/nodeConfigUtils.js";
8
- const I = y.PRICE_CURRENCY_SYMBOL, p = {
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 O extends B {
12
+ class M extends R {
12
13
  constructor() {
13
14
  super(...arguments);
14
- h(this, "originalPriceContents", /* @__PURE__ */ new Map());
15
+ u(this, "store", f());
16
+ u(this, "originalPriceContents", /* @__PURE__ */ new Map());
15
17
  }
16
18
  getId() {
17
- return I;
19
+ return E;
18
20
  }
19
21
  getTemplate() {
20
22
  return `
21
- <div class="container ${y.PRICE_CURRENCY_SYMBOL}">
23
+ <div class="container ${h.PRICE_CURRENCY_SYMBOL}">
22
24
  ${this._getCurrencySymbol()}
23
25
  </div>
24
26
  `;
25
27
  }
26
28
  onRender() {
27
- const e = m(this.currentNode);
28
- this.api.updateValues({ [p.CURRENCY_SYMBOL]: (e == null ? void 0 : e.priceCurrencySymbol) ?? "" }), this._storeOriginalContents(), this.api.onValueChanged(p.CURRENCY_SYMBOL, (t) => {
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
- const t = m(this.currentNode);
38
- this.api.updateValues({ [p.CURRENCY_SYMBOL]: (t == null ? void 0 : t.priceCurrencySymbol) ?? "" }), this._storeOriginalContents();
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 = m(this.currentNode), o = ((i = t == null ? void 0 : t.priceCurrencySymbol) == null ? void 0 : i.trim()) || "";
45
- if (E(this.currentNode, this.api, { priceCurrencySymbol: e }), !this.currentNode)
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 n = (e == null ? void 0 : e.trim()) || "", l = (t == null ? void 0 : t.priceCurrencyLocation) ?? "0";
51
- r.forEach((u) => {
52
- const a = this._getParagraph(u);
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 d = a.getInnerHTML().trim() || "", C = a.getInnerText().trim() || "", g = this._removeCurrencySymbol(C, o), _ = this._buildPriceContent(g, n, l), S = d.replace(C, x(_));
56
- this.api.getDocumentModifier().modifyHtml(a).setInnerHtml(S).apply(new N(
57
- `Updated currency symbol to ${n || "removed"}`
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((o) => {
68
- var n;
69
- const r = o.querySelector("p");
72
+ ).forEach((t) => {
73
+ var o;
74
+ const r = t.querySelector("p");
70
75
  if (r && !this.originalPriceContents.has(r)) {
71
- const l = r.getInnerText() || "", i = ((n = e == null ? void 0 : e.priceCurrencySymbol) == null ? void 0 : n.trim()) || "", u = this._removeCurrencySymbol(l, i);
72
- this.originalPriceContents.set(r, u);
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 o = e || "";
88
- let r = o;
92
+ const r = e || "";
93
+ let o = r;
89
94
  if (t) {
90
95
  const n = new RegExp(`\\s*${this._escapeRegex(t)}\\s*`);
91
- r = o.replace(n, "").trim();
96
+ o = r.replace(n, "").trim();
92
97
  } else {
93
- const n = o.match(/([^0-9.,\s]+)/);
98
+ const n = r.match(/([^0-9.,\s]+)/);
94
99
  if (n && n[1]) {
95
- const l = n[1].trim(), i = new RegExp(`\\s*${this._escapeRegex(l)}\\s*`);
96
- r = o.replace(i, "").trim();
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 r;
104
+ return o;
100
105
  }
101
- _buildPriceContent(e, t, o) {
102
- return t ? o === "1" ? `${e}&nbsp;${t}` : `${t}&nbsp;${e}` : e;
106
+ _buildPriceContent(e, t, r) {
107
+ return t ? r === "1" ? `${e}&nbsp;${t}` : `${t}&nbsp;${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: p.CURRENCY_SYMBOL,
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
- I as CONTROL_BLOCK_ID,
119
- O as PriceCurrencySymbolControl
123
+ E as CONTROL_BLOCK_ID,
124
+ M as PriceCurrencySymbolControl
120
125
  };
@@ -1,71 +1,82 @@
1
- import { ModificationDescription as A, UIElementType as P, UEAttr as C } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as L } from "../../../common-control.js";
3
- import { ItemsBlockControlId as p, ItemsBlockId as _ } from "../../enums/controlEnums.js";
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 { getItemsBlockConfig as d, setItemsBlockConfig as D, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
6
- const g = p.PRICE_FORMATTED_PRICE, s = {
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 $ extends L {
13
+ class y extends h {
14
+ constructor() {
15
+ super(...arguments);
16
+ _(this, "store", O());
17
+ }
10
18
  getId() {
11
- return g;
19
+ return N;
12
20
  }
13
21
  getTemplate() {
14
22
  return `
15
- <div class="container ${p.PRICE_FORMATTED_PRICE}">
23
+ <div class="container ${l.PRICE_FORMATTED_PRICE}">
16
24
  ${this._getFormattedPrice()}
17
25
  </div>
18
26
  `;
19
27
  }
20
28
  onRender() {
21
- const e = d(this.currentNode);
22
- this.api.updateValues({ [s.FORMATTED_PRICE]: (e == null ? void 0 : e.priceFormatted) ?? !0 }), this.api.onValueChanged(s.FORMATTED_PRICE, (t) => {
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
- const t = d(this.currentNode);
29
- this.api.updateValues({ [s.FORMATTED_PRICE]: (t == null ? void 0 : t.priceFormatted) ?? !0 });
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), D(this.currentNode, this.api, { priceFormatted: e }), !this.currentNode)
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 t = d(this.currentNode), n = (t == null ? void 0 : t.type) ?? "CART_ITEMS", i = (t == null ? void 0 : t.priceSinglePrice) ?? !1, r = I.PAIRS_FOR_EXTENSION.price[n], o = I.PAIRS_FOR_EXTENSION.originalPrice[n], [E, R] = e ? [
36
- i ? r.DEFAULT_SINGLE_PRICE : r.DEFAULT_PRICE,
37
- i ? r.DEFAULT_SINGLE_PRICE_FORMATTED : r.DEFAULT_PRICE_FORMATTED
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 ? r.DEFAULT_SINGLE_PRICE_FORMATTED : r.DEFAULT_PRICE_FORMATTED,
40
- i ? r.DEFAULT_SINGLE_PRICE : r.DEFAULT_PRICE
41
- ], l = i ? o.DEFAULT_SINGLE_PRICE : o.DEFAULT_PRICE, T = i ? o.DEFAULT_SINGLE_PRICE_FORMATTED : o.DEFAULT_PRICE_FORMATTED, [m, F] = e ? [l, T] : [T, l], c = this.currentNode.closest(".items-block");
42
- ((c == null ? void 0 : c.querySelectorAll(
43
- `[esd-extension-block-id="${_.PRICE}"]`
44
- )) || []).forEach((a) => {
45
- this._updatePriceBlock(a, E, R, e, "price");
46
- }), ((c == null ? void 0 : c.querySelectorAll(
47
- `[esd-extension-block-id="${_.ORIGINAL_PRICE}"]`
48
- )) || []).forEach((a) => {
49
- this._updatePriceBlock(a, m, F, e, "original price");
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, t, n, i, r) {
53
- const o = e.getInnerHTML().trim().replace(t, h(n)), E = `Updated ${r} to ${i ? "formatted" : "unformatted"}`;
54
- this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(o).apply(new A(E));
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
- <${P.LABEL}
60
- ${C.LABEL.text}="${this.api.translate("Formatted Price (e.g. $9.90)")}"
70
+ <${m.LABEL}
71
+ ${g.LABEL.text}="${this.api.translate("Formatted Price (e.g. $9.90)")}"
61
72
  >
62
- </${P.LABEL}>
63
- ${this._GuToggle(s.FORMATTED_PRICE)}
73
+ </${m.LABEL}>
74
+ ${this._GuToggle(c.FORMATTED_PRICE)}
64
75
  </div>
65
76
  `;
66
77
  }
67
78
  }
68
79
  export {
69
- g as CONTROL_BLOCK_ID,
70
- $ as PriceFormattedPriceControl
80
+ N as CONTROL_BLOCK_ID,
81
+ y as PriceFormattedPriceControl
71
82
  };
@@ -1,51 +1,63 @@
1
- import { UIElementType as o, UEAttr as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as r } from "../../../common-control.js";
3
- import { ItemsBlockControlId as n } from "../../enums/controlEnums.js";
4
- import { getItemsBlockConfig as s, setItemsBlockConfig as a } from "../../utils/nodeConfigUtils.js";
5
- const c = n.PRICE_HIDE_DISCOUNT, i = {
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 C extends r {
12
+ class T extends u {
13
+ constructor() {
14
+ super(...arguments);
15
+ n(this, "store", I());
16
+ }
9
17
  getId() {
10
- return c;
18
+ return l;
11
19
  }
12
20
  getTemplate() {
13
21
  return `
14
- <div class="container ${n.PRICE_HIDE_DISCOUNT}">
22
+ <div class="container ${d.PRICE_HIDE_DISCOUNT}">
15
23
  ${this._getHideDiscount()}
16
24
  </div>
17
25
  `;
18
26
  }
19
27
  onRender() {
20
- const e = s(this.currentNode);
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(e) {
26
- super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
27
- const t = s(this.currentNode);
28
- this.api.updateValues({ [i.HIDE_DISCOUNT]: (t == null ? void 0 : t.priceHideDiscount) ?? !0 });
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(e) {
32
- a(this.currentNode, this.api, { priceHideDiscount: e }), this.api.updateValues({ [i.HIDE_DISCOUNT]: e });
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
- <${o.LABEL}
39
- ${d.LABEL.text}="${this.api.translate("Hide if same as discounted ")}"
50
+ <${r.LABEL}
51
+ ${D.LABEL.text}="${this.api.translate("Hide if same as discounted ")}"
40
52
  >
41
- </${o.LABEL}>
42
- ${this._GuToggle(i.HIDE_DISCOUNT)}
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
- c as CONTROL_BLOCK_ID,
50
- C as PriceHideDiscountControl
61
+ l as CONTROL_BLOCK_ID,
62
+ T as PriceHideDiscountControl
51
63
  };
@@ -1,82 +1,94 @@
1
- import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as O } from "../../../common-control.js";
3
- import { ItemsBlockControlId as m } from "../../enums/controlEnums.js";
4
- import { SETTINGS_ENUMS as h } from "../../enums/settingsEnums.js";
5
- import { getItemsBlockConfig as u, setItemsBlockConfig as I } from "../../utils/nodeConfigUtils.js";
6
- const N = m.PRICE_ORIENTATION, c = {
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
- }, y = [
12
+ }, P = [
9
13
  { icon: "vertical-orientation", value: "vertical" },
10
14
  { icon: "horizontal-orientation", value: "horizontal" }
11
15
  ];
12
- class P extends O {
16
+ class H extends y {
17
+ constructor() {
18
+ super(...arguments);
19
+ m(this, "store", N());
20
+ }
13
21
  getId() {
14
- return N;
22
+ return _;
15
23
  }
16
24
  getTemplate() {
17
25
  return `
18
- <div class="container ${m.PRICE_ORIENTATION}">
26
+ <div class="container ${O.PRICE_ORIENTATION}">
19
27
  ${this._getPriceOrientation()}
20
28
  </div>
21
29
  `;
22
30
  }
23
31
  onRender() {
24
- const i = u(this.currentNode);
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(i) {
30
- super.onTemplateNodeUpdated(i), this.handleBlockInstanceChange(() => {
31
- const t = u(this.currentNode);
32
- this.api.updateValues({ [c.PRICE_ORIENTATION]: (t == null ? void 0 : t.priceOrientation) ?? "horizontal" });
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(i) {
36
- if (I(this.currentNode, this.api, {
37
- priceOrientation: i
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 t = u(this.currentNode), e = ((t == null ? void 0 : t.orientation) ?? h.ORIENTATION.VERTICAL) === h.ORIENTATION.VERTICAL, o = i === "horizontal";
41
- e ? this._updateVerticalLayout(o) : this._updateHorizontalLayout(o);
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(i) {
44
- var a, s, l, n;
45
- const t = ((s = (a = this.currentNode) == null ? void 0 : a.closest(".ins-product-td")) == null ? void 0 : s.querySelectorAll(".product-price-class")) || [], r = ((n = (l = this.currentNode) == null ? void 0 : l.closest(".ins-product-td")) == null ? void 0 : n.querySelectorAll(".product-original-price-class")) || [];
46
- if (!t || !r)
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 = i ? "50%" : "100%", o = this.api.getDocumentModifier();
49
- t.forEach((d) => {
50
- o.modifyHtml(d).setAttribute("width", e).setStyle("width", e);
51
- }), r.forEach((d) => {
52
- o.modifyHtml(d).setAttribute("width", e).setStyle("width", e);
53
- }), o.apply(new p(`Updated original price element width to ${e}`));
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(i) {
56
- var o, a, s, l;
57
- const t = ((a = (o = this.currentNode) == null ? void 0 : o.closest(".ins-product-td")) == null ? void 0 : a.querySelectorAll(".horizontal-price")) || [], r = (l = (s = this.currentNode) == null ? void 0 : s.closest(".ins-product-td")) == null ? void 0 : l.querySelector(".vertical-price");
58
- if (!t || !r || t.length === 0)
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
- i ? (t.forEach((n) => {
62
- e.modifyHtml(n).setStyle("display", "table-cell");
63
- }), e.modifyHtml(r).setStyle("display", "none"), e.apply(new p("Show horizontal price orientation"))) : (t.forEach((n) => {
64
- e.modifyHtml(n).setStyle("display", "none");
65
- }), e.modifyHtml(r).setStyle("display", "table-cell"), e.apply(new p("Show vertical price orientation")));
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: c.PRICE_ORIENTATION,
73
- buttons: y
84
+ name: p.PRICE_ORIENTATION,
85
+ buttons: P
74
86
  })
75
87
  ])}
76
88
  `;
77
89
  }
78
90
  }
79
91
  export {
80
- N as CONTROL_BLOCK_ID,
81
- P as PriceOrientationControl
92
+ _ as CONTROL_BLOCK_ID,
93
+ H as PriceOrientationControl
82
94
  };