pb-sxp-ui 1.20.1 → 1.20.3

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 (47) hide show
  1. package/dist/index.cjs +253 -120
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +253 -120
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +253 -120
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/LikeButton/index.js +12 -4
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +6 -2
  15. package/es/core/components/SxpPageRender/WaterFall/List.js +15 -16
  16. package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +14 -2
  17. package/es/core/components/SxpPageRender/WaterFall/index.d.ts +2 -0
  18. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -4
  19. package/es/core/components/SxpPageRender/index.js +62 -18
  20. package/es/core/context/SxpDataSourceProvider.d.ts +8 -3
  21. package/es/core/context/SxpDataSourceProvider.js +76 -43
  22. package/es/core/utils/tool.d.ts +2 -1
  23. package/es/core/utils/tool.js +15 -1
  24. package/es/materials/sxp/cta/AniLink/index.js +7 -7
  25. package/es/materials/sxp/cta/AniLinkPopup/index.js +10 -10
  26. package/es/materials/sxp/popup/CommodityDetail/index.js +9 -3
  27. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -3
  28. package/es/materials/sxp/popup/CommodityList/index.js +10 -6
  29. package/es/materials/sxp/template/components/EventProvider.js +9 -9
  30. package/lib/core/components/SxpPageRender/LikeButton/index.js +12 -4
  31. package/lib/core/components/SxpPageRender/VideoWidget/index.js +6 -2
  32. package/lib/core/components/SxpPageRender/WaterFall/List.js +14 -15
  33. package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +14 -2
  34. package/lib/core/components/SxpPageRender/WaterFall/index.d.ts +2 -0
  35. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -4
  36. package/lib/core/components/SxpPageRender/index.js +62 -18
  37. package/lib/core/context/SxpDataSourceProvider.d.ts +8 -3
  38. package/lib/core/context/SxpDataSourceProvider.js +74 -41
  39. package/lib/core/utils/tool.d.ts +2 -1
  40. package/lib/core/utils/tool.js +16 -1
  41. package/lib/materials/sxp/cta/AniLink/index.js +7 -7
  42. package/lib/materials/sxp/cta/AniLinkPopup/index.js +10 -10
  43. package/lib/materials/sxp/popup/CommodityDetail/index.js +9 -3
  44. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -3
  45. package/lib/materials/sxp/popup/CommodityList/index.js +10 -6
  46. package/lib/materials/sxp/template/components/EventProvider.js +9 -9
  47. package/package.json +1 -1
package/es/core/components/SxpPageRender/LikeButton/index.js CHANGED
@@ -8,12 +8,12 @@ const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
8
8
  const LikeButton = (_a) => {
9
9
  var _b;
10
10
  var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
11
- const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
11
+ const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList, bffFbReport } = useSxpDataSource();
12
12
  const [state, setState] = useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
13
13
  const likeIcon = useIconLink(defaultLikeIconPath);
14
14
  const unlikeIcon = useIconLink(defaultUnLikeIconPath);
15
15
  const handleClick = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
16
- var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
16
+ var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
17
17
  if (state) {
18
18
  setState(false);
19
19
  const result = (_e = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '' })))) !== null && _e !== void 0 ? _e : false;
@@ -57,16 +57,24 @@ const LikeButton = (_a) => {
57
57
  traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
58
58
  }
59
59
  });
60
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
61
+ eventName: 'Engagement',
62
+ product: (_z = recData === null || recData === void 0 ? void 0 : recData.video) === null || _z === void 0 ? void 0 : _z.bindProducts,
63
+ rec: recData,
64
+ position,
65
+ content_id: (_1 = (_0 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _0 === void 0 ? void 0 : _0.itemId) !== null && _1 !== void 0 ? _1 : '',
66
+ engagement_type: 'like'
67
+ });
60
68
  if (!result) {
61
69
  setState(false);
62
70
  }
63
71
  else {
64
- const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
72
+ const nRtcList = (_2 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
65
73
  if (index === position) {
66
74
  item.isCollected = true;
67
75
  }
68
76
  return item;
69
- })) !== null && _z !== void 0 ? _z : [];
77
+ })) !== null && _2 !== void 0 ? _2 : [];
70
78
  setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
71
79
  }
