pb-sxp-ui 1.15.22-alpha.4 → 1.15.22

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 (26) hide show
  1. package/dist/index.cjs +6605 -6552
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +46 -46
  4. package/dist/index.js +6605 -6552
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +6 -6
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +6 -6
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +6605 -6552
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +6 -6
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +15 -14
  15. package/es/core/components/SxpPageRender/index.d.ts +1 -0
  16. package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
  17. package/es/core/context/SxpDataSourceProvider.js +93 -41
  18. package/es/materials/sxp/popup/CommodityDetail/index.js +2 -2
  19. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  20. package/lib/core/components/SxpPageRender/VideoWidget/index.js +15 -14
  21. package/lib/core/components/SxpPageRender/index.d.ts +1 -0
  22. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
  23. package/lib/core/context/SxpDataSourceProvider.js +93 -41
  24. package/lib/materials/sxp/popup/CommodityDetail/index.js +2 -2
  25. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  26. package/package.json +1 -1
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -8,7 +8,7 @@ import { mountVideoPlayerAtNode } from './VideoPlayer';
8
8
  import { useSxpDataSource } from '../../../../core/hooks';
9
9
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
10
10
  const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
11
- var _a, _b, _c, _d, _e;
11
+ var _a, _b;
12
12
  const [isPauseVideo, setIsPauseVideo] = useState(false);
13
13
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
14
14
  const videoStartTime = useRef(0);
@@ -28,9 +28,7 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
28
28
  const scene = rec.video.scene;
29
29
  const videoUrl = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl) || ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url);
30
30
  const videoCover = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl) ? scene === null || scene === void 0 ? void 0 : scene.cover : (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
31
- const videoPoster = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl)
32
- ? (_c = scene === null || scene === void 0 ? void 0 : scene.cover) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image
33
- : (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.cover) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image;
31
+ const videoPoster = videoCover || (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image);
34
32
  useImperativeHandle(ref, () => {
35
33
  return {
36
34
  setLoopPlay(v) {
@@ -86,22 +84,27 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
86
84
  setIsLoadFinish(true);
87
85
  }, []);
88
86
  const handleStartPlay = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
89
- var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
87
+ var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
90
88
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
91
89
  return;
92
90
  setIsPauseVideo(false);
93
91
  const item = data[index];
94
- if (item && ((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.duration)) {
95
- videoStartTime.current = ((_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) || 0;
96
- const videoDuration = ((_j = (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.duration) !== null && _j !== void 0 ? _j : 0).toFixed(2);
97
- const videoCurrentTime = ((_l = (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.currentTime) !== null && _l !== void 0 ? _l : 0).toFixed(2);
92
+ if (item && ((_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration)) {
93
+ videoStartTime.current = ((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) || 0;
94
+ const videoDuration = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) !== null && _f !== void 0 ? _f : 0).toFixed(2);
95
+ const videoCurrentTime = ((_h = (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) !== null && _h !== void 0 ? _h : 0).toFixed(2);
98
96
  const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
99
97
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
100
- eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId) !== null && _o !== void 0 ? _o : '', contentName: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.title) !== null && _q !== void 0 ? _q : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.tags) !== null && _s !== void 0 ? _s : []), position: index + '', contentFormat: 'video', traceInfo: (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
98
+ eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '', contentName: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []), position: index + '', contentFormat: 'video', traceInfo: (_q = item === null || item === void 0 ? void 0 : item.video) === null || _q === void 0 ? void 0 : _q.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
101
99
  });
102
100
  isFirstPlayRef.current = false;
103
101
  }
104
102
  }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
103
+ const setCurrentTimeByStartTime = useCallback(() => {
104
+ if (isDiyH5) {
105
+ videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
106
+ }
107
+ }, []);
105
108
  const handLoadeddata = useCallback(() => {
106
109
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
107
110
  return;
@@ -126,9 +129,7 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
126
129
  const handleLoadedmetadata = useCallback(() => {
127
130
  if (!videoRef.current)
128
131
  return;
129
- if (isDiyH5) {
130
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
131
- }
132
+ setCurrentTimeByStartTime();
132
133
  loadedTimeRef.current = new Date();
133
134
  handleStartPlay();
134
135
  handLoadeddata();
@@ -240,7 +241,7 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
240
241
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
241
242
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
242
243
  var _a;
243
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
244
+ setCurrentTimeByStartTime();
244
245
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
245
246
  });
246
247
  }
package/es/core/components/SxpPageRender/index.d.ts CHANGED
@@ -67,6 +67,7 @@ export interface ISxpPageRenderProps {
67
67
  y: number;
68
68
  };
69
69
  converApi?: any;
70
+ pixel?: any;
70
71
  consentPopup?: any;
71
72
  multiPosts?: any;
72
73
  playbook?: 'paid media' | 'organic menu';
package/es/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -72,7 +72,7 @@ export interface ISxpDataSourceContext {
72
72
  bffFbReport?: (body: {
73
73
  eventName: 'PageView' | 'ProductView' | 'ViewContent';
74
74
  product?: any;
75
- }) => Promise<any> | undefined | boolean;
75
+ }) => void;
76
76
  curTime?: any;
77
77
  h5EnterLink?: () => void;
78
78
  themeTag?: any;
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -105,6 +105,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
105
105
  return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + storeAndLoadFeUserId();
106
106
  }, [bffDataSource]);
