pb-sxp-ui 1.3.8 → 1.4.0

package/lib/core/components/SxpPageRender/index.js

@@ -38,7 +38,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
     const [isReload, setIsReload] = (0, react_1.useState)(new Date().getTime());
     const skipLinkRef = (0, react_1.useRef)(false);
-    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList } = (0, hooks_1.useSxpDataSource)();
+    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const isShowFingerTip = (0, react_1.useMemo)(() => {
         return data.length > 0 && !loading && ((0, localStore_1.getFeUserId)() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -194,8 +194,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     return null;
                 }
             });
-        return !waterFallData ? list.concat([{ loading: true }]) : list;
-    }, [data, activeIndex, waterFallData, isEditor]);
+        return !waterFallData && !isNoMoreData ? list.concat([{ loading: true }]) : list;
+    }, [data, activeIndex, waterFallData, isEditor, isNoMoreData]);
     const renderLogo = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d;
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -509,9 +509,14 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     return;
                 if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
                     if (!isLoadMore) {
+                        let pageNum = 2;
                         setIsLoadMore(true);
-                        loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
+                        loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
+                            var _a;
                             setIsLoadMore(false);
+                            if (res && ((_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                                pageNum++;
+                            }
                         });
                     }
                 }

package/lib/core/context/SxpDataSourceProvider.d.ts

@@ -25,7 +25,7 @@ export interface ISxpDataSourceContext {
     }) => Promise<boolean>;
     popupDetailData?: RecItemType;
     setPopupDetailData?: React.Dispatch<React.SetStateAction<any | null>>;
-    loadVideos?: (page: number) => Promise<void>;
+    loadVideos?: (page: number) => Promise<RecommendVideoResultType | undefined>;
     getRecommendVideos?: (query?: {
         maxSize?: number;
         defaultSize?: number;
@@ -82,6 +82,7 @@ export interface ISxpDataSourceContext {
     popupCurTimeRef?: any;
     checkCommodityIndexRef?: any;
     isEditor?: boolean;
+    isNoMoreData?: boolean;
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {

package/lib/core/context/SxpDataSourceProvider.js

@@ -40,6 +40,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const [selectTag, setSelectTag] = (0, react_1.useState)(exports.DEFAULT_TAG);
     const checkCommodityIndexRef = (0, react_1.useRef)(-1);
     const popupCurTimeRef = (0, react_1.useRef)(null);
+    const [isNoMoreData, setIsNoMoreData] = (0, react_1.useState)(false);
     const isShowConsent = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d;
         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;
@@ -96,7 +97,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             .catch((err) => Promise.reject(err));
     }, [bffDataSource]);
     const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         query = Object.assign(Object.assign(Object.assign({ maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize, defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag }, ((query === null || query === void 0 ? void 0 : query.contentFilter) && { contentFilter: `[${query === null || query === void 0 ? void 0 : query.contentFilter}]` })), ((query === null || query === void 0 ? void 0 : query.productFilter) && { productFilter: `[${query === null || query === void 0 ? void 0 : query.productFilter}]` })), { pageNum: query === null || query === void 0 ? void 0 : query.pageNum });
         if (utmVal) {
             const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
@@ -106,9 +107,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
-        if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
-            query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_j = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _j !== void 0 ? _j : 1 });
-        }
         if (isEditor) {
             let pageNum = 1;
             query = Object.assign(Object.assign(Object.assign({}, query), { directPage: true, level: 1 }), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList[0] }));
@@ -119,15 +117,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             let list = [];
             let result = null;
             const recurveRecList = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-                var _r, _s, _t, _u, _v, _w;
+                var _t, _u, _v, _w, _x, _y;
                 query.pageNum = pageNum;
                 result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
                 if (!(result === null || result === void 0 ? void 0 : result.success)) {
                     return undefined;
                 }
                 setLoading(false);
-                const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.every((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
                 list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
+                const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
                 if (isNotNullList) {
                     pageNum = pageNum + 1;
                     yield recurveRecList(query);
@@ -135,9 +133,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             });
             yield recurveRecList(query);
             if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
-                setCurReqInfo({ rtc: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.rtc, requestId: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.requestId });
+                setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
             return Object.assign(Object.assign({}, result.data), { recList: list });
         }
