pb-sxp-ui 1.10.3 → 1.10.5

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 (43) hide show
  1. package/dist/index.cjs +122 -67
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +122 -67
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +4 -4
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +4 -4
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +122 -67
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +4 -4
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/FingerSwipeTip/index.js +2 -1
  14. package/es/core/components/SxpPageRender/FormatImage.js +9 -7
  15. package/es/core/components/SxpPageRender/LikeButton/index.js +2 -1
  16. package/es/core/components/SxpPageRender/Modal/index.js +2 -1
  17. package/es/core/components/SxpPageRender/NavBack.js +2 -1
  18. package/es/core/components/SxpPageRender/Nudge/index.js +2 -2
  19. package/es/core/components/SxpPageRender/ToggleButton/index.js +2 -1
  20. package/es/core/components/SxpPageRender/VideoWidget/index.js +3 -1
  21. package/es/core/components/SxpPageRender/index.js +28 -19
  22. package/es/core/context/EditorDataProvider.d.ts +2 -3
  23. package/es/core/context/SxpDataSourceProvider.js +44 -15
  24. package/es/core/utils/tool.d.ts +2 -1
  25. package/es/core/utils/tool.js +14 -1
  26. package/es/materials/sxp/MultiPosts/index.js +9 -13
  27. package/es/materials/sxp/cta/AniLinkPopup/index.js +2 -2
  28. package/lib/core/components/SxpPageRender/FingerSwipeTip/index.js +2 -1
  29. package/lib/core/components/SxpPageRender/FormatImage.js +9 -7
  30. package/lib/core/components/SxpPageRender/LikeButton/index.js +2 -1
  31. package/lib/core/components/SxpPageRender/Modal/index.js +2 -1
  32. package/lib/core/components/SxpPageRender/NavBack.js +2 -1
  33. package/lib/core/components/SxpPageRender/Nudge/index.js +1 -1
  34. package/lib/core/components/SxpPageRender/ToggleButton/index.js +2 -1
  35. package/lib/core/components/SxpPageRender/VideoWidget/index.js +3 -1
  36. package/lib/core/components/SxpPageRender/index.js +28 -19
  37. package/lib/core/context/EditorDataProvider.d.ts +2 -3
  38. package/lib/core/context/SxpDataSourceProvider.js +44 -15
  39. package/lib/core/utils/tool.d.ts +2 -1
  40. package/lib/core/utils/tool.js +15 -1
  41. package/lib/materials/sxp/MultiPosts/index.js +9 -13
  42. package/lib/materials/sxp/cta/AniLinkPopup/index.js +1 -1
  43. package/package.json +1 -1
@@ -5,6 +5,7 @@ const lodash_1 = require("lodash");
5
5
  const react_1 = tslib_1.__importStar(require("react"));
6
6
  const ReactDOM = tslib_1.__importStar(require("react-dom"));
7
7
  const hooks_1 = require("../../../../core/hooks");
8
+ const tool_1 = require("../../../../core/utils/tool");
8
9
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
9
10
  const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
10
11
  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;
@@ -179,6 +180,6 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
179
180
  }
180
181
  })), child()),
181
182
  react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
182
- react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
183
+ react_1.default.createElement("img", { src: (0, tool_1.getSpliceQueryUrl)((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon), alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
183
184
  };
184
185
  exports.default = (0, react_1.memo)(Modal);
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const left_png_1 = tslib_1.__importDefault(require("./left.png"));
6
+ const tool_1 = require("../../../core/utils/tool");
6
7
  const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
7
8
  var _a, _b, _c, _d, _e;
8
9
  return (react_1.default.createElement("button", { style: {
@@ -14,6 +15,6 @@ const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
14
15
  padding: 0,
15
16
  background: 'transparent'
16
17
  }, role: 'button', "aria-label": 'back button', onClick: onClick },
17
- react_1.default.createElement("img", { src: (data === null || data === void 0 ? void 0 : data.icon) || left_png_1.default, alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
18
+ react_1.default.createElement("img", { src: (0, tool_1.getSpliceQueryUrl)((data === null || data === void 0 ? void 0 : data.icon) || left_png_1.default), alt: 'back button', width: 100, style: { objectFit: 'cover' } })));
18
19
  };
19
20
  exports.default = (0, react_1.memo)(NavBack);
@@ -12,7 +12,7 @@ const Nudge = ({ nudge }) => {
12
12
  backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
13
13
  borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
14
14
  } },
15
- (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (react_1.default.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
15
+ (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (react_1.default.createElement("img", { src: (0, tool_1.getSpliceQueryUrl)(nudge.icon), alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
16
16
  react_1.default.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0, marginTop: 0 }), dangerouslySetInnerHTML: {
17
17
  __html: (0, tool_1.setFontForText)(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
18
18
  } })))));
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
+ const tool_1 = require("../../../../core/utils/tool");
4
5
  const react_1 = tslib_1.__importStar(require("react"));
5
6
  const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
6
7
  const [isTrue, setIsTure] = (0, react_1.useState)(defaultValue);
@@ -14,6 +15,6 @@ const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style
14
15
  setIsTure(defaultValue);
15
16
  }, [defaultValue]);
