pb-sxp-ui 1.6.6 → 1.7.0

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 (33) hide show
  1. package/dist/index.cjs +93 -33
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +93 -33
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +93 -33
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/VideoWidget/index.js +8 -5
  14. package/es/core/components/SxpPageRender/WaterFall/index.js +6 -1
  15. package/es/core/components/SxpPageRender/index.d.ts +1 -0
  16. package/es/core/components/SxpPageRender/index.js +7 -11
  17. package/es/core/context/SxpDataSourceProvider.d.ts +2 -4
  18. package/es/core/context/SxpDataSourceProvider.js +52 -11
  19. package/es/materials/sxp/popup/CommodityDetail/index.js +6 -1
  20. package/es/materials/sxp/popup/CommodityDetailDiro/index.js +6 -1
  21. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +6 -1
  22. package/es/materials/sxp/popup/CommodityList/index.js +7 -2
  23. package/lib/core/components/SxpPageRender/VideoWidget/index.js +8 -5
  24. package/lib/core/components/SxpPageRender/WaterFall/index.js +6 -1
  25. package/lib/core/components/SxpPageRender/index.d.ts +1 -0
  26. package/lib/core/components/SxpPageRender/index.js +7 -11
  27. package/lib/core/context/SxpDataSourceProvider.d.ts +2 -4
  28. package/lib/core/context/SxpDataSourceProvider.js +52 -11
  29. package/lib/materials/sxp/popup/CommodityDetail/index.js +6 -1
  30. package/lib/materials/sxp/popup/CommodityDetailDiro/index.js +6 -1
  31. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +6 -1
  32. package/lib/materials/sxp/popup/CommodityList/index.js +6 -1
  33. package/package.json +1 -1
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -240,17 +240,18 @@ 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, _c, _d;
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'
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
249
250
  });
250
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
251
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
251
252
  }
252
253
  else {
253
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
254
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
254
255
  }
255
256
  }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
256
257
  useEffect(() => {
@@ -269,9 +270,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
269
270
  if (!isActive)
270
271
  return;
271
272
  const onShow = () => {
273
+ var _a, _b;
272
274
  handleClickVideo('start')();
273
275
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
274
- eventName: 'ViewContent'
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
275
278
  });
276
279
  };
277
280
  const onHide = handleClickVideo('pause');
package/es/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -9,11 +9,16 @@ 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 } = useSxpDataSource();
12
+ const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag, bffFbReport } = 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
+ }, []);
17
22
  useEffect(() => {
18
23
  const parentNode = document.getElementById('sxp-render');
19
24
  const node = document.getElementById('water-fall');
package/es/core/components/SxpPageRender/index.d.ts CHANGED
@@ -65,6 +65,7 @@ export interface ISxpPageRenderProps {
65
65
  yPosit: string;
66
66
  y: number;
67
67
  };
68
+ converApi?: any;
68
69
  };
69
70
  descStyle?: CSSProperties;
70
71
  tipText?: {
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -48,9 +48,6 @@ 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
- });
54
51
  }
55
52
  }, [data === null || data === void 0 ? void 0 : data.length]);
56
53
  const handleH5EnterLink = useCallback(() => {
@@ -59,11 +56,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
59
56
  if (data.length > 0) {
60
57
  const now = new Date();
61
58
  viewTime.current = now;
62
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
63
- eventName: 'PageView'
64
- });
65
59
  }
66
- }, [data.length, bffFbReport, h5EnterLink]);
60
+ }, [data.length, h5EnterLink]);
67
61
  useEffect(() => {
68
62
  var _a;
69
63
  if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
@@ -365,7 +359,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
365
359
  }
366
360
  };
367
361
  const handleScrollEvent = (swiper) => {
368
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
362
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
369
363
  const item = data[swiper.previousIndex];
370
364
  if (!item)
371
365
  return;
@@ -410,7 +404,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
410
404
  const curItem = data[swiper.activeIndex];
411
405
  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)) {
412
406
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
413
- eventName: 'ProductView'
407
+ eventName: 'ProductView',
408
+ product: (_t = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _t === void 0 ? void 0 : _t.bindProduct
414
409
  });
415
410
  }
416
411
  viewTime.current = new Date();
@@ -431,7 +426,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
431
426
  }
432
427
  }, [openHashtag, data, activeIndex]);
433
428
  const handleViewImageStartEvent = (activeIndex) => {
434
- var _a, _b, _c, _d, _e, _f;
429
+ var _a, _b, _c, _d, _e, _f, _g;
435
430
  const item = data[activeIndex];
436
431
  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)) {
437
432
  const startTime = Date.now();
@@ -450,7 +445,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
450
445
  }