+        if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
+            query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
+        }
         const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
         if (!(result === null || result === void 0 ? void 0 : result.success)) {
             return undefined;
@@ -147,19 +148,24 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
             let list = [];
             list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
+            const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
+            if (!isNotNullList) {
+                setIsNoMoreData(true);
+            }
             return Object.assign(Object.assign({}, result.data), { recList: list });
         }
         return result === null || result === void 0 ? void 0 : result.data;
     }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList]);
     const loadVideos = (0, react_1.useCallback)((pageNum) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _x, _y, _z, _0;
+        var _z, _0, _1, _2;
         if (rtcList.length <= 0) {
             return;
         }
         const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
-        const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_x = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _x === void 0 ? void 0 : _x.itemId) && { productFilter: (_y = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _y === void 0 ? void 0 : _y.itemId })), (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _z === void 0 ? void 0 : _z.itemId) && { contentFilter: (_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _0 === void 0 ? void 0 : _0.itemId })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
+        const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: (_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: (_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
         setRtcList(rtcList.concat(getFilterRecList(data)));
         setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
+        return data;
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
     const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
         if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
@@ -199,7 +205,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 eventName,
                 actionSource,
                 eventSourceUrl,
-                userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), ((0, tool_1.getCookie)('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` })), { client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
+                userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), ((0, tool_1.getCookie)('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` })), { clientUserAgent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
             },
             type: 'beacon'
         });
@@ -217,17 +223,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return res === null || res === void 0 ? void 0 : res.success;
     }), [bffFetch]);
     const bffGetTagList = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _1, _2, _3, _4, _5;