16
17
  return (react_1.default.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
17
- react_1.default.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
18
+ react_1.default.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: (0, tool_1.getSpliceQueryUrl)(isTrue ? activeIcon : unactiveIcon) })));
18
19
  };
19
20
  exports.default = (0, react_1.memo)(ToggleButton);
@@ -9,6 +9,7 @@ const hooks_1 = require("../../../../core/hooks");
9
9
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
10
10
  const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
11
11
  const VideoPlayer_1 = require("./VideoPlayer");
12
+ const tool_1 = require("../../../../core/utils/tool");
12
13
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
13
14
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
14
15
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
@@ -195,9 +196,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
195
196
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
196
197
  if (!isActive)
197
198
  return;
198
- const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
199
+ let videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
199
200
  if (!videoSrc)
200
201
  return;
202
+ videoSrc = (0, tool_1.getSpliceQueryUrl)(videoSrc);
201
203
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
202
204
  if (!videoPlayerWrapperNode)
203
205
  return;
@@ -29,6 +29,7 @@ const ConsentPopup_1 = tslib_1.__importDefault(require("./ConsentPopup"));
29
29
  const MultiPosts_1 = tslib_1.__importDefault(require("../../../materials/sxp/MultiPosts"));
30
30
  const EditorDataProvider_1 = require("../../../core/context/EditorDataProvider");
31
31
  const NavBack_1 = tslib_1.__importDefault(require("./NavBack"));
32
+ const tool_1 = require("../../../core/utils/tool");
32
33
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
33
34
  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;
34
35
  const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
@@ -115,20 +116,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
115
116
  else if (item === null || item === void 0 ? void 0 : item.product) {
116
117
  fromKName = 'productPage';
117
118
  }
118
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
119
- eventInfo: {
120
- sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
121
- eventSubject: 'sessionCompleted',
122
- eventDescription: 'Session completed',
123
- contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
124
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
125
- position: activeIndex + '',
126
- fromKName,
127
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
128
- ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
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
- }
131
- });
119
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
120
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
121
+ eventInfo: {
122
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
123
+ eventSubject: 'sessionCompleted',
124
+ eventDescription: 'Session completed',
125
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
126
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
127
+ position: activeIndex + '',
128
+ fromKName,
129
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
130
+ ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
131
+ 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 : ''
132
+ }
133
+ });
134
+ }
132
135
  }
133
136
  else if (document.visibilityState === 'visible') {
134
137
  if (skipLinkRef.current === true) {
@@ -211,7 +214,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
211
214
  new Function(link)();
212
215
  }
213
216
  })),
214
- react_1.default.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
217
+ react_1.default.createElement("img", { src: (0, tool_1.getSpliceQueryUrl)(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl), alt: 'logo' })));
215
218
  }
216
219
  return null;
217
220
  }, [globalConfig, activeIndex, visList]);
@@ -309,9 +312,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
309
312
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
310
313
  return;
311
314
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
312
- if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
315
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
313
316
  top += 40;
314
317
  }
318
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
319
+ top += minusHeight;
320
+ }
315
321
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
316
322
  return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
317
323
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -479,6 +485,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
479
485
  if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
480
486
  top += 40;
481
487
  }
488
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
489
+ top += minusHeight;
490
+ }
482
491
  return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
483
492
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
484
493
  visibility: ((_c = (_b = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
@@ -491,7 +500,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
491
500
  const renderView = (0, react_1.useMemo)(() => {
492
501
  if (loading) {
493
502
  return (react_1.default.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
494
- react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })));
503
+ react_1.default.createElement("img", { width: 64, height: 64, src: (0, tool_1.getSpliceQueryUrl)(loadingImage), alt: 'loading...', style: { objectFit: 'contain' } })));
495
504
  }
496
505
  return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
