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/pb-ui.js CHANGED
@@ -670,11 +670,13 @@
670
670
  const popupCurTimeRef = React.useRef(null);
671
671
  const [isNoMoreData, setIsNoMoreData] = React.useState(false);
672
672
  const [globalConfig, setGlobalConfig] = React.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);
673
- const [pageData, setPageData] = React.useState(data);
673
+ const [pageData, setPageData] = React.useState();
674
674
  const [showConsent, setShowConsent] = React.useState(false);
675
675
  const [layoutVariantId, setLayoutVariantId] = React.useState();
676
676
  const [channel, setChannel] = React.useState();
677
677
  const [eventTimeList, setEventTimeList] = React.useState([]);
678
+ const [playbookType, setPlaybookType] = React.useState();
679
+ const finalPageData = React.useMemo(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
678
680
  const isShowConsent = React.useMemo(() => {
679
681
  var _a, _b, _c, _d;
680
682
  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) &&
@@ -861,7 +863,7 @@
861
863
  };
862
864
  }
863
865
  const sessionID = storeAndLoadFeSessionId();
864
- 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 }));
866
+ 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 + '' }));
865
867
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
866
868
  const realEventInfo = Object.entries(ef)
867
869
  .map(([k, v]) => v && { name: k, value: v })
@@ -875,7 +877,7 @@
875
877
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
876
878
  type: 'beacon'
877
879
  });
878
- }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
880
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
879
881
  const bffFbReport = React.useCallback(({ eventName, product }) => {
880
882
  var _a, _b, _c, _d, _e;
881
883
  if (!enableReportEvent ||
@@ -1036,17 +1038,14 @@
1036
1038
  return;
1037
1039
  setLoading(true);
1038
1040
  let layId;
1041
+ let pbType;
1039
1042
  getRecommendVideos()
1040
1043
  .then((data) => {
1041
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1044
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
1042
1045
  if (data) {
1043
1046
  const list = getFilterRecList(data);
1044
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
1045
- list.unshift('organic menu');
1046
- }
1047
- setRtcList(list);
1048
- setCacheRtcList(list);
1049
1047
  let curData;
1048
+ let gldata;
1050
1049
  if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
1051
1050
  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];
1052
1051
  if (id) {
@@ -1056,19 +1055,49 @@
1056
1055
  if (curData) {
1057
1056
  setPageData(curData);
1058
1057
  document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
1059
- setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
1058
+ 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;
1059
+ setGlobalConfig(gldata);
1060
1060
  onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
1061
- 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)
1061
+ 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)
1062
1062
  setShowConsent(true);
1063
1063
  }
1064
+ else {
1065
+ setShowConsent(true);
1066
+ }
1064
1067
  }
1065
1068
  }
1066
- bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
1069
+ else {
1070
+ setShowConsent(true);
1071
+ }
1072
+ if (!channel) {
1073
+ if ((gldata === null || gldata === void 0 ? void 0 : gldata.playbook) === 'organic menu' || (!gldata && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu')) {
1074
+ setPlaybookType('organicMenu');
1075
+ list.unshift('organic menu');
1076
+ pbType = 'organicMenu';
1077
+ }
1078
+ else {
1079
+ setPlaybookType('paidMedia');
1080
+ pbType = 'paidMedia';
1081
+ }
1082
+ }
1083
+ setRtcList(list);
1084
+ setCacheRtcList(list);
1085
+ bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
1086
+ if (channel) {
1087
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
1088
+ eventInfo: {
1089
+ eventSubject: 'multiPostClick',
1090
+ eventDescription: 'multiPostClick',
1091
+ 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 : '',
1092
+ branchfeed: channel
1093
+ }
1094
+ });
1095
+ }
1067
1096
  }
1068
1097
  })
1069
1098
  .finally(() => {
1070
1099
  bffEventReport({
1071
- eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
1100
+ eventInfo: Object.assign(Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId })), (pbType && { playbookType: pbType }))
1072
1101
  });
1073
1102
  setLoading(false);
1074
1103
  });
@@ -1078,7 +1107,7 @@
1078
1107
  if (!isPreview)
1079
1108
  return;
1080
1109
  setLoading(true);
1081
- bffGetTagList(pageData);
1110
+ bffGetTagList(data);
1082
1111
  getRecommendVideos()
1083
1112
  .then((data) => {
1084
1113
  if (data) {
@@ -1153,7 +1182,7 @@
1153
1182
  mutateUnlike: bffMutateUnlike,
1154
1183
  submitForm: bffSubmitForm,
1155
1184
  tagList,
1156
- pageData
1185
+ pageData: finalPageData
1157
1186
  }))));
1158
1187
  };
1159
1188
  var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
