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/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(
|
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() })), {
|
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
|
-
|
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 ((
|
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
|
-
|
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(
|
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
|
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
|
-
|
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
|
-
|
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-
|
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
|
-
|
18051
|
-
|
18052
|
-
|
18053
|
-
|
18054
|
-
|
18055
|
-
|
18056
|
-
|
18057
|
-
|
18058
|
-
|
18059
|
-
|
18060
|
-
|
18061
|
-
|
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
|
-
|
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();
|