497
506
  return (react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden' } }, rec && (react_1.default.createElement(react_1.default.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading) ? (react_1.default.createElement("div", { style: {
@@ -501,7 +510,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
501
510
  justifyContent: 'center',
502
511
  alignItems: 'center'
503
512
  } },
504
- react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement(react_1.default.Fragment, null,
513
+ react_1.default.createElement("img", { width: 64, height: 64, src: (0, tool_1.getSpliceQueryUrl)(loadingImage), alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement(react_1.default.Fragment, null,
505
514
  renderBottom(rec, index),
506
515
  renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
507
516
  renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
@@ -538,7 +547,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
538
547
  eventInfo: {
539
548
  eventSubject: 'backMultiPostClick',
540
549
  eventDescription: 'backMultiPostClick',
541
- traceinfo: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : ''
550
+ traceInfo: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : ''
542
551
  }
543
552
  });
544
553
  location === null || location === void 0 ? void 0 : location.reload();
@@ -1,4 +1,5 @@
1
1
  import React, { FC, PropsWithChildren } from 'react';
2
+ import { PageData } from '../Pagebuilder/type';
2
3
  interface IEditorDataContext {
3
4
  sxpPrameter?: {
4
5
  bottomImage: string;
@@ -21,9 +22,7 @@ interface IEditorDataContext {
21
22
  openConsent?: boolean;
22
23
  setOpenConsent?: React.Dispatch<React.SetStateAction<boolean>>;
23
24
  sxpFontLinks?: any[];
24
- utmParameter?: {
25
- channels: string[];
26
- };
25
+ utmParameter?: PageData['utm_parameter'];
27
26
  consentPopupCate?: string;
28
27
  setConsentPopupCate?: React.Dispatch<React.SetStateAction<string>>;
29
28
  openMultiPosts?: boolean;
@@ -43,11 +43,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
43
43
  const popupCurTimeRef = (0, react_1.useRef)(null);
44
44
  const [isNoMoreData, setIsNoMoreData] = (0, react_1.useState)(false);
45
45
  const [globalConfig, setGlobalConfig] = (0, react_1.useState)((_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf) === null || _b === void 0 ? void 0 : _b.globalConfig);
46
- const [pageData, setPageData] = (0, react_1.useState)(data);
46
+ const [pageData, setPageData] = (0, react_1.useState)();
47
47
  const [showConsent, setShowConsent] = (0, react_1.useState)(false);
48
48
  const [layoutVariantId, setLayoutVariantId] = (0, react_1.useState)();
49
49
  const [channel, setChannel] = (0, react_1.useState)();
50
50
  const [eventTimeList, setEventTimeList] = (0, react_1.useState)([]);
51
+ const [playbookType, setPlaybookType] = (0, react_1.useState)();
52
+ const finalPageData = (0, react_1.useMemo)(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
51
53
  const isShowConsent = (0, react_1.useMemo)(() => {
52
54
  var _a, _b, _c, _d;
53
55
  return (((((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === 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.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent) &&
@@ -220,7 +222,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
220
222
  userInfo = {};
221
223
  }
222
224
  const sessionID = (0, sessionStore_1.storeAndLoadFeSessionId)();
223
- const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), ((0, tool_1.getDevice)() && { sxpDevice: (0, tool_1.getDevice)() })), ((0, tool_1.getSystem)() && { sxpSystem: (0, tool_1.getSystem)() })), ((0, tool_1.getBrowserInfo)() && { sxpBrowser: (0, tool_1.getBrowserInfo)() })), { playbookType: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' ? 'organicMenu' : 'paidMedia' }), (layoutVariantId && reportLayId && { layoutVariantId }));
225
+ const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, { playbookType }), eventInfo), ((0, tool_1.getDevice)() && { sxpDevice: (0, tool_1.getDevice)() })), ((0, tool_1.getSystem)() && { sxpSystem: (0, tool_1.getSystem)() })), ((0, tool_1.getBrowserInfo)() && { sxpBrowser: (0, tool_1.getBrowserInfo)() })), (layoutVariantId && reportLayId && { layoutVariantId })), ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) && channel && { position: Number(eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) + 1 + '' }));
224
226
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
225
227
  const realEventInfo = Object.entries(ef)
226
228
  .map(([k, v]) => v && { name: k, value: v })
@@ -234,7 +236,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
234
236
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
235
237
  type: 'beacon'
236
238
  });
237
- }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
239
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
238
240
  const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
239
241
  var _a, _b, _c, _d, _e;