@@ -16843,7 +16872,7 @@ Made in Italy` })));
16843
16872
  const { isActive } = useSwiperSlide() || {};
16844
16873
  const initRef = React.useRef(false);
16845
16874
  const viewTime = React.useRef();
16846
- 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 : '';
16875
+ 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 : '';
16847
16876
  const getPropsVal = React.useCallback((index, str) => {
16848
16877
  try {
16849
16878
  return new Function('props', 'str', `if (str) {
@@ -16859,14 +16888,6 @@ Made in Italy` })));
16859
16888
  const value = v === null || v === void 0 ? void 0 : v.value;
16860
16889
  if (!value)
16861
16890
  return;
16862
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
16863
- eventInfo: {
16864
- eventSubject: 'multiPostClick',
16865
- eventDescription: 'multiPostClick',
16866
- traceinfo,
16867
- branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
16868
- }
16869
- });
16870
16891
  if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
16871
16892
  endMultiPost('multipostClick');
16872
16893
  updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
@@ -16884,7 +16905,7 @@ Made in Italy` })));
16884
16905
  eventDescription: 'startMultiPost',
16885
16906
  contentFormat: 'IMAGE',
16886
16907
  position: '0',
16887
- traceinfo
16908
+ traceInfo
16888
16909
  }
16889
16910
  });
16890
16911
  }, []);
@@ -16895,7 +16916,7 @@ Made in Italy` })));
16895
16916
  eventDescription: 'endMultiPost',
16896
16917
  contentFormat: 'IMAGE',
16897
16918
  position: '0',
16898
- traceinfo,
16919
+ traceInfo,
16899
16920
  nextStep: nextStep || 'others',
16900
16921
  timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
16901
16922
  }
@@ -16911,6 +16932,8 @@ Made in Italy` })));
16911
16932
  }
16912
16933
  }, [isActive]);
16913
16934
  React.useEffect(() => {
16935
+ if (!isActive)
16936
+ return;
16914
16937
  const onShow = () => startMultiPost();
16915
16938
  const onHide = () => endMultiPost();
16916
16939
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -16921,7 +16944,7 @@ Made in Italy` })));
16921
16944
  };
16922
16945
  }, [isActive]);
16923
16946
  return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
16924
- return (React.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16947
+ return (React.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16925
16948
  React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
16926
16949
  })));
16927
16950
  };
@@ -17955,7 +17978,7 @@ Made in Italy` })));
17955
17978
  * @Author: binruan@chatlabs.com
17956
17979
  * @Date: 2024-03-20 10:27:31
17957
17980
  * @LastEditors: binruan@chatlabs.com
17958
- * @LastEditTime: 2024-11-27 17:08:59
17981
+ * @LastEditTime: 2024-12-03 14:41:51
17959
17982
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
17960
17983
  *
17961
17984
  */
@@ -18047,20 +18070,22 @@ Made in Italy` })));
18047
18070
  else if (item === null || item === void 0 ? void 0 : item.product) {
18048
18071
  fromKName = 'productPage';
18049
18072
  }
18050
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18051
- eventInfo: {
18052
- sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18053
- eventSubject: 'sessionCompleted',
18054
- eventDescription: 'Session completed',
18055
- contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18056
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18057
- position: activeIndex + '',
18058
- fromKName,
18059
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
18060
- 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 : '',
18061
- 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 : ''
18062
- }
18063
- });
18073
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
18074
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18075
+ eventInfo: {
18076
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18077
+ eventSubject: 'sessionCompleted',
18078
+ eventDescription: 'Session completed',
18079
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18080
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18081
+ position: activeIndex + '',
18082
+ fromKName,
18083
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
18084
+ 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 : '',
18085
+ 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 : ''
18086
+ }
18087
+ });
18088
+ }
18064
18089
  }
18065
18090
  else if (document.visibilityState === 'visible') {
18066
18091
  if (skipLinkRef.current === true) {
@@ -18242,9 +18267,12 @@ Made in Italy` })));
18242
18267
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
18243
18268
  return;
18244
18269
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
18245
- if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
18270
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18246
18271
  top += 40;
18247
18272
  }
18273
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18274
+ top += minusHeight;
18275
+ }
18248
18276
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
18249
18277
  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: {
18250
18278
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -18416,6 +18444,9 @@ Made in Italy` })));
18416
18444
  if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18417
18445
  top += 40;
18418
18446
  }
18447
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18448
+ top += minusHeight;
18449
+ }
18419
18450
  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: {
18420
18451
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
18421
18452
  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',
@@ -18475,7 +18506,7 @@ Made in Italy` })));
18475
18506
  eventInfo: {
18476
18507
  eventSubject: 'backMultiPostClick',
18477
18508
  eventDescription: 'backMultiPostClick',
18478
- 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 : ''
18509
+ 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 : ''
18479
18510
  }
18480
18511
  });
18481
18512
  location === null || location === void 0 ? void 0 : location.reload();