72
80
  }
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -285,11 +285,15 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
285
285
  if (isActive) {
286
286
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
287
287
  eventName: 'ViewContent',
288
- 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
288
+ 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.bindProducts,
289
+ rec: data === null || data === void 0 ? void 0 : data[index],
290
+ position: index
289
291
  });
290
292
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
291
293
  eventName: 'PageView',
292
- product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProduct
294
+ product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProducts,
295
+ rec: data === null || data === void 0 ? void 0 : data[index],
296
+ position: index
293
297
  });
294
298
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
295
299
  }
package/es/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __rest } from "tslib";
2
- import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
2
+ import React, { useState, useEffect, useMemo, useRef } from 'react';
3
3
  import './List.less';
4
4
  import FormatImage from '../FormatImage';
5
5
  import previewData from './preview.json';
@@ -120,26 +120,13 @@ const WaterfallFlowItem = (props) => {
120
120
  export default function WaterfallList(_a) {
121
121
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
122
122
  var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
123
- const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
123
+ const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = useSxpDataSource();
124
124
  const { jumpToWeb } = useEventReport();
125
125
  const [list, setList] = useState();
126
126
  const [data, setData] = useState();
127
127
  const [isLoadingData, setIsLoadingData] = useState(false);
128
128
  const containerRef = useRef(null);
129
129
  const [isLoadMore, setIsLoadMore] = useState(false);
130
- const loadMoreData = useCallback(() => {
131
- if (isLoadMore)
132
- return;
133
- setIsLoadMore(true);
134
- waterFallData &&
135
- (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
136
- hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag
137
- }).then((res) => {
138
- var _a;
139
- setList(list === null || list === void 0 ? void 0 : list.concat((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []));
140
- setIsLoadMore(false);
141
- }));
142
- }, [waterFallData, getRecommendVideos, list, isLoadMore]);
143
130
  useEffect(() => {
144
131
  var _a, _b;
145
132
  setIsLoadingData(true);
@@ -151,8 +138,20 @@ export default function WaterfallList(_a) {
151
138
  }).then((res) => {
152
139
  var _a, _b;
153
140
  setData(res);
154
- setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
141
+ const list = (_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : [];
142
+ setList(list);
155
143
  setIsLoadingData(false);
144
+ const products = [];
145
+ list === null || list === void 0 ? void 0 : list.forEach((item) => {
146
+ var _a, _b;
147
+ products.push(...((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) !== null && _b !== void 0 ? _b : []));
148
+ });
149
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
150
+ eventName: 'PageView',
151
+ product: products,
152
+ rec: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec,
153
+ position: cacheActiveIndex
154
+ });
156
155
  }));
157
156
  if (isOpenHashTag) {
158
157
  const res = previewData;
package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js CHANGED
@@ -112,7 +112,7 @@ const WaterfallFlowItem = (props) => {
112
112
  export default function WaterfallList(_a) {
113
113
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
114
114
  var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
115
- const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
115
+ const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = useSxpDataSource();
116
116
  const { jumpToWeb } = useEventReport();
117
117
  const scrollParent = useRef(null);
118
118
  const [scrollTop, setScrollTop] = useState(0);
@@ -217,8 +217,20 @@ export default function WaterfallList(_a) {
217
217
  }).then((res) => {
218
218
  var _a, _b;
219
219
  setData(res);
220
- setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
220
+ const list = (_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : [];
221
+ setList(list);
221
222
  setIsLoadingData(false);
223
+ const products = [];
224
+ list === null || list === void 0 ? void 0 : list.forEach((item) => {
225
+ var _a, _b;
226
+ products.push(...((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) !== null && _b !== void 0 ? _b : []));
227
+ });
228
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
229
+ eventName: 'PageView',
230
+ product: products,
231
+ rec: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec,
232
+ position: cacheActiveIndex
233
+ });
222
234
  }));