451
446
  });
452
447
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
453
- eventName: 'ViewContent'
448
+ eventName: 'ViewContent',
449
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
454
450
  });
455
451
  }
456
452
  };
package/es/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -67,10 +67,8 @@ export interface ISxpDataSourceContext {
67
67
  videoRef?: any;
68
68
  setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
69
69
  bffFbReport?: (body: {
70
- eventName: string;
71
- actionSource?: string;
72
- eventSourceUrl?: string;
73
- externalId?: string;
70
+ eventName: 'PageView' | 'ProductView' | 'ViewContent';
71
+ product?: any;
74
72
  }) => Promise<any> | undefined | boolean;
75
73
  curTime?: any;
76
74
  h5EnterLink?: () => void;
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -189,23 +189,64 @@ 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((_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;
192
+ const bffFbReport = useCallback(({ eventName, product }) => {
193
+ var _a, _b, _c, _d;
195
194
  if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
196
195
  return;
197
196
  }
198
- const fakeUserId = storeAndLoadFeUserId();
197
+ let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
199
198
  const urlParams = new URLSearchParams(window.location.search);
200
- const fbclid = urlParams.get('fbclid');
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);
201
247
  return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
202
248
  method: 'POST',
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
- },
249
+ body: jsonParams,
209
250
  type: 'beacon'
210
251
  });
211
252
  }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -46,9 +46,14 @@ const CommodityDetail = (_a) => {
46
46
  useEffect(() => {
47
47
  if (!isPost) {
48
48
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
49
- eventName: 'ProductView'
49
+ eventName: 'ProductView',
50
+ product
50
51
  });
51
52
  }
53
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
54
+ eventName: 'PageView',
55
+ product
56
+ });
52
57
  }, [isPost, bffFbReport]);
53
58
  useEffect(() => {
54
59
  const initTime = () => {
package/es/materials/sxp/popup/CommodityDetailDiro/index.js CHANGED
@@ -38,7 +38,12 @@ const CommodityDetailDiro = (_a) => {
38
38
  useEffect(() => {
39
39
  if (!isPost) {
40
40
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
41
- eventName: 'ProductView'
41
+ eventName: 'ProductView',
42
+ product
43
+ });
44
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
45
+ eventName: 'PageView',
46
+ product
42
47
  });
43
48
  }
44
49
  }, [isPost, bffFbReport]);
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -50,7 +50,12 @@ const CommodityDetailDiroNew = (_a) => {
50
50
  useEffect(() => {
51
51
  if (!isPost) {
52
52
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
53
- eventName: 'ProductView'
53
+ eventName: 'ProductView',
54
+ product
55
+ });
56
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
57
+ eventName: 'PageView',
58
+ product
54
59
  });
55
60
  }
56
61
  }, [isPost, bffFbReport]);
package/es/materials/sxp/popup/CommodityList/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
- import React, { memo, useCallback } from 'react';
3
+ import React, { memo, useCallback, useEffect } 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 } = useSxpDataSource();
14
+ const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent, globalConfig, bffFbReport } = useSxpDataSource();
15
15
  const { jumpToWeb } = useEventReport();
16
16
  const { popup } = useEditor();
17
17
  const recData = isPost ? rec : popupDetailData;
@@ -41,6 +41,11 @@ 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
+ }, []);
44
49
  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) => {
45
50
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
46
51
  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({
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -243,17 +243,18 @@ 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, _c, _d;
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'
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
252
253
  });
253
- (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
254
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
254
255
  }
255
256
  else {
256
- (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
257
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
257
258
  }
258
259
  }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
259
260
  (0, react_1.useEffect)(() => {
@@ -272,9 +273,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
272
273
  if (!isActive)
273
274
  return;
274
275
  const onShow = () => {
276
+ var _a, _b;
275
277
  handleClickVideo('start')();
276
278
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
277
- eventName: 'ViewContent'
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
278
281
  });
279
282
  };
280
283
  const onHide = handleClickVideo('pause');
package/lib/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -12,11 +12,16 @@ 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 } = (0, hooks_1.useSxpDataSource)();
15
+ const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag, bffFbReport } = (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
+ }, []);
20
25
  (0, react_1.useEffect)(() => {
21
26
  const parentNode = document.getElementById('sxp-render');
22
27
  const node = document.getElementById('water-fall');
package/lib/core/components/SxpPageRender/index.d.ts CHANGED
@@ -65,6 +65,7 @@ export interface ISxpPageRenderProps {
65
65
  yPosit: string;
66
66
  y: number;
67
67
  };
68
+ converApi?: any;
68
69
  };
69
70
  descStyle?: CSSProperties;
70
71
  tipText?: {
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -51,9 +51,6 @@ 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
- });
57
54
  }
