@useinsider/guido 1.0.3-beta.dfb1fcf → 1.0.3-beta.e1adf59

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 (130) hide show
  1. package/README.md +3 -144
  2. package/dist/components/Guido.vue.js +10 -12
  3. package/dist/components/Guido.vue2.js +101 -84
  4. package/dist/components/organisms/header/LeftSlot.vue.js +1 -1
  5. package/dist/components/organisms/header/LeftSlot.vue2.js +15 -16
  6. package/dist/components/organisms/header/RightSlot.vue.js +11 -11
  7. package/dist/components/organisms/header/RightSlot.vue2.js +22 -23
  8. package/dist/components/organisms/onboarding/NewVersionPopup.vue.js +9 -9
  9. package/dist/components/organisms/onboarding/NewVersionPopup.vue2.js +17 -30
  10. package/dist/components/organisms/onboarding/OnboardingWrapper.vue.js +10 -12
  11. package/dist/components/organisms/onboarding/OnboardingWrapper.vue2.js +18 -19
  12. package/dist/composables/useApiErrorTracking.js +120 -0
  13. package/dist/composables/useErrorTracking.js +98 -0
  14. package/dist/composables/useGuidoActions.js +9 -19
  15. package/dist/composables/useHttp.js +89 -52
  16. package/dist/composables/useStripo.js +163 -66
  17. package/dist/composables/useStripoErrorCategory.js +86 -0
  18. package/dist/composables/useStripoSlackNotifier.js +47 -0
  19. package/dist/config/compiler/unsubscribeCompilerRules.js +28 -33
  20. package/dist/config/migrator/index.js +6 -7
  21. package/dist/enums/defaults.js +8 -16
  22. package/dist/enums/onboarding.js +1 -2
  23. package/dist/enums/unsubscribe.js +25 -27
  24. package/dist/extensions/Blocks/Checkbox/extension.js +2 -2
  25. package/dist/extensions/Blocks/CouponBlock/extension.js +2 -2
  26. package/dist/extensions/Blocks/Recommendation/block.js +3 -6
  27. package/dist/extensions/Blocks/Recommendation/control.js +65 -109
  28. package/dist/extensions/Blocks/Recommendation/extension.js +7 -18
  29. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +21 -159
  30. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +1 -1
  31. package/dist/extensions/Blocks/Recommendation/template.js +200 -0
  32. package/dist/extensions/Blocks/common-control.js +43 -125
  33. package/dist/extensions/DynamicContent/dynamic-content-modal.js +19 -25
  34. package/dist/extensions/DynamicContent/dynamic-content.js +33 -128
  35. package/dist/guido.css +1 -1
  36. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +100 -312
  37. package/dist/package.json.js +1 -1
  38. package/dist/services/slackNotificationService.js +167 -0
  39. package/dist/services/stripoApi.js +49 -19
  40. package/dist/services/stripoErrorDeduplicationService.js +91 -0
  41. package/dist/src/@types/generic.d.ts +6 -42
  42. package/dist/src/components/Guido.vue.d.ts +3 -4
  43. package/dist/src/components/organisms/onboarding/NewVersionPopup.vue.d.ts +1 -3
  44. package/dist/src/components/organisms/onboarding/OnboardingWrapper.vue.d.ts +1 -3
  45. package/dist/src/components/wrappers/WpModal.vue.d.ts +1 -1
  46. package/dist/src/composables/useApiErrorTracking.d.ts +26 -0
  47. package/dist/src/composables/useErrorTracking.d.ts +30 -0
  48. package/dist/src/composables/useGuidoActions.d.ts +0 -9
  49. package/dist/src/composables/useStripoErrorCategory.d.ts +26 -0
  50. package/dist/src/composables/useStripoSlackNotifier.d.ts +8 -0
  51. package/dist/src/enums/onboarding.d.ts +0 -1
  52. package/dist/src/extensions/Blocks/Recommendation/block.d.ts +0 -1
  53. package/dist/src/extensions/Blocks/Recommendation/control.d.ts +2 -11
  54. package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +1 -1
  55. package/dist/src/extensions/Blocks/Recommendation/template.d.ts +6 -0
  56. package/dist/src/extensions/Blocks/common-control.d.ts +0 -21
  57. package/dist/src/extensions/DynamicContent/dynamic-content-modal.d.ts +2 -9
  58. package/dist/src/extensions/DynamicContent/dynamic-content.d.ts +2 -52
  59. package/dist/src/services/slackNotificationService.d.ts +110 -0
  60. package/dist/src/services/stripoErrorDeduplicationService.d.ts +75 -0
  61. package/dist/src/stores/config.d.ts +2 -10
  62. package/dist/src/stores/dynamic-content.d.ts +3 -3
  63. package/dist/src/stores/editor.d.ts +1 -1
  64. package/dist/src/stores/onboarding.d.ts +1 -1
  65. package/dist/src/stores/preview.d.ts +1 -1
  66. package/dist/src/stores/recommendation.d.ts +1 -1
  67. package/dist/src/stores/save-as-template.d.ts +1 -1
  68. package/dist/src/stores/toaster.d.ts +1 -1
  69. package/dist/src/stores/unsubscribe.d.ts +1 -1
  70. package/dist/src/stores/version-history.d.ts +1 -1
  71. package/dist/src/utils/dateUtil.d.ts +0 -21
  72. package/dist/src/utils/genericUtil.d.ts +0 -1
  73. package/dist/static/styles/components/narrow-panel.css.js +0 -10
  74. package/dist/static/styles/components/wide-panel.css.js +4 -0
  75. package/dist/static/styles/customEditorStyle.css.js +0 -19
  76. package/dist/stores/config.js +5 -5
  77. package/dist/stores/dynamic-content.js +2 -2
  78. package/dist/stores/editor.js +1 -1
  79. package/dist/stores/onboarding.js +27 -27
  80. package/dist/stores/preview.js +1 -1
  81. package/dist/stores/recommendation.js +3 -3
  82. package/dist/stores/save-as-template.js +2 -2
  83. package/dist/stores/toaster.js +1 -1
  84. package/dist/stores/unsubscribe.js +1 -1
  85. package/dist/stores/version-history.js +4 -4
  86. package/dist/utils/dateUtil.js +3 -24
  87. package/dist/utils/genericUtil.js +9 -20
  88. package/package.json +3 -3
  89. package/dist/composables/useBlocksConfig.js +0 -49
  90. package/dist/config/migrator/recommendationMigrator.js +0 -293
  91. package/dist/enums/date.js +0 -6
  92. package/dist/extensions/Blocks/Recommendation/cardCompositionControl.js +0 -193
  93. package/dist/extensions/Blocks/Recommendation/constants.js +0 -14
  94. package/dist/extensions/Blocks/Recommendation/controls/cardBackgroundColorControl.js +0 -68
  95. package/dist/extensions/Blocks/Recommendation/controls/index.js +0 -272
  96. package/dist/extensions/Blocks/Recommendation/controls/nameTextTrimControl.js +0 -74
  97. package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscountTextAfterControl.js +0 -71
  98. package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscountTextBeforeControl.js +0 -71
  99. package/dist/extensions/Blocks/Recommendation/controls/omnibusPriceTextAfterControl.js +0 -71
  100. package/dist/extensions/Blocks/Recommendation/controls/omnibusPriceTextBeforeControl.js +0 -71
  101. package/dist/extensions/Blocks/Recommendation/controls/priceHideControl.js +0 -60
  102. package/dist/extensions/Blocks/Recommendation/controls/priceInlineLayoutControl.js +0 -160
  103. package/dist/extensions/Blocks/Recommendation/controls/spacingControl.js +0 -188
  104. package/dist/extensions/Blocks/Recommendation/templates/blockTemplate.js +0 -184
  105. package/dist/extensions/Blocks/Recommendation/templates/migrationTemplate.js +0 -189
  106. package/dist/extensions/Blocks/Recommendation/templates/templateUtils.js +0 -209
  107. package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +0 -25
  108. package/dist/extensions/Blocks/controlFactories.js +0 -234
  109. package/dist/src/composables/useBlocksConfig.d.ts +0 -11
  110. package/dist/src/config/migrator/recommendationMigrator.d.ts +0 -1
  111. package/dist/src/enums/date.d.ts +0 -4
  112. package/dist/src/extensions/Blocks/Recommendation/cardCompositionControl.d.ts +0 -79
  113. package/dist/src/extensions/Blocks/Recommendation/constants.d.ts +0 -91
  114. package/dist/src/extensions/Blocks/Recommendation/controls/cardBackgroundColorControl.d.ts +0 -25
  115. package/dist/src/extensions/Blocks/Recommendation/controls/index.d.ts +0 -71
  116. package/dist/src/extensions/Blocks/Recommendation/controls/nameTextTrimControl.d.ts +0 -16
  117. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscountTextAfterControl.d.ts +0 -15
  118. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscountTextBeforeControl.d.ts +0 -15
  119. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPriceTextAfterControl.d.ts +0 -15
  120. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPriceTextBeforeControl.d.ts +0 -15
  121. package/dist/src/extensions/Blocks/Recommendation/controls/priceHideControl.d.ts +0 -16
  122. package/dist/src/extensions/Blocks/Recommendation/controls/priceInlineLayoutControl.d.ts +0 -50
  123. package/dist/src/extensions/Blocks/Recommendation/controls/spacingControl.d.ts +0 -60
  124. package/dist/src/extensions/Blocks/Recommendation/templates/blockTemplate.d.ts +0 -16
  125. package/dist/src/extensions/Blocks/Recommendation/templates/migrationTemplate.d.ts +0 -16
  126. package/dist/src/extensions/Blocks/Recommendation/templates/templateUtils.d.ts +0 -52
  127. package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts +0 -19
  128. package/dist/src/extensions/Blocks/controlFactories.d.ts +0 -95
  129. package/dist/src/utils/environmentUtil.d.ts +0 -5
  130. package/dist/utils/environmentUtil.js +0 -4
