pb-sxp-ui 1.10.3 → 1.10.4

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 (19) hide show
  1. package/dist/index.cjs +75 -44
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +75 -44
  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 +75 -44
  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/index.js +24 -16
  14. package/es/core/context/SxpDataSourceProvider.js +44 -15
  15. package/es/materials/sxp/MultiPosts/index.js +6 -12
  16. package/lib/core/components/SxpPageRender/index.js +24 -16
  17. package/lib/core/context/SxpDataSourceProvider.js +44 -15
  18. package/lib/materials/sxp/MultiPosts/index.js +6 -12
  19. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -655,11 +655,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
655
655
  const popupCurTimeRef = useRef(null);
656
656
  const [isNoMoreData, setIsNoMoreData] = useState(false);
657
657
  const [globalConfig, setGlobalConfig] = 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);
658
- const [pageData, setPageData] = useState(data);
658
+ const [pageData, setPageData] = useState();
659
659
  const [showConsent, setShowConsent] = useState(false);
660
660
  const [layoutVariantId, setLayoutVariantId] = useState();
661
661
  const [channel, setChannel] = useState();
662
662
  const [eventTimeList, setEventTimeList] = useState([]);
663
+ const [playbookType, setPlaybookType] = useState();
664
+ const finalPageData = useMemo(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
663
665
  const isShowConsent = useMemo(() => {
664
666
  var _a, _b, _c, _d;
665
667
  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) &&
@@ -846,7 +848,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
846
848
  };
847
849
  }
848
850
  const sessionID = storeAndLoadFeSessionId();
849
- const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), (getDevice$1() && { sxpDevice: getDevice$1() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: getBrowserInfo() })), { playbookType: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' ? 'organicMenu' : 'paidMedia' }), (layoutVariantId && reportLayId && { layoutVariantId }));
851
+ 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), (getDevice$1() && { sxpDevice: getDevice$1() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: 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 + '' }));
850
852
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
851
853
  const realEventInfo = Object.entries(ef)
852
854
  .map(([k, v]) => v && { name: k, value: v })
@@ -860,7 +862,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
860
862
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
861
863
  type: 'beacon'
862
864
  });
863
- }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
865
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
864
866
  const bffFbReport = useCallback(({ eventName, product }) => {
865
867
  var _a, _b, _c, _d, _e;
866
868
  if (!enableReportEvent ||
@@ -1021,17 +1023,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1021
1023
  return;
1022
1024
  setLoading(true);
1023
1025
  let layId;
1026
+ let pbType;
1024
1027
  getRecommendVideos()
1025
1028
  .then((data) => {
1026
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1029
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
1027
1030
  if (data) {
1028
1031
  const list = getFilterRecList(data);
1029
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
1030
- list.unshift('organic menu');
1031
- }
1032
- setRtcList(list);
1033
- setCacheRtcList(list);
1034
1032
  let curData;
1033
+ let gldata;
1035
1034
  if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
1036
1035
  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];
1037
1036
  if (id) {
@@ -1041,19 +1040,49 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1041
1040
  if (curData) {
1042
1041
  setPageData(curData);
1043
1042
  document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
1044
- setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
1043
+ 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;
1044
+ setGlobalConfig(gldata);
1045
1045
  onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
1046
- 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)
1046
+ 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)
1047
1047
  setShowConsent(true);
1048
1048
  }
1049
+ else {
1050
+ setShowConsent(true);
1051
+ }
1049
1052
  }
1050
1053
  }
1051
- bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
1054
+ else {
1055
+ setShowConsent(true);
1056
+ }
1057
+ if (!channel) {
1058
+ if ((gldata === null || gldata === void 0 ? void 0 : gldata.playbook) === 'organic menu' || (!gldata && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu')) {
1059
+ setPlaybookType('organicMenu');
1060
+ list.unshift('organic menu');
1061
+ pbType = 'organicMenu';
1062
+ }
1063
+ else {
1064
+ setPlaybookType('paidMedia');
1065
+ pbType = 'paidMedia';
1066
+ }
1067
+ }
1068
+ setRtcList(list);
1069
+ setCacheRtcList(list);
1070
+ bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
1071
+ if (channel) {
1072
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
1073
+ eventInfo: {
1074
+ eventSubject: 'multiPostClick',
1075
+ eventDescription: 'multiPostClick',
1076
+ 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 : '',
1077
+ branchfeed: channel
1078
+ }
1079
+ });
1080
+ }
1052
1081
  }
1053
1082
  })
1054
1083
  .finally(() => {
1055
1084
  bffEventReport({
1056
- eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
1085
+ eventInfo: Object.assign(Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId })), (pbType && { playbookType: pbType }))
1057
1086
  });
1058
1087
  setLoading(false);
1059
1088
  });
@@ -1063,7 +1092,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1063
1092
  if (!isPreview)
1064
1093
  return;
1065
1094
  setLoading(true);
1066
- bffGetTagList(pageData);
1095
+ bffGetTagList(data);
1067
1096
  getRecommendVideos()
1068
1097
  .then((data) => {
1069
1098
  if (data) {
@@ -1138,7 +1167,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1138
1167
  mutateUnlike: bffMutateUnlike,
1139
1168
  submitForm: bffSubmitForm,
1140
1169
  tagList,
1141
- pageData
1170
+ pageData: finalPageData
1142
1171
  }))));