240
242
  if (!enableReportEvent ||
@@ -394,17 +396,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
394
396
  return;
395
397
  setLoading(true);
396
398
  let layId;
399
+ let pbType;
397
400
  getRecommendVideos()
398
401
  .then((data) => {
399
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
402
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
400
403
  if (data) {
401
404
  const list = getFilterRecList(data);
402
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
403
- list.unshift('organic menu');
404
- }
405
- setRtcList(list);
406
- setCacheRtcList(list);
407
405
  let curData;
406
+ let gldata;
408
407
  if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
409
408
  const id = (_b = (_a = data === null || data === void 0 ? void 0 : data.layoutVariantId) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[1];
410
409
  if (id) {
@@ -414,19 +413,49 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
414
413
  if (curData) {
415
414
  setPageData(curData);
416
415
  document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
417
- setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
416
+ gldata = (_e = (_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.sxpPageConf) === null || _e === void 0 ? void 0 : _e.globalConfig;
417
+ setGlobalConfig(gldata);
418
418
  onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
419
- if ((_k = (_j = (_h = (_g = (_f = (_e = curData === null || curData === void 0 ? void 0 : curData.data) === null || _e === void 0 ? void 0 : _e.globalConfig) === null || _f === void 0 ? void 0 : _f.consent) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.privacy_necessity)
419
+ if ((_j = (_h = (_g = (_f = gldata === null || gldata === void 0 ? void 0 : gldata.consent) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.item) === null || _h === void 0 ? void 0 : _h.props) === null || _j === void 0 ? void 0 : _j.privacy_necessity)
420
420
  setShowConsent(true);
421
421
  }
422
+ else {
423
+ setShowConsent(true);
424
+ }
425
+ }
426
+ }
427
+ else {
428
+ setShowConsent(true);
429
+ }
430
+ if (!channel) {
431
+ if ((gldata === null || gldata === void 0 ? void 0 : gldata.playbook) === 'organic menu' || (!gldata && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu')) {
432
+ setPlaybookType('organicMenu');
433
+ list.unshift('organic menu');
434
+ pbType = 'organicMenu';
422
435
  }
436
+ else {
437
+ setPlaybookType('paidMedia');
438
+ pbType = 'paidMedia';
439
+ }
440
+ }
441
+ setRtcList(list);
442
+ setCacheRtcList(list);
443
+ bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
444
+ if (channel) {
445
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
446
+ eventInfo: {
447
+ eventSubject: 'multiPostClick',
448
+ eventDescription: 'multiPostClick',
449
+ traceInfo: (_m = (_l = (_k = list === null || list === void 0 ? void 0 : list[0]) === null || _k === void 0 ? void 0 : _k.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : '',
450
+ branchfeed: channel
451
+ }
452
+ });
423
453
  }
424
- bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
425
454
  }
426
455
  })
427
456
  .finally(() => {
428
457
  bffEventReport({
429
- eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
458
+ eventInfo: Object.assign(Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId })), (pbType && { playbookType: pbType }))
430
459
  });
431
460
  setLoading(false);
432
461
  });
@@ -435,7 +464,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
435
464
  if (!isPreview)
436
465
  return;
437
466
  setLoading(true);
438
- bffGetTagList(pageData);
467
+ bffGetTagList(data);
439
468
  getRecommendVideos()
440
469
  .then((data) => {
441
470
  if (data) {
@@ -510,7 +539,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
510
539
  mutateUnlike: bffMutateUnlike,
511
540
  submitForm: bffSubmitForm,
512
541
  tagList,
513
- pageData
542
+ pageData: finalPageData
514
543
  }))));
515
544
  };
516
545
  exports.default = (0, react_1.memo)(SxpDataSourceProvider);
@@ -12,4 +12,5 @@ declare function getSystem(): string | null;
12
12
  declare function getDevice(): string | null;
13
13
  declare function getCookie(val: string): string;
14
14
  declare function getScreenReader(): boolean;
15
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };
15
+ declare const getSpliceQueryUrl: (url?: string) => string;
16
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, getSpliceQueryUrl };
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getScreenReader = exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
3
+ exports.getSpliceQueryUrl = exports.getScreenReader = exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
4
4
  const uuid_1 = require("uuid");
5
5
  function uuid(len, radix) {
6
6
  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
@@ -180,3 +180,17 @@ function getScreenReader() {
180
180
  /ChromeVox/i.test(userAgent));
181
181
  }