223
235
  if (isOpenHashTag) {
224
236
  const res = previewData;
package/es/core/components/SxpPageRender/WaterFall/index.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import React from 'react';
2
2
  import './index.less';
3
+ import { RecItemType } from '../typing';
3
4
  import { IHashTagProps } from '../../../../materials/sxp/HashTag';
4
5
  interface IWaterFallProps {
6
+ rec?: RecItemType;
5
7
  }
6
8
  declare const _default: React.NamedExoticComponent<IWaterFallProps & IHashTagProps>;
7
9
  export default _default;
package/es/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -77,11 +77,8 @@ const WaterFall = (props) => {
77
77
  useEffect(() => {
78
78
  if (openHashtag) {
79
79
  setViewTime(new Date());
80
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
81
- eventName: 'PageView'
82
- });
83
80
  }
84
- }, [openHashtag, bffFbReport]);
81
+ }, [openHashtag]);
85
82
  useEffect(() => {
86
83
  const initTime = () => {
87
84
  setViewTime(new Date());
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -94,7 +94,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
94
94
  (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
95
95
  }, [data, ctaType, swiperRef]);
96
96
  const handleSessionCompleted = useCallback((fk) => {
97
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
97
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
98
98
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
99
99
  let fromKName = '';
100
100
  if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
@@ -129,7 +129,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
129
129
  traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
130
130
  }
131
131
  });
132
- }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
132
+ const isPostType = ((_w = item === null || item === void 0 ? void 0 : item.video) === null || _w === void 0 ? void 0 : _w.url) || ((_y = (_x = item === null || item === void 0 ? void 0 : item.video) === null || _x === void 0 ? void 0 : _x.imgUrls) === null || _y === void 0 ? void 0 : _y.length);
133
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
134
+ eventName: 'ExitFeed',
135
+ product: isPostType ? (_z = item === null || item === void 0 ? void 0 : item.video) === null || _z === void 0 ? void 0 : _z.bindProducts : (item === null || item === void 0 ? void 0 : item.product) ? [item === null || item === void 0 ? void 0 : item.product] : [],
136
+ rec: item,
137
+ position: activeIndex,
138
+ content_id: isPostType ? (_1 = (_0 = item === null || item === void 0 ? void 0 : item.video) === null || _0 === void 0 ? void 0 : _0.itemId) !== null && _1 !== void 0 ? _1 : '' : (_3 = (_2 = item === null || item === void 0 ? void 0 : item.product) === null || _2 === void 0 ? void 0 : _2.itemId) !== null && _3 !== void 0 ? _3 : '',
139
+ view_time: new Date() - viewTime.current
140
+ });
141
+ }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime, bffFbReport]);
133
142
  useEffect(() => {
134
143
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
135
144
  const visibleChange = () => {
@@ -429,48 +438,79 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
429
438
  }
430
439
  };
431
440
  const handleScrollEvent = (swiper) => {
432
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
441
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
433
442
  const item = data[swiper.previousIndex];
443
+ const activeItem = data[swiper.activeIndex];
434
444
  if (!item)
435
445
  return;
436
446
  let contentFormat = null;
437
- if ((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) {
447
+ let previousContentType = 'post';
448
+ let previousContentId = (_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '';
449
+ let previousProduct = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProducts;
450
+ let previousContentsName = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.title) !== null && _e !== void 0 ? _e : '';
451
+ let previousDirection = '';
452
+ let contentId = (_g = (_f = activeItem === null || activeItem === void 0 ? void 0 : activeItem.video) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '';
453
+ if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
438
454
  contentFormat = 'video';
439
455
  }
440
- else if ((_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) === null || _c === void 0 ? void 0 : _c.length) {
456
+ else if ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) === null || _k === void 0 ? void 0 : _k.length) {
441
457
  contentFormat = 'image';
442
458
  }
459
+ else {
460
+ previousContentType = 'product';
461
+ previousContentId = (_m = (_l = item === null || item === void 0 ? void 0 : item.product) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '';
462
+ previousProduct = (item === null || item === void 0 ? void 0 : item.product) ? [item === null || item === void 0 ? void 0 : item.product] : [];
463
+ previousContentsName = (_p = (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.title) !== null && _p !== void 0 ? _p : '';
464
+ }
465
+ if (!((_q = activeItem === null || activeItem === void 0 ? void 0 : activeItem.video) === null || _q === void 0 ? void 0 : _q.url) && !((_s = (_r = activeItem === null || activeItem === void 0 ? void 0 : activeItem.video) === null || _r === void 0 ? void 0 : _r.imgUrls) === null || _s === void 0 ? void 0 : _s.length)) {
466
+ contentId = (_u = (_t = activeItem === null || activeItem === void 0 ? void 0 : activeItem.product) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '';
467
+ }
443
468
  if (swiper.previousIndex - swiper.activeIndex < 0) {
444
469
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
445
470
  eventInfo: {
446
471
  eventSubject: 'scrollDown',
447
472
  eventDescription: 'User scroll down',
448
- contentId: (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.itemId) !== null && _e !== void 0 ? _e : '',
449
- productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
473
+ contentId: (_w = (_v = item === null || item === void 0 ? void 0 : item.video) === null || _v === void 0 ? void 0 : _v.itemId) !== null && _w !== void 0 ? _w : '',
474
+ productId: (_y = (_x = item === null || item === void 0 ? void 0 : item.product) === null || _x === void 0 ? void 0 : _x.itemId) !== null && _y !== void 0 ? _y : '',
450
475
  requestId: null,
451
- traceInfo: (_l = (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : (_k = item === null || item === void 0 ? void 0 : item.product) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : '',
476
+ traceInfo: (_2 = (_0 = (_z = item === null || item === void 0 ? void 0 : item.video) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : (_1 = item === null || item === void 0 ? void 0 : item.product) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : '',
452
477
  contentFormat,
453
- position: ((_m = swiper.previousIndex) !== null && _m !== void 0 ? _m : 0) + ''
478
+ position: ((_3 = swiper.previousIndex) !== null && _3 !== void 0 ? _3 : 0) + ''
454
479
  }
455
480
  });
456
481
  handleViewImageStartEnd(item);
457
482
  handleSlideSkip(item, swiper.previousIndex);
483
+ previousDirection = 'up';
458
484
  }
459
485
  else {
460
486
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
461
487
  eventInfo: {
462
488
  eventSubject: 'scrollUp',
463
489
  eventDescription: 'User scroll up',
464
- contentId: (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.itemId) !== null && _p !== void 0 ? _p : '',
465
- productId: (_r = (_q = item.product) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
490
+ contentId: (_5 = (_4 = item === null || item === void 0 ? void 0 : item.video) === null || _4 === void 0 ? void 0 : _4.itemId) !== null && _5 !== void 0 ? _5 : '',
491
+ productId: (_7 = (_6 = item.product) === null || _6 === void 0 ? void 0 : _6.itemId) !== null && _7 !== void 0 ? _7 : '',
466
492
  requestId: null,
467
- traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : '',
493
+ traceInfo: (_11 = (_9 = (_8 = item === null || item === void 0 ? void 0 : item.video) === null || _8 === void 0 ? void 0 : _8.traceInfo) !== null && _9 !== void 0 ? _9 : (_10 = item === null || item === void 0 ? void 0 : item.product) === null || _10 === void 0 ? void 0 : _10.traceInfo) !== null && _11 !== void 0 ? _11 : '',
468
494
  contentFormat,
469
- position: ((_w = swiper.previousIndex) !== null && _w !== void 0 ? _w : 0) + ''
495
+ position: ((_12 = swiper.previousIndex) !== null && _12 !== void 0 ? _12 : 0) + ''
470
496
  }
471
497
  });
472
498
  handleViewImageStartEnd(item);
473
- }
499
+ previousDirection = 'down';
500
+ }
501
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
502
+ eventName: 'ContentSwipe',
503
+ product: previousProduct,
504
+ rec: activeItem,
505
+ position: swiper.activeIndex,
506
+ previous_content_id: previousContentId,
507
+ previous_content_type: previousContentType,
508
+ previous_contents_name: previousContentsName,
509
+ previosu_position: swiper.previousIndex,
510
+ swipe_direction: previousDirection,
511
+ view_time: new Date() - viewTime.current,
512
+ content_id: contentId
513
+ });
474
514
  handleReportProductView(item);
475
515
  viewTime.current = new Date();
476
516
  };
@@ -571,11 +611,15 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
571
611
  if (enableCapi) {
572
612
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
573
613
  eventName: 'ViewContent',
574
- product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
614
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProducts,
615
+ rec: item,
616
+ position: activeIndex
575
617
  });
576
618
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
577
619
  eventName: 'PageView',
578
- product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
620
+ product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProducts,
621
+ rec: item,
622
+ position: activeIndex
579
623
  });