107
107
  const bffFetch = useCallback((path, options) => {
108
+ var _a, _b;
108
109
  if (!bffDataSource)
109
110
  return;
110
111
  const url = bffDataSource.url;
@@ -112,7 +113,33 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
112
113
  const queryString = qs.stringify(options.query);
113
114
  path = `${path}?${queryString}`;
114
115
  }
115
- if (options.type === 'beacon' && navigator.sendBeacon) {
116
+ let isTikTokChannel = false;
117
+ const params = {};
118
+ const queryString = location.search.slice(1);
119
+ (_a = splitUrlParams(queryString)) === null || _a === void 0 ? void 0 : _a.forEach((val) => {
120
+ const key = val.split('=')[0];
121
+ const value = val.split('=')[1];
122
+ params[key] = value;
123
+ });
124
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
125
+ if (cl_source &&
126
+ ((_b = [
127
+ '40A-SPRK--DRESS_EYEWEAR-',
128
+ '41A-SPRK--MADRAGUE-',
129
+ '42A-SPRK--MOOD-',
130
+ '43A-SPRK--SUMMER-',
131
+ '44A-SPRK--DRESS_EYEWEAR-',
132
+ '45A-SPRK--MADRAGUE-',
133
+ '46A-SPRK--MOOD-',
134
+ '47A-SPRK--SUMMER-',
135
+ '48A-SPRK--DRESS_EYEWEAR-',
136
+ '49A-SPRK--MADRAGUE-',
137
+ '50A-SPRK--MOOD-',
138
+ '51A-SPRK--SUMMER-'
139
+ ]) === null || _b === void 0 ? void 0 : _b.includes(cl_source))) {
140
+ isTikTokChannel = true;
141
+ }
142
+ if (options.type === 'beacon' && navigator.sendBeacon && !isTikTokChannel) {
116
143
  return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
117
144
  JSON.stringify({
118
145
  body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
@@ -122,11 +149,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
122
149
  }));
123
150
  }
124
151
  return window
125
- .fetch(`${url}/api/${path}`, {
126
- headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
127
- method: options.method,
128
- body: JSON.stringify(options.body)
129
- })
152
+ .fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: isTikTokChannel
153
+ ? JSON.stringify({
154
+ body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
155
+ })
156
+ : JSON.stringify(options.body) }, (isTikTokChannel && { keepalive: true })))
130
157
  .then((res) => res.json())
131
158
  .catch((err) => Promise.reject(err));
132
159
  }, [bffDataSource, fakeUserId]);
@@ -291,23 +318,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
291
318
  playbookType,
292
319
  bffDataSource
293
320
  ]);