182
182
  exports.getScreenReader = getScreenReader;
183
+ const getSpliceQueryUrl = (url) => {
184
+ if (!url)
185
+ return '';
186
+ if ((url === null || url === void 0 ? void 0 : url.indexOf('http')) === -1)
187
+ return url;
188
+ let query = 'x-im-piez=on';
189
+ if ((url === null || url === void 0 ? void 0 : url.indexOf('?')) !== -1) {
190
+ return url + (query ? '&' + query : '');
191
+ }
192
+ else {
193
+ return url + (query ? '?' + query : '');
194
+ }
195
+ };
196
+ exports.getSpliceQueryUrl = getSpliceQueryUrl;
@@ -7,6 +7,7 @@ require("./index.less");
7
7
  const hooks_1 = require("../../../core/hooks");
8
8
  const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
9
9
  const react_2 = require("swiper/react");
10
+ const tool_1 = require("../../../core/utils/tool");
10
11
  const MultiPosts = (_a) => {
11
12
  var _b, _c;
12
13
  var { bgImgUrl, style, recData } = _a, props = tslib_1.__rest(_a, ["bgImgUrl", "style", "recData"]);
@@ -14,7 +15,7 @@ const MultiPosts = (_a) => {
14
15
  const { isActive } = (0, react_2.useSwiperSlide)() || {};
15
16
  const initRef = (0, react_1.useRef)(false);
16
17
  const viewTime = (0, react_1.useRef)();
17
- const traceinfo = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : '';
18
+ const traceInfo = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : '';
18
19
  const getPropsVal = (0, react_1.useCallback)((index, str) => {
19
20
  try {
20
21
  return new Function('props', 'str', `if (str) {
@@ -30,14 +31,6 @@ const MultiPosts = (_a) => {
30
31
  const value = v === null || v === void 0 ? void 0 : v.value;
31
32
  if (!value)
32
33
  return;
33
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
34
- eventInfo: {
35
- eventSubject: 'multiPostClick',
36
- eventDescription: 'multiPostClick',
37
- traceinfo,
38
- branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
39
- }
40
- });
41
34
  if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
42
35
  endMultiPost('multipostClick');
43
36
  updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
@@ -55,18 +48,19 @@ const MultiPosts = (_a) => {
55
48
  eventDescription: 'startMultiPost',
56
49
  contentFormat: 'IMAGE',
57
50
  position: '0',
58
- traceinfo
51
+ traceInfo
59
52
  }
60
53
  });
61
54
  }, []);
62
55
  const endMultiPost = (0, react_1.useCallback)((nextStep) => {
56
+ curTime.current = new Date();
63
57
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
64
58
  eventInfo: {
65
59
  eventSubject: 'endMultiPost',
66
60
  eventDescription: 'endMultiPost',
67
61
  contentFormat: 'IMAGE',
68
62
  position: '0',
69
- traceinfo,
63
+ traceInfo,
70
64
  nextStep: nextStep || 'others',
71
65
  timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
72
66
  }
@@ -82,6 +76,8 @@ const MultiPosts = (_a) => {
82
76
  }
83
77
  }, [isActive]);
84
78
  (0, react_1.useEffect)(() => {
79
+ if (!isActive)
80
+ return;
85
81
  const onShow = () => startMultiPost();
86
82
  const onHide = () => endMultiPost();
87
83
  event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -92,8 +88,8 @@ const MultiPosts = (_a) => {
92
88
  };
93
89
  }, [isActive]);
94
90
  return (react_1.default.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), (0, materials_1.getBgStyle)(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
95
- return (react_1.default.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
96
- react_1.default.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
91
+ return (react_1.default.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
92
+ react_1.default.createElement("img", { className: 'multiposts-btn-img', src: (0, tool_1.getSpliceQueryUrl)(getPropsVal(index, 'Url')), alt: `multiposts-img-${index + 1}` })));
97
93
  })));
98
94
  };
99
95
  exports.default = (0, react_1.memo)(MultiPosts);
@@ -67,7 +67,7 @@ const AniLinkPopup = (_a) => {
67
67
  paddingLeft: '6px'
68
68
  } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({}, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default['aniLinkPopup']} ${aniNamStyle} ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
69
69
  react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
70
- react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
70
+ react_1.default.createElement("img", { src: (0, tool_1.getSpliceQueryUrl)((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon), alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
71
71
  react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
72
72
  (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
73
73
  __html: (0, tool_1.setFontForText)((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.10.3",
3
+ "version": "1.10.5",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",