pb-sxp-ui 1.7.0 → 1.7.1
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/index.cjs +33 -93
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -0
- package/dist/index.js +33 -93
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +33 -93
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/VideoWidget/index.js +5 -8
- package/es/core/components/SxpPageRender/WaterFall/index.js +1 -6
- package/es/core/components/SxpPageRender/index.d.ts +0 -1
- package/es/core/components/SxpPageRender/index.js +11 -7
- package/es/core/context/SxpDataSourceProvider.d.ts +4 -2
- package/es/core/context/SxpDataSourceProvider.js +11 -52
- package/es/materials/sxp/popup/CommodityDetail/index.js +1 -6
- package/es/materials/sxp/popup/CommodityDetailDiro/index.js +1 -6
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -6
- package/es/materials/sxp/popup/CommodityList/index.js +2 -7
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +5 -8
- package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -6
- package/lib/core/components/SxpPageRender/index.d.ts +0 -1
- package/lib/core/components/SxpPageRender/index.js +11 -7
- package/lib/core/context/SxpDataSourceProvider.d.ts +4 -2
- package/lib/core/context/SxpDataSourceProvider.js +11 -52
- package/lib/materials/sxp/popup/CommodityDetail/index.js +1 -6
- package/lib/materials/sxp/popup/CommodityDetailDiro/index.js +1 -6
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -6
- package/lib/materials/sxp/popup/CommodityList/index.js +1 -6
- package/package.json +1 -1
@@ -240,18 +240,17 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
240
240
|
};
|
241
241
|
}, [isActive]);
|
242
242
|
useEffect(() => {
|
243
|
-
var _a, _b
|
243
|
+
var _a, _b;
|
244
244
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
245
245
|
return;
|
246
246
|
if (isActive) {
|
247
247
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
248
|
-
eventName: 'ViewContent'
|
249
|
-
product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
|
248
|
+
eventName: 'ViewContent'
|
250
249
|
});
|
251
|
-
(
|
250
|
+
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
252
251
|
}
|
253
252
|
else {
|
254
|
-
(
|
253
|
+
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
|
255
254
|
}
|
256
255
|
}, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
257
256
|
useEffect(() => {
|
@@ -270,11 +269,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
270
269
|
if (!isActive)
|
271
270
|
return;
|
272
271
|
const onShow = () => {
|
273
|
-
var _a, _b;
|
274
272
|
handleClickVideo('start')();
|
275
273
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
276
|
-
eventName: 'ViewContent'
|
277
|
-
product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
|
274
|
+
eventName: 'ViewContent'
|
278
275
|
});
|
279
276
|
};
|
280
277
|
const onHide = handleClickVideo('pause');
|
@@ -9,16 +9,11 @@ import { useSxpDataSource } from '../../../../core/hooks';
|
|
9
9
|
import { useEventReport } from '../../../../core/hooks/useEventReport';
|
10
10
|
const WaterFall = (props) => {
|
11
11
|
var _a;
|
12
|
-
const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag
|
12
|
+
const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag } = useSxpDataSource();
|
13
13
|
const { backMainFeed } = useEventReport();
|
14
14
|
const ref = useRef(null);
|
15
15
|
const modalEleRef = useRef(null);
|
16
16
|
const [viewTime, setViewTime] = useState();
|
17
|
-
useEffect(() => {
|
18
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19
|
-
eventName: 'PageView'
|
20
|
-
});
|
21
|
-
}, []);
|
22
17
|
useEffect(() => {
|
23
18
|
const parentNode = document.getElementById('sxp-render');
|
24
19
|
const node = document.getElementById('water-fall');
|
@@ -48,6 +48,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
48
48
|
if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
|
49
49
|
const now = new Date();
|
50
50
|
viewTime.current = now;
|
51
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
52
|
+
eventName: 'PageView'
|
53
|
+
});
|
51
54
|
}
|
52
55
|
}, [data === null || data === void 0 ? void 0 : data.length]);
|
53
56
|
const handleH5EnterLink = useCallback(() => {
|
@@ -56,8 +59,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
56
59
|
if (data.length > 0) {
|
57
60
|
const now = new Date();
|
58
61
|
viewTime.current = now;
|
62
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
63
|
+
eventName: 'PageView'
|
64
|
+
});
|
59
65
|
}
|
60
|
-
}, [data.length, h5EnterLink]);
|
66
|
+
}, [data.length, bffFbReport, h5EnterLink]);
|
61
67
|
useEffect(() => {
|
62
68
|
var _a;
|
63
69
|
if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
|
@@ -359,7 +365,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
359
365
|
}
|
360
366
|
};
|
361
367
|
const handleScrollEvent = (swiper) => {
|
362
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s
|
368
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
363
369
|
const item = data[swiper.previousIndex];
|
364
370
|
if (!item)
|
365
371
|
return;
|
@@ -404,8 +410,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
404
410
|
const curItem = data[swiper.activeIndex];
|
405
411
|
if (!((_r = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _r === void 0 ? void 0 : _r.url) && !((_s = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _s === void 0 ? void 0 : _s.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
|
406
412
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
407
|
-
eventName: 'ProductView'
|
408
|
-
product: (_t = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _t === void 0 ? void 0 : _t.bindProduct
|
413
|
+
eventName: 'ProductView'
|
409
414
|
});
|
410
415
|
}
|
411
416
|
viewTime.current = new Date();
|
@@ -426,7 +431,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
426
431
|
}
|
427
432
|
}, [openHashtag, data, activeIndex]);
|
428
433
|
const handleViewImageStartEvent = (activeIndex) => {
|
429
|
-
var _a, _b, _c, _d, _e, _f
|
434
|
+
var _a, _b, _c, _d, _e, _f;
|
430
435
|
const item = data[activeIndex];
|
431
436
|
if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
|
432
437
|
const startTime = Date.now();
|
@@ -445,8 +450,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
445
450
|
}
|
446
451
|
});
|
447
452
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
448
|
-
eventName: 'ViewContent'
|
449
|
-
product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
|
453
|
+
eventName: 'ViewContent'
|
450
454
|
});
|
451
455
|
}
|
452
456
|
};
|
@@ -67,8 +67,10 @@ export interface ISxpDataSourceContext {
|
|
67
67
|
videoRef?: any;
|
68
68
|
setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
|
69
69
|
bffFbReport?: (body: {
|
70
|
-
eventName:
|
71
|
-
|
70
|
+
eventName: string;
|
71
|
+
actionSource?: string;
|
72
|
+
eventSourceUrl?: string;
|
73
|
+
externalId?: string;
|
72
74
|
}) => Promise<any> | undefined | boolean;
|
73
75
|
curTime?: any;
|
74
76
|
h5EnterLink?: () => void;
|
@@ -189,64 +189,23 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
189
189
|
type: 'beacon'
|
190
190
|
});
|
191
191
|
}, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
|
192
|
-
const bffFbReport = useCallback((
|
193
|
-
var
|
192
|
+
const bffFbReport = useCallback((_a) => {
|
193
|
+
var _b, _c, _d;
|
194
|
+
var { eventName, actionSource = 'website', eventSourceUrl = (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href, externalId } = _a;
|
194
195
|
if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
|
195
196
|
return;
|
196
197
|
}
|
197
|
-
|
198
|
+
const fakeUserId = storeAndLoadFeUserId();
|
198
199
|
const urlParams = new URLSearchParams(window.location.search);
|
199
|
-
const fbclid = urlParams
|
200
|
-
const fix_par = {
|
201
|
-
event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
|
202
|
-
external_id: storeAndLoadFeUserId(),
|
203
|
-
client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '',
|
204
|
-
fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
|
205
|
-
fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
|
206
|
-
time: new Date().getTime()
|
207
|
-
};
|
208
|
-
const regex = /\{\{(.*?)\}\}/g;
|
209
|
-
const getEventParams = (obj) => {
|
210
|
-
if (!obj)
|
211
|
-
return;
|
212
|
-
if (obj instanceof Array) {
|
213
|
-
obj === null || obj === void 0 ? void 0 : obj.map((item) => getEventParams(item));
|
214
|
-
}
|
215
|
-
else {
|
216
|
-
for (const key in obj) {
|
217
|
-
if (obj.hasOwnProperty(key)) {
|
218
|
-
const value = obj === null || obj === void 0 ? void 0 : obj[key];
|
219
|
-
if (typeof value === 'object') {
|
220
|
-
getEventParams(value);
|
221
|
-
}
|
222
|
-
else if (typeof value === 'string') {
|
223
|
-
const matches = value === null || value === void 0 ? void 0 : value.match(regex);
|
224
|
-
if (matches) {
|
225
|
-
matches.forEach((match) => {
|
226
|
-
const prop = match.substring(2, match.length - 2);
|
227
|
-
try {
|
228
|
-
const replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
|
229
|
-
if (replaceValue) {
|
230
|
-
obj[key] = replaceValue;
|
231
|
-
}
|
232
|
-
else {
|
233
|
-
delete obj[key];
|
234
|
-
}
|
235
|
-
}
|
236
|
-
catch (error) {
|
237
|
-
console.error('An error occurred:', error === null || error === void 0 ? void 0 : error.message);
|
238
|
-
}
|
239
|
-
});
|
240
|
-
}
|
241
|
-
}
|
242
|
-
}
|
243
|
-
}
|
244
|
-
}
|
245
|
-
};
|
246
|
-
getEventParams(jsonParams);
|
200
|
+
const fbclid = urlParams.get('fbclid');
|
247
201
|
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
|
248
202
|
method: 'POST',
|
249
|
-
body:
|
203
|
+
body: {
|
204
|
+
eventName,
|
205
|
+
actionSource,
|
206
|
+
eventSourceUrl,
|
207
|
+
userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), (getCookie('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` })), { clientUserAgent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
|
208
|
+
},
|
250
209
|
type: 'beacon'
|
251
210
|
});
|
252
211
|
}, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
|
@@ -46,14 +46,9 @@ const CommodityDetail = (_a) => {
|
|
46
46
|
useEffect(() => {
|
47
47
|
if (!isPost) {
|
48
48
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
49
|
-
eventName: 'ProductView'
|
50
|
-
product
|
49
|
+
eventName: 'ProductView'
|
51
50
|
});
|
52
51
|
}
|
53
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
54
|
-
eventName: 'PageView',
|
55
|
-
product
|
56
|
-
});
|
57
52
|
}, [isPost, bffFbReport]);
|
58
53
|
useEffect(() => {
|
59
54
|
const initTime = () => {
|
@@ -38,12 +38,7 @@ const CommodityDetailDiro = (_a) => {
|
|
38
38
|
useEffect(() => {
|
39
39
|
if (!isPost) {
|
40
40
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
41
|
-
eventName: 'ProductView'
|
42
|
-
product
|
43
|
-
});
|
44
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
45
|
-
eventName: 'PageView',
|
46
|
-
product
|
41
|
+
eventName: 'ProductView'
|
47
42
|
});
|
48
43
|
}
|
49
44
|
}, [isPost, bffFbReport]);
|
@@ -50,12 +50,7 @@ const CommodityDetailDiroNew = (_a) => {
|
|
50
50
|
useEffect(() => {
|
51
51
|
if (!isPost) {
|
52
52
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
53
|
-
eventName: 'ProductView'
|
54
|
-
product
|
55
|
-
});
|
56
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
57
|
-
eventName: 'PageView',
|
58
|
-
product
|
53
|
+
eventName: 'ProductView'
|
59
54
|
});
|
60
55
|
}
|
61
56
|
}, [isPost, bffFbReport]);
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { __rest } from "tslib";
|
2
2
|
import { css } from '@emotion/css';
|
3
|
-
import React, { memo, useCallback
|
3
|
+
import React, { memo, useCallback } from 'react';
|
4
4
|
import { useEditor, useSxpDataSource } from '../../../../core/hooks';
|
5
5
|
import './index.less';
|
6
6
|
import { useEventReport } from '../../../../core/hooks/useEventReport';
|
@@ -11,7 +11,7 @@ import { getPriceText } from '../../../../core/utils/materials';
|
|
11
11
|
const CommodityList = (_a) => {
|
12
12
|
var _b, _c, _d;
|
13
13
|
var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, translateY = 0, commodityPicture, isExternalLink, onClick } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "translateY", "commodityPicture", "isExternalLink", "onClick"]);
|
14
|
-
const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent, globalConfig
|
14
|
+
const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent, globalConfig } = useSxpDataSource();
|
15
15
|
const { jumpToWeb } = useEventReport();
|
16
16
|
const { popup } = useEditor();
|
17
17
|
const recData = isPost ? rec : popupDetailData;
|
@@ -41,11 +41,6 @@ const CommodityList = (_a) => {
|
|
41
41
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
42
42
|
}
|
43
43
|
}, popup === null || popup === void 0 ? void 0 : popup.duration);
|
44
|
-
useEffect(() => {
|
45
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
46
|
-
eventName: 'PageView'
|
47
|
-
});
|
48
|
-
}, []);
|
49
44
|
return (React.createElement("div", { className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
|
50
45
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
51
46
|
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement("div", Object.assign({ key: index }, props, { className: css({
|
@@ -243,18 +243,17 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
243
243
|
};
|
244
244
|
}, [isActive]);
|
245
245
|
(0, react_1.useEffect)(() => {
|
246
|
-
var _a, _b
|
246
|
+
var _a, _b;
|
247
247
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
248
248
|
return;
|
249
249
|
if (isActive) {
|
250
250
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
251
|
-
eventName: 'ViewContent'
|
252
|
-
product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
|
251
|
+
eventName: 'ViewContent'
|
253
252
|
});
|
254
|
-
(
|
253
|
+
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
255
254
|
}
|
256
255
|
else {
|
257
|
-
(
|
256
|
+
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
|
258
257
|
}
|
259
258
|
}, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
260
259
|
(0, react_1.useEffect)(() => {
|
@@ -273,11 +272,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
273
272
|
if (!isActive)
|
274
273
|
return;
|
275
274
|
const onShow = () => {
|
276
|
-
var _a, _b;
|
277
275
|
handleClickVideo('start')();
|
278
276
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
279
|
-
eventName: 'ViewContent'
|
280
|
-
product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
|
277
|
+
eventName: 'ViewContent'
|
281
278
|
});
|
282
279
|
};
|
283
280
|
const onHide = handleClickVideo('pause');
|
@@ -12,16 +12,11 @@ const hooks_1 = require("../../../../core/hooks");
|
|
12
12
|
const useEventReport_1 = require("../../../../core/hooks/useEventReport");
|
13
13
|
const WaterFall = (props) => {
|
14
14
|
var _a;
|
15
|
-
const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag
|
15
|
+
const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag } = (0, hooks_1.useSxpDataSource)();
|
16
16
|
const { backMainFeed } = (0, useEventReport_1.useEventReport)();
|
17
17
|
const ref = (0, react_1.useRef)(null);
|
18
18
|
const modalEleRef = (0, react_1.useRef)(null);
|
19
19
|
const [viewTime, setViewTime] = (0, react_1.useState)();
|
20
|
-
(0, react_1.useEffect)(() => {
|
21
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
22
|
-
eventName: 'PageView'
|
23
|
-
});
|
24
|
-
}, []);
|
25
20
|
(0, react_1.useEffect)(() => {
|
26
21
|
const parentNode = document.getElementById('sxp-render');
|
27
22
|
const node = document.getElementById('water-fall');
|
@@ -51,6 +51,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
51
51
|
if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
|
52
52
|
const now = new Date();
|
53
53
|
viewTime.current = now;
|
54
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
55
|
+
eventName: 'PageView'
|
56
|
+
});
|
54
57
|
}
|
55
58
|
}, [data === null || data === void 0 ? void 0 : data.length]);
|
56
59
|
const handleH5EnterLink = (0, react_1.useCallback)(() => {
|
@@ -59,8 +62,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
59
62
|
if (data.length > 0) {
|
60
63
|
const now = new Date();
|
61
64
|
viewTime.current = now;
|
65
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
66
|
+
eventName: 'PageView'
|
67
|
+
});
|
62
68
|
}
|
63
|
-
}, [data.length, h5EnterLink]);
|
69
|
+
}, [data.length, bffFbReport, h5EnterLink]);
|
64
70
|
(0, react_1.useEffect)(() => {
|
65
71
|
var _a;
|
66
72
|
if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
|
@@ -362,7 +368,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
362
368
|
}
|
363
369
|
};
|
364
370
|
const handleScrollEvent = (swiper) => {
|
365
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s
|
371
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
366
372
|
const item = data[swiper.previousIndex];
|
367
373
|
if (!item)
|
368
374
|
return;
|
@@ -407,8 +413,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
407
413
|
const curItem = data[swiper.activeIndex];
|
408
414
|
if (!((_r = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _r === void 0 ? void 0 : _r.url) && !((_s = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _s === void 0 ? void 0 : _s.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
|
409
415
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
410
|
-
eventName: 'ProductView'
|
411
|
-
product: (_t = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _t === void 0 ? void 0 : _t.bindProduct
|
416
|
+
eventName: 'ProductView'
|
412
417
|
});
|
413
418
|
}
|
414
419
|
viewTime.current = new Date();
|
@@ -429,7 +434,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
429
434
|
}
|
430
435
|
}, [openHashtag, data, activeIndex]);
|
431
436
|
const handleViewImageStartEvent = (activeIndex) => {
|
432
|
-
var _a, _b, _c, _d, _e, _f
|
437
|
+
var _a, _b, _c, _d, _e, _f;
|
433
438
|
const item = data[activeIndex];
|
434
439
|
if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
|
435
440
|
const startTime = Date.now();
|
@@ -448,8 +453,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
448
453
|
}
|
449
454
|
});
|
450
455
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
451
|
-
eventName: 'ViewContent'
|
452
|
-
product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
|
456
|
+
eventName: 'ViewContent'
|
453
457
|
});
|
454
458
|
}
|
455
459
|
};
|
@@ -67,8 +67,10 @@ export interface ISxpDataSourceContext {
|
|
67
67
|
videoRef?: any;
|
68
68
|
setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
|
69
69
|
bffFbReport?: (body: {
|
70
|
-
eventName:
|
71
|
-
|
70
|
+
eventName: string;
|
71
|
+
actionSource?: string;
|
72
|
+
eventSourceUrl?: string;
|
73
|
+
externalId?: string;
|
72
74
|
}) => Promise<any> | undefined | boolean;
|
73
75
|
curTime?: any;
|
74
76
|
h5EnterLink?: () => void;
|
@@ -192,64 +192,23 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
192
192
|
type: 'beacon'
|
193
193
|
});
|
194
194
|
}, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
|
195
|
-
const bffFbReport = (0, react_1.useCallback)((
|
196
|
-
var
|
195
|
+
const bffFbReport = (0, react_1.useCallback)((_a) => {
|
196
|
+
var _b, _c, _d;
|
197
|
+
var { eventName, actionSource = 'website', eventSourceUrl = (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href, externalId } = _a;
|
197
198
|
if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
|
198
199
|
return;
|
199
200
|
}
|
200
|
-
|
201
|
+
const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
|
201
202
|
const urlParams = new URLSearchParams(window.location.search);
|
202
|
-
const fbclid = urlParams
|
203
|
-
const fix_par = {
|
204
|
-
event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
|
205
|
-
external_id: (0, localStore_1.storeAndLoadFeUserId)(),
|
206
|
-
client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '',
|
207
|
-
fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
|
208
|
-
fbp: (0, tool_1.getCookie)('_fbp') ? `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` : '',
|
209
|
-
time: new Date().getTime()
|
210
|
-
};
|
211
|
-
const regex = /\{\{(.*?)\}\}/g;
|
212
|
-
const getEventParams = (obj) => {
|
213
|
-
if (!obj)
|
214
|
-
return;
|
215
|
-
if (obj instanceof Array) {
|
216
|
-
obj === null || obj === void 0 ? void 0 : obj.map((item) => getEventParams(item));
|
217
|
-
}
|
218
|
-
else {
|
219
|
-
for (const key in obj) {
|
220
|
-
if (obj.hasOwnProperty(key)) {
|
221
|
-
const value = obj === null || obj === void 0 ? void 0 : obj[key];
|
222
|
-
if (typeof value === 'object') {
|
223
|
-
getEventParams(value);
|
224
|
-
}
|
225
|
-
else if (typeof value === 'string') {
|
226
|
-
const matches = value === null || value === void 0 ? void 0 : value.match(regex);
|
227
|
-
if (matches) {
|
228
|
-
matches.forEach((match) => {
|
229
|
-
const prop = match.substring(2, match.length - 2);
|
230
|
-
try {
|
231
|
-
const replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
|
232
|
-
if (replaceValue) {
|
233
|
-
obj[key] = replaceValue;
|
234
|
-
}
|
235
|
-
else {
|
236
|
-
delete obj[key];
|
237
|
-
}
|
238
|
-
}
|
239
|
-
catch (error) {
|
240
|
-
console.error('An error occurred:', error === null || error === void 0 ? void 0 : error.message);
|
241
|
-
}
|
242
|
-
});
|
243
|
-
}
|
244
|
-
}
|
245
|
-
}
|
246
|
-
}
|
247
|
-
}
|
248
|
-
};
|
249
|
-
getEventParams(jsonParams);
|
203
|
+
const fbclid = urlParams.get('fbclid');
|
250
204
|
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
|
251
205
|
method: 'POST',
|
252
|
-
body:
|
206
|
+
body: {
|
207
|
+
eventName,
|
208
|
+
actionSource,
|
209
|
+
eventSourceUrl,
|
210
|
+
userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), ((0, tool_1.getCookie)('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` })), { clientUserAgent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
|
211
|
+
},
|
253
212
|
type: 'beacon'
|
254
213
|
});
|
255
214
|
}, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
|
@@ -48,14 +48,9 @@ const CommodityDetail = (_a) => {
|
|
48
48
|
(0, react_1.useEffect)(() => {
|
49
49
|
if (!isPost) {
|
50
50
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
51
|
-
eventName: 'ProductView'
|
52
|
-
product
|
51
|
+
eventName: 'ProductView'
|
53
52
|
});
|
54
53
|
}
|
55
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
56
|
-
eventName: 'PageView',
|
57
|
-
product
|
58
|
-
});
|
59
54
|
}, [isPost, bffFbReport]);
|
60
55
|
(0, react_1.useEffect)(() => {
|
61
56
|
const initTime = () => {
|
@@ -40,12 +40,7 @@ const CommodityDetailDiro = (_a) => {
|
|
40
40
|
(0, react_1.useEffect)(() => {
|
41
41
|
if (!isPost) {
|
42
42
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
43
|
-
eventName: 'ProductView'
|
44
|
-
product
|
45
|
-
});
|
46
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
47
|
-
eventName: 'PageView',
|
48
|
-
product
|
43
|
+
eventName: 'ProductView'
|
49
44
|
});
|
50
45
|
}
|
51
46
|
}, [isPost, bffFbReport]);
|
@@ -52,12 +52,7 @@ const CommodityDetailDiroNew = (_a) => {
|
|
52
52
|
(0, react_1.useEffect)(() => {
|
53
53
|
if (!isPost) {
|
54
54
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
55
|
-
eventName: 'ProductView'
|
56
|
-
product
|
57
|
-
});
|
58
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
59
|
-
eventName: 'PageView',
|
60
|
-
product
|
55
|
+
eventName: 'ProductView'
|
61
56
|
});
|
62
57
|
}
|
63
58
|
}, [isPost, bffFbReport]);
|
@@ -13,7 +13,7 @@ const materials_1 = require("../../../../core/utils/materials");
|
|
13
13
|
const CommodityList = (_a) => {
|
14
14
|
var _b, _c, _d;
|
15
15
|
var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, translateY = 0, commodityPicture, isExternalLink, onClick } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "translateY", "commodityPicture", "isExternalLink", "onClick"]);
|
16
|
-
const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent, globalConfig
|
16
|
+
const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent, globalConfig } = (0, hooks_1.useSxpDataSource)();
|
17
17
|
const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
|
18
18
|
const { popup } = (0, hooks_1.useEditor)();
|
19
19
|
const recData = isPost ? rec : popupDetailData;
|
@@ -43,11 +43,6 @@ const CommodityList = (_a) => {
|
|
43
43
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
44
44
|
}
|
45
45
|
}, popup === null || popup === void 0 ? void 0 : popup.duration);
|
46
|
-
(0, react_1.useEffect)(() => {
|
47
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
48
|
-
eventName: 'PageView'
|
49
|
-
});
|
50
|
-
}, []);
|
51
46
|
return (react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
|
52
47
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
53
48
|
return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement("div", Object.assign({ key: index }, props, { className: (0, css_1.css)({
|