580
624
  }
581
625
  }
@@ -634,7 +678,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
634
678
  isReload,
635
679
  renderToggleButton
636
680
  ]);
637
- return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height } },
681
+ return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height: height + minusHeight + tagHeight } },
638
682
  (data === null || data === void 0 ? void 0 : data.length) < 1 && loading ? (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
639
683
  React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
640
684
  waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff', top: `${minusHeight}px` }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
@@ -693,7 +737,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
693
737
  renderView,
694
738
  renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
695
739
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
696
- React.createElement(WaterFall, Object.assign({}, (_u = (_t = (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.item) === null || _u === void 0 ? void 0 : _u.props)),
740
+ React.createElement(WaterFall, Object.assign({}, (_u = (_t = (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.item) === null || _u === void 0 ? void 0 : _u.props, { rec: visList[activeIndex] })),
697
741
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
698
742
  openMultiPosts && (React.createElement(MultiPosts, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: bottomHeight + 'px' } }))))),
699
743
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
package/es/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface IEventTimeType {
12
12
  time: Date;
13
13
  target: EventTarget;
14
14
  }
15
+ export type ICapiEventNameType = 'PageView' | 'ProductView' | 'ViewContent' | 'ClickCTA' | 'ContentSwipe' | 'Engagement' | 'ExitFeed';
15
16
  export interface ISxpDataSourceContext {
16
17
  rtcList: RecItemType[];
17
18
  setRtcList?: React.Dispatch<React.SetStateAction<RecItemType[]>>;
@@ -51,7 +52,7 @@ export interface ISxpDataSourceContext {
51
52
  sxpParameter?: PageData['sxp_parameter'];
52
53
  waterFallData?: IWaterFallDataType;
53
54
  setWaterFallData?: React.Dispatch<React.SetStateAction<IWaterFallDataType | undefined>>;
54
- ctaEvent?: (eventInfo: any, rec?: RecItemType, product?: ProductInfoType | VideoInfoType | null, number?: number) => void;
55
+ ctaEvent?: (eventInfo: any, rec?: RecItemType, product?: ProductInfoType | VideoInfoType | null, number?: number, ctaActionType?: 'open_internal_popup' | 'open_external_link', targetUrl?: string | null, contentType?: 'product' | 'post') => void;
55
56
  swiperRef?: any;
56
57
  openHashtag?: boolean;
57
58
  setOpenHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -72,8 +73,12 @@ export interface ISxpDataSourceContext {
72
73
  videoRef?: any;
73
74
  setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
74
75
  bffFbReport?: (body: {
75
- eventName: 'PageView' | 'ProductView' | 'ViewContent';
76
- product?: any;
76
+ eventName: ICapiEventNameType;
77
+ product?: ProductInfoType[];
78
+ contentType?: 'product' | 'post';
79
+ rec?: RecItemType;
80
+ position?: number;
81
+ [key: string]: any;
77
82
  }) => void;
78
83
  curTime?: any;
79
84
  h5EnterLink?: () => void;
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __awaiter } from "tslib";
1
+ import { __awaiter, __rest } from "tslib";
2
2
  import React, { createContext, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
3
  import qs from 'qs';
4
4
  import { cloneDeep } from 'lodash';
@@ -7,7 +7,7 @@ import { storeAndLoadFeUserId, AGREE_POLICY } from '../utils/localStore';
7
7
  import { useIconLink } from '../components/SxpPageRender/useIconLink';
8
8
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../utils/event';
9
9
  import Consent from '../components/Consent';
10
- import { getCookie, splitUrlParams } from '../utils/tool';
10
+ import { getCookie, getUrlParamByKey, splitUrlParams } from '../utils/tool';
11
11
  export const SxpDataSourceContext = createContext({
12
12
  rtcList: [],
13
13
  tagList: []
@@ -532,19 +532,45 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
532
532
  playbookType,
533
533
  bffDataSource
534
534
  ]);
535
- const getEventParamsByJson = useCallback((json, product) => {
536
- var _a, _b, _c;
535
+ const getEventParamsByJson = useCallback((_a) => {
536
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
537
+ var { json, product = [], rec, contentType = 'post', position, eventName } = _a, props = __rest(_a, ["json", "product", "rec", "contentType", "position", "eventName"]);
537
538
  const jsonParams = cloneDeep(json);
538
539
  const urlParams = new URLSearchParams(window.location.search);
539
540
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
540
541
  const fix_par = {
541
- event_source_url: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
542
+ event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
542
543
  external_id: fakeUserId,
543
- client_user_agent: (_c = (_b = window === null || window === void 0 ? void 0 : window.navigator) === null || _b === void 0 ? void 0 : _b.userAgent) !== null && _c !== void 0 ? _c : '',
544
+ 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 : '',
544
545
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
545
546
  fbp: getCookie('_fbp') ? `${getCookie('_fbp')}` : '',
546
547
  time: Math.floor(Date.now() / 1000)
547
548
  };
549
+ let customData = Object.assign({ content_ids: [(_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.itemId, ...((_f = product === null || product === void 0 ? void 0 : product.map((item) => item === null || item === void 0 ? void 0 : item.itemId)) !== null && _f !== void 0 ? _f : [])], content_type: contentType, content_name: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.title, total_posts: rtcList === null || rtcList === void 0 ? void 0 : rtcList.length, position, currency: (_h = product === null || product === void 0 ? void 0 : product[0]) === null || _h === void 0 ? void 0 : _h.currency, contents: (_j = product === null || product === void 0 ? void 0 : product.map((item) => ({
550
+ item_id: item === null || item === void 0 ? void 0 : item.itemId,
551
+ item_price: item === null || item === void 0 ? void 0 : item.price
552
+ }))) !== null && _j !== void 0 ? _j : [], image_urls: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) !== null && _l !== void 0 ? _l : [], video_urls: (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.url, headline: getUrlParamByKey('headline'), scene: getUrlParamByKey('scene'), campaign_id: getUrlParamByKey('campaign_id'), ad_id: getUrlParamByKey('ad_id'), utm_source: getUrlParamByKey('utm_source'), utm_medium: getUrlParamByKey('utm_medium'), utm_campaign: getUrlParamByKey('utm_campaign'), utm_content: getUrlParamByKey('utm_content') }, props);
553
+ if (!((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.url) && !((_q = (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.imgUrls) === null || _q === void 0 ? void 0 : _q.length) && (rec === null || rec === void 0 ? void 0 : rec.product) && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _r === void 0 ? void 0 : _r.length) > 0) {
554
+ const product = rec === null || rec === void 0 ? void 0 : rec.product;
555
+ const productCustomData = {
556
+ content_ids: [product === null || product === void 0 ? void 0 : product.itemId],
557
+ content_type: 'product',
558
+ content_name: product === null || product === void 0 ? void 0 : product.title,
559
+ contents: [{
560
+ item_id: product === null || product === void 0 ? void 0 : product.itemId,
561
+ item_price: product === null || product === void 0 ? void 0 : product.price
562
+ }],
563
+ image_urls: (_s = product.homePage) !== null && _s !== void 0 ? _s : []
564
+ };
565
+ customData = Object.assign(Object.assign({}, customData), productCustomData);
566
+ }
567
+ if (eventName === 'ContentSwipe' || eventName === 'Engagement' || eventName === 'ExitFeed') {
568
+ const deleteKeys = ['content_ids', 'content_category', 'currency', 'contents', 'image_urls', 'video_urls', 'prompt'];
569
+ deleteKeys.forEach(key => {
570
+ if (customData === null || customData === void 0 ? void 0 : customData[key])
571
+ delete customData[key];
572
+ });
573
+ }
548
574
  const regex = /\{\{(.*?)\}\}/g;
549
575
  const getEventParams = (obj) => {
550
576
  if (!obj)
@@ -557,6 +583,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
557
583
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
558
584
  const value = obj === null || obj === void 0 ? void 0 : obj[key];
559
585
  if (typeof value === 'object') {
586
+ if (key === 'custom_data') {
587
+ obj[key] = customData !== null && customData !== void 0 ? customData : {};
588
+ }
560
589
  getEventParams(value);
561
590
  }
562
591
  else if (typeof value === 'string') {
@@ -566,7 +595,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
566
595
  var _a;
567
596
  const prop = match.substring(2, match.length - 2);
568
597
  try {
569
- let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
598
+ let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product === null || product === void 0 ? void 0 : product[0]);
570
599
  if (replaceValue) {
571
600
  if ((prop === null || prop === void 0 ? void 0 : prop.indexOf('currency')) !== -1 &&
572
601
  (replaceValue === null || replaceValue === void 0 ? void 0 : replaceValue.indexOf('-')) !== -1 &&
@@ -591,15 +620,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
591
620
  }
592
621
  };
593
622
  getEventParams(jsonParams);
623
+ console.log('capi event params:', jsonParams);
594
624
  return jsonParams;
595
- }, [fakeUserId]);
596
- const bffFbReport = useCallback(({ eventName, product }) => {
597
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
625
+ }, [fakeUserId, globalConfig, rtcList]);
626
+ const bffFbReport = useCallback((_a) => {
627
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
628
+ var { eventName } = _a, props = __rest(_a, ["eventName"]);
598
629
  if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || getTargetingCookie()) {
599
630
  return;
600
631
  }
601
632
  let isPushState = false;
602
- const pixelEventParamsJson = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _a === void 0 ? void 0 : _a[eventName];
633
+ const pixelEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _b === void 0 ? void 0 : _b[eventName];
603
634
  if ((pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
604
635
  function updateQueryStringParameter(uri, key, value) {
605
636
  const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
@@ -623,39 +654,39 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
623
654
  }
624
655
  }
625
656
  else {
626
- window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, getEventParamsByJson(pixelEventParamsJson, product));
657
+ window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: pixelEventParamsJson, eventName }, props)));
627
658
  }
628
659
  }
629
660
  if (!isPushState) {
630
661
  if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
631
662
  window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
632
663
  }
633
- const tiktokPixelEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.tiktokPixel) === null || _b === void 0 ? void 0 : _b[eventName];
664
+ const tiktokPixelEventParamsJson = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.tiktokPixel) === null || _c === void 0 ? void 0 : _c[eventName];
634
665
  if ((tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name) &&
635
666
  typeof (window === null || window === void 0 ? void 0 : window.ttq) === 'object' &&
636
- typeof ((_c = window === null || window === void 0 ? void 0 : window.ttq) === null || _c === void 0 ? void 0 : _c.track) === 'function') {
637
- (_d = window === null || window === void 0 ? void 0 : window.ttq) === null || _d === void 0 ? void 0 : _d.track(tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name, getEventParamsByJson(tiktokPixelEventParamsJson, product));
667
+ typeof ((_d = window === null || window === void 0 ? void 0 : window.ttq) === null || _d === void 0 ? void 0 : _d.track) === 'function') {
668
+ (_e = window === null || window === void 0 ? void 0 : window.ttq) === null || _e === void 0 ? void 0 : _e.track(tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: tiktokPixelEventParamsJson, eventName }, props)));
638
669
  }
