@useinsider/guido 3.20.0-beta.12889e0 → 3.20.0-beta.3ad13f5
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/dist/composables/useStripo.js +4 -3
- package/dist/config/compiler/utils/recommendationCompilerUtils.js +57 -72
- package/dist/extensions/Blocks/Recommendation/block.js +41 -63
- package/dist/extensions/Blocks/Recommendation/controls/mobileLayout/cssRules.js +11 -15
- package/dist/extensions/Blocks/Recommendation/templates/utils.js +16 -16
- package/dist/extensions/Blocks/Recommendation/utils/captureStyleTemplates.js +87 -91
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +271 -192
- package/dist/package.json.js +1 -1
- package/dist/src/extensions/Blocks/Checkbox/controls/blockBackground/index.d.ts +1 -0
- package/dist/src/extensions/Blocks/CouponBlock/controls/index.d.ts +8 -0
- package/dist/src/extensions/Blocks/Items/controls/index.d.ts +40 -0
- package/dist/src/extensions/Blocks/RadioButton/controls/blockBackground/index.d.ts +1 -0
- package/dist/src/extensions/Blocks/Recommendation/block.d.ts +0 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/blockBackground/index.d.ts +1 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/button/index.d.ts +11 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/customAttribute/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/image/index.d.ts +2 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/name/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/oldPrice/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscount/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPrice/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/price/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/title/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +2 -5
- package/dist/src/extensions/Blocks/_Boilerplate/controls/blockBackground/index.d.ts +1 -0
- package/dist/src/extensions/Blocks/controlFactories.d.ts +22 -0
- package/dist/static/styles/components/button.css.js +5 -0
- package/package.json +3 -3
- package/dist/src/utils/fluidImageStyle.d.ts +0 -7
- package/dist/utils/fluidImageStyle.js +0 -26
|
@@ -31,13 +31,13 @@ const he = () => {
|
|
|
31
31
|
n = null;
|
|
32
32
|
}), n), D = async (r, s, o, a = [], i = !1) => {
|
|
33
33
|
var y, E, h, C;
|
|
34
|
-
const e = k(), { html: d, css:
|
|
34
|
+
const e = k(), { html: d, css: P } = r, { baseBlocks: g, extensions: R } = await V(), S = ((y = c.value) == null ? void 0 : y.displayConditions) ?? !0, U = ((E = c.value) == null ? void 0 : E.modulesDisabled) ?? !1, I = !!d || (((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1), q = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com";
|
|
35
35
|
w().importCss(), await window.UIEditor.initEditor(
|
|
36
36
|
document.querySelector("#guido-editor"),
|
|
37
37
|
{
|
|
38
38
|
metadata: s,
|
|
39
39
|
html: d,
|
|
40
|
-
css:
|
|
40
|
+
css: P,
|
|
41
41
|
forceRecreate: I,
|
|
42
42
|
locale: "en",
|
|
43
43
|
undoButtonSelector: "#guido__undo-button",
|
|
@@ -60,6 +60,7 @@ const he = () => {
|
|
|
60
60
|
keepModuleStylesEnabled: !0,
|
|
61
61
|
displayTitle: !1,
|
|
62
62
|
displayUTM: !1,
|
|
63
|
+
copyPasteEnabled: !1,
|
|
63
64
|
selectElementAfterDrop: !0,
|
|
64
65
|
sameFontSizeForOutlook: !0,
|
|
65
66
|
allowedScriptSourceDomains: q,
|
|
@@ -120,7 +121,7 @@ const he = () => {
|
|
|
120
121
|
".in-modal-v2-wrapper",
|
|
121
122
|
".in-toasts-wrapper"
|
|
122
123
|
],
|
|
123
|
-
extensions:
|
|
124
|
+
extensions: R,
|
|
124
125
|
localePatch: J
|
|
125
126
|
}
|
|
126
127
|
);
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { useConfig as
|
|
2
|
-
import { useRecommendation as
|
|
3
|
-
import { MOBILE_ROW_SELECTOR as
|
|
4
|
-
import { useRecommendationExtensionStore as
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
function D(t, r, e, o, c = "") {
|
|
1
|
+
import { useConfig as g } from "../../../composables/useConfig.js";
|
|
2
|
+
import { useRecommendation as O } from "../../../composables/useRecommendation.js";
|
|
3
|
+
import { MOBILE_ROW_SELECTOR as q, MOBILE_CONTAINER_SELECTOR as M, CSS_CLASS_RECO_BUTTON as B } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
|
|
4
|
+
import { useRecommendationExtensionStore as N } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
|
|
5
|
+
import { isIgnoredRecommendationBlock as T } from "./recommendationIgnoreUtils.js";
|
|
6
|
+
function L(t, r, e, o, c = "") {
|
|
8
7
|
const i = `{{${c}${t}_${r}_${e}}}`, n = `{{${c}${t}_${r}_currency}}`;
|
|
9
8
|
return o === "before" ? `${n} ${i}` : `${i} ${n}`;
|
|
10
9
|
}
|
|
@@ -14,13 +13,13 @@ function _(t) {
|
|
|
14
13
|
[r] = r.children;
|
|
15
14
|
return r;
|
|
16
15
|
}
|
|
17
|
-
function
|
|
16
|
+
function A(t, r, e, o, c, i) {
|
|
18
17
|
switch (r) {
|
|
19
18
|
case "productImage": {
|
|
20
19
|
const n = t.querySelector("img");
|
|
21
20
|
n && (n.setAttribute("src", `{{${i}${e}_${o}_image_url}}`), n.setAttribute("alt", `{{${i}${e}_${o}_name}}`));
|
|
22
21
|
const s = t.querySelector("a");
|
|
23
|
-
s && (s.setAttribute("href", `{{${i}${e}_${o}_url}}`), s.classList.add(
|
|
22
|
+
s && (s.setAttribute("href", `{{${i}${e}_${o}_url}}`), s.classList.add(B));
|
|
24
23
|
break;
|
|
25
24
|
}
|
|
26
25
|
case "productName": {
|
|
@@ -34,7 +33,7 @@ function E(t, r, e, o, c, i) {
|
|
|
34
33
|
case "productPrice":
|
|
35
34
|
case "productOldPrice": {
|
|
36
35
|
const n = (l, d) => {
|
|
37
|
-
l && (_(l).textContent =
|
|
36
|
+
l && (_(l).textContent = L(
|
|
38
37
|
e,
|
|
39
38
|
o,
|
|
40
39
|
d,
|
|
@@ -78,24 +77,24 @@ function E(t, r, e, o, c, i) {
|
|
|
78
77
|
}
|
|
79
78
|
}
|
|
80
79
|
}
|
|
81
|
-
const
|
|
80
|
+
const P = "name";
|
|
82
81
|
function b(t, r, e, o) {
|
|
83
|
-
const c = `${o}${r}_${e}_${
|
|
82
|
+
const c = `${o}${r}_${e}_${P}`;
|
|
84
83
|
return {
|
|
85
84
|
open: t.createComment(`{% if ${c} and ${c} != "" %}`),
|
|
86
85
|
close: t.createComment("{% endif %}")
|
|
87
86
|
};
|
|
88
87
|
}
|
|
89
|
-
function
|
|
88
|
+
function R(t, r, e) {
|
|
90
89
|
return b(t, r, 0, e);
|
|
91
90
|
}
|
|
92
|
-
function
|
|
91
|
+
function D(t, r, e, o) {
|
|
93
92
|
if (!t.innerHTML.includes("{{"))
|
|
94
93
|
return;
|
|
95
94
|
const { open: c, close: i } = b(t.ownerDocument, r, e, o);
|
|
96
95
|
t.insertBefore(c, t.firstChild), t.appendChild(i);
|
|
97
96
|
}
|
|
98
|
-
function
|
|
97
|
+
function w(t, r, e, o) {
|
|
99
98
|
var n, s;
|
|
100
99
|
if (!t.innerHTML.includes("{{"))
|
|
101
100
|
return;
|
|
@@ -107,36 +106,36 @@ function W(t, r, e, o) {
|
|
|
107
106
|
i.querySelectorAll("[data-attribute-type]").forEach((a) => {
|
|
108
107
|
const u = a.getAttribute("data-attribute-type") || "", l = a.querySelectorAll(".attribute-cell");
|
|
109
108
|
l.length > 0 ? l.forEach((d) => {
|
|
110
|
-
|
|
111
|
-
}) :
|
|
112
|
-
}),
|
|
109
|
+
A(d, u, r, n, e, o);
|
|
110
|
+
}) : A(a, u, r, n, e, o);
|
|
111
|
+
}), w(i, r, n, o);
|
|
113
112
|
});
|
|
114
113
|
}
|
|
115
|
-
function
|
|
114
|
+
function v(t, r, e, o) {
|
|
116
115
|
const c = t.querySelectorAll(".recommendation-product-row");
|
|
117
116
|
if (!c.length)
|
|
118
117
|
return;
|
|
119
118
|
const [i] = c, n = i.querySelector("[data-attribute-type]"), s = n ? n.querySelectorAll(".attribute-cell").length : 1;
|
|
120
119
|
c.forEach((a, u) => {
|
|
121
120
|
a.querySelectorAll("[data-attribute-type]").forEach((d) => {
|
|
122
|
-
const
|
|
123
|
-
d.querySelectorAll(".attribute-cell").forEach((
|
|
124
|
-
const
|
|
125
|
-
|
|
121
|
+
const p = d.getAttribute("data-attribute-type") || "";
|
|
122
|
+
d.querySelectorAll(".attribute-cell").forEach((f, m) => {
|
|
123
|
+
const h = u * s + m;
|
|
124
|
+
A(f, p, r, h, e, o), D(f, r, h, o);
|
|
126
125
|
});
|
|
127
126
|
});
|
|
128
127
|
});
|
|
129
128
|
}
|
|
130
|
-
function
|
|
129
|
+
function H(t, r, e, o) {
|
|
131
130
|
t.querySelectorAll(".ins-recommendation-product-container").forEach((i) => {
|
|
132
|
-
|
|
131
|
+
v(i, r, e, o);
|
|
133
132
|
});
|
|
134
133
|
}
|
|
135
|
-
function
|
|
134
|
+
function F(t, r, e) {
|
|
136
135
|
const o = t.getAttribute("data-layout") || "grid", c = t.getAttribute("currency-alignment") || "after";
|
|
137
|
-
o === "list" ? W(t, r, c, e) :
|
|
136
|
+
o === "list" ? W(t, r, c, e) : H(t, r, c, e);
|
|
138
137
|
}
|
|
139
|
-
function
|
|
138
|
+
function y(t, r, e) {
|
|
140
139
|
const o = new RegExp(`${r}\\s*:\\s*(\\d+)\\s*px`, "i"), c = t.match(o);
|
|
141
140
|
return c ? parseInt(c[1]) : e;
|
|
142
141
|
}
|
|
@@ -151,7 +150,7 @@ function C(t) {
|
|
|
151
150
|
const e = (t.getAttribute("style") || "").match(/(?:^|[;\s])width\s*:\s*(\d+(?:\.\d+)?(?:px|%))/i);
|
|
152
151
|
return e && $(e[1]) ? e[1] : null;
|
|
153
152
|
}
|
|
154
|
-
function
|
|
153
|
+
function G(t, r) {
|
|
155
154
|
let e = t.parentElement;
|
|
156
155
|
for (; e && e !== r; ) {
|
|
157
156
|
if (e.tagName === "TD" && C(e))
|
|
@@ -160,74 +159,60 @@ function V(t, r) {
|
|
|
160
159
|
}
|
|
161
160
|
return null;
|
|
162
161
|
}
|
|
163
|
-
function
|
|
164
|
-
const r =
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
);
|
|
168
|
-
Object.entries(r).forEach(([e, o]) => t.style.setProperty(e, o));
|
|
169
|
-
}
|
|
170
|
-
function X(t) {
|
|
171
|
-
const r = t.getAttribute("style") || "", e = S(r, "width", 600), o = S(r, "padding", 0) * 2, c = Math.max(0, e - o);
|
|
172
|
-
t.querySelectorAll("img.adapt-img").forEach((i) => {
|
|
173
|
-
if (i.hasAttribute("width") || c === 0) {
|
|
174
|
-
A(i);
|
|
162
|
+
function V(t) {
|
|
163
|
+
const r = t.getAttribute("style") || "", e = y(r, "width", 600), o = y(r, "padding", 0) * 2, c = Math.max(0, e - o);
|
|
164
|
+
c !== 0 && t.querySelectorAll("img.adapt-img").forEach((i) => {
|
|
165
|
+
if (i.hasAttribute("width"))
|
|
175
166
|
return;
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
if (!n) {
|
|
179
|
-
A(i);
|
|
167
|
+
const n = G(i, t);
|
|
168
|
+
if (!n)
|
|
180
169
|
return;
|
|
170
|
+
const s = C(n), a = y(n.getAttribute("style") || "", "padding", 0) * 2, u = s.endsWith("%") ? Math.floor(c * parseFloat(s) / 100) : parseInt(s), l = Math.max(1, u - a);
|
|
171
|
+
i.setAttribute("width", String(l));
|
|
172
|
+
const d = i.getAttribute("style") || "";
|
|
173
|
+
if (!/\bwidth\s*:\s*\d/i.test(d)) {
|
|
174
|
+
const p = d && !d.trim().endsWith(";") ? "; " : "";
|
|
175
|
+
i.setAttribute("style", `${d}${p}width: ${l}px`);
|
|
181
176
|
}
|
|
182
|
-
const s = C(n), a = S(n.getAttribute("style") || "", "padding", 0) * 2, u = s.endsWith("%") ? Math.floor(c * parseFloat(s) / 100) : parseInt(s), l = Math.max(1, u - a);
|
|
183
|
-
i.setAttribute("width", String(l)), A(i);
|
|
184
177
|
});
|
|
185
178
|
}
|
|
186
|
-
const
|
|
187
|
-
function
|
|
188
|
-
|
|
189
|
-
if (!e || o || !t.head)
|
|
190
|
-
return;
|
|
191
|
-
const c = t.createElement("style");
|
|
192
|
-
c.setAttribute("type", "text/css"), c.textContent = T, t.head.appendChild(c);
|
|
193
|
-
}
|
|
194
|
-
const g = "MSO_MOBILE_HIDE_START", Y = "MSO_MOBILE_HIDE_END";
|
|
195
|
-
function k(t, r) {
|
|
196
|
-
t.querySelectorAll(L).forEach((e) => {
|
|
179
|
+
const E = "MSO_MOBILE_HIDE_START", U = "MSO_MOBILE_HIDE_END";
|
|
180
|
+
function X(t, r) {
|
|
181
|
+
t.querySelectorAll(q).forEach((e) => {
|
|
197
182
|
var i, n;
|
|
198
183
|
const o = e.querySelector(M);
|
|
199
184
|
if (!o || o.children.length === 0)
|
|
200
185
|
return;
|
|
201
186
|
const c = e.previousSibling;
|
|
202
|
-
(c == null ? void 0 : c.nodeType) === Node.COMMENT_NODE && c.data ===
|
|
187
|
+
(c == null ? void 0 : c.nodeType) === Node.COMMENT_NODE && c.data === E || ((i = e.parentNode) == null || i.insertBefore(r.createComment(E), e), (n = e.parentNode) == null || n.insertBefore(r.createComment(U), e.nextSibling));
|
|
203
188
|
});
|
|
204
189
|
}
|
|
205
|
-
function
|
|
190
|
+
function j(t, r) {
|
|
206
191
|
const e = t.match(/<!DOCTYPE[^>]*>/i);
|
|
207
192
|
return (e ? `${e[0]}
|
|
208
193
|
` : "") + r.documentElement.outerHTML;
|
|
209
194
|
}
|
|
210
|
-
function
|
|
195
|
+
function Q(t) {
|
|
211
196
|
const r = t.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(r, "text/html"), o = e.querySelectorAll(".recommendation-block-v2");
|
|
212
197
|
if (!o.length)
|
|
213
198
|
return t;
|
|
214
|
-
const { buildCampaignUrl: c } =
|
|
199
|
+
const { buildCampaignUrl: c } = O(), i = N();
|
|
215
200
|
i.recommendationCampaignUrls = {};
|
|
216
|
-
const { isFeatureEnabled: n } =
|
|
201
|
+
const { isFeatureEnabled: n } = g(), s = n("liquidSyntax") ? "reco_" : "";
|
|
217
202
|
return o.forEach((u) => {
|
|
218
|
-
var d,
|
|
203
|
+
var d, p, S, f;
|
|
219
204
|
const l = u.getAttribute("recommendation-id");
|
|
220
205
|
if (l) {
|
|
221
|
-
if ((d = u.parentNode) == null || d.insertBefore(e.createComment("REC_START"), u), (
|
|
222
|
-
|
|
223
|
-
const { open: m, close:
|
|
224
|
-
(
|
|
206
|
+
if ((d = u.parentNode) == null || d.insertBefore(e.createComment("REC_START"), u), (p = u.parentNode) == null || p.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), c(l), X(u, e), !T(u)) {
|
|
207
|
+
F(u, l, s);
|
|
208
|
+
const { open: m, close: h } = R(e, l, s);
|
|
209
|
+
(S = u.parentNode) == null || S.insertBefore(m, u), (f = u.parentNode) == null || f.insertBefore(h, u.nextSibling);
|
|
225
210
|
}
|
|
226
|
-
|
|
211
|
+
V(u);
|
|
227
212
|
}
|
|
228
|
-
}),
|
|
213
|
+
}), j(r, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}");
|
|
229
214
|
}
|
|
230
215
|
export {
|
|
231
|
-
|
|
232
|
-
|
|
216
|
+
L as formatPriceVariable,
|
|
217
|
+
Q as prepareRecommendationBlocks
|
|
233
218
|
};
|
|
@@ -1,40 +1,39 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
1
|
+
var y = Object.defineProperty;
|
|
2
|
+
var A = (l, c, t) => c in l ? y(l, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[c] = t;
|
|
3
|
+
var h = (l, c, t) => A(l, typeof c != "symbol" ? c + "" : c, t);
|
|
4
4
|
import { useConfig as d } from "../../../composables/useConfig.js";
|
|
5
5
|
import { BlockId as D } from "../../../enums/block.js";
|
|
6
|
-
import { getFluidImageStyleChanges as E } from "../../../utils/fluidImageStyle.js";
|
|
7
6
|
import { getMigrationBannerHtml as C } from "../../../utils/migrationBannerHtml.js";
|
|
8
|
-
import { Block as
|
|
9
|
-
import { CURRENT_CONFIG_VERSION as
|
|
7
|
+
import { Block as E, BlockCompositionType as S, ModificationDescription as p } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
8
|
+
import { CURRENT_CONFIG_VERSION as N, PRE_RRS_CONFIG_VERSION as O } from "./constants/defaultConfig.js";
|
|
10
9
|
import { RECOMMENDATION_ID_ATTR as m } from "./constants/selectors.js";
|
|
11
|
-
import { regenerateMobileProductRows as
|
|
12
|
-
import { ensureMobileCssRulesExist as I, setMobileLayoutOptOut as
|
|
13
|
-
import { RecommendationConfigService as
|
|
14
|
-
import { useRecommendationExtensionStore as
|
|
10
|
+
import { regenerateMobileProductRows as M } from "./controls/main/utils.js";
|
|
11
|
+
import { ensureMobileCssRulesExist as I, setMobileLayoutOptOut as R, hasMobileLayoutOptOut as w } from "./controls/mobileLayout/cssRules.js";
|
|
12
|
+
import { RecommendationConfigService as s } from "./services/configService.js";
|
|
13
|
+
import { useRecommendationExtensionStore as g } from "./store/recommendation.js";
|
|
15
14
|
import { getDefaultTemplate as T } from "./templates/grid/template.js";
|
|
16
15
|
import { useRecommendationBlockWarning as v } from "./useRecommendationBlockWarning.js";
|
|
17
|
-
const
|
|
16
|
+
const k = D.Recommendation, u = "recommendation-block-v2", B = "hide-price";
|
|
18
17
|
let b = !1;
|
|
19
|
-
class
|
|
18
|
+
class j extends E {
|
|
20
19
|
constructor() {
|
|
21
20
|
super();
|
|
22
21
|
/**
|
|
23
22
|
* Stores the ID generated in getTemplate() so onCreated() can reuse it.
|
|
24
23
|
* This avoids generating a new (different) ID in onCreated().
|
|
25
24
|
*/
|
|
26
|
-
|
|
25
|
+
h(this, "_pendingBlockId", null);
|
|
27
26
|
/** Ids already reset under their new name, so the deferred pass skips their stale snapshot. */
|
|
28
|
-
|
|
27
|
+
h(this, "_resetSourceIds", /* @__PURE__ */ new Set());
|
|
29
28
|
}
|
|
30
29
|
getId() {
|
|
31
|
-
return
|
|
30
|
+
return k;
|
|
32
31
|
}
|
|
33
32
|
getIcon() {
|
|
34
33
|
return "recommendation-icon";
|
|
35
34
|
}
|
|
36
35
|
getBlockCompositionType() {
|
|
37
|
-
return
|
|
36
|
+
return S.CONTAINER;
|
|
38
37
|
}
|
|
39
38
|
getName() {
|
|
40
39
|
return this.api.translate("Recommendation Block");
|
|
@@ -46,7 +45,7 @@ class Q extends S {
|
|
|
46
45
|
}
|
|
47
46
|
getSettingsPanelTitleHtml() {
|
|
48
47
|
return C(
|
|
49
|
-
|
|
48
|
+
k,
|
|
50
49
|
this.api.translate("Recommendation Block"),
|
|
51
50
|
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.")
|
|
52
51
|
);
|
|
@@ -92,28 +91,28 @@ class Q extends S {
|
|
|
92
91
|
}
|
|
93
92
|
const i = this._pendingBlockId ?? this._generateNextId();
|
|
94
93
|
this._pendingBlockId = null, this._assignRecommendationId(t, i);
|
|
95
|
-
const n = d().isFeatureEnabled("reusableRecommendationStrategy"), o = n && !
|
|
94
|
+
const n = d().isFeatureEnabled("reusableRecommendationStrategy"), o = n && !s.hasConfig(t), { config: r, wasFreshDrop: a } = s.initializeConfig(
|
|
96
95
|
this.api,
|
|
97
96
|
t,
|
|
98
97
|
{
|
|
99
98
|
recommendationId: i,
|
|
100
|
-
configVersion: n ?
|
|
99
|
+
configVersion: n ? N : O,
|
|
101
100
|
...o ? { partnerName: d().partnerName.value } : {},
|
|
102
101
|
// An RRS block picks a strategy, not an algorithm, and its algorithm control is
|
|
103
102
|
// hidden. Keeping the `mostPopular` default would bake a most-popular feed URL
|
|
104
103
|
// at save for a block the user never configured.
|
|
105
104
|
...o ? { strategy: "" } : {}
|
|
106
105
|
}
|
|
107
|
-
),
|
|
108
|
-
if (
|
|
106
|
+
), f = g();
|
|
107
|
+
if (f.setCurrentBlock(i), this._stampHidePrice(t, r.priceHideIfSameAsDiscounted), a) {
|
|
109
108
|
I(this.api);
|
|
110
109
|
const _ = this._getBlockElement(t);
|
|
111
|
-
_ && (
|
|
110
|
+
_ && (R(this.api, _, !0), M({
|
|
112
111
|
currentNode: t,
|
|
113
112
|
documentModifier: this.api.getDocumentModifier()
|
|
114
113
|
}));
|
|
115
114
|
}
|
|
116
|
-
|
|
115
|
+
f.patchCurrentBlockConfig({ language: r.language }, { triggerRefetch: !1 }), this._warnIfMultipleBlocks();
|
|
117
116
|
}
|
|
118
117
|
/**
|
|
119
118
|
* Called when the document changes or template is loaded
|
|
@@ -126,24 +125,20 @@ class Q extends S {
|
|
|
126
125
|
if (!(!t || !("getNodeConfig" in t))) {
|
|
127
126
|
if (!this._getRecommendationId(t)) {
|
|
128
127
|
const e = this._generateNextId();
|
|
129
|
-
this._assignRecommendationId(t, e),
|
|
128
|
+
this._assignRecommendationId(t, e), s.hasConfig(t) && s.updateConfig(
|
|
130
129
|
this.api,
|
|
131
130
|
t,
|
|
132
131
|
{ recommendationId: e },
|
|
133
132
|
"Assign recommendation ID to legacy block"
|
|
134
133
|
);
|
|
135
134
|
}
|
|
136
|
-
this._healLingeringDuplicate(t),
|
|
137
|
-
try {
|
|
138
|
-
this._healFluidImages(t);
|
|
139
|
-
} catch {
|
|
140
|
-
}
|
|
135
|
+
this._healLingeringDuplicate(t), s.needsMigration(t) && this._migrateFromLegacy(t), this._healHidePriceAttr(t);
|
|
141
136
|
try {
|
|
142
137
|
b || (I(this.api), b = !0);
|
|
143
|
-
const e =
|
|
138
|
+
const e = s.getConfig(t), i = this._getBlockElement(t);
|
|
144
139
|
if (i) {
|
|
145
140
|
const n = !e.mobileLayoutEnabled;
|
|
146
|
-
|
|
141
|
+
w(i) !== n && R(this.api, i, n);
|
|
147
142
|
}
|
|
148
143
|
} catch {
|
|
149
144
|
}
|
|
@@ -157,7 +152,7 @@ class Q extends S {
|
|
|
157
152
|
*/
|
|
158
153
|
onDelete(t) {
|
|
159
154
|
const e = this._getRecommendationId(t);
|
|
160
|
-
e &&
|
|
155
|
+
e && g().removeBlockState(e);
|
|
161
156
|
}
|
|
162
157
|
/**
|
|
163
158
|
* Warns (dark advisory toaster) when the design holds more than one live
|
|
@@ -205,7 +200,7 @@ class Q extends S {
|
|
|
205
200
|
_scheduleArrivalReset(t) {
|
|
206
201
|
d().isFeatureEnabled("reusableRecommendationStrategy") && setTimeout(() => {
|
|
207
202
|
const e = this._getRecommendationId(t);
|
|
208
|
-
e !== null && e > 0 && !this._resetSourceIds.delete(e) &&
|
|
203
|
+
e !== null && e > 0 && !this._resetSourceIds.delete(e) && g().resetArrivedBlock(e);
|
|
209
204
|
}, 0);
|
|
210
205
|
}
|
|
211
206
|
/**
|
|
@@ -236,9 +231,9 @@ class Q extends S {
|
|
|
236
231
|
if (!o)
|
|
237
232
|
return;
|
|
238
233
|
let r = -1;
|
|
239
|
-
for (let
|
|
240
|
-
if (n[
|
|
241
|
-
r =
|
|
234
|
+
for (let a = 0; a < n.length; a++)
|
|
235
|
+
if (n[a] === o) {
|
|
236
|
+
r = a;
|
|
242
237
|
break;
|
|
243
238
|
}
|
|
244
239
|
if (r <= 0)
|
|
@@ -261,7 +256,7 @@ class Q extends S {
|
|
|
261
256
|
}
|
|
262
257
|
/** Assigns a fresh id to a duplicated block and syncs DOM, node config and store. */
|
|
263
258
|
_handleDuplicate(t, e) {
|
|
264
|
-
const i = this._reassignDuplicateId(t, e), n =
|
|
259
|
+
const i = this._reassignDuplicateId(t, e), n = g();
|
|
265
260
|
n.cloneBlockState(e, i), n.setCurrentBlock(i), d().isFeatureEnabled("reusableRecommendationStrategy") && (this._resetSourceIds.add(e), n.resetArrivedBlock(i)), this._warnIfMultipleBlocks();
|
|
266
261
|
}
|
|
267
262
|
/**
|
|
@@ -277,7 +272,7 @@ class Q extends S {
|
|
|
277
272
|
*/
|
|
278
273
|
_reassignDuplicateId(t, e) {
|
|
279
274
|
const i = this._generateNextId(), n = this._getBlockElement(t);
|
|
280
|
-
return this._assignRecommendationId(t, i), n && this._reassignInstanceClass(n, e, i),
|
|
275
|
+
return this._assignRecommendationId(t, i), n && this._reassignInstanceClass(n, e, i), s.hasConfig(t) && s.updateConfig(
|
|
281
276
|
this.api,
|
|
282
277
|
t,
|
|
283
278
|
{ recommendationId: i },
|
|
@@ -295,7 +290,7 @@ class Q extends S {
|
|
|
295
290
|
if (!("getAttribute" in t))
|
|
296
291
|
return;
|
|
297
292
|
const n = `ins-recommendation-v3-block-${e}`, o = `ins-recommendation-v3-block-${i}`, r = this.api.getDocumentModifier();
|
|
298
|
-
r.modifyHtml(t).removeClass(n).setClass(o), r.apply(new
|
|
293
|
+
r.modifyHtml(t).removeClass(n).setClass(o), r.apply(new p(
|
|
299
294
|
`Reassign recommendation instance class ${n} -> ${o}`
|
|
300
295
|
));
|
|
301
296
|
}
|
|
@@ -310,7 +305,7 @@ class Q extends S {
|
|
|
310
305
|
if (!i)
|
|
311
306
|
return;
|
|
312
307
|
const n = this.api.getDocumentModifier();
|
|
313
|
-
n.modifyHtml(i).setAttribute(m, e.toString()), n.apply(new
|
|
308
|
+
n.modifyHtml(i).setAttribute(m, e.toString()), n.apply(new p(`Assign recommendation ID ${e}`));
|
|
314
309
|
}
|
|
315
310
|
/**
|
|
316
311
|
* Stamps the `hide-price` attribute (read by email-service at send time) on
|
|
@@ -318,7 +313,7 @@ class Q extends S {
|
|
|
318
313
|
*/
|
|
319
314
|
_stampHidePrice(t, e) {
|
|
320
315
|
const i = this._getBlockElement(t);
|
|
321
|
-
i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(
|
|
316
|
+
i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(B, String(e)).apply(new p("Stamp hide-price"));
|
|
322
317
|
}
|
|
323
318
|
/**
|
|
324
319
|
* Stamps `hide-price` from config only when the block lacks the attribute —
|
|
@@ -326,28 +321,11 @@ class Q extends S {
|
|
|
326
321
|
*/
|
|
327
322
|
_healHidePriceAttr(t) {
|
|
328
323
|
const e = this._getBlockElement(t);
|
|
329
|
-
if (!e || !("getAttribute" in e) || e.getAttribute(
|
|
324
|
+
if (!e || !("getAttribute" in e) || e.getAttribute(B) !== null)
|
|
330
325
|
return;
|
|
331
|
-
const { priceHideIfSameAsDiscounted: i } =
|
|
326
|
+
const { priceHideIfSameAsDiscounted: i } = s.getConfig(t);
|
|
332
327
|
this._stampHidePrice(t, i);
|
|
333
328
|
}
|
|
334
|
-
// Writes into the stored template too, which email-service compiles again.
|
|
335
|
-
// Applies only on a real change: an empty apply re-fires onDocumentChanged.
|
|
336
|
-
_healFluidImages(t) {
|
|
337
|
-
const e = this._getBlockElement(t);
|
|
338
|
-
if (!e || !("querySelectorAll" in e))
|
|
339
|
-
return;
|
|
340
|
-
const i = this.api.getDocumentModifier();
|
|
341
|
-
let n = !1;
|
|
342
|
-
e.querySelectorAll("img.adapt-img").forEach((o) => {
|
|
343
|
-
if (!("getStyle" in o) || !("getAttribute" in o))
|
|
344
|
-
return;
|
|
345
|
-
const r = E((s) => o.getStyle(s), o.getAttribute("width"));
|
|
346
|
-
Object.entries(r).forEach(([s, g]) => {
|
|
347
|
-
i.modifyHtml(o).setStyle(s, g), n = !0;
|
|
348
|
-
});
|
|
349
|
-
}), n && i.apply(new h("Make product images fluid"));
|
|
350
|
-
}
|
|
351
329
|
/**
|
|
352
330
|
* Gets the recommendation-id from a block node
|
|
353
331
|
*/
|
|
@@ -376,10 +354,10 @@ class Q extends S {
|
|
|
376
354
|
* Migrate configuration from legacy format
|
|
377
355
|
*/
|
|
378
356
|
_migrateFromLegacy(t) {
|
|
379
|
-
|
|
357
|
+
s.migrateFromDataAttributes(this.api, t);
|
|
380
358
|
}
|
|
381
359
|
}
|
|
382
360
|
export {
|
|
383
|
-
|
|
384
|
-
|
|
361
|
+
k as BLOCK_ID,
|
|
362
|
+
j as RecommendationBlock
|
|
385
363
|
};
|
|
@@ -1,30 +1,26 @@
|
|
|
1
|
-
import { FLUID_IMAGE_MOBILE_RULE as u, FLUID_IMAGE_CLASS as m, FLUID_IMAGE_SELECTOR as p } from "../../../../../utils/fluidImageStyle.js";
|
|
2
1
|
import { ModificationDescription as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
3
|
-
const r = "ins-recommendation-desktop-container", l = "ins-recommendation-mobile-container", i = "ins-recommendation-list-layout", s = "ins-recommendation-no-mobile-layout",
|
|
4
|
-
function
|
|
2
|
+
const r = "ins-recommendation-desktop-container", l = "ins-recommendation-mobile-container", i = "ins-recommendation-list-layout", s = "ins-recommendation-no-mobile-layout", u = `.${l} { display: none; }`, m = `@media only screen and (max-width: 480px) { .${r} { display: none !important; } .${l} { display: table !important; } .${i} .${r} { display: table !important; } .${i} .${l}, .${i} .ins-recommendation-mobile-row { display: none !important; } .${i} .product-image-cell { width: 80px !important; } .${i} .product-image-cell img { max-width: 80px !important; } .${i} .button-cell { width: 80px !important; } .${i} .product-info-cell { padding: 5px 8px !important; } }`, d = `@media only screen and (max-width: 480px) { .${s} .${r} { display: table !important; } .${s} .${l}, .${s} .ins-recommendation-mobile-row { display: none !important; } }`, p = `.${l}`;
|
|
3
|
+
function c(t, e) {
|
|
5
4
|
return !!t.querySelector(e);
|
|
6
5
|
}
|
|
7
|
-
function
|
|
6
|
+
function f(t) {
|
|
8
7
|
return t.querySelectorAll(`*${r}`).length > 0;
|
|
9
8
|
}
|
|
10
|
-
function
|
|
9
|
+
function y(t) {
|
|
11
10
|
return t.querySelectorAll(`*${s}`).length > 0;
|
|
12
11
|
}
|
|
13
|
-
function
|
|
14
|
-
return t.querySelectorAll(`*${m}`).some((e) => "getSelector" in e && typeof e.getSelector == "function" && e.getSelector() === p);
|
|
15
|
-
}
|
|
16
|
-
function I(t) {
|
|
12
|
+
function S(t) {
|
|
17
13
|
const e = t.getDocumentRootCssNode();
|
|
18
14
|
if (!e)
|
|
19
15
|
return;
|
|
20
16
|
const o = t.getDocumentModifier();
|
|
21
17
|
let n = !1;
|
|
22
|
-
|
|
18
|
+
c(e, p) || (o.modifyCss(e).appendRule(u), n = !0), f(e) || (o.modifyCss(e).appendRule(m), n = !0), y(e) || (o.modifyCss(e).appendRule(d), n = !0), n && o.apply(new a("Add mobile layout CSS rules"));
|
|
23
19
|
}
|
|
24
|
-
function
|
|
20
|
+
function C(t) {
|
|
25
21
|
return "hasClass" in t ? t.hasClass(s) : !1;
|
|
26
22
|
}
|
|
27
|
-
function
|
|
23
|
+
function O(t, e, o) {
|
|
28
24
|
const n = t.getDocumentModifier();
|
|
29
25
|
o ? n.modifyHtml(e).setClass(s) : n.modifyHtml(e).removeClass(s), n.apply(
|
|
30
26
|
new a(
|
|
@@ -36,7 +32,7 @@ export {
|
|
|
36
32
|
r as CSS_CLASS_DESKTOP_CONTAINER,
|
|
37
33
|
l as CSS_CLASS_MOBILE_CONTAINER,
|
|
38
34
|
s as CSS_CLASS_NO_MOBILE_LAYOUT,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
S as ensureMobileCssRulesExist,
|
|
36
|
+
C as hasMobileLayoutOptOut,
|
|
37
|
+
O as setMobileLayoutOptOut
|
|
42
38
|
};
|