@useinsider/guido 3.2.0-beta.6d12eec → 3.2.0-beta.8b4780a

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.
@@ -89,11 +89,11 @@ const v = () => {
89
89
  updateHtmlAndCss: (t, e) => {
90
90
  window.StripoEditorApi.actionsApi.updateHtmlAndCss(t, e);
91
91
  },
92
- editorSave: () => {
93
- window.StripoEditorApi.actionsApi.save((t) => {
94
- t && n(t, "Failed to save template");
92
+ editorSave: () => new Promise((t) => {
93
+ window.StripoEditorApi.actionsApi.save((e) => {
94
+ e && n(e, "Failed to save template"), t();
95
95
  });
96
- }
96
+ })
97
97
  };
98
98
  };
99
99
  export {
@@ -19,7 +19,7 @@ const F = () => {
19
19
  return;
20
20
  if ((i = a.value) != null && i.externalValidation && !await a.value.externalValidation(t))
21
21
  return;
22
- c();
22
+ await c();
23
23
  const { unsubscribePayload: f, stripoModules: v } = d(t.rawHtml);
24
24
  return await u(f), t.modules = v, m || s(t), t;
25
25
  } };
@@ -1,28 +1,27 @@
1
- import { useActionsApi as D } from "./useActionsApi.js";
2
- import { useBlocksConfig as I } from "./useBlocksConfig.js";
3
- import { useConfig as P } from "./useConfig.js";
4
- import { useCustomInterfaceAppearance as U } from "./useCustomInterfaceAppearance.js";
5
- import { useFullStoryBridge as R } from "./useFullStoryBridge.js";
6
- import { useStripoEventHandler as q } from "./useStripoEventHandler.js";
7
- import { useToaster as x } from "./useToaster.js";
8
- import { localePatch as H } from "../config/i18n/index.js";
9
- import { displayConditions as O } from "../enums/displayConditions.js";
10
- import { useStripoApi as j } from "../services/stripoApi.js";
11
- import L from "../static/styles/customEditorStyle.css.js";
1
+ import { useActionsApi as F } from "./useActionsApi.js";
2
+ import { useBlocksConfig as D } from "./useBlocksConfig.js";
3
+ import { useConfig as I } from "./useConfig.js";
4
+ import { useCustomInterfaceAppearance as P } from "./useCustomInterfaceAppearance.js";
5
+ import { useStripoEventHandler as U } from "./useStripoEventHandler.js";
6
+ import { useToaster as R } from "./useToaster.js";
7
+ import { localePatch as q } from "../config/i18n/index.js";
8
+ import { displayConditions as x } from "../enums/displayConditions.js";
9
+ import { useStripoApi as H } from "../services/stripoApi.js";
10
+ import O from "../static/styles/customEditorStyle.css.js";
12
11
  import { useEditorStore as C } from "../stores/editor.js";
13
- import { dynamicContentToMergeTags as $ } from "../utils/genericUtil.js";
14
- import z from "../package.json.js";
15
- const se = (E, l) => {
16
- const { features: c, template: h, isFeatureEnabled: u } = P(), { handleError: m } = x(), { getToken: b, getCustomFonts: w, getSyncModulesStatus: k } = j(), { handleEvent: B } = q(), { getStripoBlocksConfig: T } = I(), V = async (i, n = [], r = !1) => {
12
+ import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
13
+ import $ from "../package.json.js";
14
+ const ie = (E, c) => {
15
+ const { features: l, template: h, isFeatureEnabled: u } = I(), { handleError: m } = R(), { getToken: b, getCustomFonts: w, getSyncModulesStatus: k } = H(), { handleEvent: T } = U(), { getStripoBlocksConfig: V } = D(), _ = async (i, n = [], r = !1) => {
17
16
  var g, y, S;
18
- const e = C(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await T(), f = ((g = c.value) == null ? void 0 : g.displayConditions) ?? !0, v = ((y = c.value) == null ? void 0 : y.modulesDisabled) ?? !1, F = ((S = h.value) == null ? void 0 : S.forceRecreate) ?? !1;
17
+ const e = C(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await V(), f = ((g = l.value) == null ? void 0 : g.displayConditions) ?? !0, v = ((y = l.value) == null ? void 0 : y.modulesDisabled) ?? !1, M = ((S = h.value) == null ? void 0 : S.forceRecreate) ?? !1;
19
18
  window.UIEditor.initEditor(
20
19
  document.querySelector("#guido-editor"),
21
20
  {
22
21
  metadata: E,
23
22
  html: p,
24
23
  css: a,
25
- forceRecreate: F,
24
+ forceRecreate: M,
26
25
  locale: "en",
27
26
  undoButtonSelector: "#guido__undo-button",
28
27
  redoButtonSelector: "#guido__redo-button",
@@ -32,10 +31,10 @@ const se = (E, l) => {
32
31
  customAppearanceMergetags: !u("liquidSyntax"),
33
32
  customAppearanceMergetagsBorderColor: "#f1f3fe",
34
33
  customAppearanceMergetagsBackgroundColor: "#f1f3fe",
35
- customViewStyles: L,
34
+ customViewStyles: O,
36
35
  conditionsEnabled: f,
37
36
  customConditionsEnabled: f,
38
- conditionCategories: O,
37
+ conditionCategories: x,
39
38
  enableXSSSecurity: !0,
40
39
  modulesDisabled: v,
41
40
  syncModulesEnabled: r,
@@ -53,8 +52,8 @@ const se = (E, l) => {
53
52
  },
54
53
  mergeTags: [
55
54
  {
56
- entries: $(
57
- l.preselectedDynamicContentList,
55
+ entries: L(
56
+ c.preselectedDynamicContentList,
58
57
  u("liquidSyntax")
59
58
  )
60
59
  }
@@ -69,8 +68,8 @@ const se = (E, l) => {
69
68
  },
70
69
  onTemplateLoaded() {
71
70
  try {
72
- const { importCss: t } = U(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: M } = D(), { injectFullStory: A } = R();
73
- t(), s(), A(), M(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
71
+ const { importCss: t } = P(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: A } = F();
72
+ t(), s(), A(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
74
73
  e.hasChanges = !1;
75
74
  }, 1e3);
76
75
  } catch (t) {
@@ -89,23 +88,23 @@ const se = (E, l) => {
89
88
  onDataChanged() {
90
89
  e.hasChanges = !0;
91
90
  },
92
- onEvent: B,
91
+ onEvent: T,
93
92
  ignoreClickOutsideSelectors: [
94
93
  "#guido-dynamic-content-modal",
95
94
  ".in-on-board-wrapper",
96
95
  ".in-drawer__container"
97
96
  ],
98
97
  extensions: d,
99
- localePatch: H
98
+ localePatch: q
100
99
  }
101
100
  );
102
- }, _ = (i) => new Promise((n, r) => {
101
+ }, B = (i) => new Promise((n, r) => {
103
102
  var d;
104
103
  if (document.getElementById("UiEditorScript")) {
105
104
  i(), n();
106
105
  return;
107
106
  }
108
- const e = z.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
107
+ const e = $.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
109
108
  o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
110
109
  i(), n();
111
110
  }, o.onerror = () => {
@@ -113,15 +112,15 @@ const se = (E, l) => {
113
112
  }, document.body.appendChild(o);
114
113
  });
115
114
  return { initPlugin: async (i) => {
116
- await _(async () => {
115
+ await B(async () => {
117
116
  const n = C(), [r, e] = await Promise.all([
118
117
  w(),
119
118
  k()
120
119
  ]);
121
- n.syncModulesEnabled = e, await V(i, r, e);
120
+ n.syncModulesEnabled = e, await _(i, r, e);
122
121
  });
123
122
  } };
124
123
  };
125
124
  export {
126
- se as useStripo
125
+ ie as useStripo
127
126
  };
@@ -1,16 +1,16 @@
1
- import { useRecommendation as N } from "../../composables/useRecommendation.js";
2
- import { DUMMY_IMAGE_MAPPINGS as C, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as R, CONDITIONS as $, HTML as h } from "../../enums/recommendation.js";
1
+ import { useRecommendation as C } from "../../composables/useRecommendation.js";
2
+ import { DUMMY_IMAGE_MAPPINGS as h, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as A, CONDITIONS as g, HTML as N } from "../../enums/recommendation.js";
3
3
  import { prepareRecommendationBlocks as x } from "./utils/recommendationCompilerUtils.js";
4
4
  const w = [
5
5
  {
6
6
  id: "replace-images-with-variable-names",
7
7
  description: "Replacing dummy images with variable names in recommendation module",
8
8
  type: "custom",
9
- processor: (i) => {
10
- let e = i;
11
- return Object.entries(C).forEach(([, p]) => {
12
- Object.entries(p).forEach(([c, n]) => {
13
- e = e.replaceAll(n, `{{${c}}}`);
9
+ processor: (c) => {
10
+ let e = c;
11
+ return Object.entries(h).forEach(([, l]) => {
12
+ Object.entries(l).forEach(([n, s]) => {
13
+ e = e.replaceAll(s, `{{${n}}}`);
14
14
  });
15
15
  }), e;
16
16
  },
@@ -29,21 +29,21 @@ const w = [
29
29
  id: "add-recommendation-unresponsive-css",
30
30
  description: "Adding recommendation unresponsive css",
31
31
  type: "custom",
32
- processor: (i) => {
33
- const { calculateCardWidth: e, getRecommendationCampaignData: p } = N();
34
- let c = i;
35
- const n = c.match(T.ID);
36
- if (n) {
32
+ processor: (c) => {
33
+ const { calculateCardWidth: e, getRecommendationCampaignData: l } = C();
34
+ let n = c;
35
+ const s = n.match(T.ID);
36
+ if (s) {
37
37
  const a = [];
38
- if (n.forEach((s) => {
39
- const d = /recommendation-id="(.*?)"/i.exec(s), _ = d ? d[1].trim() : "", A = p(_);
40
- A.textTrimming && A.orientation === M && a.push(e(A));
38
+ if (s.forEach((i) => {
39
+ const d = /recommendation-id="(.*?)"/i.exec(i), _ = d ? d[1].trim() : "", R = l(_);
40
+ R.textTrimming && R.orientation === M && a.push(e(R));
41
41
  }), a.length) {
42
- const s = `width:${Math.min(...a)}px!important;`;
43
- c = c.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
42
+ const i = `width:${Math.min(...a)}px!important;`;
43
+ n = n.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
44
44
  }
45
45
  }
46
- return c;
46
+ return n;
47
47
  },
48
48
  priority: 52
49
49
  },
@@ -51,34 +51,34 @@ const w = [
51
51
  id: "prepare-recommendations",
52
52
  description: "Replacing product data with template variables in recommendation blocks",
53
53
  type: "custom",
54
- processor: (i) => x(i),
54
+ processor: (c) => x(c),
55
55
  priority: 48
56
56
  },
57
57
  {
58
58
  id: "add-discount-conditions",
59
59
  description: "Adding discount conditions to the recommendation block",
60
60
  type: "custom",
61
- processor: (i) => {
62
- let e = i;
63
- const p = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: c } = N();
64
- return p !== null && p.forEach((n) => {
65
- const a = n.match(T.CUSTOM_FIELD);
61
+ processor: (c) => {
62
+ let e = c;
63
+ const l = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = C();
64
+ return l !== null && l.forEach((s) => {
65
+ const a = s.match(T.CUSTOM_FIELD);
66
66
  if (!a)
67
67
  return;
68
- const [s] = a, d = s.match(T.CUSTOM_FIELD_INDEXES_PART), _ = s.match(T.CUSTOM_FIELD_NAME_PART), A = n.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
69
- if (!d || !_ || !A)
68
+ const [i] = a, d = i.match(T.CUSTOM_FIELD_INDEXES_PART), _ = i.match(T.CUSTOM_FIELD_NAME_PART), R = s.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
69
+ if (!d || !_ || !R)
70
70
  return;
71
- const [I] = d, [S] = _, [m] = A, o = S.substring(1, S.length - 2), r = m.match(T.COMPOSITION) !== null;
72
- let t = s;
71
+ const [S] = d, [b] = _, [m] = R, o = b.substring(1, b.length - 2), r = m.match(T.COMPOSITION) !== null;
72
+ let t = i;
73
73
  if (r) {
74
- const b = I.substring(2, I.length - 3), l = c(b);
75
- o === R.OMNIBUS_PRICE && (l.priceBeforeTextValue && (t = `${l.priceBeforeTextValue}${t}`), l.priceAfterTextValue && (t = `${t}${l.priceAfterTextValue}`)), o === R.OMNIBUS_DISCOUNT && (l.discountBeforeTextValue && (t = `${l.discountBeforeTextValue}${t}`), l.discountAfterTextValue && (t = `${t}${l.discountAfterTextValue}`));
74
+ const I = S.substring(2, S.length - 3), p = n(I);
75
+ o === A.OMNIBUS_PRICE && (p.priceBeforeTextValue && (t = `${p.priceBeforeTextValue}${t}`), p.priceAfterTextValue && (t = `${t}${p.priceAfterTextValue}`)), o === A.OMNIBUS_DISCOUNT && (p.discountBeforeTextValue && (t = `${p.discountBeforeTextValue}${t}`), p.discountAfterTextValue && (t = `${t}${p.discountAfterTextValue}`));
76
76
  }
77
- const u = I.substring(2);
77
+ const u = S.substring(2);
78
78
  let f = "";
79
- o in $.IF && (f = $.IF[o].replaceAll(`{${R.DISCOUNT}}`, `${u}${R.DISCOUNT}`).replaceAll(`{${R.OMNIBUS_DISCOUNT}}`, `${u}${R.OMNIBUS_DISCOUNT}`).replaceAll(`{${R.OMNIBUS_PRICE}}`, `${u}${R.OMNIBUS_PRICE}`));
80
- const g = `${m}${t}${h.PARAGRAPH_END_TAG}`, y = `${f}${r ? g : n}${$.ELSE}${m}${h.PARAGRAPH_END_TAG}${$.END_IF}`;
81
- e = e.replace(n, y);
79
+ o in g.IF && (f = g.IF[o].replaceAll(`{${A.DISCOUNT}}`, `${u}${A.DISCOUNT}`).replaceAll(`{${A.OMNIBUS_DISCOUNT}}`, `${u}${A.OMNIBUS_DISCOUNT}`).replaceAll(`{${A.OMNIBUS_PRICE}}`, `${u}${A.OMNIBUS_PRICE}`));
80
+ const $ = `${m}${t}${N.PARAGRAPH_END_TAG}`, y = `${f}${r ? $ : s}${g.ELSE}${m}${N.PARAGRAPH_END_TAG}${g.END_IF}`;
81
+ e = e.replace(s, y);
82
82
  }), e;
83
83
  },
84
84
  priority: 53
@@ -95,19 +95,24 @@ const w = [
95
95
  {
96
96
  id: "strip-recommendation-editor-attributes",
97
97
  description: "Strip editor-only attributes from compiled recommendation output",
98
- type: "regex",
99
- // eslint-disable-next-line @stylistic/max-len
100
- pattern: '\\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"',
101
- replacement: "",
102
- flags: "g",
98
+ type: "custom",
99
+ // Scoped to REC_START/REC_END markers so it cannot strip `product-attr`
100
+ // from Items block elements, which the items compiler rule depends on.
101
+ processor: (c) => {
102
+ const e = /\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"/g;
103
+ return c.replace(
104
+ /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
105
+ (l, n) => `<!--REC_START-->${n.replace(e, "")}<!--REC_END-->`
106
+ );
107
+ },
103
108
  priority: 55
104
109
  },
105
110
  {
106
111
  id: "strip-unused-recommendation-classes",
107
112
  description: "Remove CSS classes not referenced by any style rule from recommendation elements",
108
113
  type: "custom",
109
- processor: (i) => {
110
- let e = i.replace(
114
+ processor: (c) => {
115
+ let e = c.replace(
111
116
  / class="(?:product-card-segment|attribute-cell|recommendation-attribute-row|product-image|product-name|product-price|product-old-price|product-omnibus-price|product-omnibus-discount|product-button|recommendation-product-row|product-card-wrapper)"/g,
112
117
  ""
113
118
  );
@@ -119,8 +124,8 @@ const w = [
119
124
  id: "remove-empty-mobile-layout-artifacts",
120
125
  description: "Remove empty mobile container rows and unused mobile layout CSS",
121
126
  type: "custom",
122
- processor: (i) => {
123
- let e = i;
127
+ processor: (c) => {
128
+ let e = c;
124
129
  return e = e.replace(
125
130
  /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
126
131
  ""
@@ -129,9 +134,9 @@ const w = [
129
134
  ""
130
135
  ), e = e.replace(
131
136
  /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
132
- (p, c) => {
133
- const n = c.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
134
- return n.every((d) => a.test(d)) ? "" : p;
137
+ (l, n) => {
138
+ const s = n.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
139
+ return s.every((d) => a.test(d)) ? "" : l;
135
140
  }
136
141
  )), e;
137
142
  },
@@ -141,38 +146,38 @@ const w = [
141
146
  id: "deduplicate-inline-styles",
142
147
  description: "Replace repeated inline styles with CSS class references within recommendation blocks",
143
148
  type: "custom",
144
- processor: (i) => {
145
- const e = i.replace(
149
+ processor: (c) => {
150
+ const e = c.replace(
146
151
  /<a\b[^>]*\bes-button\b[^>]*>/g,
147
152
  (o) => o.replace(
148
153
  /([;"]color:)([^;"]+)/g,
149
154
  (r, t, u) => u.includes("!important") ? r : `${t}${u} !important`
150
155
  )
151
- ), p = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, c = / style="([^"]*)"/g, n = /* @__PURE__ */ new Map();
152
- let a = p.exec(e);
156
+ ), l = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, n = / style="([^"]*)"/g, s = /* @__PURE__ */ new Map();
157
+ let a = l.exec(e);
153
158
  for (; a !== null; ) {
154
- let o = c.exec(a[1]);
159
+ let o = n.exec(a[1]);
155
160
  for (; o !== null; ) {
156
161
  const [, r] = o;
157
- n.set(r, (n.get(r) || 0) + 1), o = c.exec(a[1]);
162
+ s.set(r, (s.get(r) || 0) + 1), o = n.exec(a[1]);
158
163
  }
159
- c.lastIndex = 0, a = p.exec(e);
164
+ n.lastIndex = 0, a = l.exec(e);
160
165
  }
161
- const s = /* @__PURE__ */ new Map(), d = [];
166
+ const i = /* @__PURE__ */ new Map(), d = [];
162
167
  let _ = 0;
163
- if (n.forEach((o, r) => {
168
+ if (s.forEach((o, r) => {
164
169
  if (o >= 6) {
165
170
  const t = `rc${_++}`;
166
- s.set(r, t), d.push(`.${t}{${r}}`);
171
+ i.set(r, t), d.push(`.${t}{${r}}`);
167
172
  }
168
- }), s.size === 0) {
173
+ }), i.size === 0) {
169
174
  let o = e;
170
175
  return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
171
176
  }
172
- const A = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), I = (o, r) => `${o.slice(0, -1)} ${r}"`, S = /* @__PURE__ */ new Map();
173
- s.forEach((o, r) => {
174
- const t = A(r);
175
- S.set(r, {
177
+ const R = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), S = (o, r) => `${o.slice(0, -1)} ${r}"`, b = /* @__PURE__ */ new Map();
178
+ i.forEach((o, r) => {
179
+ const t = R(r);
180
+ b.set(r, {
176
181
  caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
177
182
  caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
178
183
  });
@@ -182,14 +187,14 @@ const w = [
182
187
  /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
183
188
  (o, r) => {
184
189
  let t = r;
185
- return s.forEach((u, f) => {
186
- const g = S.get(f);
190
+ return i.forEach((u, f) => {
191
+ const $ = b.get(f);
187
192
  t = t.replace(
188
- g.caseA,
189
- (y, b, l) => I(b, u) + l
193
+ $.caseA,
194
+ (y, I, p) => S(I, u) + p
190
195
  ), t = t.replace(
191
- g.caseB,
192
- (y, b, l) => b + I(l, u)
196
+ $.caseB,
197
+ (y, I, p) => I + S(p, u)
193
198
  ), t = t.replaceAll(` style="${f}"`, ` class="${u}"`);
194
199
  }), t;
195
200
  }
@@ -1,75 +1,75 @@
1
- import { ModificationDescription as m, UIElementType as _, UEAttr as A } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as h } from "../../../common-control.js";
3
- import { ItemsBlockControlId as L, ItemsBlockId as R } from "../../enums/controlEnums.js";
4
- import { productPairs as T } from "../../enums/productEnums.js";
5
- import { getItemsBlockConfig as I, setItemsBlockConfig as u, escapeReplacement as N } from "../../utils/nodeConfigUtils.js";
6
- const D = L.PRICE_SINGLE_PRICE, l = {
1
+ import { ModificationDescription as S, UIElementType as d, UEAttr as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
+ import { CommonControl as A } from "../../../common-control.js";
3
+ import { ItemsBlockControlId as T, ItemsBlockId as p } from "../../enums/controlEnums.js";
4
+ import { productPairs as R } from "../../enums/productEnums.js";
5
+ import { getItemsBlockConfig as I, setItemsBlockConfig as N, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
6
+ const u = T.PRICE_SINGLE_PRICE, l = {
7
7
  SINGLE_PRICE: "singlePrice"
8
8
  };
9
- class y extends h {
9
+ class k extends A {
10
10
  getId() {
11
- return D;
11
+ return u;
12
12
  }
13
13
  getTemplate() {
14
14
  return `
15
- <div class="container ${L.PRICE_SINGLE_PRICE}">
15
+ <div class="container ${T.PRICE_SINGLE_PRICE}">
16
16
  ${this._getSinglePrice()}
17
17
  </div>
18
18
  `;
19
19
  }
20
20
  onRender() {
21
21
  const e = I(this.currentNode);
22
- this.api.updateValues({ [l.SINGLE_PRICE]: (e == null ? void 0 : e.priceSinglePrice) ?? !1 }), this.api.onValueChanged(l.SINGLE_PRICE, (t) => {
23
- this._onSinglePriceChange(t);
22
+ this.api.updateValues({ [l.SINGLE_PRICE]: (e == null ? void 0 : e.priceSinglePrice) ?? !1 }), this.api.onValueChanged(l.SINGLE_PRICE, (i) => {
23
+ this._onSinglePriceChange(i);
24
24
  });
25
25
  }
26
26
  onTemplateNodeUpdated(e) {
27
27
  super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
28
- const t = I(this.currentNode);
29
- this.api.updateValues({ [l.SINGLE_PRICE]: (t == null ? void 0 : t.priceSinglePrice) ?? !1 });
28
+ const i = I(this.currentNode);
29
+ this.api.updateValues({ [l.SINGLE_PRICE]: (i == null ? void 0 : i.priceSinglePrice) ?? !1 });
30
30
  });
31
31
  }
32
32
  _onSinglePriceChange(e) {
33
- if (console.debug("Single price changed to: ", e), u(this.currentNode, this.api, { priceSinglePrice: e }), !this.currentNode)
33
+ if (console.debug("Single price changed to: ", e), !this.currentNode)
34
34
  return;
35
- const t = I(this.currentNode), o = (t == null ? void 0 : t.type) ?? "CART_ITEMS", r = (t == null ? void 0 : t.priceFormatted) ?? !1, i = T.PAIRS_FOR_EXTENSION.price[o], c = T.PAIRS_FOR_EXTENSION.originalPrice[o], [P, p] = e ? [
36
- r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE,
37
- r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE
35
+ const i = I(this.currentNode), c = (i == null ? void 0 : i.type) ?? "CART_ITEMS", r = (i == null ? void 0 : i.priceFormatted) ?? !1, t = R.PAIRS_FOR_EXTENSION.price[c], n = R.PAIRS_FOR_EXTENSION.originalPrice[c], [E, g] = e ? [
36
+ r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE,
37
+ r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE
38
38
  ] : [
39
- r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE,
40
- r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE
41
- ], s = r ? c.DEFAULT_PRICE_FORMATTED : c.DEFAULT_PRICE, d = r ? c.DEFAULT_SINGLE_PRICE_FORMATTED : c.DEFAULT_SINGLE_PRICE, [g, C] = e ? [s, d] : [d, s], n = this.currentNode.closest(".items-block"), S = (n == null ? void 0 : n.querySelectorAll(
42
- `[esd-extension-block-id="${R.PRICE}"]`
43
- )) || [], E = this.api.getDocumentModifier();
44
- S.forEach((a) => {
45
- this._updatePriceBlock(E, a, P, p, e);
46
- }), ((n == null ? void 0 : n.querySelectorAll(
47
- `[esd-extension-block-id="${R.ORIGINAL_PRICE}"]`
39
+ r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE,
40
+ r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE
41
+ ], P = r ? n.DEFAULT_PRICE_FORMATTED : n.DEFAULT_PRICE, _ = r ? n.DEFAULT_SINGLE_PRICE_FORMATTED : n.DEFAULT_SINGLE_PRICE, [L, C] = e ? [P, _] : [_, P], s = this.api.getDocumentModifier();
42
+ N(this.currentNode, this.api, { priceSinglePrice: e }, s);
43
+ const o = this.currentNode.closest(".items-block");
44
+ ((o == null ? void 0 : o.querySelectorAll(
45
+ `[esd-extension-block-id="${p.PRICE}"]`
48
46
  )) || []).forEach((a) => {
49
- this._updatePriceBlock(E, a, g, C, e);
50
- }), E.apply(new m(
47
+ this._updatePriceBlock(s, a, E, g, e);
48
+ }), ((o == null ? void 0 : o.querySelectorAll(
49
+ `[esd-extension-block-id="${p.ORIGINAL_PRICE}"]`
50
+ )) || []).forEach((a) => {
51
+ this._updatePriceBlock(s, a, L, C, e);
52
+ }), s.apply(new S(
51
53
  `Updated price to ${e ? "single" : "total"} price`
52
54
  ));
53
55
  }
54
- _updatePriceBlock(e, t, o, r, i) {
55
- const c = t.getInnerHTML().trim().replace(o, N(r));
56
- e.modifyHtml(t).setInnerHtml(c), t.querySelectorAll('[product-attr="price"], [product-attr="originalPrice"]').forEach((s) => {
57
- e.modifyHtml(s).setAttribute("data-single_price", i ? "true" : "false");
58
- });
56
+ _updatePriceBlock(e, i, c, r, t) {
57
+ const n = `data-single_price="${t ? "true" : "false"}"`, E = i.getInnerHTML().trim().replace(c, h(r)).replace(/data-single_price=(?:"[^"]*"|'[^']*')/g, n);
58
+ e.modifyHtml(i).setInnerHtml(E);
59
59
  }
60
60
  _getSinglePrice() {
61
61
  return `
62
62
  <div class="display-flex align-items-center justify-content-between">
63
- <${_.LABEL}
64
- ${A.LABEL.text}="${this.api.translate("Show Single Product Price")}"
63
+ <${d.LABEL}
64
+ ${m.LABEL.text}="${this.api.translate("Show Single Product Price")}"
65
65
  >
66
- </${_.LABEL}>
66
+ </${d.LABEL}>
67
67
  ${this._GuToggle(l.SINGLE_PRICE)}
68
68
  </div>
69
69
  `;
70
70
  }
71
71
  }
72
72
  export {
73
- D as CONTROL_BLOCK_ID,
74
- y as PriceSinglePriceControl
73
+ u as CONTROL_BLOCK_ID,
74
+ k as PriceSinglePriceControl
75
75
  };
@@ -1,6 +1,6 @@
1
1
  import _ from "../../../../node_modules/lodash-es/flatMap.js";
2
- import a from "../../../../node_modules/lodash-es/range.js";
3
- const T = '<td align="center" class="ins-product-td items-block items-block-v2">', E = { PAIRS_FOR_EXTENSION: {
2
+ import E from "../../../../node_modules/lodash-es/range.js";
3
+ const T = '<td align="center" class="ins-product-td items-block items-block-v2">', a = { PAIRS_FOR_EXTENSION: {
4
4
  imageSrc: {
5
5
  CART_ITEMS: {
6
6
  ATTR: "ins_apr_img",
@@ -212,10 +212,10 @@ const T = '<td align="center" class="ins-product-td items-block items-block-v2">
212
212
  }
213
213
  } };
214
214
  function m(e, s = 8) {
215
- return a(1, s + 1).map((i) => `${e}_${i}`);
215
+ return E(1, s + 1).map((i) => `${e}_${i}`);
216
216
  }
217
- function t() {
218
- const { PAIRS_FOR_EXTENSION: e } = E, s = [];
217
+ function r() {
218
+ const { PAIRS_FOR_EXTENSION: e } = a, s = [];
219
219
  return s.push(
220
220
  e.imageSrc.CART_ITEMS.ATTR,
221
221
  e.imageSrc.BROWSED_ITEMS.ATTR,
@@ -234,22 +234,34 @@ function t() {
234
234
  ), s.push(
235
235
  e.price.CART_ITEMS.PRICE,
236
236
  e.price.CART_ITEMS.PRICE_FORMATTED,
237
+ e.price.CART_ITEMS.SINGLE_PRICE,
238
+ e.price.CART_ITEMS.SINGLE_PRICE_FORMATTED,
237
239
  e.price.CART_ITEMS.CURRENCY,
238
240
  e.price.BROWSED_ITEMS.PRICE,
239
241
  e.price.BROWSED_ITEMS.PRICE_FORMATTED,
242
+ e.price.BROWSED_ITEMS.SINGLE_PRICE,
243
+ e.price.BROWSED_ITEMS.SINGLE_PRICE_FORMATTED,
240
244
  e.price.BROWSED_ITEMS.CURRENCY,
241
245
  e.price.PURCHASED_ITEMS.PRICE,
242
246
  e.price.PURCHASED_ITEMS.PRICE_FORMATTED,
247
+ e.price.PURCHASED_ITEMS.SINGLE_PRICE,
248
+ e.price.PURCHASED_ITEMS.SINGLE_PRICE_FORMATTED,
243
249
  e.price.PURCHASED_ITEMS.CURRENCY
244
250
  ), s.push(
245
251
  e.originalPrice.CART_ITEMS.PRICE,
246
252
  e.originalPrice.CART_ITEMS.PRICE_FORMATTED,
253
+ e.originalPrice.CART_ITEMS.SINGLE_PRICE,
254
+ e.originalPrice.CART_ITEMS.SINGLE_PRICE_FORMATTED,
247
255
  e.originalPrice.CART_ITEMS.CURRENCY,
248
256
  e.originalPrice.BROWSED_ITEMS.PRICE,
249
257
  e.originalPrice.BROWSED_ITEMS.PRICE_FORMATTED,
258
+ e.originalPrice.BROWSED_ITEMS.SINGLE_PRICE,
259
+ e.originalPrice.BROWSED_ITEMS.SINGLE_PRICE_FORMATTED,
250
260
  e.originalPrice.BROWSED_ITEMS.CURRENCY,
251
261
  e.originalPrice.PURCHASED_ITEMS.PRICE,
252
262
  e.originalPrice.PURCHASED_ITEMS.PRICE_FORMATTED,
263
+ e.originalPrice.PURCHASED_ITEMS.SINGLE_PRICE,
264
+ e.originalPrice.PURCHASED_ITEMS.SINGLE_PRICE_FORMATTED,
253
265
  e.originalPrice.PURCHASED_ITEMS.CURRENCY
254
266
  ), s.push(
255
267
  e.button.CART_ITEMS.HREF,
@@ -262,11 +274,11 @@ function t() {
262
274
  ), s;
263
275
  }
264
276
  const o = _(
265
- t(),
277
+ r(),
266
278
  (e) => m(e)
267
279
  );
268
280
  export {
269
281
  o as itemsBlockDynamicVariables,
270
- E as productPairs,
282
+ a as productPairs,
271
283
  T as templateFirstLine
272
284
  };