294
- const bffFbReport = useCallback(({ eventName, product }) => {
295
- var _a, _b, _c, _d, _e, _f, _g;
296
- if (!enableReportEvent ||
297
- !enabledMetaConversionApi ||
298
- (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
299
- !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
300
- return;
301
- }
302
- const jsonParams = cloneDeep((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]);
321
+ const getEventParamsByJson = useCallback((json, product) => {
322
+ var _a, _b, _c;
323
+ const jsonParams = cloneDeep(json);
303
324
  const urlParams = new URLSearchParams(window.location.search);
304
325
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
305
326
  const fix_par = {
306
- event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
327
+ event_source_url: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
307
328
  external_id: fakeUserId,
308
- client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
329
+ 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 : '',
309
330
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
310
- fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
331
+ fbp: getCookie('_fbp') ? `${getCookie('_fbp')}` : '',
311
332
  time: Math.floor(Date.now() / 1000)
312
333
  };
313
334
  const regex = /\{\{(.*?)\}\}/g;
@@ -319,7 +340,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
319
340
  }
320
341
  else {
321
342
  for (const key in obj) {
322
- if (obj.hasOwnProperty(key)) {
343
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
323
344
  const value = obj === null || obj === void 0 ? void 0 : obj[key];
324
345
  if (typeof value === 'object') {
325
346
  getEventParams(value);
@@ -356,28 +377,59 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
356
377
  }
357
378
  };
358
379
  getEventParams(jsonParams);
359
- const params = {};
360
- const queryString = location.search.slice(1);
361
- (_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
362
- const key = val.split('=')[0];
363
- const value = val.split('=')[1];
364
- params[key] = value;
365
- });
366
- const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
367
- return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
368
- method: 'POST',
369
- body: jsonParams,
370
- type: 'beacon'
371
- });
372
- }, [
373
- bffFetch,
374
- enableReportEvent,
375
- enabledMetaConversionApi,
376
- globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
377
- globalConfig,
378
- fakeUserId,
379
- bffDataSource
380
- ]);
380
+ return jsonParams;
381
+ }, [fakeUserId]);
382
+ const bffFbReport = useCallback(({ eventName, product }) => {
383
+ var _a, _b, _c, _d;
384
+ if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
385
+ return;
386
+ }
387
+ const pixelEventParamsJson = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _a === void 0 ? void 0 : _a[eventName];
388
+ if ((pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
389
+ function updateQueryStringParameter(uri, key, value) {
390
+ const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
391
+ const separator = uri.indexOf('?') !== -1 ? '&' : '?';
392
+ if (uri.match(re)) {
393
+ return uri.replace(re, '$1' + key + '=' + value + '$2');
394
+ }
395
+ else {
396
+ return uri + separator + key + '=' + value;
397
+ }
398
+ }
399
+ if (eventName === 'PageView' && (pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) === 'PageView') {
400
+ const currentUrl = window.location.href;
401
+ const newUrl = updateQueryStringParameter(currentUrl, 'timestamp', Date.now());
402
+ history.pushState({ path: newUrl }, '', newUrl);
403
+ }
404
+ else {
405
+ const body = getEventParamsByJson(pixelEventParamsJson);
406
+ window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, body);
407
+ if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
408
+ window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
409
+ }
410
+ }
411
+ }
412
+ else if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
413
+ window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
414
+ }
415
+ const converApiEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName];
416
+ if (enabledMetaConversionApi && converApiEventParamsJson) {
417
+ const body = getEventParamsByJson(converApiEventParamsJson, product);
418
+ const params = {};
419
+ const queryString = location.search.slice(1);
420
+ (_c = splitUrlParams(queryString)) === null || _c === void 0 ? void 0 : _c.forEach((val) => {
421
+ const key = val.split('=')[0];
422
+ const value = val.split('=')[1];
423
+ params[key] = value;
424
+ });
425
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
426
+ bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_d = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _d === void 0 ? void 0 : _d['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
427
+ method: 'POST',
428
+ body,
429
+ type: 'beacon'
430
+ });
431
+ }
432
+ }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson]);
381
433
  const bffMutateLike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
382
434
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
383
435
  return res === null || res === void 0 ? void 0 : res.success;
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
3
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
+ import CommodityGroup from '../../template/components/CommodityGroup';
4
5
  import { useSxpDataSource } from '../../../../core/hooks';
5
6
  import './index.less';
