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.
package/dist/index.cjs CHANGED
@@ -677,11 +677,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
677
677
  const popupCurTimeRef = React.useRef(null);
678
678
  const [isNoMoreData, setIsNoMoreData] = React.useState(false);
679
679
  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);
680
- const [pageData, setPageData] = React.useState(data);
680
+ const [pageData, setPageData] = React.useState();
681
681
  const [showConsent, setShowConsent] = React.useState(false);
682
682
  const [layoutVariantId, setLayoutVariantId] = React.useState();
683
683
  const [channel, setChannel] = React.useState();
684
684
  const [eventTimeList, setEventTimeList] = React.useState([]);
685
+ const [playbookType, setPlaybookType] = React.useState();
686
+ const finalPageData = React.useMemo(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
685
687
  const isShowConsent = React.useMemo(() => {
686
688
  var _a, _b, _c, _d;
687
689
  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) &&
@@ -868,7 +870,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
868
870
  };
869
871
  }
870
872
  const sessionID = storeAndLoadFeSessionId();
871
- 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 }));
873
+ 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 + '' }));
872
874
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
873
875
  const realEventInfo = Object.entries(ef)
874
876
  .map(([k, v]) => v && { name: k, value: v })
@@ -882,7 +884,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
882
884
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
883
885
  type: 'beacon'
884
886
  });
885
- }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
887
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
886
888
  const bffFbReport = React.useCallback(({ eventName, product }) => {
887
889
  var _a, _b, _c, _d, _e;
888
890
  if (!enableReportEvent ||
@@ -1043,17 +1045,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1043
1045
  return;
1044
1046
  setLoading(true);
1045
1047
  let layId;
1048
+ let pbType;
1046
1049
  getRecommendVideos()
1047
1050
  .then((data) => {
1048
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1051
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
1049
1052
  if (data) {
1050
1053
  const list = getFilterRecList(data);
1051
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
1052
- list.unshift('organic menu');
1053
- }
1054
- setRtcList(list);
1055
- setCacheRtcList(list);
1056
1054
  let curData;
1055
+ let gldata;
1057
1056
  if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
1058
1057
  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];
1059
1058
  if (id) {
@@ -1063,19 +1062,49 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1063
1062
  if (curData) {
1064
1063
  setPageData(curData);
1065
1064
  document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
1066
- setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
1065
+ 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;
1066
+ setGlobalConfig(gldata);
1067
1067
  onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
1068
- 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)
1068
+ 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)
1069
1069
  setShowConsent(true);
1070
1070
  }
1071
+ else {
1072
+ setShowConsent(true);
1073
+ }
1071
1074
  }
1072
1075
  }
1073
- bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
1076
+ else {
1077
+ setShowConsent(true);
1078
+ }
1079
+ if (!channel) {
1080
+ if ((gldata === null || gldata === void 0 ? void 0 : gldata.playbook) === 'organic menu' || (!gldata && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu')) {
1081
+ setPlaybookType('organicMenu');
1082
+ list.unshift('organic menu');
1083
+ pbType = 'organicMenu';
1084
+ }
1085
+ else {
1086
+ setPlaybookType('paidMedia');
1087
+ pbType = 'paidMedia';
1088
+ }
1089
+ }
1090
+ setRtcList(list);
1091
+ setCacheRtcList(list);
1092
+ bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
1093
+ if (channel) {
1094
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
1095
+ eventInfo: {
1096
+ eventSubject: 'multiPostClick',
1097
+ eventDescription: 'multiPostClick',
1098
+ 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 : '',
1099
+ branchfeed: channel
1100
+ }
1101
+ });
1102
+ }
1074
1103
  }
1075
1104
  })
1076
1105
  .finally(() => {
1077
1106
  bffEventReport({
1078
- eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
1107
+ eventInfo: Object.assign(Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId })), (pbType && { playbookType: pbType }))
1079
1108
  });
1080
1109
  setLoading(false);
1081
1110
  });
@@ -1085,7 +1114,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1085
1114
  if (!isPreview)
1086
1115
  return;
1087
1116
  setLoading(true);
1088
- bffGetTagList(pageData);
1117
+ bffGetTagList(data);
1089
1118
  getRecommendVideos()
1090
1119
  .then((data) => {
1091
1120
  if (data) {
@@ -1160,7 +1189,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
1160
1189
  mutateUnlike: bffMutateUnlike,
1161
1190
  submitForm: bffSubmitForm,
1162
1191
  tagList,
1163
- pageData
1192
+ pageData: finalPageData
1164
1193
  }))));
1165
1194
  };
1166
1195
  var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