639
670
  }
640
- const snapchatPixelEventParamsJson = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.snapchatPixel) === null || _e === void 0 ? void 0 : _e[eventName];
671
+ const snapchatPixelEventParamsJson = (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.snapchatPixel) === null || _f === void 0 ? void 0 : _f[eventName];
641
672
  if ((snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.snaptr) === 'function') {
642
- window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(snapchatPixelEventParamsJson, product));
673
+ window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: snapchatPixelEventParamsJson, eventName }, props)));
643
674
  }
644
- if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' && typeof ((_f = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _f === void 0 ? void 0 : _f.trackPageView) === 'function') {
645
- (_g = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _g === void 0 ? void 0 : _g.trackPageView();
675
+ if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' && typeof ((_g = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _g === void 0 ? void 0 : _g.trackPageView) === 'function') {
676
+ (_h = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _h === void 0 ? void 0 : _h.trackPageView();
646
677
  }
647
- const converApiEventParamsJson = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _h === void 0 ? void 0 : _h[eventName];
678
+ const converApiEventParamsJson = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _j === void 0 ? void 0 : _j[eventName];
648
679
  if (enabledMetaConversionApi && converApiEventParamsJson) {
649
- const body = getEventParamsByJson(converApiEventParamsJson, product);
680
+ const body = getEventParamsByJson(Object.assign({ json: converApiEventParamsJson, eventName }, props));
650
681
  const params = {};
651
682
  const queryString = location.search.slice(1);
652
- (_j = splitUrlParams(queryString)) === null || _j === void 0 ? void 0 : _j.forEach((val) => {
683
+ (_k = splitUrlParams(queryString)) === null || _k === void 0 ? void 0 : _k.forEach((val) => {
653
684
  const key = val.split('=')[0];
654
685
  const value = val.split('=')[1];
655
686
  params[key] = value;
656
687
  });
657
688
  const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
658
- bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_k = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _k === void 0 ? void 0 : _k['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
689
+ bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_l = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _l === void 0 ? void 0 : _l['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
659
690
  method: 'POST',
660
691
  body,
661
692
  type: 'beacon'
@@ -692,7 +723,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
692
723
  console.log('e', e);
693
724
  }
694
725
  }), [bffFetch, utmVal]);
695
- const ctaEvent = useCallback((eventInfo, rec, product, position) => {
726
+ const ctaEvent = useCallback((eventInfo, rec, product, position, ctaActionType, targetUrl, contentType) => {
696
727
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
697
728
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
698
729
  const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
@@ -713,34 +744,36 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
713
744
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
714
745
  eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '', contentFormat })
715
746
  });
716
- }, [bffEventReport, isFromHashtag]);
717
- const h5EnterLink = useCallback(() => {
718
- var _a, _b, _c;
719
- const queryString = location.search.slice(1);
720
- const params = {};
721
- (_a = splitUrlParams(queryString.replace(/\+/g, '%2B'))) === null || _a === void 0 ? void 0 : _a.map((val) => {
722
- const key = val.split('=')[0];
723
- const value = val.split('=')[1];
724
- params[key] = value;
725
- });
726
- for (const key in params) {
727
- params[key] = params[key].replace(/%2B/g, '+');
747
+ if ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject) === 'clickCta') {
748
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
749
+ eventName: 'ClickCTA',
750
+ product: product ? [product] : undefined,
751
+ contentType: contentType !== null && contentType !== void 0 ? contentType : 'post',
752
+ rec,
753
+ position,
754
+ cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
755
+ cta_action_type: ctaActionType,
756
+ target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
757
+ target_url: targetUrl
758
+ });
728
759
  }
