pb-sxp-ui 1.3.1 → 1.3.2

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

@@ -37,7 +37,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 } = (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 } = (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));
@@ -67,6 +67,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     }, [data.length, bffFbReport, h5EnterLink]);
     (0, react_1.useEffect)(() => {
         var _a;
+        if (!ctaType || (ctaType === null || ctaType === void 0 ? void 0 : ctaType.length) < 1)
+            return;
         const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const ctaType0 = ctaType === null || ctaType === void 0 ? void 0 : ctaType[0];
@@ -80,8 +82,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 return ((_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.bindCta) === null || _f === void 0 ? void 0 : _f.itemId) === ctaType0 && (((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url) || ((_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.imgUrls) === null || _j === void 0 ? void 0 : _j.length));
             }
         })) || 0;
-        (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
-    }, [ctaType, swiperRef]);
+        if (index !== -1)
+            (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
+    }, [data, ctaType, swiperRef]);
     (0, react_1.useEffect)(() => {
         const item = data === null || data === void 0 ? void 0 : data[activeIndex];
         const visibleChange = () => {
@@ -180,7 +183,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     }, [globalConfig, containerHeight, tagHeight]);
     const visList = (0, react_1.useMemo)(() => {
         var _a;
-        const list = activeIndex === 0 && !waterFallData
+        const list = activeIndex === 0 && !waterFallData && !isEditor
             ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
             : data === null || data === void 0 ? void 0 : data.map((item, index) => {
                 if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
@@ -191,7 +194,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 }
             });
         return !waterFallData ? list.concat([{ loading: true }]) : list;
-    }, [data, activeIndex, waterFallData]);
+    }, [data, activeIndex, waterFallData, isEditor]);
     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)) {
@@ -436,6 +439,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
                 visibility: ((_b = (_a = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) ? 'visible' : 'hidden',
                 zIndex: 999,
+                transform: 'translate3d(0px,0px,0px)',
                 [(_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _c !== void 0 ? _c : 'right']: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _d !== void 0 ? _d : 0,
                 [(_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _e !== void 0 ? _e : 'bottom']: (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _f !== void 0 ? _f : 23
             }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted })));
@@ -454,10 +458,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     alignItems: 'center'
                 } },
                 react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                renderContent(rec, index),
-                renderBottom(rec, index),
                 renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