6
7
  import { A11y, Autoplay, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper/modules';
@@ -10,7 +11,6 @@ import Modal from '../../../../core/components/SxpPageRender/Modal';
10
11
  import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
11
12
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
13
  import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
13
- import CommodityGroup from '../../template/components/CommodityGroup';
14
14
  import { getPriceText } from '../../../../core/utils/materials';
15
15
  const CommodityDetail = (_a) => {
16
16
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
@@ -67,7 +67,7 @@ const CommodityDetail = (_a) => {
67
67
  };
68
68
  }, []);
69
69
  const priceText = getPriceText({
70
- product: product,
70
+ product,
71
71
  enableFormattedPrice: (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice,
72
72
  globalConfig,
73
73
  style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
3
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
+ import CommodityGroup from '../../template/components/CommodityGroup';
4
5
  import { useSxpDataSource } from '../../../../core/hooks';
5
6
  import './index.less';
6
7
  import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
@@ -10,7 +11,6 @@ import ExpandableText from '../../../../core/components/SxpPageRender/Expandable
10
11
  import { useEventReport } from '../../../../core/hooks/useEventReport';
11
12
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
13
  import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
13
- import CommodityGroup from '../../template/components/CommodityGroup';
14
14
  import { getPriceText } from '../../../../core/utils/materials';
15
15
  const CommodityDetailDiroNew = (_a) => {
16
16
  var _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;
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -10,7 +10,7 @@ const VideoPlayer_1 = require("./VideoPlayer");
10
10
  const hooks_1 = require("../../../../core/hooks");
11
11
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
12
12
  const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
13
- var _a, _b, _c, _d, _e;
13
+ var _a, _b;
14
14
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
15
15
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
16
16
  const videoStartTime = (0, react_1.useRef)(0);
@@ -30,9 +30,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
30
30
  const scene = rec.video.scene;
31
31
  const videoUrl = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl) || ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url);
32
32
  const videoCover = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl) ? scene === null || scene === void 0 ? void 0 : scene.cover : (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
33
- const videoPoster = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl)
34
- ? (_c = scene === null || scene === void 0 ? void 0 : scene.cover) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image
35
- : (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.cover) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image;
33
+ const videoPoster = videoCover || (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image);
36
34
  (0, react_1.useImperativeHandle)(ref, () => {
37
35
  return {
38
36
  setLoopPlay(v) {
@@ -88,22 +86,27 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
88
86
  setIsLoadFinish(true);
89
87
  }, []);
90
88
  const handleStartPlay = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
91
- var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
89
+ var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
92
90
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
93
91
  return;
94
92
  setIsPauseVideo(false);
95
93
  const item = data[index];
96
- if (item && ((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.duration)) {
97
- videoStartTime.current = ((_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) || 0;
98
- const videoDuration = ((_j = (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.duration) !== null && _j !== void 0 ? _j : 0).toFixed(2);
99
- const videoCurrentTime = ((_l = (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.currentTime) !== null && _l !== void 0 ? _l : 0).toFixed(2);
94
+ if (item && ((_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration)) {
95
+ videoStartTime.current = ((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) || 0;
96
+ const videoDuration = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) !== null && _f !== void 0 ? _f : 0).toFixed(2);
97
+ const videoCurrentTime = ((_h = (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) !== null && _h !== void 0 ? _h : 0).toFixed(2);
100
98
  const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
101
99
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
102
- eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId) !== null && _o !== void 0 ? _o : '', contentName: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.title) !== null && _q !== void 0 ? _q : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.tags) !== null && _s !== void 0 ? _s : []), position: index + '', contentFormat: 'video', traceInfo: (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
100
+ eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '', contentName: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []), position: index + '', contentFormat: 'video', traceInfo: (_q = item === null || item === void 0 ? void 0 : item.video) === null || _q === void 0 ? void 0 : _q.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
103
101
  });
104
102
  isFirstPlayRef.current = false;
105
103
  }
106
104
  }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
105
+ const setCurrentTimeByStartTime = (0, react_1.useCallback)(() => {
106
+ if (isDiyH5) {
107
+ videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
108
+ }
109
+ }, []);
107
110
  const handLoadeddata = (0, react_1.useCallback)(() => {
108
111
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
109
112
  return;
@@ -128,9 +131,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
128
131
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
129
132
  if (!videoRef.current)
130
133
  return;
131
- if (isDiyH5) {
132
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
133
- }
134
+ setCurrentTimeByStartTime();
134
135
  loadedTimeRef.current = new Date();
135
136
  handleStartPlay();
136
137
  handLoadeddata();
@@ -242,7 +243,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
242
243
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
243
244
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
244
245
  var _a;
245
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
246
+ setCurrentTimeByStartTime();
246
247
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
247
248
  });
248
249
  }
package/lib/core/components/SxpPageRender/index.d.ts CHANGED
@@ -67,6 +67,7 @@ export interface ISxpPageRenderProps {
67
67
  y: number;
68
68
  };
69
69
  converApi?: any;
70
+ pixel?: any;
70
71
  consentPopup?: any;
71
72
  multiPosts?: any;
72
73
  playbook?: 'paid media' | 'organic menu';
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -72,7 +72,7 @@ export interface ISxpDataSourceContext {
72
72
  bffFbReport?: (body: {
73
73
  eventName: 'PageView' | 'ProductView' | 'ViewContent';
74
74
  product?: any;
75
- }) => Promise<any> | undefined | boolean;
75
+ }) => void;
76
76
  curTime?: any;
