@useinsider/guido 2.0.0-beta.13ba613 → 2.0.0-beta.18d5b06

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 (101) hide show
  1. package/README.md +2 -0
  2. package/dist/@types/config/schemas.js +55 -39
  3. package/dist/components/Guido.vue.js +1 -1
  4. package/dist/components/Guido.vue2.js +15 -17
  5. package/dist/components/organisms/email-preview/PreviewContainer.vue.js +3 -3
  6. package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue.js +8 -8
  7. package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue2.js +17 -13
  8. package/dist/components/organisms/email-preview/amp/AmpToggle.vue.js +7 -8
  9. package/dist/components/organisms/email-preview/amp/AmpToggle.vue2.js +14 -12
  10. package/dist/components/organisms/email-preview/desktop-preview/DesktopBrowserHeader.vue.js +18 -0
  11. package/dist/components/organisms/email-preview/desktop-preview/DesktopBrowserHeader.vue2.js +15 -0
  12. package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue.js +10 -14
  13. package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue2.js +14 -22
  14. package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js +3 -3
  15. package/dist/components/organisms/email-preview/mobile-preview/ContentView.vue.js +12 -11
  16. package/dist/components/organisms/email-preview/mobile-preview/InboxView.vue.js +12 -10
  17. package/dist/components/organisms/email-preview/mobile-preview/MobilePreview.vue.js +11 -10
  18. package/dist/components/organisms/email-preview/mobile-preview/MobilePreview.vue2.js +15 -14
  19. package/dist/components/organisms/header/EditorActions.vue.js +20 -0
  20. package/dist/components/organisms/header/EditorActions.vue2.js +41 -0
  21. package/dist/components/organisms/header/EditorToolbar.vue.js +18 -0
  22. package/dist/components/organisms/header/EditorToolbar.vue2.js +17 -0
  23. package/dist/components/organisms/header/HeaderWrapper.vue.js +6 -5
  24. package/dist/components/organisms/header/LeftSlot.vue.js +11 -11
  25. package/dist/components/organisms/header/LeftSlot.vue2.js +11 -12
  26. package/dist/components/organisms/header/MiddleSlot.vue.js +7 -7
  27. package/dist/components/organisms/header/MiddleSlot.vue2.js +11 -15
  28. package/dist/components/organisms/header/RightSlot.vue.js +11 -14
  29. package/dist/components/organisms/header/RightSlot.vue2.js +13 -30
  30. package/dist/components/organisms/header/version-history/VersionHistory.vue.js +5 -5
  31. package/dist/components/organisms/onboarding/NewVersionPopup.vue2.js +15 -15
  32. package/dist/components/organisms/unsubscribe/UnsubscribeTypeSelection.vue.js +1 -1
  33. package/dist/components/organisms/unsubscribe/UnsubscribeTypeSelection.vue2.js +20 -19
  34. package/dist/composables/useConfig.js +29 -27
  35. package/dist/composables/useSave.js +13 -11
  36. package/dist/composables/useStripo.js +40 -40
  37. package/dist/config/migrator/index.js +8 -9
  38. package/dist/enums/academy.js +8 -0
  39. package/dist/enums/onboarding.js +1 -2
  40. package/dist/enums/unsubscribe.js +20 -21
  41. package/dist/extensions/Blocks/CouponBlock/constants.js +4 -0
  42. package/dist/extensions/Blocks/CouponBlock/controls/index.js +29 -0
  43. package/dist/extensions/Blocks/CouponBlock/extension.js +5 -4
  44. package/dist/extensions/Blocks/CouponBlock/settingsPanel.js +20 -14
  45. package/dist/extensions/Blocks/CouponBlock/template.js +22 -11
  46. package/dist/extensions/Blocks/Items/block.js +40 -39
  47. package/dist/extensions/Blocks/Items/controls/cardComposition.js +49 -46
  48. package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +26 -28
  49. package/dist/extensions/Blocks/Items/controls/settingsControl.js +127 -132
  50. package/dist/extensions/Blocks/Items/enums/settingsEnums.js +2 -2
  51. package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +48 -58
  52. package/dist/extensions/Blocks/Items/layouts/vertical.html.js +58 -48
  53. package/dist/extensions/Blocks/Items/store/items-block.js +2 -2
  54. package/dist/extensions/Blocks/Items/template.js +123 -296
  55. package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +20 -11
  56. package/dist/extensions/Blocks/Recommendation/control.js +1 -1
  57. package/dist/extensions/Blocks/Unsubscribe/extension.js +9 -9
  58. package/dist/extensions/Blocks/common-control.js +55 -67
  59. package/dist/extensions/Blocks/controlFactories.js +122 -111
  60. package/dist/guido.css +1 -1
  61. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +290 -364
  62. package/dist/package.json.js +1 -1
  63. package/dist/services/stripoApi.js +6 -10
  64. package/dist/src/@types/config/index.d.ts +2 -2
  65. package/dist/src/@types/config/schemas.d.ts +30 -0
  66. package/dist/src/@types/config/types.d.ts +7 -1
  67. package/dist/src/components/organisms/email-preview/desktop-preview/DesktopBrowserHeader.vue.d.ts +2 -0
  68. package/dist/src/components/organisms/header/EditorActions.vue.d.ts +4 -0
  69. package/dist/src/components/organisms/header/EditorToolbar.vue.d.ts +2 -0
  70. package/dist/src/components/organisms/header/RightSlot.vue.d.ts +1 -1
  71. package/dist/src/composables/useConfig.d.ts +8 -0
  72. package/dist/src/enums/academy.d.ts +12 -0
  73. package/dist/src/enums/onboarding.d.ts +0 -1
  74. package/dist/src/enums/unsubscribe.d.ts +0 -1
  75. package/dist/src/extensions/Blocks/CouponBlock/constants.d.ts +14 -0
  76. package/dist/src/extensions/Blocks/CouponBlock/controls/index.d.ts +108 -0
  77. package/dist/src/extensions/Blocks/CouponBlock/template.d.ts +1 -1
  78. package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +1 -1
  79. package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts +4 -0
  80. package/dist/src/extensions/Blocks/Items/template.d.ts +1 -20
  81. package/dist/src/extensions/Blocks/common-control.d.ts +9 -14
  82. package/dist/src/extensions/Blocks/controlFactories.d.ts +30 -7
  83. package/dist/src/stores/config.d.ts +164 -1
  84. package/dist/src/stores/editor.d.ts +21 -0
  85. package/dist/static/assets/desktop/desktop-mockup-center.svg.js +4 -0
  86. package/dist/static/assets/desktop/desktop-mockup-left.svg.js +4 -0
  87. package/dist/static/assets/desktop/desktop-mockup-right.svg.js +4 -0
  88. package/dist/static/assets/mobile/email-mockup.svg.js +4 -0
  89. package/dist/static/assets/mobile/inbox-mockup.svg.js +4 -0
  90. package/dist/static/styles/components/button.css.js +1 -1
  91. package/dist/stores/config.js +7 -0
  92. package/dist/stores/editor.js +1 -0
  93. package/package.json +3 -3
  94. package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue.js +0 -17
  95. package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue2.js +0 -20
  96. package/dist/config/migrator/itemsBlockMigrator.js +0 -283
  97. package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js +0 -172
  98. package/dist/src/config/migrator/itemsBlockMigrator.d.ts +0 -6
  99. package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts +0 -71
  100. package/dist/static/assets/inbox-mockup.svg.js +0 -4
  101. package/dist/static/assets/phone-mockup.svg.js +0 -4
