@useinsider/guido 3.4.1 → 3.5.0-beta.70f8c74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/components/Guido.vue.js +1 -1
- package/dist/components/Guido.vue2.js +50 -48
- package/dist/components/organisms/extensions/recommendation/FilterItem.vue.js +2 -2
- package/dist/components/organisms/extensions/recommendation/FilterItem.vue2.js +49 -49
- package/dist/composables/useActionsApi.js +9 -5
- package/dist/composables/useSave.js +13 -14
- package/dist/config/migrator/checkboxMigrator.js +20 -69
- package/dist/config/migrator/itemsBlockMigrator.js +28 -18
- package/dist/config/migrator/radioButtonMigrator.js +36 -91
- package/dist/config/migrator/textBlockMigration.js +65 -0
- package/dist/extensions/Blocks/Recommendation/block.js +90 -45
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +33 -14
- package/dist/extensions/Blocks/Recommendation/utils/filterUtil.js +24 -16
- package/dist/extensions/Blocks/Unsubscribe/block.js +133 -49
- package/dist/extensions/Blocks/Unsubscribe/template.js +8 -8
- package/dist/extensions/Blocks/Unsubscribe/utils/constants.js +2 -1
- package/dist/guido.css +1 -1
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +145 -144
- package/dist/src/composables/useActionsApi.d.ts +1 -1
- package/dist/src/config/migrator/textBlockMigration.d.ts +24 -0
- package/dist/src/extensions/Blocks/Recommendation/block.d.ts +10 -0
- package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +5 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/filterUtil.d.ts +2 -0
- package/dist/src/extensions/Blocks/Unsubscribe/block.d.ts +20 -1
- package/dist/src/extensions/Blocks/Unsubscribe/utils/constants.d.ts +1 -0
- package/dist/src/stores/config.test.d.ts +1 -0
- package/dist/src/vitest.setup.d.ts +0 -0
- package/dist/static/styles/components/wide-panel.css.js +5 -0
- package/dist/stores/config.js +24 -23
- package/dist/utils/templatePreparation.js +51 -43
- package/package.json +3 -2
|
@@ -155,6 +155,8 @@ class z {
|
|
|
155
155
|
}
|
|
156
156
|
migrate(t) {
|
|
157
157
|
try {
|
|
158
|
+
if (!this.containsItemsBlock(t))
|
|
159
|
+
return t;
|
|
158
160
|
let o = this.removeJinjaConditionals(t);
|
|
159
161
|
o = this.replaceTemplateVariables(o);
|
|
160
162
|
const l = this.parser.parseFromString(o, "text/html"), a = l.querySelectorAll(
|
|
@@ -178,15 +180,15 @@ class z {
|
|
|
178
180
|
originalPriceStyles: e.originalPriceStyles,
|
|
179
181
|
quantityStyles: e.quantityStyles,
|
|
180
182
|
nodeConfig: R(e.configBlockAttributes)
|
|
181
|
-
}),
|
|
183
|
+
}), u = this.parser.parseFromString(
|
|
182
184
|
`<table><tbody><tr>${c}</tr></tbody></table>`,
|
|
183
185
|
"text/html"
|
|
184
186
|
).querySelector("td");
|
|
185
|
-
if (
|
|
187
|
+
if (u && i.parentNode) {
|
|
186
188
|
const p = R(e.configBlockAttributes);
|
|
187
|
-
|
|
188
|
-
const
|
|
189
|
-
|
|
189
|
+
u.setAttribute("esd-ext-config", JSON.stringify(p));
|
|
190
|
+
const d = u.querySelector("esd-config-block");
|
|
191
|
+
d && d.remove(), i.parentNode.replaceChild(u, i);
|
|
190
192
|
}
|
|
191
193
|
}), l.documentElement.outerHTML);
|
|
192
194
|
} catch (o) {
|
|
@@ -201,22 +203,22 @@ class z {
|
|
|
201
203
|
*/
|
|
202
204
|
extractConfiguration(t) {
|
|
203
205
|
var C, D, P;
|
|
204
|
-
const o = ((C = t.querySelector("[data-type]")) == null ? void 0 : C.getAttribute("data-type")) || "CART_ITEMS", l = ((D = t.querySelector("[data-number]")) == null ? void 0 : D.getAttribute("data-number")) || "1", a = parseInt(l) - 1, n = T[o], i = ((P = n == null ? void 0 : n[a]) == null ? void 0 : P.value) || n[0].value, e = t.querySelector('[product-attr="price"]'), c = (e == null ? void 0 : e.getAttribute("data-currency_symbol")) || "USD",
|
|
206
|
+
const o = ((C = t.querySelector("[data-type]")) == null ? void 0 : C.getAttribute("data-type")) || "CART_ITEMS", l = ((D = t.querySelector("[data-number]")) == null ? void 0 : D.getAttribute("data-number")) || "1", a = parseInt(l) - 1, n = T[o], i = ((P = n == null ? void 0 : n[a]) == null ? void 0 : P.value) || n[0].value, e = t.querySelector('[product-attr="price"]'), c = (e == null ? void 0 : e.getAttribute("data-currency_symbol")) || "USD", u = ((e == null ? void 0 : e.getAttribute("data-curency")) || "before") === "after" ? "1" : "0", p = (e == null ? void 0 : e.getAttribute("data-formated")) !== "false", d = this.extractConfigBlockAttributes(t, o, l), S = d["data-card_orientation_control_value"];
|
|
205
207
|
let b;
|
|
206
208
|
S ? b = S === "horizontal" ? "horizontal" : "vertical" : b = t.querySelector('[colspan="2"]') !== null ? "vertical" : "horizontal";
|
|
207
|
-
const y = t.querySelector('a[product-attr="name"]'), I = (y == null ? void 0 : y.getAttribute("style")) || void 0, f = t.querySelector('a[product-attr="button"]'), m = (f == null ? void 0 : f.getAttribute("style")) || void 0,
|
|
209
|
+
const y = t.querySelector('a[product-attr="name"]'), I = (y == null ? void 0 : y.getAttribute("style")) || void 0, f = t.querySelector('a[product-attr="button"]'), m = (f == null ? void 0 : f.getAttribute("style")) || void 0, k = (e == null ? void 0 : e.getAttribute("style")) || void 0, A = t.querySelector("p.original-price"), h = (A == null ? void 0 : A.getAttribute("style")) || void 0, E = t.querySelector('[product-attr="quantity"]'), L = (E == null ? void 0 : E.getAttribute("style")) || void 0;
|
|
208
210
|
return {
|
|
209
211
|
orientation: b,
|
|
210
212
|
itemsType: o,
|
|
211
213
|
itemId: i,
|
|
212
214
|
currencySymbol: c,
|
|
213
|
-
currencyLocation:
|
|
215
|
+
currencyLocation: u,
|
|
214
216
|
formattedPrice: p,
|
|
215
|
-
configBlockAttributes:
|
|
217
|
+
configBlockAttributes: d,
|
|
216
218
|
nameStyles: I,
|
|
217
219
|
buttonStyles: m,
|
|
218
|
-
priceStyles:
|
|
219
|
-
originalPriceStyles:
|
|
220
|
+
priceStyles: k,
|
|
221
|
+
originalPriceStyles: h,
|
|
220
222
|
quantityStyles: L
|
|
221
223
|
};
|
|
222
224
|
}
|
|
@@ -296,6 +298,14 @@ class z {
|
|
|
296
298
|
"data-product_button_link": "{{Abandoned Cart Item (1) Url}}"
|
|
297
299
|
};
|
|
298
300
|
}
|
|
301
|
+
/**
|
|
302
|
+
* Fast check for the presence of any items block (cart / browsed / purchased)
|
|
303
|
+
* in the raw HTML. Used to gate the migration pipeline so non-items templates
|
|
304
|
+
* are returned untouched.
|
|
305
|
+
*/
|
|
306
|
+
containsItemsBlock(t) {
|
|
307
|
+
return t.includes("esd-cart-items-block") || t.includes("esd-browsed-items-block") || t.includes("esd-purchased-items-block");
|
|
308
|
+
}
|
|
299
309
|
/**
|
|
300
310
|
* Removes Jinja2 conditional statements from HTML
|
|
301
311
|
* Handles all items block types:
|
|
@@ -337,18 +347,18 @@ class z {
|
|
|
337
347
|
const [, i, e, c] = n, _ = x[i];
|
|
338
348
|
if (!_)
|
|
339
349
|
return console.warn(`Unknown variable prefix: ${i}`), l;
|
|
340
|
-
const
|
|
341
|
-
if (!
|
|
350
|
+
const u = q[e];
|
|
351
|
+
if (!u)
|
|
342
352
|
return console.warn(`Unknown variable suffix mapping for: ${e}`), l;
|
|
343
|
-
const { pairsKey: p, defaultKey:
|
|
353
|
+
const { pairsKey: p, defaultKey: d, isArray: S } = u, y = o[p][_];
|
|
344
354
|
if (!y)
|
|
345
355
|
return console.warn(`No data found for: ${p}.${_}`), l;
|
|
346
356
|
if (S) {
|
|
347
|
-
const f = parseInt(c) - 1, m = y[
|
|
348
|
-
return Array.isArray(m) && m[f] ? m[f] : (console.warn(`Array value not found: ${p}.${_}.${
|
|
357
|
+
const f = parseInt(c) - 1, m = y[d];
|
|
358
|
+
return Array.isArray(m) && m[f] ? m[f] : (console.warn(`Array value not found: ${p}.${_}.${d}[${f}]`), l);
|
|
349
359
|
}
|
|
350
|
-
const I = y[
|
|
351
|
-
return I !== void 0 ? String(I) : (console.warn(`Default value not found: ${p}.${_}.${
|
|
360
|
+
const I = y[d];
|
|
361
|
+
return I !== void 0 ? String(I) : (console.warn(`Default value not found: ${p}.${_}.${d}`), l);
|
|
352
362
|
});
|
|
353
363
|
}
|
|
354
364
|
}
|
|
@@ -1,109 +1,54 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import
|
|
5
|
-
|
|
1
|
+
var q = Object.defineProperty;
|
|
2
|
+
var C = (o, t, e) => t in o ? q(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
|
|
3
|
+
var g = (o, t, e) => C(o, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
import N from "../../extensions/Blocks/RadioButton/template.js";
|
|
5
|
+
import { extractTextFromElement as b, buildTextBlock as f } from "./textBlockMigration.js";
|
|
6
|
+
class R {
|
|
6
7
|
constructor() {
|
|
7
|
-
|
|
8
|
+
g(this, "parser");
|
|
8
9
|
this.parser = new DOMParser();
|
|
9
10
|
}
|
|
10
|
-
migrate(
|
|
11
|
+
migrate(t) {
|
|
11
12
|
try {
|
|
12
|
-
const
|
|
13
|
-
if (
|
|
14
|
-
return
|
|
15
|
-
let
|
|
16
|
-
return
|
|
13
|
+
const e = this.parser.parseFromString(t, "text/html"), n = e.querySelectorAll("td.radio-button-block"), a = e.querySelectorAll("td.radio-button-v2");
|
|
14
|
+
if (n.length === 0 && a.length === 0)
|
|
15
|
+
return t;
|
|
16
|
+
let i = !1;
|
|
17
|
+
return n.forEach((r) => {
|
|
17
18
|
if (r.classList.contains("radio-button-v2"))
|
|
18
19
|
return;
|
|
19
|
-
const
|
|
20
|
-
`<table id="tempDoc"><tbody><tr>${
|
|
20
|
+
const s = r.getAttribute("id"), c = b(r, "ins-title"), d = b(r, "ins-description"), u = b(r, "ins-subscribe"), l = b(r, "ins-unsubscribe"), p = f(c, c.containerClass), m = f(d, d.containerClass), h = f(u), S = f(l), T = N.replace("{-{-TITLE-}-}", p).replace("{-{-DESCRIPTION-}-}", m).replace("{-{-YES-}-}", h).replace("{-{-NO-}-}", S), y = this.parser.parseFromString(
|
|
21
|
+
`<table id="tempDoc"><tbody><tr>${T}</tr></tbody></table>`,
|
|
21
22
|
"text/html"
|
|
22
23
|
).querySelector(".radio-button-v2");
|
|
23
|
-
|
|
24
|
-
}),
|
|
25
|
-
} catch (
|
|
26
|
-
return console.error("RadioButtonMigrator failed:",
|
|
24
|
+
y && r.parentNode && (y.setAttribute("id", s || ""), r.parentNode.replaceChild(y, r), i = !0);
|
|
25
|
+
}), i = this.healRadioButtonV2(e) || i, i ? e.documentElement.outerHTML : t;
|
|
26
|
+
} catch (e) {
|
|
27
|
+
return console.error("RadioButtonMigrator failed:", e), t;
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
|
-
healRadioButtonV2(
|
|
30
|
-
let
|
|
31
|
-
return
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
const
|
|
35
|
-
if (!
|
|
30
|
+
healRadioButtonV2(t) {
|
|
31
|
+
let e = !1;
|
|
32
|
+
return t.querySelectorAll("td.radio-button-v2").forEach((n) => {
|
|
33
|
+
var m;
|
|
34
|
+
n.classList.contains("radio-button-block") || (n.classList.add("radio-button-block"), e = !0);
|
|
35
|
+
const a = n.querySelector("input#radioYes"), i = n.querySelector("input#radioNo");
|
|
36
|
+
if (!a || !i)
|
|
36
37
|
return;
|
|
37
|
-
const r = ((
|
|
38
|
-
if (!r && !
|
|
38
|
+
const r = ((m = a.parentElement) == null ? void 0 : m.querySelector(":scope > p")) || null;
|
|
39
|
+
if (!r && !a.hasAttribute("align"))
|
|
39
40
|
return;
|
|
40
|
-
const
|
|
41
|
-
if (!
|
|
41
|
+
const s = a.closest("tr"), c = i.closest("tr");
|
|
42
|
+
if (!s || !c || s === c || !s.parentNode)
|
|
42
43
|
return;
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
}),
|
|
46
|
-
}
|
|
47
|
-
extractTextFromElement(e, t) {
|
|
48
|
-
var d, y;
|
|
49
|
-
const s = e.querySelector(`.${t}`);
|
|
50
|
-
if (!s)
|
|
51
|
-
return {
|
|
52
|
-
text: t === "ins-title" ? "Title" : "Description",
|
|
53
|
-
isBold: !1,
|
|
54
|
-
isItalic: !1,
|
|
55
|
-
align: "left",
|
|
56
|
-
styles: "",
|
|
57
|
-
classList: ""
|
|
58
|
-
};
|
|
59
|
-
const i = s.querySelector("p");
|
|
60
|
-
if (!i)
|
|
61
|
-
return {
|
|
62
|
-
text: ((d = s.textContent) == null ? void 0 : d.trim()) || (t === "ins-title" ? "Title" : "Description"),
|
|
63
|
-
isBold: !1,
|
|
64
|
-
isItalic: !1,
|
|
65
|
-
align: s.getAttribute("align") || "left",
|
|
66
|
-
styles: "",
|
|
67
|
-
classList: ""
|
|
68
|
-
};
|
|
69
|
-
const o = ((y = i.textContent) == null ? void 0 : y.trim()) || (t === "ins-title" ? "Title" : "Description"), r = i.getAttribute("style") || "", n = s.getAttribute("align") || i.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(r) || !!i.querySelector("b, strong"), g = /font-style\s*:\s*italic/i.test(r) || !!i.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), u = this.convertInlineToBlock(c), p = s.getAttribute("class") || "";
|
|
70
|
-
return {
|
|
71
|
-
text: o,
|
|
72
|
-
isBold: a,
|
|
73
|
-
isItalic: g,
|
|
74
|
-
align: n,
|
|
75
|
-
styles: u,
|
|
76
|
-
classList: p
|
|
77
|
-
};
|
|
78
|
-
}
|
|
79
|
-
buildTextBlock(e) {
|
|
80
|
-
let t = e.text;
|
|
81
|
-
e.isBold && e.isItalic ? t = `<strong path="1,0"><em path="1,0,0">${t}</em></strong>` : e.isBold ? t = `<strong path="1,0">${t}</strong>` : e.isItalic && (t = `<em path="1,0">${t}</em>`);
|
|
82
|
-
const s = e.align ? ` align="${e.align}"` : "", i = e.styles ? ` style="${e.styles.replaceAll('"', "'")}"` : "";
|
|
83
|
-
return `
|
|
84
|
-
<td class="esd-block-text ${e.classList}" ${s}>
|
|
85
|
-
<p path="1" ${i}>
|
|
86
|
-
${t}
|
|
87
|
-
</p>
|
|
88
|
-
</td>
|
|
89
|
-
`;
|
|
90
|
-
}
|
|
91
|
-
removeStyleProperties(e, t) {
|
|
92
|
-
return e ? t.reduce((i, o) => {
|
|
93
|
-
const r = new RegExp(`${o}\\s*:\\s*[^;]*;?`, "gi");
|
|
94
|
-
return i.replace(r, "");
|
|
95
|
-
}, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
|
|
96
|
-
}
|
|
97
|
-
convertInlineToBlock(e) {
|
|
98
|
-
if (!e)
|
|
99
|
-
return "";
|
|
100
|
-
let t = e.replace(/display\s*:\s*inline/gi, "display: block");
|
|
101
|
-
return /display\s*:/i.test(t) || (t = t ? `${t}; display: block` : "display: block"), t.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
|
|
44
|
+
const d = (r == null ? void 0 : r.innerHTML.trim()) || "Yes", u = c.cloneNode(!0), l = u.querySelector("input#radioNo"), p = u.querySelector("p");
|
|
45
|
+
l && (l.setAttribute("id", "radioYes"), l.removeAttribute("align")), p && (p.innerHTML = d), s.parentNode.replaceChild(u, s), e = !0;
|
|
46
|
+
}), e;
|
|
102
47
|
}
|
|
103
48
|
}
|
|
104
|
-
function
|
|
105
|
-
return new
|
|
49
|
+
function w(o) {
|
|
50
|
+
return new R().migrate(o);
|
|
106
51
|
}
|
|
107
52
|
export {
|
|
108
|
-
|
|
53
|
+
w as migrateRadioButton
|
|
109
54
|
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
const I = {
|
|
2
|
+
"ins-title": "Title",
|
|
3
|
+
"ins-description": "Description",
|
|
4
|
+
"ins-subscribe": "Yes",
|
|
5
|
+
"ins-unsubscribe": "No"
|
|
6
|
+
}, y = /font-weight\s*:\s*[^;]*;?/gi, S = /font-style\s*:\s*[^;]*;?/gi, u = /;\s*;/g, T = /^;|;$/g, d = /display\s*:\s*inline/gi, m = /display\s*:/i, b = /font-weight\s*:\s*bold/i, A = /font-style\s*:\s*italic/i, R = /^<(?:strong|b)\b/i, $ = /^<(?:em|i)\b/i;
|
|
7
|
+
function L(t) {
|
|
8
|
+
return t ? t.replace(y, "").replace(S, "").replace(u, ";").replace(T, "").trim() : "";
|
|
9
|
+
}
|
|
10
|
+
function O(t) {
|
|
11
|
+
if (!t)
|
|
12
|
+
return "";
|
|
13
|
+
let e = t.replace(d, "display: block");
|
|
14
|
+
return m.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(u, ";").replace(T, "").trim();
|
|
15
|
+
}
|
|
16
|
+
function B(t, e) {
|
|
17
|
+
var c, a;
|
|
18
|
+
const o = I[e], l = t.querySelector(`.${e}`);
|
|
19
|
+
if (!l)
|
|
20
|
+
return {
|
|
21
|
+
paragraphs: [{ innerHtml: o, isBold: !1, isItalic: !1, styles: "" }],
|
|
22
|
+
align: "left",
|
|
23
|
+
containerClass: ""
|
|
24
|
+
};
|
|
25
|
+
const n = Array.from(l.querySelectorAll("p")), p = l.getAttribute("align") || ((c = n[0]) == null ? void 0 : c.getAttribute("align")) || "left", i = l.getAttribute("class") || "";
|
|
26
|
+
return n.length === 0 ? {
|
|
27
|
+
paragraphs: [{
|
|
28
|
+
innerHtml: ((a = l.textContent) == null ? void 0 : a.trim()) || o,
|
|
29
|
+
isBold: !1,
|
|
30
|
+
isItalic: !1,
|
|
31
|
+
styles: ""
|
|
32
|
+
}],
|
|
33
|
+
align: p,
|
|
34
|
+
containerClass: ""
|
|
35
|
+
} : { paragraphs: n.map((r) => {
|
|
36
|
+
const _ = r.getAttribute("style") || "", f = b.test(_) || !!r.querySelector("b, strong"), g = A.test(_) || !!r.querySelector("i, em"), E = L(_);
|
|
37
|
+
return {
|
|
38
|
+
// Legacy parity: empty <p> → fallback placeholder; <p><br></p> is not empty.
|
|
39
|
+
innerHtml: r.innerHTML.trim() || o,
|
|
40
|
+
isBold: f,
|
|
41
|
+
isItalic: g,
|
|
42
|
+
styles: O(E)
|
|
43
|
+
};
|
|
44
|
+
}), align: p, containerClass: i };
|
|
45
|
+
}
|
|
46
|
+
function C(t, e = "") {
|
|
47
|
+
const o = t.align ? ` align="${t.align}"` : "", l = t.paragraphs.map((n, p) => {
|
|
48
|
+
const i = p + 1;
|
|
49
|
+
let s = n.innerHtml;
|
|
50
|
+
const c = n.isBold && !R.test(s), a = n.isItalic && !$.test(s);
|
|
51
|
+
c && a ? s = `<strong path="${i},0"><em path="${i},0,0">${s}</em></strong>` : c ? s = `<strong path="${i},0">${s}</strong>` : a && (s = `<em path="${i},0">${s}</em>`);
|
|
52
|
+
const r = n.styles ? ` style="${n.styles.replaceAll('"', "'")}"` : "";
|
|
53
|
+
return `<p path="${i}"${r}>${s}</p>`;
|
|
54
|
+
}).join(`
|
|
55
|
+
`);
|
|
56
|
+
return `
|
|
57
|
+
<td class="esd-block-text ${e}" ${o}>
|
|
58
|
+
${l}
|
|
59
|
+
</td>
|
|
60
|
+
`;
|
|
61
|
+
}
|
|
62
|
+
export {
|
|
63
|
+
C as buildTextBlock,
|
|
64
|
+
B as extractTextFromElement
|
|
65
|
+
};
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { BlockId as
|
|
1
|
+
var B = Object.defineProperty;
|
|
2
|
+
var C = (a, s, t) => s in a ? B(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
|
|
3
|
+
var p = (a, s, t) => C(a, typeof s != "symbol" ? s + "" : s, t);
|
|
4
|
+
import { BlockId as R } from "../../../enums/block.js";
|
|
5
5
|
import { getMigrationBannerHtml as b } from "../../../utils/migrationBannerHtml.js";
|
|
6
|
-
import { Block as
|
|
7
|
-
import { regenerateMobileProductRows as
|
|
8
|
-
import { ensureMobileCssRulesExist as
|
|
9
|
-
import { RecommendationConfigService as
|
|
10
|
-
import { useRecommendationExtensionStore as
|
|
11
|
-
import { getDefaultTemplate as
|
|
12
|
-
const
|
|
13
|
-
let
|
|
14
|
-
class q extends
|
|
6
|
+
import { Block as A, BlockCompositionType as y, ModificationDescription as f } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
7
|
+
import { regenerateMobileProductRows as D } from "./controls/main/utils.js";
|
|
8
|
+
import { ensureMobileCssRulesExist as h, setMobileLayoutOptOut as I, hasMobileLayoutOptOut as E } from "./controls/mobileLayout/cssRules.js";
|
|
9
|
+
import { RecommendationConfigService as c } from "./services/configService.js";
|
|
10
|
+
import { useRecommendationExtensionStore as g } from "./store/recommendation.js";
|
|
11
|
+
import { getDefaultTemplate as N } from "./templates/grid/template.js";
|
|
12
|
+
const k = R.Recommendation, m = "recommendation-block-v2", u = "recommendation-id";
|
|
13
|
+
let _ = !1;
|
|
14
|
+
class q extends A {
|
|
15
15
|
constructor() {
|
|
16
16
|
super();
|
|
17
17
|
/**
|
|
18
18
|
* Stores the ID generated in getTemplate() so onCreated() can reuse it.
|
|
19
19
|
* This avoids generating a new (different) ID in onCreated().
|
|
20
20
|
*/
|
|
21
|
-
|
|
21
|
+
p(this, "_pendingBlockId", null);
|
|
22
22
|
}
|
|
23
23
|
getId() {
|
|
24
|
-
return
|
|
24
|
+
return k;
|
|
25
25
|
}
|
|
26
26
|
getIcon() {
|
|
27
27
|
return "recommendation-icon";
|
|
@@ -39,7 +39,7 @@ class q extends R {
|
|
|
39
39
|
}
|
|
40
40
|
getSettingsPanelTitleHtml() {
|
|
41
41
|
return b(
|
|
42
|
-
|
|
42
|
+
k,
|
|
43
43
|
this.api.translate("Recommendation Block"),
|
|
44
44
|
this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.")
|
|
45
45
|
);
|
|
@@ -59,7 +59,7 @@ class q extends R {
|
|
|
59
59
|
*/
|
|
60
60
|
getTemplate() {
|
|
61
61
|
const t = this._generateNextId();
|
|
62
|
-
return this._pendingBlockId = t,
|
|
62
|
+
return this._pendingBlockId = t, N(t);
|
|
63
63
|
}
|
|
64
64
|
/**
|
|
65
65
|
* Called when a new block is dropped into the template
|
|
@@ -70,24 +70,26 @@ class q extends R {
|
|
|
70
70
|
*/
|
|
71
71
|
onCreated(t) {
|
|
72
72
|
const e = this._getRecommendationId(t);
|
|
73
|
-
if (e !== null && e > 0)
|
|
73
|
+
if (e !== null && e > 0) {
|
|
74
|
+
this._detectDuplicate(e) && this._handleDuplicate(t, e);
|
|
74
75
|
return;
|
|
76
|
+
}
|
|
75
77
|
const i = this._pendingBlockId ?? this._generateNextId();
|
|
76
78
|
this._pendingBlockId = null, this._assignRecommendationId(t, i);
|
|
77
|
-
const { config:
|
|
79
|
+
const { config: n, wasFreshDrop: o } = c.initializeConfig(
|
|
78
80
|
this.api,
|
|
79
81
|
t,
|
|
80
82
|
{ recommendationId: i }
|
|
81
|
-
),
|
|
82
|
-
if (
|
|
83
|
-
|
|
84
|
-
const
|
|
85
|
-
|
|
83
|
+
), r = g();
|
|
84
|
+
if (r.setCurrentBlock(i), o) {
|
|
85
|
+
h(this.api);
|
|
86
|
+
const l = this._getBlockElement(t);
|
|
87
|
+
l && (I(this.api, l, !0), D({
|
|
86
88
|
currentNode: t,
|
|
87
89
|
documentModifier: this.api.getDocumentModifier()
|
|
88
90
|
}));
|
|
89
91
|
}
|
|
90
|
-
|
|
92
|
+
r.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 });
|
|
91
93
|
}
|
|
92
94
|
/**
|
|
93
95
|
* Called when the document changes or template is loaded
|
|
@@ -100,20 +102,20 @@ class q extends R {
|
|
|
100
102
|
if (!(!t || !("getNodeConfig" in t))) {
|
|
101
103
|
if (!this._getRecommendationId(t)) {
|
|
102
104
|
const e = this._generateNextId();
|
|
103
|
-
this._assignRecommendationId(t, e),
|
|
105
|
+
this._assignRecommendationId(t, e), c.hasConfig(t) && c.updateConfig(
|
|
104
106
|
this.api,
|
|
105
107
|
t,
|
|
106
108
|
{ recommendationId: e },
|
|
107
109
|
"Assign recommendation ID to legacy block"
|
|
108
110
|
);
|
|
109
111
|
}
|
|
110
|
-
|
|
112
|
+
c.needsMigration(t) && this._migrateFromLegacy(t);
|
|
111
113
|
try {
|
|
112
|
-
|
|
113
|
-
const e =
|
|
114
|
+
_ || (h(this.api), _ = !0);
|
|
115
|
+
const e = c.getConfig(t), i = this._getBlockElement(t);
|
|
114
116
|
if (i) {
|
|
115
|
-
const
|
|
116
|
-
|
|
117
|
+
const n = !e.mobileLayoutEnabled;
|
|
118
|
+
E(i) !== n && I(this.api, i, n);
|
|
117
119
|
}
|
|
118
120
|
} catch {
|
|
119
121
|
}
|
|
@@ -127,7 +129,7 @@ class q extends R {
|
|
|
127
129
|
*/
|
|
128
130
|
onDelete(t) {
|
|
129
131
|
const e = this._getRecommendationId(t);
|
|
130
|
-
e &&
|
|
132
|
+
e && g().removeBlockState(e);
|
|
131
133
|
}
|
|
132
134
|
/**
|
|
133
135
|
* Generates the next unique recommendation ID by scanning all existing blocks
|
|
@@ -137,16 +139,59 @@ class q extends R {
|
|
|
137
139
|
let t = 0;
|
|
138
140
|
try {
|
|
139
141
|
const e = this.api.getDocumentRoot();
|
|
140
|
-
e && "querySelectorAll" in e && e.querySelectorAll(`.${
|
|
141
|
-
if ("getAttribute" in
|
|
142
|
-
const
|
|
143
|
-
|
|
142
|
+
e && "querySelectorAll" in e && e.querySelectorAll(`.${m}`).forEach((n) => {
|
|
143
|
+
if ("getAttribute" in n) {
|
|
144
|
+
const o = n.getAttribute(u), r = o ? parseInt(o) : 0;
|
|
145
|
+
r > t && (t = r);
|
|
144
146
|
}
|
|
145
147
|
});
|
|
146
148
|
} catch {
|
|
147
149
|
}
|
|
148
150
|
return t + 1;
|
|
149
151
|
}
|
|
152
|
+
/** True when another block already holds the same id — Stripo's duplication signal. */
|
|
153
|
+
_detectDuplicate(t) {
|
|
154
|
+
try {
|
|
155
|
+
const e = this.api.getDocumentRoot();
|
|
156
|
+
if (e && "querySelectorAll" in e)
|
|
157
|
+
return e.querySelectorAll(
|
|
158
|
+
`.${m}[${u}="${t}"]`
|
|
159
|
+
).length > 1;
|
|
160
|
+
} catch {
|
|
161
|
+
}
|
|
162
|
+
return !1;
|
|
163
|
+
}
|
|
164
|
+
/** Assigns a fresh id to a duplicated block and syncs DOM, node config and store. */
|
|
165
|
+
_handleDuplicate(t, e) {
|
|
166
|
+
const i = this._generateNextId(), n = this._getBlockElement(t);
|
|
167
|
+
this._assignRecommendationId(t, i), n && this._reassignInstanceClass(n, e, i), c.hasConfig(t) && c.updateConfig(
|
|
168
|
+
this.api,
|
|
169
|
+
t,
|
|
170
|
+
{ recommendationId: i },
|
|
171
|
+
`Reassign recommendation ID on duplicate (was ${e})`
|
|
172
|
+
);
|
|
173
|
+
const o = g();
|
|
174
|
+
o.cloneBlockState(e, i), o.setCurrentBlock(i);
|
|
175
|
+
}
|
|
176
|
+
/**
|
|
177
|
+
* Rewrites `ins-recommendation-v3-block-{id}` on the clone — the instance
|
|
178
|
+
* class scopes per-block CSS rules, so leaving the source's class would
|
|
179
|
+
* make stylistic edits leak between source and clone.
|
|
180
|
+
*/
|
|
181
|
+
_reassignInstanceClass(t, e, i) {
|
|
182
|
+
if (!("getAttribute" in t))
|
|
183
|
+
return;
|
|
184
|
+
const n = t.getAttribute("class");
|
|
185
|
+
if (!n)
|
|
186
|
+
return;
|
|
187
|
+
const o = `ins-recommendation-v3-block-${e}`, r = `ins-recommendation-v3-block-${i}`;
|
|
188
|
+
if (!n.includes(o))
|
|
189
|
+
return;
|
|
190
|
+
const l = n.replace(o, r), d = this.api.getDocumentModifier();
|
|
191
|
+
d.modifyHtml(t).setAttribute("class", l), d.apply(new f(
|
|
192
|
+
`Reassign recommendation instance class ${o} -> ${r}`
|
|
193
|
+
));
|
|
194
|
+
}
|
|
150
195
|
/**
|
|
151
196
|
* Assigns a recommendation-id attribute to the block element.
|
|
152
197
|
* The instance class (ins-recommendation-v3-block-{id}) is embedded in the template
|
|
@@ -157,8 +202,8 @@ class q extends R {
|
|
|
157
202
|
const i = this._getBlockElement(t);
|
|
158
203
|
if (!i)
|
|
159
204
|
return;
|
|
160
|
-
const
|
|
161
|
-
|
|
205
|
+
const n = this.api.getDocumentModifier();
|
|
206
|
+
n.modifyHtml(i).setAttribute(u, e.toString()), n.apply(new f(`Assign recommendation ID ${e}`));
|
|
162
207
|
}
|
|
163
208
|
/**
|
|
164
209
|
* Gets the recommendation-id from a block node
|
|
@@ -167,11 +212,11 @@ class q extends R {
|
|
|
167
212
|
const e = this._getBlockElement(t);
|
|
168
213
|
if (!e || !("getAttribute" in e))
|
|
169
214
|
return null;
|
|
170
|
-
const i = e.getAttribute(
|
|
215
|
+
const i = e.getAttribute(u);
|
|
171
216
|
if (!i)
|
|
172
217
|
return null;
|
|
173
|
-
const
|
|
174
|
-
return Number.isNaN(
|
|
218
|
+
const n = parseInt(i);
|
|
219
|
+
return Number.isNaN(n) ? null : n;
|
|
175
220
|
}
|
|
176
221
|
/**
|
|
177
222
|
* Gets the block element (the element with BLOCK_CLASS)
|
|
@@ -179,19 +224,19 @@ class q extends R {
|
|
|
179
224
|
_getBlockElement(t) {
|
|
180
225
|
if ("getAttribute" in t) {
|
|
181
226
|
const e = t.getAttribute("class");
|
|
182
|
-
if (e && e.includes(
|
|
227
|
+
if (e && e.includes(m))
|
|
183
228
|
return t;
|
|
184
229
|
}
|
|
185
|
-
return "querySelector" in t ? t.querySelector(`.${
|
|
230
|
+
return "querySelector" in t ? t.querySelector(`.${m}`) ?? null : null;
|
|
186
231
|
}
|
|
187
232
|
/**
|
|
188
233
|
* Migrate configuration from legacy format
|
|
189
234
|
*/
|
|
190
235
|
_migrateFromLegacy(t) {
|
|
191
|
-
|
|
236
|
+
c.migrateFromDataAttributes(this.api, t);
|
|
192
237
|
}
|
|
193
238
|
}
|
|
194
239
|
export {
|
|
195
|
-
|
|
240
|
+
k as BLOCK_ID,
|
|
196
241
|
q as RecommendationBlock
|
|
197
242
|
};
|