77
77
  h5EnterLink?: () => void;
78
78
  themeTag?: any;
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -108,6 +108,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
108
108
  return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + (0, localStore_1.storeAndLoadFeUserId)();
109
109
  }, [bffDataSource]);
110
110
  const bffFetch = (0, react_1.useCallback)((path, options) => {
111
+ var _a, _b;
111
112
  if (!bffDataSource)
112
113
  return;
113
114
  const url = bffDataSource.url;
@@ -115,7 +116,33 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
115
116
  const queryString = qs_1.default.stringify(options.query);
116
117
  path = `${path}?${queryString}`;
117
118
  }
118
- if (options.type === 'beacon' && navigator.sendBeacon) {
119
+ let isTikTokChannel = false;
120
+ const params = {};
121
+ const queryString = location.search.slice(1);
122
+ (_a = (0, tool_1.splitUrlParams)(queryString)) === null || _a === void 0 ? void 0 : _a.forEach((val) => {
123
+ const key = val.split('=')[0];
124
+ const value = val.split('=')[1];
125
+ params[key] = value;
126
+ });
127
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
128
+ if (cl_source &&
129
+ ((_b = [
130
+ '40A-SPRK--DRESS_EYEWEAR-',
131
+ '41A-SPRK--MADRAGUE-',
132
+ '42A-SPRK--MOOD-',
133
+ '43A-SPRK--SUMMER-',
134
+ '44A-SPRK--DRESS_EYEWEAR-',
135
+ '45A-SPRK--MADRAGUE-',
136
+ '46A-SPRK--MOOD-',
137
+ '47A-SPRK--SUMMER-',
138
+ '48A-SPRK--DRESS_EYEWEAR-',
139
+ '49A-SPRK--MADRAGUE-',
140
+ '50A-SPRK--MOOD-',
141
+ '51A-SPRK--SUMMER-'
142
+ ]) === null || _b === void 0 ? void 0 : _b.includes(cl_source))) {
143
+ isTikTokChannel = true;
144
+ }
145
+ if (options.type === 'beacon' && navigator.sendBeacon && !isTikTokChannel) {
119
146
  return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
120
147
  JSON.stringify({
121
148
  body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
@@ -125,11 +152,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
125
152
  }));
126
153
  }
127
154
  return window
128
- .fetch(`${url}/api/${path}`, {
129
- headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
130
- method: options.method,
131
- body: JSON.stringify(options.body)
132
- })
155
+ .fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: isTikTokChannel
156
+ ? JSON.stringify({
157
+ body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
158
+ })
159
+ : JSON.stringify(options.body) }, (isTikTokChannel && { keepalive: true })))
133
160
  .then((res) => res.json())
134
161
  .catch((err) => Promise.reject(err));
135
162
  }, [bffDataSource, fakeUserId]);
@@ -294,23 +321,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
294
321
  playbookType,
295
322
  bffDataSource
296
323
  ]);