+        var _3, _4, _5, _6, _7;
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_3 = (_2 = (_1 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _1 === void 0 ? void 0 : _1.filter((val) => {
+            const val = (_5 = (_4 = (_3 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _3 === void 0 ? void 0 : _3.filter((val) => {
                 var _a, _b;
                 const key = val.split('=')[0];
                 return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
-            })) === null || _2 === void 0 ? void 0 : _2.join('&')) !== null && _3 !== void 0 ? _3 : '';
+            })) === null || _4 === void 0 ? void 0 : _4.join('&')) !== null && _5 !== void 0 ? _5 : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            setTagList((_5 = (_4 = result === null || result === void 0 ? void 0 : result.data) === null || _4 === void 0 ? void 0 : _4.tags) !== null && _5 !== void 0 ? _5 : []);
+            setTagList((_7 = (_6 = result === null || result === void 0 ? void 0 : result.data) === null || _6 === void 0 ? void 0 : _6.tags) !== null && _7 !== void 0 ? _7 : []);
         }
         catch (e) {
             console.log('e', e);
@@ -374,7 +380,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             globalConfig,
             popupCurTimeRef,
             checkCommodityIndexRef,
-            isEditor
+            isEditor,
+            isNoMoreData
         } }, isShowConsent ? (react_1.default.createElement(Consent_1.default, Object.assign({}, (_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))) : (render({
         rtcList,
         mutateLike: bffMutateLike,

package/lib/core/hooks/useEventReport.js

@@ -7,7 +7,7 @@ const SxpDataSourceProvider_1 = require("../context/SxpDataSourceProvider");
 function useEventReport() {
     const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = (0, useSxpDataSource_1.useSxpDataSource)();
     const jumpToWeb = (0, react_1.useCallback)((data, product, cta, position, traceInfo) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
         let fromKName = '';
         if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
             fromKName = 'pdpPage';
@@ -25,22 +25,15 @@ function useEventReport() {
             fromKName = 'productPage';
         }
         const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = data === null || data === void 0 ? void 0 : data.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = data === null || data === void 0 ? void 0 : data.product) === null || _q === void 0 ? void 0 : _q.tags;
+        let contentFormat = null;
+        if ((_r = data === null || data === void 0 ? void 0 : data.video) === null || _r === void 0 ? void 0 : _r.url) {
+            contentFormat = 'video';
+        }
+        else if (((_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.imgUrls) && ((_u = (_t = data === null || data === void 0 ? void 0 : data.video) === null || _t === void 0 ? void 0 : _t.imgUrls) === null || _u === void 0 ? void 0 : _u.length)) {
+            contentFormat = 'image';
+        }
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                eventSubject: 'jumpToWeb',
-                eventDescription: 'User jumped to website',
-                productId: (_r = product === null || product === void 0 ? void 0 : product.itemId) !== null && _r !== void 0 ? _r : '',
-                productName: (_s = product === null || product === void 0 ? void 0 : product.title) !== null && _s !== void 0 ? _s : '',
-                price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
-                productCollection: (_t = product === null || product === void 0 ? void 0 : product.collection) !== null && _t !== void 0 ? _t : '',
-                fromKName,
-                fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                contentTags: contentTags ? JSON.stringify(contentTags) : '',
-                position: position + '',
-                contentId: (_v = (_u = data === null || data === void 0 ? void 0 : data.video) === null || _u === void 0 ? void 0 : _u.itemId) !== null && _v !== void 0 ? _v : '',
-                ctatId: (_w = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _w !== void 0 ? _w : '',
-                traceInfo: (_9 = (_6 = (_4 = (_0 = (_x = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _x !== void 0 ? _x : (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindProduct) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : (_3 = (_2 = (_1 = data === null || data === void 0 ? void 0 : data.video) === null || _1 === void 0 ? void 0 : _1.bindProducts) === null || _2 === void 0 ? void 0 : _2[0]) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_5 = data === null || data === void 0 ? void 0 : data.product) === null || _5 === void 0 ? void 0 : _5.traceInfo) !== null && _6 !== void 0 ? _6 : (_8 = (_7 = data === null || data === void 0 ? void 0 : data.video) === null || _7 === void 0 ? void 0 : _7.bindCta) === null || _8 === void 0 ? void 0 : _8.traceInfo) !== null && _9 !== void 0 ? _9 : ''
-            }
+            eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', ctatId: (_0 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _0 !== void 0 ? _0 : '', traceInfo: (_13 = (_10 = (_8 = (_4 = (_1 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _1 !== void 0 ? _1 : (_3 = (_2 = data === null || data === void 0 ? void 0 : data.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProducts) === null || _6 === void 0 ? void 0 : _6[0]) === null || _7 === void 0 ? void 0 : _7.traceInfo) !== null && _8 !== void 0 ? _8 : (_9 = data === null || data === void 0 ? void 0 : data.product) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = data === null || data === void 0 ? void 0 : data.video) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '' }, (contentFormat && { contentFormat }))
         });
     }, [bffEventReport, popupDetailData, isFromHashtag]);
     const productView = (0, react_1.useCallback)((data, product, cta, viewTime, position) => {

package/lib/materials/sxp/popup/AppointForm/Form.js

@@ -6,6 +6,6 @@ const react_2 = tslib_1.__importDefault(require("react"));
 const Form = ({ layout, columns, onChange }) => {
     return (react_2.default.createElement(react_2.default.Fragment, null, columns === null || columns === void 0 ? void 0 : columns.map((item, index) => (react_2.default.createElement("div", { key: index, className: 'pb-appoint-form-container-item', style: { flexDirection: layout === 'horizontal' ? 'row' : 'column' } },
         layout !== 'inline' && react_2.default.createElement("label", { className: 'pb-appoint-form-container-label' }, item === null || item === void 0 ? void 0 : item.title),
-        (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (react_2.default.createElement("input", Object.assign({ className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex }, (onChange && { onChange: onChange })))))))));
+        (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (react_2.default.createElement("input", Object.assign({ className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex }, (onChange && { onChange })))))))));
 };
 exports.default = (0, react_1.memo)(Form);

package/lib/materials/sxp/popup/AppointForm/index.js

@@ -10,10 +10,13 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const tool_1 = require("../../../../core/utils/tool");
 const Form_1 = tslib_1.__importDefault(require("./Form"));
 const AppointForm = (_a) => {
+    var _b, _c;
     var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType = 'inline', isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
     const { submitForm, popupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const [loading, setLoading] = (0, react_1.useState)(false);
+    const [formData, setFormData] = (0, react_1.useState)({});
+    const [marginTop, setMarginTop] = (0, react_1.useState)(0);
     const defaultColumns = (0, react_1.useMemo)(() => [
         {
             title: '',
@@ -40,7 +43,7 @@ const AppointForm = (_a) => {
             key: '4'
         }
     ], []);
-    const [formData, setFormData] = (0, react_1.useState)({});
+    const originalHeight = ((_b = document === null || document === void 0 ? void 0 : document.documentElement) === null || _b === void 0 ? void 0 : _b.clientHeight) || ((_c = document === null || document === void 0 ? void 0 : document.body) === null || _c === void 0 ? void 0 : _c.clientHeight);
     const columnsData = (0, react_1.useMemo)(() => {
         return (0, lodash_1.cloneDeep)(columns) || defaultColumns;
     }, [columns, defaultColumns]);
@@ -49,17 +52,17 @@ const AppointForm = (_a) => {
         setFormData(Object.assign(Object.assign({}, formData), { [name]: value }));
     }, [formData]);
     const handleSubmit = (0, lodash_1.debounce)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d, _e, _f;
+        var _d, _e, _f, _g, _h;
         const vals = formData;
         if (!vals)
             return;
-        const arr = (_c = (_b = Object.keys(vals)) === null || _b === void 0 ? void 0 : _b.map((key) => {
+        const arr = (_e = (_d = Object.keys(vals)) === null || _d === void 0 ? void 0 : _d.map((key) => {
             var _a;
             return ({
                 name: key,
                 value: (_a = vals[key]) !== null && _a !== void 0 ? _a : ''
             });
-        })) === null || _c === void 0 ? void 0 : _c.filter((item) => item === null || item === void 0 ? void 0 : item.value);
+        })) === null || _e === void 0 ? void 0 : _e.filter((item) => item === null || item === void 0 ? void 0 : item.value);
         if (!arr || !(arr === null || arr === void 0 ? void 0 : arr.length))
             return;
         setLoading(true);
@@ -68,8 +71,8 @@ const AppointForm = (_a) => {
         if (res) {
             if (isExternalLink) {
                 const data = popupDetailData;
-                const product = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct;
-                const cta = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta;
+                const product = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
+                const cta = (_h = (_g = data === null || data === void 0 ? void 0 : data.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.bindCta;
                 const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
                 jumpToWeb(data, product, cta, position);
             }
@@ -79,11 +82,31 @@ const AppointForm = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     }), 1000);
+    (0, react_1.useEffect)(() => {
+        const handleScroll = () => {
+            var _a, _b;
+            const userAgent = navigator.userAgent;
+            const isAndroid = userAgent.toLowerCase().includes('android');
+            if (!isAndroid)
+                return;
+            const resizeHeight = ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || ((_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight);
+            if (resizeHeight < originalHeight) {
+                setMarginTop(50);
+            }
+            else {
+                setMarginTop(0);
+            }
+        };
+        window.addEventListener('resize', handleScroll);
+        return () => {
+            window.removeEventListener('resize', handleScroll);
+        };
+    }, []);
     return (react_1.default.createElement("div", { className: 'pb-appoint-form' },
         react_1.default.createElement("div", { className: `pb-appoint-form-title ${(0, css_1.css)(Object.assign({}, textStyle))}`, dangerouslySetInnerHTML: {
                 __html: (0, tool_1.setFontForText)(title, textStyle)
             } }),
-        react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
+        react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign(Object.assign({}, style), { marginTop })) }, props),
             react_1.default.createElement("div", { className: 'pb-appoint-form-container' },
                 react_1.default.createElement(Form_1.default, { columns: columnsData, layout: layoutType, onChange: handleChange }))),
         react_1.default.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },

package/lib/materials/sxp/popup/CommodityDetail/index.d.ts

@@ -21,6 +21,9 @@ export interface ICommodityDetailProps {
         dotsAlign: 'left' | 'center' | 'right';
         delay: number;
         translateY?: number;
+        dotsBgColor?: string;
+        dotsActiveColor?: string;
+        dotsMarginBottom?: number;
     };
     commodityStyles?: {
         title: CSSProperties;

package/lib/materials/sxp/popup/CommodityDetail/index.js

@@ -93,10 +93,10 @@ const CommodityDetail = (_a) => {
                     __html: (0, tool_1.setFontForText)((_c = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _c !== void 0 ? _c : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                 } }),
             react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
-                react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
-            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
-            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
-            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
+                react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
+            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
+            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
+            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
             18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
     };
     const renderBtn = () => {
@@ -145,7 +145,21 @@ const CommodityDetail = (_a) => {
                         clickableClass: getDotsAlign
                     }, loop: true, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    }, ref: ref },
+                    }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && {
+                        '.swiper-pagination': {
+                            bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom
+                        }
+                    })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
+                        '.swiper-pagination-bullet': {
+                            backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
+                            opacity: 1
+                        }
+                    })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor) && {
+                        '.swipe-item-active-bullet': {
+                            backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
+                            opacity: 1
+                        }
+                    }))) },
                     react_1.default.createElement(react_1.default.Fragment, null, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
                         var _a;
                         return (react_1.default.createElement(react_2.SwiperSlide, { key: src },

package/lib/materials/sxp/popup/CommodityDetail/settingRender.d.ts

@@ -232,5 +232,18 @@ declare const _default: ({
         name: string[];
         text?: undefined;
     })[];
+} | {
+    title: string;
+    child: ({
+        label: string;
+        name: string[];
+        type: string;
+        addonAfter?: undefined;
+    } | {
+        label: string;
+        name: string[];
+        type: string;
+        addonAfter: string;
+    })[];
 })[];
 export default _default;

package/lib/materials/sxp/popup/CommodityDetail/settingRender.js

@@ -328,5 +328,26 @@ exports.default = [
                 name: ['props', 'iframeBgColor']
             }
         ]