729
- const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
760
+ }, [bffEventReport, isFromHashtag, bffFbReport]);
761
+ const h5EnterLink = useCallback(() => {
762
+ var _a, _b;
730
763
  const time = new Date();
731
764
  curTime.current = time;
732
765
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
733
766
  eventInfo: {
734
767
  eventSubject: 'h5LinkEnterFeed',
735
768
  eventDescription: 'User enter h5 link',
736
- utmSource: getVal('utm_source'),
737
- utmMedium: getVal('utm_medium'),
738
- utmCampaign: getVal('utm_campaign'),
739
- utmId: getVal('utm_id'),
740
- utmContent: getVal('utm_content'),
769
+ utmSource: getUrlParamByKey('utm_source'),
770
+ utmMedium: getUrlParamByKey('utm_medium'),
771
+ utmCampaign: getUrlParamByKey('utm_campaign'),
772
+ utmId: getUrlParamByKey('utm_id'),
773
+ utmContent: getUrlParamByKey('utm_content'),
741
774
  enterTime: Math.floor(time / 1000) + '',
742
775
  requestId: null,
743
- enterUrl: (_c = (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : ''
776
+ enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : ''
744
777
  },
745
778
  reportLayId: false
746
779
  });
package/es/core/utils/tool.d.ts CHANGED
@@ -15,4 +15,5 @@ declare function getScreenReader(): boolean;
15
15
  declare function splitUrlParams(urlParams: string): string[] | undefined;
16
16
  declare function deleteCookie(name: string, path?: string, domain?: string): void;
17
17
  declare function setCookie(name: string, value: string, days?: number, path?: string, domain?: string, secure?: boolean, sameSite?: string): void;
18
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie };
18
+ declare function getUrlParamByKey(key: string): any;
19
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie, getUrlParamByKey };