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 +75 -44
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +75 -44
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +4 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +75 -44
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +4 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/index.js +24 -16
- package/es/core/context/SxpDataSourceProvider.js +44 -15
- package/es/materials/sxp/MultiPosts/index.js +6 -12
- package/lib/core/components/SxpPageRender/index.js +24 -16
- package/lib/core/context/SxpDataSourceProvider.js +44 -15
- package/lib/materials/sxp/MultiPosts/index.js +6 -12
- package/package.json +1 -1
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(
|
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() })), {
|
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
|
-
|
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 ((
|
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
|
-
|
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(
|
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
|
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
|
-
|
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
|
-
|
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-
|
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
|
-
|
18058
|
-
|
18059
|
-
|
18060
|
-
|
18061
|
-
|
18062
|
-
|
18063
|
-
|
18064
|
-
|
18065
|
-
|
18066
|
-
|
18067
|
-
|
18068
|
-
|
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
|
-
|
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();
|