@useinsider/guido 3.3.0-beta.6d597b3 → 3.3.0-beta.86ea9cd
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/@types/config/schemas.js +1 -1
- package/dist/composables/useResponsivePreview.js +1 -1
- package/dist/extensions/Blocks/Recommendation/block.js +43 -36
- package/dist/extensions/Blocks/Recommendation/services/configService.js +33 -26
- package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +3 -3
- package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +3 -3
- package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +3 -3
- package/dist/node_modules/valibot/dist/index.js +329 -252
- package/dist/src/extensions/Blocks/Recommendation/services/configService.d.ts +11 -3
- package/package.json +3 -30
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ModuleFolderDefaults as S } from "../../enums/defaults.js";
|
|
2
|
-
import { object as o, number as n, optional as e, string as t,
|
|
2
|
+
import { object as o, number as n, optional as e, string as t, pipe as p, picklist as l, minLength as b, custom as h, boolean as a, array as c, record as k, looseObject as y, literal as i, variant as g, union as f, unknown as s } from "../../node_modules/valibot/dist/index.js";
|
|
3
3
|
const d = {
|
|
4
4
|
/** Promotional/marketing emails */
|
|
5
5
|
PROMOTIONAL: 1,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useDebounce as p } from "./useDebounce.js";
|
|
2
|
-
import { ResponsivePreviewRegex as c,
|
|
2
|
+
import { ResponsivePreviewRegex as c, ResponsivePreviewSelectors as v, ResponsivePreviewConfig as a } from "../enums/preview.js";
|
|
3
3
|
let i = null, l = null;
|
|
4
4
|
const { debounce: y } = p(), h = (t) => {
|
|
5
5
|
if (!t)
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { BlockId as
|
|
5
|
-
import { getMigrationBannerHtml as
|
|
6
|
-
import { Block as
|
|
7
|
-
import { regenerateMobileProductRows as
|
|
8
|
-
import { ensureMobileCssRulesExist as
|
|
9
|
-
import { RecommendationConfigService as
|
|
10
|
-
import { useRecommendationExtensionStore as
|
|
1
|
+
var k = Object.defineProperty;
|
|
2
|
+
var _ = (r, n, t) => n in r ? k(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
|
|
3
|
+
var g = (r, n, t) => _(r, typeof n != "symbol" ? n + "" : n, t);
|
|
4
|
+
import { BlockId as B } from "../../../enums/block.js";
|
|
5
|
+
import { getMigrationBannerHtml as b } from "../../../utils/migrationBannerHtml.js";
|
|
6
|
+
import { Block as R, BlockCompositionType as y, ModificationDescription as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
7
|
+
import { regenerateMobileProductRows as A } from "./controls/main/utils.js";
|
|
8
|
+
import { ensureMobileCssRulesExist as d, setMobileLayoutOptOut as p, hasMobileLayoutOptOut as D } from "./controls/mobileLayout/cssRules.js";
|
|
9
|
+
import { RecommendationConfigService as s } from "./services/configService.js";
|
|
10
|
+
import { useRecommendationExtensionStore as f } from "./store/recommendation.js";
|
|
11
11
|
import { getDefaultTemplate as E } from "./templates/grid/template.js";
|
|
12
|
-
const
|
|
13
|
-
let
|
|
14
|
-
class
|
|
12
|
+
const h = B.Recommendation, l = "recommendation-block-v2", m = "recommendation-id";
|
|
13
|
+
let I = !1;
|
|
14
|
+
class v extends R {
|
|
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
|
+
g(this, "_pendingBlockId", null);
|
|
22
22
|
}
|
|
23
23
|
getId() {
|
|
24
|
-
return
|
|
24
|
+
return h;
|
|
25
25
|
}
|
|
26
26
|
getIcon() {
|
|
27
27
|
return "recommendation-icon";
|
|
28
28
|
}
|
|
29
29
|
getBlockCompositionType() {
|
|
30
|
-
return
|
|
30
|
+
return y.CONTAINER;
|
|
31
31
|
}
|
|
32
32
|
getName() {
|
|
33
33
|
return this.api.translate("Recommendation Block");
|
|
@@ -38,8 +38,8 @@ class q extends b {
|
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
40
|
getSettingsPanelTitleHtml() {
|
|
41
|
-
return
|
|
42
|
-
|
|
41
|
+
return b(
|
|
42
|
+
h,
|
|
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
|
);
|
|
@@ -71,13 +71,20 @@ class q extends b {
|
|
|
71
71
|
return;
|
|
72
72
|
const i = this._pendingBlockId ?? this._generateNextId();
|
|
73
73
|
this._pendingBlockId = null, this._assignRecommendationId(t, i);
|
|
74
|
-
const
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
74
|
+
const { config: o, wasFreshDrop: c } = s.initializeConfig(
|
|
75
|
+
this.api,
|
|
76
|
+
t,
|
|
77
|
+
{ recommendationId: i }
|
|
78
|
+
), a = f();
|
|
79
|
+
if (a.setCurrentBlock(i), c) {
|
|
80
|
+
d(this.api);
|
|
81
|
+
const u = this._getBlockElement(t);
|
|
82
|
+
u && (p(this.api, u, !0), A({
|
|
83
|
+
currentNode: t,
|
|
84
|
+
documentModifier: this.api.getDocumentModifier()
|
|
85
|
+
}));
|
|
86
|
+
}
|
|
87
|
+
a.patchCurrentBlockConfig({ language: o.language }, { triggerRefetch: !1 });
|
|
81
88
|
}
|
|
82
89
|
/**
|
|
83
90
|
* Called when the document changes or template is loaded
|
|
@@ -90,20 +97,20 @@ class q extends b {
|
|
|
90
97
|
if (!(!t || !("getNodeConfig" in t))) {
|
|
91
98
|
if (!this._getRecommendationId(t)) {
|
|
92
99
|
const e = this._generateNextId();
|
|
93
|
-
this._assignRecommendationId(t, e),
|
|
100
|
+
this._assignRecommendationId(t, e), s.hasConfig(t) && s.updateConfig(
|
|
94
101
|
this.api,
|
|
95
102
|
t,
|
|
96
103
|
{ recommendationId: e },
|
|
97
104
|
"Assign recommendation ID to legacy block"
|
|
98
105
|
);
|
|
99
106
|
}
|
|
100
|
-
|
|
107
|
+
s.needsMigration(t) && this._migrateFromLegacy(t);
|
|
101
108
|
try {
|
|
102
|
-
|
|
103
|
-
const e =
|
|
109
|
+
I || (d(this.api), I = !0);
|
|
110
|
+
const e = s.getConfig(t), i = this._getBlockElement(t);
|
|
104
111
|
if (i) {
|
|
105
112
|
const o = !e.mobileLayoutEnabled;
|
|
106
|
-
|
|
113
|
+
D(i) !== o && p(this.api, i, o);
|
|
107
114
|
}
|
|
108
115
|
} catch {
|
|
109
116
|
}
|
|
@@ -117,7 +124,7 @@ class q extends b {
|
|
|
117
124
|
*/
|
|
118
125
|
onDelete(t) {
|
|
119
126
|
const e = this._getRecommendationId(t);
|
|
120
|
-
e &&
|
|
127
|
+
e && f().removeBlockState(e);
|
|
121
128
|
}
|
|
122
129
|
/**
|
|
123
130
|
* Generates the next unique recommendation ID by scanning all existing blocks
|
|
@@ -129,7 +136,7 @@ class q extends b {
|
|
|
129
136
|
const e = this.api.getDocumentRoot();
|
|
130
137
|
e && "querySelectorAll" in e && e.querySelectorAll(`.${l}`).forEach((o) => {
|
|
131
138
|
if ("getAttribute" in o) {
|
|
132
|
-
const
|
|
139
|
+
const c = o.getAttribute(m), a = c ? parseInt(c) : 0;
|
|
133
140
|
a > t && (t = a);
|
|
134
141
|
}
|
|
135
142
|
});
|
|
@@ -148,7 +155,7 @@ class q extends b {
|
|
|
148
155
|
if (!i)
|
|
149
156
|
return;
|
|
150
157
|
const o = this.api.getDocumentModifier();
|
|
151
|
-
o.modifyHtml(i).setAttribute(m, e.toString()), o.apply(new
|
|
158
|
+
o.modifyHtml(i).setAttribute(m, e.toString()), o.apply(new C(`Assign recommendation ID ${e}`));
|
|
152
159
|
}
|
|
153
160
|
/**
|
|
154
161
|
* Gets the recommendation-id from a block node
|
|
@@ -178,10 +185,10 @@ class q extends b {
|
|
|
178
185
|
* Migrate configuration from legacy format
|
|
179
186
|
*/
|
|
180
187
|
_migrateFromLegacy(t) {
|
|
181
|
-
|
|
188
|
+
s.migrateFromDataAttributes(this.api, t);
|
|
182
189
|
}
|
|
183
190
|
}
|
|
184
191
|
export {
|
|
185
|
-
|
|
186
|
-
|
|
192
|
+
h as BLOCK_ID,
|
|
193
|
+
v as RecommendationBlock
|
|
187
194
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ModificationDescription as
|
|
2
|
-
import { CURRENT_CONFIG_VERSION as l, DEFAULT_NODE_CONFIG as
|
|
1
|
+
import { ModificationDescription as C } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
|
+
import { CURRENT_CONFIG_VERSION as l, DEFAULT_NODE_CONFIG as c } from "../constants/defaultConfig.js";
|
|
3
3
|
import { setCurrencyAttributes as D } from "../controls/main/utils.js";
|
|
4
4
|
import { hasMinimalConfig as A } from "../types/nodeConfig.js";
|
|
5
5
|
function S(e) {
|
|
@@ -8,7 +8,7 @@ function S(e) {
|
|
|
8
8
|
function N(e) {
|
|
9
9
|
return e === "." || e === "," || e === " " || e === "";
|
|
10
10
|
}
|
|
11
|
-
class
|
|
11
|
+
class M {
|
|
12
12
|
// ========================================================================
|
|
13
13
|
// Read Operations
|
|
14
14
|
// ========================================================================
|
|
@@ -83,7 +83,7 @@ class V {
|
|
|
83
83
|
* @returns The new complete configuration
|
|
84
84
|
*/
|
|
85
85
|
static updateConfig(i, t, o, n) {
|
|
86
|
-
const
|
|
86
|
+
const r = this.getConfig(t), u = this.deepMerge(r, o);
|
|
87
87
|
return this.saveConfig(i, t, u, n), u;
|
|
88
88
|
}
|
|
89
89
|
/**
|
|
@@ -91,21 +91,28 @@ class V {
|
|
|
91
91
|
*
|
|
92
92
|
* Called when a block is first created (dropped into template).
|
|
93
93
|
* Can optionally merge in partial config from migration.
|
|
94
|
+
*
|
|
95
|
+
* The `wasFreshDrop` flag distinguishes a brand-new drop (no prior config)
|
|
96
|
+
* from a clone (Stripo replays the source's setNodeConfig payload before
|
|
97
|
+
* onCreated fires). Callers use this to skip side-effects already inherited
|
|
98
|
+
* from the source.
|
|
94
99
|
* @example
|
|
95
100
|
* // In Block.onCreated lifecycle
|
|
96
|
-
* RecommendationConfigService.initializeConfig(this.api, node);
|
|
101
|
+
* const { config, wasFreshDrop } = RecommendationConfigService.initializeConfig(this.api, node);
|
|
97
102
|
* @param api - Stripo extension API with document modifier
|
|
98
103
|
* @param node - The immutable HTML node to initialize
|
|
99
104
|
* @param partialConfig - Optional partial config to merge with defaults
|
|
100
|
-
* @returns The initialized configuration
|
|
105
|
+
* @returns The initialized configuration and whether the node was a fresh drop
|
|
101
106
|
*/
|
|
102
107
|
static initializeConfig(i, t, o) {
|
|
108
|
+
if (this.hasConfig(t))
|
|
109
|
+
return { config: o ? this.updateConfig(i, t, o, "Initialize recommendation block") : this.getConfig(t), wasFreshDrop: !1 };
|
|
103
110
|
const n = o ? this.mergeWithDefaults(o) : this.cloneDefaults();
|
|
104
111
|
return this.saveConfig(i, t, n, "Initialize recommendation block"), D({
|
|
105
112
|
currentNode: t,
|
|
106
113
|
documentModifier: i.getDocumentModifier(),
|
|
107
114
|
currency: n.currency
|
|
108
|
-
}), n;
|
|
115
|
+
}), { config: n, wasFreshDrop: !0 };
|
|
109
116
|
}
|
|
110
117
|
/**
|
|
111
118
|
* Save complete configuration to a node
|
|
@@ -118,9 +125,9 @@ class V {
|
|
|
118
125
|
*/
|
|
119
126
|
static saveConfig(i, t, o, n) {
|
|
120
127
|
try {
|
|
121
|
-
i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new
|
|
122
|
-
} catch (
|
|
123
|
-
console.warn("[RecommendationConfigService] Failed to save config:",
|
|
128
|
+
i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new C(n));
|
|
129
|
+
} catch (r) {
|
|
130
|
+
console.warn("[RecommendationConfigService] Failed to save config:", r);
|
|
124
131
|
}
|
|
125
132
|
}
|
|
126
133
|
// ========================================================================
|
|
@@ -157,29 +164,29 @@ class V {
|
|
|
157
164
|
s && typeof s == "object" && (Object.assign(o, s), o.configVersion = l);
|
|
158
165
|
} catch {
|
|
159
166
|
}
|
|
160
|
-
const
|
|
161
|
-
|
|
167
|
+
const r = t.getAttribute("data-layout");
|
|
168
|
+
r === "list" || r === "horizontal" ? o.layout = "list" : (r === "grid" || r === "vertical") && (o.layout = "grid");
|
|
162
169
|
const u = t.getAttribute("data-card-composition");
|
|
163
170
|
u && (o.composition = u.split(",").filter(Boolean));
|
|
164
|
-
const
|
|
165
|
-
|
|
166
|
-
const
|
|
167
|
-
if (
|
|
171
|
+
const b = t.getAttribute("data-column-spacing");
|
|
172
|
+
b && (o.columnSpacing = parseInt(b) || c.columnSpacing);
|
|
173
|
+
const p = t.getAttribute("data-row-spacing");
|
|
174
|
+
if (p && (o.rowSpacing = parseInt(p) || c.rowSpacing), !o.currency) {
|
|
168
175
|
const s = t.getAttribute("currency"), y = t.getAttribute("currency-symbol"), d = t.getAttribute("currency-alignment"), f = t.getAttribute("currency-thousand-separator"), g = t.getAttribute("currency-decimal-separator"), m = t.getAttribute("currency-decimal-count");
|
|
169
176
|
if (s || y || d || f || g || m) {
|
|
170
|
-
const a =
|
|
177
|
+
const a = c.currency, h = m ? parseInt(m) : NaN;
|
|
171
178
|
o.currency = {
|
|
172
179
|
code: s ?? a.code,
|
|
173
180
|
symbol: y ?? a.symbol,
|
|
174
181
|
alignment: d === "0" ? "before" : "after",
|
|
175
|
-
decimalCount: Number.isFinite(
|
|
182
|
+
decimalCount: Number.isFinite(h) ? h : a.decimalCount,
|
|
176
183
|
decimalSeparator: S(g) ? g : a.decimalSeparator,
|
|
177
184
|
thousandSeparator: N(f) ? f : a.thousandSeparator
|
|
178
185
|
};
|
|
179
186
|
}
|
|
180
187
|
}
|
|
181
188
|
}
|
|
182
|
-
return this.initializeConfig(i, t, o);
|
|
189
|
+
return this.initializeConfig(i, t, o).config;
|
|
183
190
|
}
|
|
184
191
|
/**
|
|
185
192
|
* Check if configuration needs migration
|
|
@@ -197,12 +204,12 @@ class V {
|
|
|
197
204
|
*/
|
|
198
205
|
static cloneDefaults() {
|
|
199
206
|
return {
|
|
200
|
-
...
|
|
201
|
-
currency: { ...
|
|
202
|
-
omnibusPrice: { ...
|
|
203
|
-
omnibusDiscount: { ...
|
|
204
|
-
composition: [...
|
|
205
|
-
visibility: { ...
|
|
207
|
+
...c,
|
|
208
|
+
currency: { ...c.currency },
|
|
209
|
+
omnibusPrice: { ...c.omnibusPrice },
|
|
210
|
+
omnibusDiscount: { ...c.omnibusDiscount },
|
|
211
|
+
composition: [...c.composition],
|
|
212
|
+
visibility: { ...c.visibility },
|
|
206
213
|
filters: [],
|
|
207
214
|
productIds: [],
|
|
208
215
|
recommendationId: 0
|
|
@@ -272,5 +279,5 @@ class V {
|
|
|
272
279
|
}
|
|
273
280
|
}
|
|
274
281
|
export {
|
|
275
|
-
|
|
282
|
+
M as RecommendationConfigService
|
|
276
283
|
};
|
|
@@ -2,7 +2,7 @@ import { RecommendationBlockId as s } from "../../constants/blockIds.js";
|
|
|
2
2
|
import { ATTR_PRODUCT_ATTR as b, ATTR_PRODUCT_BUTTON as u, ATTR_PRODUCT_OMNIBUS_DISCOUNT as m, ATTR_PRODUCT_OMNIBUS_PRICE as h, ATTR_PRODUCT_OLD_PRICE as y, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as f, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
|
|
3
3
|
import { useRecommendationExtensionStore as _ } from "../../store/recommendation.js";
|
|
4
4
|
import { formatPrice as $ } from "../../utils/priceFormatter.js";
|
|
5
|
-
import {
|
|
5
|
+
import { sanitizeImageUrl as C, CUSTOM_CELL_HTML as R } from "../utils.js";
|
|
6
6
|
const a = "0 5px", l = "attribute-cell";
|
|
7
7
|
function p() {
|
|
8
8
|
const t = _(), { currencySettings: e } = t.recommendationConfigs;
|
|
@@ -40,7 +40,7 @@ const I = {
|
|
|
40
40
|
esd-extension-block-id="${s.IMAGE}">
|
|
41
41
|
<a target="_blank" href="${t.url}">
|
|
42
42
|
<img
|
|
43
|
-
src="${
|
|
43
|
+
src="${C(t.image_url)}"
|
|
44
44
|
alt="${t.name}"
|
|
45
45
|
style="display: block; max-width: 100%; height: auto;"
|
|
46
46
|
class="adapt-img">
|
|
@@ -236,7 +236,7 @@ const I = {
|
|
|
236
236
|
* @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
|
|
237
237
|
* @param content - Display content for the cell
|
|
238
238
|
*/
|
|
239
|
-
[
|
|
239
|
+
[R]: (t, e) => `
|
|
240
240
|
<td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
|
|
241
241
|
<table
|
|
242
242
|
class="product-card-segment"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DEFAULT_PRODUCTS_PER_ROW as L } from "../../constants/layout.js";
|
|
2
|
-
import { getDefaultProducts as E,
|
|
2
|
+
import { getDefaultProducts as E, createBlockTemplate as I, DEFAULTS as _, DEFAULT_CARD_COMPOSITION as S, spacer as b, buildElementRenderer as A, DEFAULT_CARD_VISIBILITY as f } from "../utils.js";
|
|
3
3
|
import { ATTRIBUTE_CELL_CLASS as w, DEFAULT_CELL_PADDING as D, gridElementRenderer as C } from "./elementRenderer.js";
|
|
4
4
|
const O = `
|
|
5
5
|
<tr class="recommendation-product-row">
|
|
@@ -53,8 +53,8 @@ function h(t, e, o, r = {}) {
|
|
|
53
53
|
return U(t, e, C, o, r);
|
|
54
54
|
}
|
|
55
55
|
function F(t) {
|
|
56
|
-
const e = t ? `ins-recommendation-v3-block-${t}` : void 0, o =
|
|
57
|
-
return o.replace("{-{-TITLE-}-}",
|
|
56
|
+
const e = t ? `ins-recommendation-v3-block-${t}` : void 0, o = I("grid", e), r = E(), n = h(r, L);
|
|
57
|
+
return o.replace("{-{-TITLE-}-}", _.TITLE).replace("{-{-PRODUCT_ROWS-}-}", n).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", "");
|
|
58
58
|
}
|
|
59
59
|
export {
|
|
60
60
|
F as getDefaultTemplate,
|
|
@@ -2,7 +2,7 @@ import { RecommendationBlockId as o } from "../../constants/blockIds.js";
|
|
|
2
2
|
import { ATTR_PRODUCT_ATTR as m, ATTR_PRODUCT_BUTTON as c, ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as g, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as x } from "../../constants/selectors.js";
|
|
3
3
|
import { useRecommendationExtensionStore as _ } from "../../store/recommendation.js";
|
|
4
4
|
import { formatPrice as R } from "../../utils/priceFormatter.js";
|
|
5
|
-
import {
|
|
5
|
+
import { sanitizeImageUrl as y, CUSTOM_CELL_HTML as C } from "../utils.js";
|
|
6
6
|
function p() {
|
|
7
7
|
const t = _(), { currencySettings: e } = t.recommendationConfigs;
|
|
8
8
|
return {
|
|
@@ -37,7 +37,7 @@ const U = {
|
|
|
37
37
|
valign="middle">
|
|
38
38
|
<a target="_blank" href="${t.url}">
|
|
39
39
|
<img
|
|
40
|
-
src="${
|
|
40
|
+
src="${y(t.image_url)}"
|
|
41
41
|
alt="${t.name}"
|
|
42
42
|
style="display: block; max-width: 100%; height: auto;"
|
|
43
43
|
class="adapt-img product-image">
|
|
@@ -179,7 +179,7 @@ const U = {
|
|
|
179
179
|
* @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
|
|
180
180
|
* @param content - Display content for the cell
|
|
181
181
|
*/
|
|
182
|
-
[
|
|
182
|
+
[C]: (t, e) => `
|
|
183
183
|
<tr>
|
|
184
184
|
<td
|
|
185
185
|
${m}="${t}"
|