-                renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))))))));
+                renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
+                renderBottom(rec, index),
+                renderContent(rec, index)))))));
         });
     }, [
         containerWidth,
@@ -492,9 +496,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 if (openHashtag)
                     return;
                 handleScrollEvent(swiper);
-                if (waterFallData)
+                if (waterFallData || isEditor)
                     return;
-                if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
+                if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
                     if (!isLoadMore) {
                         setIsLoadMore(true);
                         loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {

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

@@ -21,6 +21,9 @@ interface IEditorDataContext {
     openConsent?: boolean;
     setOpenConsent?: React.Dispatch<React.SetStateAction<boolean>>;
     sxpFontLinks?: any[];
+    utmParameter?: {
+        channels: string[];
+    };
 }
 interface IEditorProviderProps {
     data?: any;

package/lib/core/context/EditorDataProvider.js

@@ -29,7 +29,8 @@ const EditorDataProvider = ({ children, data }) => {
             setOpenHashtag,
             openConsent,
             setOpenConsent,
-            sxpFontLinks: data === null || data === void 0 ? void 0 : data.sxpFontLinks
+            sxpFontLinks: data === null || data === void 0 ? void 0 : data.sxpFontLinks,
+            utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter
         } }, children));
 };
 function useEditorDataProvider() {

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

@@ -81,6 +81,7 @@ export interface ISxpDataSourceContext {
     globalConfig?: ISxpPageRenderProps['globalConfig'];
     popupCurTimeRef?: any;
     checkCommodityIndexRef?: any;
+    isEditor?: boolean;
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {

package/lib/core/context/SxpDataSourceProvider.js

@@ -96,8 +96,8 @@ 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;
-        query = 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}]` }));
+        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        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) => {
                 var _a, _b;
@@ -106,30 +106,34 @@ 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) || isEditor) {
-            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] }));
-            if (!(query === null || query === void 0 ? void 0 : query.channel))
+        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({}, query), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList[0] }));
+            if (!(query === null || query === void 0 ? void 0 : query.channel) || isInit.current)
                 return;
+            isInit.current = true;
             let list = [];
             let result = null;
-            let pageNum = 1;
             const recurveRecList = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-                var _l, _m, _o, _p;
+                var _r, _s, _t, _u, _v, _w;
                 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;
                 }
-                const rec = (_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.recList) === null || _m === void 0 ? void 0 : _m[0];
-                list = list.concat((_p = (_o = result === null || result === void 0 ? void 0 : result.data) === null || _o === void 0 ? void 0 : _o.recList) !== null && _p !== void 0 ? _p : []);
-                if ((rec === null || rec === void 0 ? void 0 : rec.product) || (rec === null || rec === void 0 ? void 0 : rec.video)) {
+                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 : []);
+                if (isNotNullList) {
                     pageNum = pageNum + 1;
                     yield recurveRecList(query);
                 }
             });
             yield recurveRecList(query);
             if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
-                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 });
+                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 });
             return Object.assign(Object.assign({}, result.data), { recList: list });
         }
         const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -138,15 +142,20 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         }
         if (!(query === null || query === void 0 ? void 0 : query.hashTag))
             setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
+        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 : []);
+            return Object.assign(Object.assign({}, result.data), { recList: list });
+        }
         return result === null || result === void 0 ? void 0 : result.data;
-    }), [bffFetch, utmVal, maxSize, defaultSize, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, channelQueryList, isEditor]);
-    const loadVideos = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _q, _r, _s, _t;
+    }), [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;
         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({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_q = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _q === void 0 ? void 0 : _q.itemId) && { productFilter: (_r = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _r === void 0 ? void 0 : _r.itemId })), (((_s = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _s === void 0 ? void 0 : _s.itemId) && { contentFilter: (_t = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _t === void 0 ? void 0 : _t.itemId })), { themeTag: themeTag.current }));
+        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 })));
         setRtcList(rtcList.concat(getFilterRecList(data)));
         setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
@@ -158,7 +167,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             userInfo = {};
         }
         const sessionID = (0, sessionStore_1.storeAndLoadFeSessionId)();
-        const ef = Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), { sxpDevice: (0, tool_1.getDevice)(), sxpSystem: (0, tool_1.getSystem)(), sxpBrowser: (0, tool_1.getBrowserInfo)() });
+        const ef = Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), ((0, tool_1.getDevice)() && { sxpDevice: (0, tool_1.getDevice)() })), ((0, tool_1.getSystem)() && { sxpSystem: (0, tool_1.getSystem)() })), ((0, tool_1.getBrowserInfo)() && { sxpBrowser: (0, tool_1.getBrowserInfo)() }));
         const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
         const realEventInfo = Object.entries(ef)
             .map(([k, v]) => v && { name: k, value: v })
@@ -174,24 +183,21 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         });
     }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
     const bffFbReport = (0, react_1.useCallback)((_a) => {
-        var _b, _c;
+        var _b, _c, _d;
         var { eventName, actionSource = 'website', eventSourceUrl = (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href, externalId } = _a;
         if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
             return;
         }
         const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
+        const urlParams = new URLSearchParams(window.location.search);
+        const fbclid = urlParams.get('fbclid');
         return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
             method: 'POST',
             body: {
                 eventName,
                 actionSource,
                 eventSourceUrl,
-                userData: {
-                    externalId: fakeUserId,
-                    fbc: `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbc')}`,
-                    fbp: `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}`,
-                    client_user_agent: (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent
-                }
+                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 : '' })
             },
             type: 'beacon'
         });
@@ -209,17 +215,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 _u, _v, _w, _x, _y;
+        var _1, _2, _3, _4, _5;
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_w = (_v = (_u = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _u === void 0 ? void 0 : _u.filter((val) => {
+            const val = (_3 = (_2 = (_1 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _1 === void 0 ? void 0 : _1.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 || _v === void 0 ? void 0 : _v.join('&')) !== null && _w !== void 0 ? _w : '';
+            })) === null || _2 === void 0 ? void 0 : _2.join('&')) !== null && _3 !== void 0 ? _3 : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            setTagList((_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.tags) !== null && _y !== void 0 ? _y : []);
+            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 : []);
         }
         catch (e) {
             console.log('e', e);
@@ -292,11 +298,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 }
             });
             setLoading(false);
