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.
Files changed (34) hide show
  1. package/dist/index.cjs +33 -93
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -0
  4. package/dist/index.js +33 -93
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +33 -93
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +5 -8
  15. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -6
  16. package/es/core/components/SxpPageRender/index.d.ts +0 -1
  17. package/es/core/components/SxpPageRender/index.js +11 -7
  18. package/es/core/context/SxpDataSourceProvider.d.ts +4 -2
  19. package/es/core/context/SxpDataSourceProvider.js +11 -52
  20. package/es/materials/sxp/popup/CommodityDetail/index.js +1 -6
  21. package/es/materials/sxp/popup/CommodityDetailDiro/index.js +1 -6
  22. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -6
  23. package/es/materials/sxp/popup/CommodityList/index.js +2 -7
  24. package/lib/core/components/SxpPageRender/VideoWidget/index.js +5 -8
  25. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -6
  26. package/lib/core/components/SxpPageRender/index.d.ts +0 -1
  27. package/lib/core/components/SxpPageRender/index.js +11 -7
  28. package/lib/core/context/SxpDataSourceProvider.d.ts +4 -2
  29. package/lib/core/context/SxpDataSourceProvider.js +11 -52
  30. package/lib/materials/sxp/popup/CommodityDetail/index.js +1 -6
  31. package/lib/materials/sxp/popup/CommodityDetailDiro/index.js +1 -6
  32. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -6
  33. package/lib/materials/sxp/popup/CommodityList/index.js +1 -6
  34. 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, _c, _d;
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
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
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
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
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, bffFbReport } = useSxpDataSource();
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');
@@ -65,7 +65,6 @@ export interface ISxpPageRenderProps {
65
65
  yPosit: string;
66
66
  y: number;
67
67
  };
68
- converApi?: any;
69
68
  };
70
69
  descStyle?: CSSProperties;
71
70
  tipText?: {
@@ -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, _t;
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, _g;
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: 'PageView' | 'ProductView' | 'ViewContent';
71
- product?: any;
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(({ eventName, product }) => {
193
- var _a, _b, _c, _d;
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
- let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
198
+ const fakeUserId = storeAndLoadFeUserId();
198
199
  const urlParams = new URLSearchParams(window.location.search);
199
- const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
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: jsonParams,
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, useEffect } from 'react';
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, bffFbReport } = useSxpDataSource();
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, _c, _d;
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
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
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
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
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, bffFbReport } = (0, hooks_1.useSxpDataSource)();
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');
@@ -65,7 +65,6 @@ export interface ISxpPageRenderProps {
65
65
  yPosit: string;
66
66
  y: number;
67
67
  };
68
- converApi?: any;
69
68
  };
70
69
  descStyle?: CSSProperties;
71
70
  tipText?: {
@@ -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, _t;
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, _g;
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: 'PageView' | 'ProductView' | 'ViewContent';
71
- product?: any;
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)(({ eventName, product }) => {
196
- var _a, _b, _c, _d;
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
- let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
201
+ const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
201
202
  const urlParams = new URLSearchParams(window.location.search);
202
- const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
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: jsonParams,
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, bffFbReport } = (0, hooks_1.useSxpDataSource)();
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)({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.7.0",
3
+ "version": "1.7.1",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",