297
- const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
298
- var _a, _b, _c, _d, _e, _f, _g;
299
- if (!enableReportEvent ||
300
- !enabledMetaConversionApi ||
301
- (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
302
- !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
303
- return;
304
- }
305
- const jsonParams = (0, lodash_1.cloneDeep)((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]);
324
+ const getEventParamsByJson = (0, react_1.useCallback)((json, product) => {
325
+ var _a, _b, _c;
326
+ const jsonParams = (0, lodash_1.cloneDeep)(json);
306
327
  const urlParams = new URLSearchParams(window.location.search);
307
328
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
308
329
  const fix_par = {
309
- event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
330
+ event_source_url: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
310
331
  external_id: fakeUserId,
311
- client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
332
+ 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 : '',
312
333
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
313
- fbp: (0, tool_1.getCookie)('_fbp') ? `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` : '',
334
+ fbp: (0, tool_1.getCookie)('_fbp') ? `${(0, tool_1.getCookie)('_fbp')}` : '',
314
335
  time: Math.floor(Date.now() / 1000)
315
336
  };
316
337
  const regex = /\{\{(.*?)\}\}/g;
@@ -322,7 +343,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
322
343
  }
323
344
  else {
324
345
  for (const key in obj) {
325
- if (obj.hasOwnProperty(key)) {
346
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
326
347
  const value = obj === null || obj === void 0 ? void 0 : obj[key];
327
348
  if (typeof value === 'object') {
328
349
  getEventParams(value);
@@ -359,28 +380,59 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
359
380
  }
360
381
  };
361
382
  getEventParams(jsonParams);
362
- const params = {};
363
- const queryString = location.search.slice(1);
364
- (_f = (0, tool_1.splitUrlParams)(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
365
- const key = val.split('=')[0];
366
- const value = val.split('=')[1];
367
- params[key] = value;
368
- });
369
- const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
370
- return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
371
- method: 'POST',
372
- body: jsonParams,
373
- type: 'beacon'
374
- });
375
- }, [
376
- bffFetch,
377
- enableReportEvent,
378
- enabledMetaConversionApi,
379
- globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
380
- globalConfig,
381
- fakeUserId,
382
- bffDataSource
383
- ]);
383
+ return jsonParams;
384
+ }, [fakeUserId]);
385
+ const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
386
+ var _a, _b, _c, _d;
387
+ if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
388
+ return;
389
+ }
390
+ const pixelEventParamsJson = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _a === void 0 ? void 0 : _a[eventName];
391
+ if ((pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
392
+ function updateQueryStringParameter(uri, key, value) {
393
+ const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
394
+ const separator = uri.indexOf('?') !== -1 ? '&' : '?';
395
+ if (uri.match(re)) {
396
+ return uri.replace(re, '$1' + key + '=' + value + '$2');
397
+ }
398
+ else {
399
+ return uri + separator + key + '=' + value;
400
+ }
401
+ }
402
+ if (eventName === 'PageView' && (pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) === 'PageView') {
403
+ const currentUrl = window.location.href;
404
+ const newUrl = updateQueryStringParameter(currentUrl, 'timestamp', Date.now());
405
+ history.pushState({ path: newUrl }, '', newUrl);
406
+ }
407
+ else {
408
+ const body = getEventParamsByJson(pixelEventParamsJson);
409
+ window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, body);
410
+ if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
411
+ window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
412
+ }
413
+ }
414
+ }
415
+ else if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
416
+ window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
417
+ }
418
+ const converApiEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName];
419
+ if (enabledMetaConversionApi && converApiEventParamsJson) {
420
+ const body = getEventParamsByJson(converApiEventParamsJson, product);
421
+ const params = {};
422
+ const queryString = location.search.slice(1);
423
+ (_c = (0, tool_1.splitUrlParams)(queryString)) === null || _c === void 0 ? void 0 : _c.forEach((val) => {
424
+ const key = val.split('=')[0];
425
+ const value = val.split('=')[1];
426
+ params[key] = value;
427
+ });
428
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
429
+ bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_d = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _d === void 0 ? void 0 : _d['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
430
+ method: 'POST',
431
+ body,
432
+ type: 'beacon'
433
+ });
434
+ }
435
+ }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson]);
384
436
  const bffMutateLike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
385
437
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
386
438
  return res === null || res === void 0 ? void 0 : res.success;