+    },
+    {
+        title: '轮播指示器',
+        child: [
+            {
+                label: '背景色',
+                name: ['props', 'swiper', 'dotsBgColor'],
+                type: 'Color'
+            },
+            {
+                label: '选中色',
+                name: ['props', 'swiper', 'dotsActiveColor'],
+                type: 'Color'
+            },
+            {
+                label: '底边距',
+                name: ['props', 'swiper', 'dotsMarginBottom'],
+                type: 'Number',
+                addonAfter: 'px'
+            }
+        ]
     }
 ];

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts

@@ -21,6 +21,9 @@ export interface ICommodityDetailDiroNewProps {
         dotsAlign: 'left' | 'center' | 'right';
         delay: number;
         translateY?: number;
+        dotsBgColor?: string;
+        dotsActiveColor?: string;
+        dotsMarginBottom?: number;
     };
     commodityStyles?: {
         title: CSSProperties;

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -87,7 +87,7 @@ const CommodityDetailDiroNew = (_a) => {
     const productInfoText = ({ isPost }) => {
         return (react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
             react_1.default.createElement(ExpandableText_1.default, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
-                    `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+                    `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
 Made in Italy` })));
     };
     const getStyle = (0, react_1.useCallback)((style) => {
@@ -129,7 +129,21 @@ Made in Italy` })));
                         clickableClass: getDotsAlign
                     }, loop: true, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    }, ref: ref }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