-            isInit.current = true;
         });
     }, [isShowConsent]);
     (0, react_1.useEffect)(() => {
-        if (!isInit.current && !isEditor)
+        if (!isPreview)
             return;
         setLoading(true);
         bffGetTagList();
@@ -306,9 +311,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setCacheRtcList(getFilterRecList(data));
         })
             .finally(() => {
+            bffEventReport({
+                eventInfo: {
+                    eventSubject: 'apiRequest',
+                    eventDescription: 'api request succeed'
+                }
+            });
             setLoading(false);
         });
-    }, [bffGetTagList, isEditor, getRecommendVideos]);
+    }, [getRecommendVideos, bffGetTagList]);
     const defaultLoadingImage = (0, useIconLink_1.useIconLink)('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
     return (react_1.default.createElement(exports.SxpDataSourceContext.Provider, { value: {
             rtcList,
@@ -356,7 +367,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setSelectTag,
             globalConfig,
             popupCurTimeRef,
-            checkCommodityIndexRef
+            checkCommodityIndexRef,
+            isEditor
         } }, 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/utils/tool.d.ts

@@ -7,8 +7,8 @@ interface IfontType {
     'fontFamily-en': string;
 }
 export declare const setFontForText: (textContent?: string | null, style?: IfontType | any) => string;
-declare function getBrowserInfo(): string;
-declare function getSystem(): string;
-declare function getDevice(): string;
+declare function getBrowserInfo(): string | null;
+declare function getSystem(): string | null;
+declare function getDevice(): string | null;
 declare function getCookie(val: string): string;
 export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };

package/lib/core/utils/tool.js

@@ -100,7 +100,7 @@ function getBrowserInfo() {
     var _a, _b, _c, _d, _e, _f, _g;
     let userAgent = self.navigator.userAgent;
     if (!userAgent)
-        return 'Unknown';
+        return null;
     if (/edge\/([\d\.]+)/i.exec(userAgent))
         return `Edge ${(_a = /edge\/([\d\.]+)/i.exec(userAgent)) === null || _a === void 0 ? void 0 : _a[1]}`;
     if (/edg\/([\d\.]+)/i.exec(userAgent))
@@ -115,14 +115,14 @@ function getBrowserInfo() {
         return `Firefox ${(_f = /firefox\/([\d\.]+)/i.exec(userAgent)) === null || _f === void 0 ? void 0 : _f[1]}`;
     if (/safari/i.test(userAgent))
         return `Safari ${(_g = /version\/([\d\.]+)/i.exec(userAgent)) === null || _g === void 0 ? void 0 : _g[1]}`;
-    return 'Unknown';
+    return null;
 }
 exports.getBrowserInfo = getBrowserInfo;
 function getSystem() {
     var _a, _b, _c;
     let userAgent = self.navigator.userAgent;
     if (!userAgent)
-        return 'Unknown';
+        return null;
     if (/iphone/i.test(userAgent))
         return `IOS ${(_a = userAgent.match(/OS\s(.*?)\slike/)) === null || _a === void 0 ? void 0 : _a[1]}`;
     if (/android/i.test(userAgent))
@@ -131,13 +131,13 @@ function getSystem() {
         return `Windows ${(_c = userAgent.match(/Windows\s(.*?)\;/)) === null || _c === void 0 ? void 0 : _c[1]}`;
     if (/mac/i.test(userAgent))
         return `Mac OS`;
-    return 'Unknown';
+    return null;
 }
 exports.getSystem = getSystem;
 function getDevice() {
     let userAgent = self.navigator.userAgent;
     if (!userAgent)
-        return 'Unknown';
+        return null;
     if (/iphone/i.test(userAgent))
         return `iPhone`;
     if (/android/i.test(userAgent)) {
@@ -152,7 +152,7 @@ function getDevice() {
         return `Windows`;
     if (/mac/i.test(userAgent))
         return `Mac`;
-    return 'Unknown';
+    return null;
 }
 exports.getDevice = getDevice;
 function getCookie(val) {

package/lib/materials/sxp/HashTag/index.d.ts

@@ -8,7 +8,9 @@ export interface IHashTagProps {
         hashTagDesc: CSSProperties;
         hashTagLink: CSSProperties;
         title: CSSProperties;
-        price: CSSProperties;
+        price: CSSProperties & {
+            enableFormattedPrice?: boolean;
+        };
     };
     buttonBgStyle: CSSProperties;
     showBanner?: boolean;

package/lib/materials/sxp/HashTag/settingRender.d.ts

@@ -61,6 +61,13 @@ declare const _default: ({
             name?: undefined;
             initialValue?: undefined;
             child?: undefined;
+        } | {
+            label: string;
+            type: string;
+            name: string[];
+            initialValue: boolean;
+            options?: undefined;
+            child?: undefined;
         })[];
     }[];
 } | {

package/lib/materials/sxp/HashTag/settingRender.js

@@ -105,6 +105,12 @@ exports.default = [
                     {
                         label: '间距',
                         type: 'TextSpace'
+                    },
+                    {
+                        label: '价格千分符展示',
+                        type: 'Switch',
+                        name: ['enableFormattedPrice'],
+                        initialValue: true
                     }
                 ]
             }

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

@@ -171,20 +171,19 @@ const CommodityDetail = (_a) => {
                             width: '100%',
                             height: '100%'
                         }), src: (_5 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _5 !== void 0 ? _5 : bottom_image, alt: 'pdp image' }))),
-                (iframeUrl && iframeIcon) ||
-                    (!product && iframeIcon && (react_1.default.createElement("div", { style: {
-                            padding: '5px 10px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            position: 'absolute',
-                            right: '10px',
-                            bottom: '10px',
-                            zIndex: 1,
-                            background: '#fff',
-                            borderRadius: '3px'
-                        }, onClick: () => setShow3DModal(true) },
-                        react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } }),
-                        react_1.default.createElement("span", { style: { fontSize: '12px' } }, "Try in 3D"))))),
+                (iframeUrl || !product) && iframeIcon && (react_1.default.createElement("div", { style: {
+                        padding: '5px 10px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        position: 'absolute',
+                        right: '10px',
+                        bottom: '10px',
+                        zIndex: 1,
+                        background: '#fff',
+                        borderRadius: '3px'
+                    }, onClick: () => setShow3DModal(true) },
+                    react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } }),
+                    react_1.default.createElement("span", { style: { fontSize: '12px' } }, "Try in 3D")))),
             renderCommodityGroup(),
             react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
         renderBtn(),

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