58
55
  }, [data === null || data === void 0 ? void 0 : data.length]);
59
56
  const handleH5EnterLink = (0, react_1.useCallback)(() => {
@@ -62,11 +59,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
62
59
  if (data.length > 0) {
63
60
  const now = new Date();
64
61
  viewTime.current = now;
65
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
66
- eventName: 'PageView'
67
- });
68
62
  }
69
- }, [data.length, bffFbReport, h5EnterLink]);
63
+ }, [data.length, h5EnterLink]);
70
64
  (0, react_1.useEffect)(() => {
71
65
  var _a;
72
66
  if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
@@ -368,7 +362,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
368
362
  }
369
363
  };
370
364
  const handleScrollEvent = (swiper) => {
371
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
365
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
372
366
  const item = data[swiper.previousIndex];
373
367
  if (!item)
374
368
  return;
@@ -413,7 +407,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
413
407
  const curItem = data[swiper.activeIndex];
414
408
  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)) {
415
409
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
416
- eventName: 'ProductView'
410
+ eventName: 'ProductView',
411
+ product: (_t = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _t === void 0 ? void 0 : _t.bindProduct
417
412
  });
418
413
  }
419
414
  viewTime.current = new Date();
@@ -434,7 +429,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
434
429
  }
435
430
  }, [openHashtag, data, activeIndex]);
436
431
  const handleViewImageStartEvent = (activeIndex) => {
437
- var _a, _b, _c, _d, _e, _f;
432
+ var _a, _b, _c, _d, _e, _f, _g;
438
433
  const item = data[activeIndex];
439
434
  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)) {
440
435
  const startTime = Date.now();
@@ -453,7 +448,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
453
448
  }
454
449
  });
455
450
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
456
- eventName: 'ViewContent'
451
+ eventName: 'ViewContent',
452
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
457
453
  });
458
454
  }
459
455
  };
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -67,10 +67,8 @@ export interface ISxpDataSourceContext {
67
67
  videoRef?: any;
68
68
  setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
69
69
  bffFbReport?: (body: {
70
- eventName: string;
71
- actionSource?: string;
72
- eventSourceUrl?: string;
73
- externalId?: string;
70
+ eventName: 'PageView' | 'ProductView' | 'ViewContent';
71
+ product?: any;
74
72
  }) => Promise<any> | undefined | boolean;
75
73
  curTime?: any;
76
74
  h5EnterLink?: () => void;
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -192,23 +192,64 @@ 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)((_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;
195
+ const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
196
+ var _a, _b, _c, _d;
198
197
  if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
199
198
  return;
200
199
  }
201
- const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
200
+ let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
202
201
  const urlParams = new URLSearchParams(window.location.search);
203
- const fbclid = urlParams.get('fbclid');
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);
204
250
  return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
205
251
  method: 'POST',
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
- },
252
+ body: jsonParams,
212
253
  type: 'beacon'
213
254
  });
214
255
  }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -48,9 +48,14 @@ 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'
51
+ eventName: 'ProductView',
52
+ product
52
53
  });
53
54
  }
55
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
56
+ eventName: 'PageView',
57
+ product
58
+ });
54
59
  }, [isPost, bffFbReport]);
55
60
  (0, react_1.useEffect)(() => {
56
61
  const initTime = () => {
package/lib/materials/sxp/popup/CommodityDetailDiro/index.js CHANGED
@@ -40,7 +40,12 @@ 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'
43
+ eventName: 'ProductView',
44
+ product
45
+ });
46
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
47
+ eventName: 'PageView',
48
+ product
44
49
  });
45
50
  }
46
51
  }, [isPost, bffFbReport]);
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -52,7 +52,12 @@ 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'
55
+ eventName: 'ProductView',
56
+ product
57
+ });
58
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
59
+ eventName: 'PageView',
60
+ product
56
61
  });
57
62
  }
58
63
  }, [isPost, bffFbReport]);
package/lib/materials/sxp/popup/CommodityList/index.js CHANGED
@@ -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 } = (0, hooks_1.useSxpDataSource)();
16
+ const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent, globalConfig, bffFbReport } = (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,6 +43,11 @@ 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
+ }, []);
46
51
  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) => {
47
52
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
48
53
  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.6.6",
3
+ "version": "1.7.0",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",