+                    }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && {
+                        '.swiper-pagination': {
+                            bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom
+                        }
+                    })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
+                        '.swiper-pagination-bullet': {
+                            backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
+                            opacity: 1
+                        }
+                    })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor) && {
+                        '.swipe-item-active-bullet': {
+                            backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
+                            opacity: 1
+                        }
+                    }))) }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
                     var _a;
                     return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
                         react_1.default.createElement("div", { style: {

package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts

@@ -220,5 +220,18 @@ declare const _default: ({
         name: string[];
         text?: undefined;
     })[];
+} | {
+    title: string;
+    child: ({
+        label: string;
+        name: string[];
+        type: string;
+        addonAfter?: undefined;
+    } | {
+        label: string;
+        name: string[];
+        type: string;
+        addonAfter: string;
+    })[];
 })[];
 export default _default;

package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js

@@ -311,5 +311,26 @@ exports.default = [
                 name: ['props', 'iframeBgColor']
             }
         ]
+    },
+    {
+        title: '轮播指示器',
+        child: [
+            {
+                label: '背景色',
+                name: ['props', 'swiper', 'dotsBgColor'],
+                type: 'Color'
+            },
+            {
+                label: '选中色',
+                name: ['props', 'swiper', 'dotsActiveColor'],
+                type: 'Color'
+            },
+            {
+                label: '底边距',
+                name: ['props', 'swiper', 'dotsMarginBottom'],
+                type: 'Number',
+                addonAfter: 'px'
+            }
+        ]
     }
 ];