@@ -154,20 +154,19 @@ Made in Italy` })));
                             width: '100%',
                             height: '100%'
                         }), src: (_5 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _5 !== void 0 ? _5 : bottom_image, alt: 'pdp image' }))),
-                (iframeUrl && iframeIcon) ||
-                    (!product && iframeIcon && (react_1.default.createElement("div", { style: {
-                            padding: '5px 10px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            position: 'absolute',
-                            right: '10px',
-                            bottom: '10px',
-                            zIndex: 1,
-                            background: '#fff',
-                            borderRadius: '3px'
-                        }, onClick: () => setShow3DModal(true) },
-                        react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } }),
-                        react_1.default.createElement("span", { style: { fontSize: '12px' } }, "Try in 3D"))))),
+                (iframeUrl || !product) && iframeIcon && (react_1.default.createElement("div", { style: {
+                        padding: '5px 10px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        position: 'absolute',
+                        right: '10px',
+                        bottom: '10px',
+                        zIndex: 1,
+                        background: '#fff',
+                        borderRadius: '3px'
+                    }, onClick: () => setShow3DModal(true) },
+                    react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } }),
+                    react_1.default.createElement("span", { style: { fontSize: '12px' } }, "Try in 3D")))),
             renderCommodityGroup(),
             react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },

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

@@ -16,7 +16,9 @@ export interface ICommodityListProps {
     commodityStyles?: {
         title: CSSProperties;
         collection: CSSProperties;
-        price: CSSProperties;
+        price: CSSProperties & {
+            enableFormattedPrice?: boolean;
+        };
     };
     buttonStyle?: CSSProperties;
     translateY?: number;

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

@@ -10,7 +10,7 @@ const tool_1 = require("../../../../core/utils/tool");
 const Img_1 = tslib_1.__importDefault(require("../../template/components/Img"));
 const lodash_1 = require("lodash");
 const CommodityList = (_a) => {
-    var _b, _c;
+    var _b, _c, _d;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, translateY = 0, commodityPicture, isExternalLink, onClick } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "translateY", "commodityPicture", "isExternalLink", "onClick"]);
     const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
@@ -19,16 +19,20 @@ const CommodityList = (_a) => {
     const product = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [null, null, null, null];
     const index = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
     const priceText = (0, react_1.useCallback)((product) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
+        const isToLocStr = ((_a = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice) === undefined || ((_b = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _b === void 0 ? void 0 : _b.enableFormattedPrice);
         if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
-            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
-                minimumFractionDigits: 0
-            })) !== null && _e !== void 0 ? _e : ''}`;
+            return `${(_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.currency) === null || _c === void 0 ? void 0 : _c.split('-')[1]) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : ''}${isToLocStr
+                ? (_g = (_f = product === null || product === void 0 ? void 0 : product.price) === null || _f === void 0 ? void 0 : _f.toLocaleString('zh', {
+                    minimumFractionDigits: 0
+                })) !== null && _g !== void 0 ? _g : ''
+                : product === null || product === void 0 ? void 0 : product.price}`;
         }
         else {
-            return '$7,000';
+            const p = 7000;
+            return `$${isToLocStr ? p === null || p === void 0 ? void 0 : p.toLocaleString() : p}`;
         }