@@ -1,71 +0,0 @@
1
- import { ModificationDescription as m } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as a } from "../../common-control.js";
3
- import { RecommendationControlId as l, RecommendationBlockId as d } from "../constants.js";
4
- import { preserveTextStyles as T } from "../utils/preserveTextStyles.js";
5
- const f = ".ins-recommendation-product-container", i = "data-text-before", u = "", p = ".omnibus-text-before";
6
- class C extends a {
7
- getId() {
8
- return l.OMNIBUS_DISCOUNT_TEXT_BEFORE;
9
- }
10
- getTemplate() {
11
- return `
12
- <div class="omnibus-discount-text-before-control-container">
13
- ${this._GuTwoColumns([
14
- this._GuLabel({ text: "Text Before" }),
15
- this._GuTextInput({
16
- name: "omnibusDiscountTextBefore",
17
- placeholder: "e.g., Save ",
18
- className: "es-180w"
19
- })
20
- ])}
21
- </div>
22
- `;
23
- }
24
- onRender() {
25
- this._setFormValues(), this._listenToFormUpdates();
26
- }
27
- onTemplateNodeUpdated(e) {
28
- super.onTemplateNodeUpdated(e), this._setFormValues();
29
- }
30
- _setFormValues() {
31
- const e = this._getCurrentText();
32
- this.api.updateValues({
33
- omnibusDiscountTextBefore: e
34
- });
35
- }
36
- _getCurrentText() {
37
- if (!this.currentNode || !("getAttribute" in this.currentNode))
38
- return u;
39
- const e = this.currentNode.getAttribute(i);
40
- return e === null ? u : e;
41
- }
42
- _onTextChange(e) {
43
- if (!this.currentNode || !("closest" in this.currentNode))
44
- return;
45
- const t = this.currentNode.closest(f);
46
- if (!t || !("querySelectorAll" in t))
47
- return;
48
- const n = Array.from(
49
- t.querySelectorAll(`[esd-extension-block-id="${d.OMNIBUS_DISCOUNT}"]`)
50
- );
51
- if (!n.length)
52
- return;
53
- const o = this.api.getDocumentModifier();
54
- n.forEach((s) => {
55
- o.modifyHtml(s).setAttribute(i, e);
56
- const r = s.querySelector(p);
57
- if (r) {
58
- const c = T(r, e);
59
- o.modifyHtml(r).setInnerHtml(c);
60
- }
61
- }), o.apply(new m("Update omnibus discount text before"));
62
- }
63
- _listenToFormUpdates() {
64
- this.api.onValueChanged("omnibusDiscountTextBefore", (e) => {
65
- this._onTextChange(e);
66
- });
67
- }
68
- }
69
- export {
70
- C as OmnibusDiscountTextBeforeControl
71
- };
@@ -1,71 +0,0 @@
1
- import { ModificationDescription as a } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as m } from "../../common-control.js";
3
- import { RecommendationControlId as l, RecommendationBlockId as d } from "../constants.js";
4
- import { preserveTextStyles as T } from "../utils/preserveTextStyles.js";
5
- const f = ".ins-recommendation-product-container", s = "data-text-after", c = "", p = ".omnibus-text-after";
6
- class C extends m {
7
- getId() {
8
- return l.OMNIBUS_PRICE_TEXT_AFTER;
9
- }
10
- getTemplate() {
11
- return `
12
- <div class="omnibus-price-text-after-control-container">
13
- ${this._GuTwoColumns([
14
- this._GuLabel({ text: "Text After" }),
15
- this._GuTextInput({
16
- name: "omnibusPriceTextAfter",
17
- placeholder: "e.g., (incl. VAT)",
18
- className: "es-180w"
19
- })
20
- ])}
21
- </div>
22
- `;
23
- }
24
- onRender() {
25
- this._setFormValues(), this._listenToFormUpdates();
26
- }
27
- onTemplateNodeUpdated(t) {
28
- super.onTemplateNodeUpdated(t), this._setFormValues();
29
- }
30
- _setFormValues() {
31
- const t = this._getCurrentText();
32
- this.api.updateValues({
33
- omnibusPriceTextAfter: t
34
- });
35
- }
36
- _getCurrentText() {
37
- if (!this.currentNode || !("getAttribute" in this.currentNode))
38
- return c;
39
- const t = this.currentNode.getAttribute(s);
40
- return t === null ? c : t;
41
- }
42
- _onTextChange(t) {
43
- if (!this.currentNode || !("closest" in this.currentNode))
44
- return;
45
- const e = this.currentNode.closest(f);
46
- if (!e || !("querySelectorAll" in e))
47
- return;
48
- const n = Array.from(
49
- e.querySelectorAll(`[esd-extension-block-id="${d.OMNIBUS_PRICE}"]`)
50
- );
51
- if (!n.length)
52
- return;
53
- const r = this.api.getDocumentModifier();
54
- n.forEach((i) => {
55
- r.modifyHtml(i).setAttribute(s, t);
56
- const o = i.querySelector(p);
57
- if (o) {
58
- const u = T(o, t);
59
- r.modifyHtml(o).setInnerHtml(u);
60
- }
61
- }), r.apply(new a("Update omnibus price text after"));
62
- }
63
- _listenToFormUpdates() {
64
- this.api.onValueChanged("omnibusPriceTextAfter", (t) => {
65
- this._onTextChange(t);
66
- });
67
- }
68
- }
69
- export {
70
- C as OmnibusPriceTextAfterControl
71
- };
@@ -1,71 +0,0 @@
1
- import { ModificationDescription as m } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as a } from "../../common-control.js";
3
- import { RecommendationControlId as l, RecommendationBlockId as d } from "../constants.js";
4
- import { preserveTextStyles as T } from "../utils/preserveTextStyles.js";
5
- const p = ".ins-recommendation-product-container", s = "data-text-before", c = "Lowest 30-day price: ", f = ".omnibus-text-before";
6
- class C extends a {
7
- getId() {
8
- return l.OMNIBUS_PRICE_TEXT_BEFORE;
9
- }
10
- getTemplate() {
11
- return `
12
- <div class="omnibus-price-text-before-control-container">
13
- ${this._GuTwoColumns([
14
- this._GuLabel({ text: "Text Before" }),
15
- this._GuTextInput({
16
- name: "omnibusPriceTextBefore",
17
- placeholder: "e.g., Lowest 30-day price: ",
18
- className: "es-180w"
19
- })
20
- ])}
21
- </div>
22
- `;
23
- }
24
- onRender() {
25
- this._setFormValues(), this._listenToFormUpdates();
26
- }
27
- onTemplateNodeUpdated(e) {
28
- super.onTemplateNodeUpdated(e), this._setFormValues();
29
- }
30
- _setFormValues() {
31
- const e = this._getCurrentText();
32
- this.api.updateValues({
33
- omnibusPriceTextBefore: e
34
- });
35
- }
36
- _getCurrentText() {
37
- if (!this.currentNode || !("getAttribute" in this.currentNode))
38
- return c;
39
- const e = this.currentNode.getAttribute(s);
40
- return e === null ? c : e;
41
- }
42
- _onTextChange(e) {
43
- if (!this.currentNode || !("closest" in this.currentNode))
44
- return;
45
- const t = this.currentNode.closest(p);
46
- if (!t || !("querySelectorAll" in t))
47
- return;
48
- const n = Array.from(
49
- t.querySelectorAll(`[esd-extension-block-id="${d.OMNIBUS_PRICE}"]`)
50
- );
51
- if (!n.length)
52
- return;
53
- const o = this.api.getDocumentModifier();
54
- n.forEach((i) => {
55
- o.modifyHtml(i).setAttribute(s, e);
56
- const r = i.querySelector(f);
57
- if (r) {
58
- const u = T(r, e);
59
- o.modifyHtml(r).setInnerHtml(u);
60
- }
61
- }), o.apply(new m("Update omnibus price text before"));
62
- }
63
- _listenToFormUpdates() {
64
- this.api.onValueChanged("omnibusPriceTextBefore", (e) => {
65
- this._onTextChange(e);
66
- });
67
- }
68
- }
69
- export {
70
- C as OmnibusPriceTextBeforeControl
71
- };
@@ -1,60 +0,0 @@
1
- import { ModificationDescription as n } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as d } from "../../common-control.js";
3
- import { RecommendationControlId as c } from "../constants.js";
4
- const i = {
5
- HIDE_PRICE: "hidePriceIfSame"
6
- }, o = "hide-price", s = ".ins-recommendation-v3-block-v2";
7
- class h extends d {
8
- getId() {
9
- return c.PRICE_HIDE_IF_SAME;
10
- }
11
- getTemplate() {
12
- return `
13
- <div class="price-hide-control-container">
14
- ${this._GuTwoColumns([
15
- this._GuLabel({ text: "Hide if same as discounted" }),
16
- this._GuToggle(i.HIDE_PRICE)
17
- ])}
18
- </div>
19
- `;
20
- }
21
- onRender() {
22
- this._setFormValues(), this._listenToFormUpdates();
23
- }
24
- onTemplateNodeUpdated(e) {
25
- super.onTemplateNodeUpdated(e), this._setFormValues();
26
- }
27
- _setFormValues() {
28
- const e = this._getCurrentHideState();
29
- this.api.updateValues({
30
- [i.HIDE_PRICE]: e
31
- });
32
- }
33
- _getCurrentHideState() {
34
- if (!this.currentNode || !("closest" in this.currentNode))
35
- return !1;
36
- const e = this.currentNode.closest(s);
37
- return !e || !("getAttribute" in e) ? !1 : e.getAttribute(o) === "true";
38
- }
39
- _onHidePriceChange(e) {
40
- if (!this.currentNode || !("closest" in this.currentNode))
41
- return;
42
- const t = this.currentNode.closest(s);
43
- if (!t)
44
- return;
45
- const r = this.api.getDocumentModifier();
46
- r.modifyHtml(t).setAttribute(o, e ? "true" : "false"), r.apply(
47
- new n(
48
- e ? "Enable hide price if same as discounted" : "Disable hide price if same as discounted"
49
- )
50
- );
51
- }
52
- _listenToFormUpdates() {
53
- this.api.onValueChanged(i.HIDE_PRICE, (e) => {
54
- this._onHidePriceChange(e);
55
- });
56
- }
57
- }
58
- export {
59
- h as PriceHideControl
60
- };
@@ -1,160 +0,0 @@
1
- import { ModificationDescription as M } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as w } from "../../common-control.js";
3
- import { RecommendationControlId as N, ATTR_DATA_PRICE_INLINE as E, RecommendationBlockId as g } from "../constants.js";
4
- const k = N.PRICE_INLINE_LAYOUT, b = ".recommendation-attribute-row", B = "tr.recommendation-product-row", m = "data-attribute-type", T = "data-inline-merged", C = "data-visibility";
5
- class V extends w {
6
- getId() {
7
- return k;
8
- }
9
- getTemplate() {
10
- return `
11
- <div class="container">
12
- ${this._GuTwoColumns([
13
- this._GuLabel({ text: "Move to Next Line" }),
14
- this._GuToggle("priceNextLine")
15
- ])}
16
- <div style="color: #666; font-size: 12px; margin-top: 8px; padding-left: 8px;">
17
- When disabled, Price and Old Price will appear side by side
18
- </div>
19
- </div>
20
- `;
21
- }
22
- onRender() {
23
- this._initializePriceInlineState(), this._registerValueChangeListener();
24
- }
25
- onTemplateNodeUpdated(e) {
26
- super.onTemplateNodeUpdated(e), this._initializePriceInlineState();
27
- }
28
- /**
29
- * Reads the current price inline state from the block's data attribute
30
- * and updates the toggle UI
31
- * Note: Toggle ON = separate rows (next line), Toggle OFF = inline (same row)
32
- */
33
- _initializePriceInlineState() {
34
- const r = !this._readPriceInlineState();
35
- this.api.updateValues({
36
- priceNextLine: r
37
- });
38
- }
39
- /**
40
- * Reads the price inline state from the block wrapper's data attribute
41
- */
42
- _readPriceInlineState() {
43
- if (!this.currentNode || !("getAttribute" in this.currentNode))
44
- return !1;
45
- const e = this.currentNode.getAttribute(E);
46
- return console.debug("inline attr", e), e === "1" || e === "true";
47
- }
48
- /**
49
- * Registers listener for toggle changes
50
- */
51
- _registerValueChangeListener() {
52
- this.api.onValueChanged("priceNextLine", (e) => {
53
- const r = !e;
54
- this._applyPriceInlineLayout(r);
55
- });
56
- }
57
- /**
58
- * Applies the price inline layout by restructuring the DOM
59
- * When enabling inline: Merges Old Price content into Price row (side by side)
60
- * When disabling inline: Separates them back into individual rows
61
- */
62
- _applyPriceInlineLayout(e) {
63
- if (!this.currentNode)
64
- return;
65
- this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(E, e ? "1" : "0").apply(new M("Update price inline attribute"));
66
- const r = this.currentNode.querySelectorAll(B);
67
- if (!(r != null && r.length))
68
- return;
69
- const i = this.api.getDocumentModifier();
70
- r.forEach((t) => {
71
- e ? this._mergeOldPriceIntoPrice(t, i) : this._separateOldPriceFromPrice(t, i);
72
- }), i.apply(new M(
73
- e ? "Merge price rows into inline layout" : "Separate price rows"
74
- ));
75
- }
76
- /**
77
- * Merges Old Price content into the same row as Price (inline layout)
78
- * Creates a structure where both prices are side by side in one row
79
- */
80
- _mergeOldPriceIntoPrice(e, r) {
81
- const i = e.querySelector(
82
- `${b}[${m}="productPrice"]`
83
- ), t = e.querySelector(
84
- `${b}[${m}="productOldPrice"]`
85
- );
86
- if (!i || !t || "getAttribute" in t && t.getAttribute(T) === "1" || !("querySelectorAll" in i) || !("querySelectorAll" in t))
87
- return;
88
- const a = Array.from(i.querySelectorAll("table.product-card-wrapper")), u = Array.from(t.querySelectorAll("table.product-card-wrapper"));
89
- a.length !== u.length || a.length === 0 || (a.forEach((o, _) => {
90
- const s = u[_];
91
- if (!o || !s || !("querySelector" in o) || !("querySelector" in s))
92
- return;
93
- const c = `[esd-extension-block-id="${g.PRICE}"]`, f = `[esd-extension-block-id="${g.OLD_PRICE}"]`, n = o.querySelector(c), l = s.querySelector(f);
94
- if (!n || !l || !("getOuterHTML" in n) || !("getOuterHTML" in l))
95
- return;
96
- const h = n.getOuterHTML(), P = `
97
- <tr data-inline-price-wrapper="1">
98
- <td width="50%" style="vertical-align: middle;">
99
- <table width="100%" cellpadding="0" cellspacing="0" border="0">
100
- <tbody>
101
- <tr><td>${l.getOuterHTML()}</td></tr>
102
- </tbody>
103
- </table>
104
- </td>
105
- <td width="50%" style="vertical-align: middle;">
106
- <table width="100%" cellpadding="0" cellspacing="0" border="0">
107
- <tbody>
108
- <tr><td>${h}</td></tr>
109
- </tbody>
110
- </table>
111
- </td>
112
- </tr>
113
- `, y = o.querySelector(".product-attribute-cell");
114
- if (!y)
115
- return;
116
- const d = y.querySelector("tbody");
117
- d && r.modifyHtml(d).setInnerHtml(P);
118
- }), r.modifyHtml(t).setStyle("display", "none").setAttribute(T, "1"));
119
- }
120
- /**
121
- * Separates Old Price from Price row back into individual rows
122
- * Restores the original separate row structure
123
- */
124
- _separateOldPriceFromPrice(e, r) {
125
- const i = e.querySelector(
126
- `${b}[${m}="productPrice"]`
127
- ), t = e.querySelector(
128
- `${b}[${m}="productOldPrice"]`
129
- );
130
- if (!i || !t || !("getAttribute" in t) || !(t.getAttribute(T) === "1") || !("querySelectorAll" in i) || !("querySelectorAll" in t))
131
- return;
132
- const u = Array.from(i.querySelectorAll("table.product-card-wrapper")), o = Array.from(t.querySelectorAll("table.product-card-wrapper"));
133
- u.forEach((c, f) => {
134
- if (!c || !("querySelector" in c))
135
- return;
136
- const n = o[f];
137
- if (!n || !("querySelector" in n))
138
- return;
139
- const l = c.querySelector('[data-inline-price-wrapper="1"]');
140
- if (!l || !("querySelectorAll" in l))
141
- return;
142
- const p = Array.from(l.querySelectorAll("td")).filter((O) => "getAttribute" in O && O.getAttribute("width") === "50%");
143
- if (p.length !== 2)
144
- return;
145
- const P = `[esd-extension-block-id="${g.OLD_PRICE}"]`, y = `[esd-extension-block-id="${g.PRICE}"]`, d = p[0].querySelector(P), A = p[1].querySelector(y);
146
- if (!d || !A || !("getOuterHTML" in d) || !("getOuterHTML" in A))
147
- return;
148
- const H = A.getOuterHTML(), R = d.getOuterHTML(), S = c.querySelector(".product-attribute-cell"), L = S == null ? void 0 : S.querySelector("tbody");
149
- L && r.modifyHtml(L).setInnerHtml(`<tr><td>${H}</td></tr>`);
150
- const I = n.querySelector(".product-attribute-cell"), q = I == null ? void 0 : I.querySelector("tbody");
151
- q && r.modifyHtml(q).setInnerHtml(`<tr><td>${R}</td></tr>`);
152
- });
153
- const s = t.getAttribute(C) === "0" ? "none" : "table-row";
154
- r.modifyHtml(t).setStyle("display", s).removeAttribute(T);
155
- }
156
- }
157
- export {
158
- k as PRICE_INLINE_LAYOUT_CONTROL_ID,
159
- V as PriceInlineLayoutControl
160
- };
@@ -1,188 +0,0 @@
1
- var C = Object.defineProperty;
2
- var g = (i, r, e) => r in i ? C(i, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[r] = e;
3
- var S = (i, r, e) => g(i, typeof r != "symbol" ? r + "" : r, e);
4
- import { ModificationDescription as l } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
- import { CommonControl as m } from "../../common-control.js";
6
- import { useDebounceFn as d } from "../../../../node_modules/@vueuse/shared/index.js";
7
- const _ = "recommendation-spacing-control", c = {
8
- COLUMN_SPACING: "columnSpacing",
9
- ROW_SPACING: "rowSpacing"
10
- }, N = {
11
- COLUMN_SPACING: "data-column-spacing",
12
- ROW_SPACING: "data-row-spacing"
13
- }, n = {
14
- COLUMN_SPACING: 10,
15
- // 5px on each side = 10px total
16
- ROW_SPACING: 20
17
- }, p = {
18
- MIN_SPACING: 0,
19
- MAX_SPACING: 50,
20
- STEP: 5
21
- };
22
- class G extends m {
23
- constructor() {
24
- super(...arguments);
25
- /**
26
- * Debounced version of _onColumnSpacingChange
27
- * Prevents excessive DOM updates when user rapidly adjusts the counter
28
- */
29
- S(this, "_debouncedOnColumnSpacingChange", d((e) => {
30
- this._onColumnSpacingChange(e);
31
- }, 300));
32
- /**
33
- * Debounced version of _onRowSpacingChange
34
- * Prevents excessive DOM updates when user rapidly adjusts the counter
35
- */
36
- S(this, "_debouncedOnRowSpacingChange", d((e) => {
37
- this._onRowSpacingChange(e);
38
- }, 300));
39
- }
40
- getId() {
41
- return _;
42
- }
43
- getTemplate() {
44
- return `
45
- <div class="spacing-control-container">
46
- ${this._GuTwoColumns([
47
- this._GuLabel({ text: "Column Spacing (px)" }),
48
- this._GuCounter({
49
- name: c.COLUMN_SPACING,
50
- minValue: p.MIN_SPACING,
51
- maxValue: p.MAX_SPACING,
52
- step: p.STEP
53
- }),
54
- this._GuLabel({ text: "Row Spacing (px)" }),
55
- this._GuCounter({
56
- name: c.ROW_SPACING,
57
- minValue: p.MIN_SPACING,
58
- maxValue: p.MAX_SPACING,
59
- step: p.STEP
60
- })
61
- ])}
62
- </div>
63
- `;
64
- }
65
- onRender() {
66
- this._setFormValues(), this._listenToFormUpdates();
67
- }
68
- onTemplateNodeUpdated(e) {
69
- super.onTemplateNodeUpdated(e), this._setFormValues();
70
- }
71
- /**
72
- * Reads spacing values from data attributes or returns defaults
73
- */
74
- _setFormValues() {
75
- const e = this._getStoredColumnSpacing(), t = this._getStoredRowSpacing();
76
- this.api.updateValues({
77
- [c.COLUMN_SPACING]: e,
78
- [c.ROW_SPACING]: t
79
- });
80
- }
81
- /**
82
- * Gets stored column spacing from the first product card wrapper's parent element's padding
83
- * Reads the actual padding value instead of relying on data attributes
84
- *
85
- * The padding is applied as "0 {halfSpacing}px" on the parent TD element,
86
- * so we need to extract the horizontal padding value and multiply by 2 to get total spacing.
87
- */
88
- _getStoredColumnSpacing() {
89
- if (!this.currentNode)
90
- return n.COLUMN_SPACING;
91
- const e = this.currentNode.querySelector(".product-card-wrapper");
92
- if (!e || !("parent" in e) || typeof e.parent != "function")
93
- return n.COLUMN_SPACING;
94
- const t = e.parent();
95
- if (!t || !("getStyle" in t))
96
- return n.COLUMN_SPACING;
97
- const o = t.getStyle("padding");
98
- if (!o)
99
- return n.COLUMN_SPACING;
100
- const u = o.trim().split(/\s+/);
101
- if (u.length < 2)
102
- return n.COLUMN_SPACING;
103
- const [, a] = u, s = parseFloat(a);
104
- return Number.isNaN(s) ? n.COLUMN_SPACING : s * 2;
105
- }
106
- /**
107
- * Gets stored row spacing from the first spacer element's height style
108
- * Reads the actual height value instead of relying on data attributes
109
- */
110
- _getStoredRowSpacing() {
111
- if (!this.currentNode)
112
- return n.ROW_SPACING;
113
- const e = this.currentNode.querySelector(".spacer");
114
- if (!e || !("getStyle" in e))
115
- return n.ROW_SPACING;
116
- const t = e.getStyle("height");
117
- if (!t)
118
- return n.ROW_SPACING;
119
- const o = parseFloat(t);
120
- return Number.isNaN(o) ? n.ROW_SPACING : o;
121
- }
122
- /**
123
- * Handles column spacing changes
124
- * Applies horizontal padding to all product card wrappers
125
- */
126
- _onColumnSpacingChange(e) {
127
- if (!this.currentNode)
128
- return;
129
- const t = Array.from(
130
- this.currentNode.querySelectorAll(".product-card-wrapper")
131
- );
132
- if (!t)
133
- return;
134
- const o = this.api.getDocumentModifier(), a = `0 ${e / 2}px`;
135
- console.debug("padding", a), t.forEach((s) => {
136
- "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", a);
137
- }), o.apply(new l(`Update column spacing to ${e}px`));
138
- }
139
- /**
140
- * Handles row spacing changes
141
- * Applies height to all spacer elements between product rows
142
- */
143
- _onRowSpacingChange(e) {
144
- if (!this.currentNode)
145
- return;
146
- this._storeRowSpacing(e);
147
- const t = Array.from(
148
- this.currentNode.querySelectorAll(".spacer")
149
- );
150
- if (console.debug("spacerCells", t), console.debug("spacing", e), !t.length)
151
- return;
152
- const o = this.api.getDocumentModifier(), u = `${e}px`;
153
- t.forEach((a) => {
154
- o.modifyHtml(a).setStyle("height", u);
155
- }), o.apply(new l(`Update row spacing to ${e}px`));
156
- }
157
- /**
158
- * Stores column spacing value in block data attribute
159
- */
160
- _storeColumnSpacing(e) {
161
- if (!this.currentNode)
162
- return;
163
- const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
164
- t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.COLUMN_SPACING, e.toString()).apply(new l("Store column spacing"));
165
- }
166
- /**
167
- * Stores row spacing value in block data attribute
168
- */
169
- _storeRowSpacing(e) {
170
- if (!this.currentNode)
171
- return;
172
- const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
173
- t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.ROW_SPACING, e.toString()).apply(new l("Store row spacing"));
174
- }
175
- _listenToFormUpdates() {
176
- this.api.onValueChanged(c.COLUMN_SPACING, (e) => {
177
- const t = parseInt(e);
178
- Number.isNaN(t) || this._debouncedOnColumnSpacingChange(t);
179
- }), this.api.onValueChanged(c.ROW_SPACING, (e) => {
180
- const t = parseInt(e);
181
- Number.isNaN(t) || this._debouncedOnRowSpacingChange(t);
182
- });
183
- }
184
- }
185
- export {
186
- _ as SPACING_CONTROL_ID,
187
- G as SpacingControl
188
- };