@@ -16850,7 +16879,7 @@ const MultiPosts$1 = (_a) => {
16850
16879
  const { isActive } = useSwiperSlide() || {};
16851
16880
  const initRef = React.useRef(false);
16852
16881
  const viewTime = React.useRef();
16853
- 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 : '';
16882
+ 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 : '';
16854
16883
  const getPropsVal = React.useCallback((index, str) => {
16855
16884
  try {
16856
16885
  return new Function('props', 'str', `if (str) {
@@ -16866,14 +16895,6 @@ const MultiPosts$1 = (_a) => {
16866
16895
  const value = v === null || v === void 0 ? void 0 : v.value;
16867
16896
  if (!value)
16868
16897
  return;
16869
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
16870
- eventInfo: {
16871
- eventSubject: 'multiPostClick',
16872
- eventDescription: 'multiPostClick',
16873
- traceinfo,
16874
- branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
16875
- }
16876
- });
16877
16898
  if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
16878
16899
  endMultiPost('multipostClick');
16879
16900
  updateChannel === null || updateChannel === void 0 ? void 0 : updateChannel(value);
@@ -16891,7 +16912,7 @@ const MultiPosts$1 = (_a) => {
16891
16912
  eventDescription: 'startMultiPost',
16892
16913
  contentFormat: 'IMAGE',
16893
16914
  position: '0',
16894
- traceinfo
16915
+ traceInfo
16895
16916
  }
16896
16917
  });
16897
16918
  }, []);
@@ -16902,7 +16923,7 @@ const MultiPosts$1 = (_a) => {
16902
16923
  eventDescription: 'endMultiPost',
16903
16924
  contentFormat: 'IMAGE',
16904
16925
  position: '0',
16905
- traceinfo,
16926
+ traceInfo,
16906
16927
  nextStep: nextStep || 'others',
16907
16928
  timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
16908
16929
  }
@@ -16918,6 +16939,8 @@ const MultiPosts$1 = (_a) => {
16918
16939
  }
16919
16940
  }, [isActive]);
16920
16941
  React.useEffect(() => {
16942
+ if (!isActive)
16943
+ return;
16921
16944
  const onShow = () => startMultiPost();
16922
16945
  const onHide = () => endMultiPost();
16923
16946
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -16928,7 +16951,7 @@ const MultiPosts$1 = (_a) => {
16928
16951
  };
16929
16952
  }, [isActive]);
16930
16953
  return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
16931
- return (React.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16954
+ return (React.createElement("button", { hidden: !getPropsVal(index, 'Url'), className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
16932
16955
  React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
16933
16956
  })));
16934
16957
  };
@@ -17962,7 +17985,7 @@ var NavBack$1 = React.memo(NavBack);
17962
17985
  * @Author: binruan@chatlabs.com
17963
17986
  * @Date: 2024-03-20 10:27:31
17964
17987
  * @LastEditors: binruan@chatlabs.com
17965
- * @LastEditTime: 2024-11-27 17:08:59
17988
+ * @LastEditTime: 2024-12-03 14:41:51
17966
17989
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
17967
17990
  *
17968
17991
  */
@@ -18054,20 +18077,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18054
18077
  else if (item === null || item === void 0 ? void 0 : item.product) {
18055
18078
  fromKName = 'productPage';
18056
18079
  }
18057
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18058
- eventInfo: {
18059
- sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18060
- eventSubject: 'sessionCompleted',
18061
- eventDescription: 'Session completed',
18062
- contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18063
- productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18064
- position: activeIndex + '',
18065
- fromKName,
18066
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
18067
- 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 : '',
18068
- 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 : ''
18069
- }
18070
- });
18080
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' || activeIndex !== 0) {
18081
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
18082
+ eventInfo: {
18083
+ sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
18084
+ eventSubject: 'sessionCompleted',
18085
+ eventDescription: 'Session completed',
18086
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
18087
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
18088
+ position: activeIndex + '',
18089
+ fromKName,
18090
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
18091
+ 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 : '',
18092
+ 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 : ''
18093
+ }
18094
+ });
18095
+ }
18071
18096
  }
18072
18097
  else if (document.visibilityState === 'visible') {
18073
18098
  if (skipLinkRef.current === true) {
@@ -18249,9 +18274,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18249
18274
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
18250
18275
  return;
18251
18276
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
18252
- if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
18277
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18253
18278
  top += 40;
18254
18279
  }
18280
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
18281
+ top += minusHeight;
18282
+ }
18255
18283
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
18256
18284
  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: {
18257
18285
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -18423,6 +18451,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18423
18451
  if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18424
18452
  top += 40;
18425
18453
  }
18454
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
18455
+ top += minusHeight;
18456
+ }
18426
18457
  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: {
18427
18458
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
18428
18459
  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',
@@ -18482,7 +18513,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
18482
18513
  eventInfo: {
18483
18514
  eventSubject: 'backMultiPostClick',
18484
18515
  eventDescription: 'backMultiPostClick',
18485
- 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 : ''
18516
+ 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 : ''
18486
18517
  }
18487
18518
  });
18488
18519
  location === null || location === void 0 ? void 0 : location.reload();