-    }, []);
+    }, [(_d = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _d === void 0 ? void 0 : _d.enableFormattedPrice]);
     const handleClick = (0, lodash_1.throttle)((item, multiCheckIndex) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',

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

@@ -95,6 +95,13 @@ declare const _default: ({
             name?: undefined;
             initialValue?: undefined;
             child?: undefined;
+        } | {
+            label: string;
+            type: string;
+            name: string[];
+            initialValue: boolean;
+            options?: undefined;
+            child?: undefined;
         })[];
     }[];
 } | {

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

@@ -137,6 +137,12 @@ exports.default = [
                     {
                         label: '间距',
                         type: 'TextSpace'
+                    },
+                    {
+                        label: '价格千分符展示',
+                        type: 'Switch',
+                        name: ['enableFormattedPrice'],
+                        initialValue: true
                     }
                 ]
             }

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

@@ -11,6 +11,7 @@ export interface IIframeProps {
     onClick?: () => void;
     submitButtonStyle?: CSSProperties;
     contentStyle?: CSSProperties;
+    isTel?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IIframeProps>;
 export default _default;

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

@@ -7,14 +7,15 @@ require("./index.less");
 const hooks_1 = require("../../../../core/hooks");
 const Iframe = (_a) => {
     var _b, _c;
-    var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle } = _a, props = tslib_1.__rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle"]);
+    var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel } = _a, props = tslib_1.__rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel"]);
     const { popupDetailData } = (0, hooks_1.useSxpDataSource)();
     const iframeUrl = (_c = (_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _b === void 0 ? void 0 : _b.bindCta) === null || _c === void 0 ? void 0 : _c.remark;
-    return (react_1.default.createElement("div", Object.assign({ className: `${(0, css_1.css)(Object.assign({}, style))}` }, props), iframeUrl && (react_1.default.createElement("iframe", { src: iframeUrl, style: {
-            width: '100%',
-            height: 'calc(100% - 50px)',
-            marginTop: '40px',
-            border: 'none'
-        } }))));
+    return (react_1.default.createElement("div", Object.assign({ className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { height: isTel ? 664 : '100%' }))}` }, props),
+        react_1.default.createElement("iframe", { src: iframeUrl, style: {
+                width: '100%',
+                height: 'calc(100% - 50px)',
+                marginTop: '40px',
+                border: 'none'
+            } })));
 };
 exports.default = (0, react_1.memo)(Iframe);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",