@@ -1,20 +1,20 @@
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 {
1
+ import { useOnboardingStore as y } from "../../../stores/onboarding.js";
2
+ import { Block as R, BlockCompositionType as L, ModificationDescription as a } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
3
+ import { configAttributes as t } from "./enums/productEnums.js";
4
+ import { DefaultConfigValues as e, SETTINGS_ENUMS as l } from "./enums/settingsEnums.js";
5
+ import { useItemsBlockStore as S } from "./store/items-block.js";
6
+ import { getDefaultTemplate as V } from "./template.js";
7
+ import { syncCurrencySymbolFromAttributes as B, syncCurrencyLocationFromAttributes as U, syncFormattedPriceFromAttributes as k } from "./utils/syncAttributesFromConfigBlock.js";
8
+ const M = "items-block";
9
+ class x extends R {
10
10
  getId() {
11
- return b;
11
+ return M;
12
12
  }
13
13
  getIcon() {
14
14
  return "items-icon";
15
15
  }
16
16
  getBlockCompositionType() {
17
- return p.CONTAINER;
17
+ return L.CONTAINER;
18
18
  }
19
19
  getName() {
20
20
  return this.api.translate("Items");
@@ -23,44 +23,45 @@ class O extends u {
23
23
  return this.api.translate("Items lets you display personalized products based on user behavior.");
24
24
  }
25
25
  getTemplate() {
26
- return y({
27
- orientation: c.ORIENTATION.VERTICAL,
28
- itemsType: c.ITEMS_TYPE.CART_ITEMS,
26
+ return V({
27
+ orientation: l.ORIENTATION.HORIZONTAL,
28
+ itemsType: l.ITEMS_TYPE.CART_ITEMS,
29
29
  itemId: "{{Abandoned Cart Item (1) Url}}",
30
- currencySymbol: o.productPriceCurrencySymbolControlValue,
31
- currencyLocation: o.productPriceCurrencyLocationControlValue,
32
- formattedPrice: o.productPriceFormattedControlValue === "1"
30
+ currencySymbol: e.productPriceCurrencySymbolControlValue,
31
+ currencyLocation: e.productPriceCurrencyLocationControlValue,
32
+ formattedPrice: e.productPriceFormattedControlValue === "1"
33
33
  });
34
34
  }
35
35
  allowInnerBlocksDND() {
36
36
  return !1;
37
37
  }
38
- onCreated(i) {
39
- const e = C(i);
40
- if (!e)
38
+ onCreated(r) {
39
+ const n = r.querySelector("esd-config-block");
40
+ if (!n)
41
41
  return;
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");
42
+ const o = n, s = o.getAttribute("data-initialized") || "0", u = o.getAttribute(t.BLOCK_INSTANCE_ID), c = () => String(Date.now() + Math.floor(Math.random() * 1e3));
43
+ if (Number(s)) {
44
+ if (!u) {
45
+ const i = c();
46
+ this.api.getDocumentModifier().modifyHtml(o).setAttribute(t.BLOCK_INSTANCE_ID, i).apply(new a("Assign block instance ID to legacy block"));
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");
48
54
  }
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"));
51
55
  }
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
- ));
56
+ onSelect(r) {
57
+ const n = r.querySelector("esd-config-block"), o = S();
58
+ if (!n)
59
+ return;
60
+ const s = n, u = s.getAttribute(t.TYPE) || e.itemsType, c = s.getAttribute(t.ITEMS_INDEX_SELECT_CONTROL_VALUE) || e.cartItemsSelectControlValue, i = s.getAttribute(t.ORIENTATION) || e.cardOrientationControlValue;
61
+ o.setItemsType(u), o.setItemIds(c), o.setOrientation(i), B(r), U(r), k(r);
61
62
  }
62
63
  }
63
64
  export {
64
- b as BLOCK_ID,
65
- O as ItemsBlock
65
+ M as BLOCK_ID,
66
+ x as ItemsBlock
66
67
  };
@@ -1,13 +1,14 @@
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";
1
+ var c = Object.defineProperty;
2
+ var I = (a, n, t) => n in a ? c(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
3
+ var _ = (a, n, t) => I(a, typeof n != "symbol" ? n + "" : n, t);
4
+ import { ModificationDescription as l } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
+ import { CommonControl as R } from "../../common-control.js";
6
6
  import { ItemsBlockId as s } from "../enums/controlEnums.js";
7
- import { SETTINGS_ENUMS as R } from "../enums/settingsEnums.js";
7
+ import { configAttributes as C } from "../enums/productEnums.js";
8
+ import { SETTINGS_ENUMS as u } from "../enums/settingsEnums.js";
8
9
  import { useItemsBlockStore as O } from "../store/items-block.js";
9
- import { getItemsBlockConfig as C, setItemsBlockConfig as h } from "../utils/nodeConfigUtils.js";
10
- const I = "ui-elements-items-card-composition-block", i = {
10
+ import { getConfigBlock as P, attributeToBoolean as U } from "../utils/configBlockUtils.js";
11
+ const h = "ui-elements-items-card-composition-block", i = {
11
12
  PRODUCT_IMAGE: "image",
12
13
  PRODUCT_NAME: "name",
13
14
  PRODUCT_QUANTITY: "quantity",
@@ -15,11 +16,11 @@ const I = "ui-elements-items-card-composition-block", i = {
15
16
  PRODUCT_ORIGINAL_PRICE: "originalPrice",
16
17
  PRODUCT_BUTTON: "button"
17
18
  };
18
- class N extends u {
19
+ class g extends R {
19
20
  constructor() {
20
21
  super(...arguments);
21
- d(this, "store", O());
22
- d(this, "visibilityState", {
22
+ _(this, "store", O());
23
+ _(this, "visibilityState", {
23
24
  [i.PRODUCT_IMAGE]: !0,
24
25
  [i.PRODUCT_NAME]: !0,
25
26
  [i.PRODUCT_QUANTITY]: !0,
@@ -29,7 +30,7 @@ class N extends u {
29
30
  });
30
31
  }
31
32
  getId() {
32
- return I;
33
+ return h;
33
34
  }
34
35
  getTemplate() {
35
36
  return `
@@ -82,20 +83,20 @@ class N extends u {
82
83
  });
83
84
  }
84
85
  _syncVisibilityFromAttributes() {
85
- const t = C(this.currentNode);
86
+ const t = P(this.currentNode);
86
87
  if (!t)
87
88
  return;
88
89
  const e = {
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"
90
+ [i.PRODUCT_IMAGE]: "PRODUCT_IMAGE_VISIBLE",
91
+ [i.PRODUCT_NAME]: "PRODUCT_NAME_VISIBLE",
92
+ [i.PRODUCT_QUANTITY]: "PRODUCT_QUANTITY_VISIBLE",
93
+ [i.PRODUCT_PRICE]: "PRODUCT_PRICE_VISIBLE",
94
+ [i.PRODUCT_ORIGINAL_PRICE]: "PRODUCT_ORIGINAL_PRICE_VISIBLE",
95
+ [i.PRODUCT_BUTTON]: "PRODUCT_BUTTON_VISIBLE"
95
96
  };
96
- Object.entries(e).forEach(([o, l]) => {
97
- const T = t[l];
98
- this.visibilityState[o] = T !== !1;
97
+ Object.entries(e).forEach(([o, r]) => {
98
+ const T = t.getAttribute(C[r]);
99
+ this.visibilityState[o] = U(T, !0);
99
100
  });
100
101
  }
101
102
  /**
@@ -104,10 +105,11 @@ class N extends u {
104
105
  * and mark it as '0'
105
106
  */
106
107
  _handleBrowsedItemsQuantity() {
107
- const t = this.store.itemsType !== R.ITEMS_TYPE.BROWSED_ITEMS, e = C(this.currentNode);
108
+ var r;
109
+ const t = this.store.itemsType !== u.ITEMS_TYPE.BROWSED_ITEMS, e = (r = this.currentNode) == null ? void 0 : r.querySelector("esd-config-block");
108
110
  if (!e)
109
111
  return;
110
- const o = e.quantityControlEnabled !== !1;
112
+ const o = e.getAttribute(C.PRODUCT_QUANTITY_VISIBLE) === "1";
111
113
  this.visibilityState[i.PRODUCT_QUANTITY] = t && o, this.api.setVisibility(`${i.PRODUCT_QUANTITY}Container`, t), this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, t && o);
112
114
  }
113
115
  _applyVisibilityStyles() {
@@ -120,26 +122,27 @@ class N extends u {
120
122
  [i.PRODUCT_BUTTON]: s.BUTTON
121
123
  };
122
124
  Object.entries(t).forEach(([e, o]) => {
123
- var c;
124
- const l = (c = this.currentNode) == null ? void 0 : c.querySelector(`[esd-extension-block-id="${o}"]`);
125
- if (!l)
125
+ var d;
126
+ const r = (d = this.currentNode) == null ? void 0 : d.querySelector(`[esd-extension-block-id="${o}"]`);
127
+ if (!r)
126
128
  return;
127
129
  const T = this.visibilityState[e];
128
- this.api.getDocumentModifier().modifyHtml(l).setStyle("display", T ? "table-cell" : "none").apply(new r(`Applied ${e} visibility from attributes`));
130
+ this.api.getDocumentModifier().modifyHtml(r).setStyle("display", T ? "table-cell" : "none").apply(new l(`Applied ${e} visibility from attributes`));
129
131
  });
130
132
  }
131
133
  _updateVisibilityAttribute(t, e) {
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"
134
+ const o = P(this.currentNode);
135
+ if (!o)
136
+ return;
137
+ const T = {
138
+ [i.PRODUCT_IMAGE]: "PRODUCT_IMAGE_VISIBLE",
139
+ [i.PRODUCT_NAME]: "PRODUCT_NAME_VISIBLE",
140
+ [i.PRODUCT_QUANTITY]: "PRODUCT_QUANTITY_VISIBLE",
141
+ [i.PRODUCT_PRICE]: "PRODUCT_PRICE_VISIBLE",
142
+ [i.PRODUCT_ORIGINAL_PRICE]: "PRODUCT_ORIGINAL_PRICE_VISIBLE",
143
+ [i.PRODUCT_BUTTON]: "PRODUCT_BUTTON_VISIBLE"
139
144
  }[t];
140
- l && h(this.currentNode, this.api, {
141
- [l]: e
142
- });
145
+ T && this.api.getDocumentModifier().modifyHtml(o).setAttribute(C[T], e ? "1" : "0").apply(new l(`Updated ${t} visibility attribute`));
143
146
  }
144
147
  _listenToFormUpdates() {
145
148
  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(
@@ -150,41 +153,41 @@ class N extends u {
150
153
  _onProductImageChange(t) {
151
154
  var o;
152
155
  const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.IMAGE}"]`);
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));
156
+ e && (this.visibilityState[i.PRODUCT_IMAGE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(`Product image visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_IMAGE, t));
154
157
  }
155
158
  _onProductNameChange(t) {
156
159
  var o;
157
160
  const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.NAME}"]`);
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));
161
+ e && (this.visibilityState[i.PRODUCT_NAME] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(`Product name visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_NAME, t));
159
162
  }
160
163
  _onProductQuantityChange(t) {
161
164
  var o;
162
165
  const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.QUANTITY}"]`);
163
- e && (this.visibilityState[i.PRODUCT_QUANTITY] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new r(
166
+ e && (this.visibilityState[i.PRODUCT_QUANTITY] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(
164
167
  `Product quantity visibility changed to ${t ? "visible" : "hidden"}`
165
168
  )), this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, t));
166
169
  }
167
170
  _onProductPriceChange(t) {
168
171
  var o;
169
172
  const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.PRICE}"]`);
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));
173
+ e && (this.visibilityState[i.PRODUCT_PRICE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(`Product price visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_PRICE, t));
171
174
  }
172
175
  _onProductOriginalPriceChange(t) {
173
176
  var o;
174
177
  const e = (o = this.currentNode) == null ? void 0 : o.querySelector(
175
178
  `[esd-extension-block-id="${s.ORIGINAL_PRICE}"]`
176
179
  );
177
- e && (this.visibilityState[i.PRODUCT_ORIGINAL_PRICE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new r(
180
+ e && (this.visibilityState[i.PRODUCT_ORIGINAL_PRICE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(
178
181
  `Product original price visibility changed to ${t ? "visible" : "hidden"}`
179
182
  )), this._updateVisibilityAttribute(i.PRODUCT_ORIGINAL_PRICE, t));
180
183
  }
181
184
  _onProductButtonChange(t) {
182
185
  var o;
183
186
  const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.BUTTON}"]`);
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));
187
+ e && (this.visibilityState[i.PRODUCT_BUTTON] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(`Product button visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_BUTTON, t));
185
188
  }
186
189
  }
187
190
  export {
188
- I as COMPOSITION_CONTROL_BLOCK_ID,
189
- N as ItemsBlockCardCompositionControl
191
+ h as COMPOSITION_CONTROL_BLOCK_ID,
192
+ g as ItemsBlockCardCompositionControl
190
193
  };
@@ -1,22 +1,23 @@
1
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";
2
+ var y = (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) => y(n, typeof o != "symbol" ? o + "" : o, t);
4
+ import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
+ import { CommonControl as E } from "../../../common-control.js";
6
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";
7
+ import { SETTINGS_ENUMS as N } from "../../enums/settingsEnums.js";
8
+ import { useItemsBlockStore as f } from "../../store/items-block.js";
9
+ import { syncPriceOrientationFromAttributes as T } from "../../utils/syncAttributesFromConfigBlock.js";
10
+ import { updateConfigBlockAttributes as P } from "../../utils/updateAttributes.js";
10
11
  const _ = O.PRICE_ORIENTATION, p = {
11
12
  PRICE_ORIENTATION: "priceOrientation"
12
- }, P = [
13
+ }, C = [
13
14
  { icon: "vertical-orientation", value: "vertical" },
14
15
  { icon: "horizontal-orientation", value: "horizontal" }
15
16
  ];
16
- class H extends y {
17
+ class v extends E {
17
18
  constructor() {
18
19
  super(...arguments);
19
- m(this, "store", N());
20
+ m(this, "store", f());
20
21
  }
21
22
  getId() {
22
23
  return _;
@@ -30,14 +31,13 @@ class H extends y {
30
31
  }
31
32
  onRender() {
32
33
  this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation }), this.api.onValueChanged(p.PRICE_ORIENTATION, (t) => {
33
- typeof t == "string" && this._onPriceOrientationChange(t);
34
+ this._onPriceOrientationChange(t);
34
35
  });
35
36
  }
36
37
  onTemplateNodeUpdated(t) {
37
38
  super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
38
39
  () => {
39
- const i = T(this.currentNode);
40
- i && this.store.setPriceOrientation(i.priceOrientation || "horizontal");
40
+ T(this.currentNode);
41
41
  },
42
42
  () => {
43
43
  this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation });
@@ -45,26 +45,24 @@ class H extends y {
45
45
  );
46
46
  }
47
47
  _onPriceOrientationChange(t) {
48
- if (this.store.setPriceOrientation(t), C(this.currentNode, this.api, {
49
- priceOrientation: t
50
- }), !this.currentNode)
48
+ if (console.debug("Price orientation changed to: ", t), this.store.setPriceOrientation(t), P(this.currentNode, this.api), !this.currentNode)
51
49
  return;
52
- const { orientation: i } = this.store, r = i === E.ORIENTATION.VERTICAL, e = t === "horizontal";
50
+ const { orientation: i } = this.store, r = i === N.ORIENTATION.VERTICAL, e = t === "horizontal";
53
51
  r ? this._updateVerticalLayout(e) : this._updateHorizontalLayout(e);
54
52
  }
55
- _updateVerticalLayout(t) {
53
+ _updateHorizontalLayout(t) {
56
54
  var c, l, d, a;
57
55
  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
56
  if (!i || !r)
59
57
  return;
60
58
  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}`));
59
+ i.forEach((u) => {
60
+ s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
61
+ }), r.forEach((u) => {
62
+ s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
63
+ }), s.apply(new h(`Updated original price element width to ${e}`));
66
64
  }
67
- _updateHorizontalLayout(t) {
65
+ _updateVerticalLayout(t) {
68
66
  var s, c, l, d;
69
67
  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
68
  if (!i || !r || i.length === 0)
@@ -72,9 +70,9 @@ class H extends y {
72
70
  const e = this.api.getDocumentModifier();
73
71
  t ? (i.forEach((a) => {
74
72
  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) => {
73
+ }), e.modifyHtml(r).setStyle("display", "none").apply(new h("Hide vertical price element"))) : (i.forEach((a) => {
76
74
  e.modifyHtml(a).setStyle("display", "none");
77
- }), e.modifyHtml(r).setStyle("display", "table-cell"), e.apply(new u("Show vertical price orientation")));
75
+ }), e.modifyHtml(r).setStyle("display", "table-cell").apply(new h("Show vertical price element")));
78
76
  }
79
77
  _getPriceOrientation() {
80
78
  return `
@@ -82,7 +80,7 @@ class H extends y {
82
80
  this._GuLabel({ text: "Price Orientation" }),
83
81
  this._GuRadioButton({
84
82
  name: p.PRICE_ORIENTATION,
85
- buttons: P
83
+ buttons: C
86
84
  })
87
85
  ])}
88
86
  `;
@@ -90,5 +88,5 @@ class H extends y {
90
88
  }
91
89
  export {
92
90
  _ as CONTROL_BLOCK_ID,
93
- H as PriceOrientationControl
91
+ v as PriceOrientationControl
94
92
  };