1143
1172
  };
1144
1173
  var SxpDataSourceProvider$1 = memo(SxpDataSourceProvider);
@@ -16828,7 +16857,7 @@ const MultiPosts$1 = (_a) => {
16828
16857
  const { isActive } = useSwiperSlide() || {};
16829
16858
  const initRef = useRef(false);
16830
16859
  const viewTime = useRef();
16831
- 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 : '';
16860
+ 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 : '';
16832
16861
  const getPropsVal = useCallback((index, str) => {
16833
16862
  try {
16834
16863
  return new Function('props', 'str', `if (str) {
@@ -16844,14 +16873,6 @@ const MultiPosts$1 = (_a) => {
16844
16873
  const value = v === null || v === void 0 ? void 0 : v.value;
16845
16874
  if (!value)
16846
16875
  return;
16847
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
16848
- eventInfo: {
16849
- eventSubject: 'multiPostClick',
16850
- eventDescription: 'multiPostClick',
16851
- traceinfo,
16852
- branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
16853
- }
16854
- });
16855
16876
  if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
16856
16877
  endMultiPost('multipostClick');
16857
16878
  updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
@@ -16869,7 +16890,7 @@ const MultiPosts$1 = (_a) => {
16869
16890
  eventDescription: 'startMultiPost',
16870
16891
  contentFormat: 'IMAGE',
16871
16892
  position: '0',
16872
- traceinfo
16893
+ traceInfo
16873
16894
  }
16874
16895
  });
16875
16896
  }, []);
@@ -16880,7 +16901,7 @@ const MultiPosts$1 = (_a) => {
16880
16901
  eventDescription: 'endMultiPost',
16881
16902
  contentFormat: 'IMAGE',
16882
16903
  position: '0',
16883
- traceinfo,
16904
+ traceInfo,
16884
16905
  nextStep: nextStep || 'others',
16885
16906
  timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
16886
16907
  }
@@ -16896,6 +16917,8 @@ const MultiPosts$1 = (_a) => {
16896
16917
  }
16897
16918
  }, [isActive]);
16898
16919
  useEffect(() => {
16920
+ if (!isActive)
16921
+ return;
16899
16922
  const onShow = () => startMultiPost();
16900
16923
  const onHide = () => endMultiPost();
16901
16924
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -16906,7 +16929,7 @@ const MultiPosts$1 = (_a) => {
16906
16929
  };
16907
16930
  }, [isActive]);
16908
16931
  return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
16909
- return (React.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16932
+ return (React.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16910
16933
  React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
16911
16934
  })));
16912
16935
  };
@@ -17940,7 +17963,7 @@ var NavBack$1 = memo(NavBack);
17940
17963
  * @Author: binruan@chatlabs.com
17941
17964
  * @Date: 2024-03-20 10:27:31
17942
17965
  * @LastEditors: binruan@chatlabs.com
17943
- * @LastEditTime: 2024-11-27 17:08:59
17966
+ * @LastEditTime: 2024-12-03 14:41:51
17944
17967
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
17945
17968
  *
17946
17969
  */
@@ -18032,20 +18055,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18032
18055
  else if (item === null || item === void 0 ? void 0 : item.product) {
18033
18056
  fromKName = 'productPage';
18034
18057
  }
18035
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18036
- eventInfo: {
18037
- sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18038
- eventSubject: 'sessionCompleted',
18039
- eventDescription: 'Session completed',
18040
- contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18041
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18042
- position: activeIndex + '',
18043
- fromKName,
18044
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
18045
- 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 : '',
18046
- 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 : ''
18047
- }
18048
- });
18058
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
18059
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18060
+ eventInfo: {
18061
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18062
+ eventSubject: 'sessionCompleted',
18063
+ eventDescription: 'Session completed',
18064
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18065
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18066
+ position: activeIndex + '',
18067
+ fromKName,
18068
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
18069
+ 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 : '',
18070
+ 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 : ''
18071
+ }
18072
+ });
18073
+ }
18049
18074
  }
18050
18075
  else if (document.visibilityState === 'visible') {
18051
18076
  if (skipLinkRef.current === true) {
@@ -18227,9 +18252,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18227
18252
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
18228
18253
  return;
18229
18254
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
18230
- if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
18255
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18231
18256
  top += 40;
18232
18257
  }
18258
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18259
+ top += minusHeight;
18260
+ }
18233
18261
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
18234
18262
  return (React.createElement(LikeButton$1, { 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: {
18235
18263
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -18401,6 +18429,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18401
18429
  if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18402
18430
  top += 40;
18403
18431
  }
18432
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18433
+ top += minusHeight;
18434
+ }
18404
18435
  return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
18405
18436
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
18406
18437
  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',
@@ -18460,7 +18491,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18460
18491
  eventInfo: {
18461
18492
  eventSubject: 'backMultiPostClick',
18462
18493
  eventDescription: 'backMultiPostClick',
18463
- 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 : ''
18494
+ 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 : ''
18464
18495
  }
18465
18496
  });
18466
18497
  location === null || location === void 0 ? void 0 : location.reload();