pb-sxp-ui 1.0.86 → 1.0.87

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

@@ -24,8 +24,9 @@ const useEventReport_1 = require("../../../core/hooks/useEventReport");
 const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
 const Tagbar_1 = tslib_1.__importDefault(require("./Tagbar"));
 const localStore_1 = require("../../../core/utils/localStore");
+const Consent_1 = tslib_1.__importDefault(require("../Consent"));
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { schema } = (0, hooks_1.useEditor)();
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
     const viewImageStartTime = (0, react_1.useRef)(0);
@@ -34,7 +35,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const viewTime = (0, react_1.useRef)();
     const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
     const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
-    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink } = (0, hooks_1.useSxpDataSource)();
+    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed } = (0, useEventReport_1.useEventReport)();
     const [videoRef, setVideoRef] = (0, react_1.useState)(null);
     const playerRef = (0, react_1.useRef)();
@@ -108,8 +109,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         const item = data === null || data === void 0 ? void 0 : data[activeIndex];
         const visibleChange = () => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            const repCond = !openHashtag && !isShowConsent;
             if (document.visibilityState === 'hidden') {
-                if (!openHashtag) {
+                if (repCond) {
                     event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
                     handleReportViewImageEnd(item);
                     handleReportProductView(item);
@@ -149,11 +151,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             }
             else if (document.visibilityState === 'visible') {
                 handleH5EnterLink();
-                if (!openHashtag) {
+                if (repCond) {
                     handleViewImageStartEvent(activeIndex);
                     event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
+                    backMainFeed('external', selectTag);
                 }
-                backMainFeed('external');
             }
         };
         document.addEventListener('visibilitychange', visibleChange);
@@ -170,17 +172,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         tempMap,
         curTime,
         backMainFeed,
-        openHashtag
+        openHashtag,
+        isShowConsent,
+        selectTag
     ]);
-    (0, react_1.useEffect)(() => {
-        const initTime = () => {
-            backMainFeed('external');
-        };
-        window.addEventListener('pageshow', initTime);
-        return () => {
-            window.removeEventListener('pageshow', initTime);
-        };
-    }, []);
     const tagHeight = (0, react_1.useMemo)(() => {
         let h = 0;
         if (tagList.length > 0) {
@@ -420,44 +415,45 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
     const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
     return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
-        waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
-                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
-            } })),
-        renderLogo,
-        react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
-        isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
-        react_1.default.createElement(react_2.Swiper, { style: {
-                marginTop: tagHeight
-            }, ref: swiperRef, onSlideChange: () => {
-                swiperRef.current.swiper.allowTouchMove = false;
-                setTimeout(() => {
-                    swiperRef.current.swiper.allowTouchMove = true;
-                }, 500);
-            }, onActiveIndexChange: (swiper) => {
-                setActiveIndex(swiper.activeIndex);
-                if (openHashtag)
-                    return;
-                handleScrollEvent(swiper);
-                if (waterFallData)
-                    return;
-                if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (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(() => {
-                            setIsLoadMore(false);
-                        });
+        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))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
+                    setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
+                } })),
+            renderLogo,
+            react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
+            isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _d !== void 0 ? _d : 0)}%` } })) : null,
+            react_1.default.createElement(react_2.Swiper, { style: {
+                    marginTop: tagHeight
+                }, ref: swiperRef, onSlideChange: () => {
+                    swiperRef.current.swiper.allowTouchMove = false;
+                    setTimeout(() => {
+                        swiperRef.current.swiper.allowTouchMove = true;
+                    }, 500);
+                }, onActiveIndexChange: (swiper) => {
+                    setActiveIndex(swiper.activeIndex);
+                    if (openHashtag)
+                        return;
+                    handleScrollEvent(swiper);
+                    if (waterFallData)
+                        return;
+                    if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (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(() => {
+                                setIsLoadMore(false);
+                            });
+                        }
                     }
-                }
-            }, direction: 'vertical', height: height },
-            react_1.default.createElement(ToggleButton_1.default, { style: {
-                    position: 'fixed',
-                    visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
-                    zIndex: 999,
-                    [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
-                    [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 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 }),
-            renderView),
-        react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
+                }, direction: 'vertical', height: height },
+                react_1.default.createElement(ToggleButton_1.default, { style: {
+                        position: 'fixed',
+                        visibility: ((_f = (_e = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _e === void 0 ? void 0 : _e.video) === null || _f === void 0 ? void 0 : _f.url) ? 'visible' : 'hidden',
+                        zIndex: 999,
+                        [(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _g !== void 0 ? _g : 'right']: (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _h !== void 0 ? _h : 0,
+                        [(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _j !== void 0 ? _j : 'bottom']: (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _k !== void 0 ? _k : 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 }),
+                renderView))),
+        react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_o = (_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.item) === null || _o === void 0 ? void 0 : _o.props)),
         react_1.default.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
             react_1.default.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
                     backgroundColor: 'transparent',

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

@@ -77,6 +77,9 @@ export interface ISxpDataSourceContext {
     curTime?: any;
     h5EnterLink?: () => void;
     themeTag?: any;
+    isShowConsent?: boolean;
+    selectTag?: string;
+    setSelectTag?: React.Dispatch<React.SetStateAction<string>>;
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {
@@ -115,5 +118,6 @@ export interface SxpDataSourceProviderProps {
     globalConfig?: ISxpPageRenderProps['globalConfig'];
     isEditor?: boolean;
 }
+export declare const DEFAULT_TAG = "FOR U";
 declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
 export default _default;

package/lib/core/context/SxpDataSourceProvider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SxpDataSourceContext = void 0;
+exports.DEFAULT_TAG = exports.SxpDataSourceContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const qs_1 = tslib_1.__importDefault(require("qs"));
@@ -8,7 +8,6 @@ const sessionStore_1 = require("../utils/sessionStore");
 const localStore_1 = require("../utils/localStore");
 const useIconLink_1 = require("../components/SxpPageRender/useIconLink");
 const event_1 = tslib_1.__importStar(require("../utils/event"));
-const Consent_1 = tslib_1.__importDefault(require("../components/Consent"));
 exports.SxpDataSourceContext = (0, react_1.createContext)({
     rtcList: [],
     tagList: []
@@ -18,8 +17,8 @@ var DataSourceType;
     DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
 })(DataSourceType || (DataSourceType = {}));
 const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
+exports.DEFAULT_TAG = 'FOR U';
 const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
-    var _a, _b, _c;
     const [rtcList, setRtcList] = (0, react_1.useState)([]);
     const [tagList, setTagList] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(false);
@@ -36,6 +35,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const [videoRef, setVideoRef] = (0, react_1.useState)(null);
     const themeTag = (0, react_1.useRef)();
     const curTime = (0, react_1.useRef)();
+    const [selectTag, setSelectTag] = (0, react_1.useState)(exports.DEFAULT_TAG);
     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;
@@ -79,10 +79,10 @@ 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;
+        var _a, _b, _c, _d, _e;
         query = {
-            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,
+            maxSize: (_a = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _a !== void 0 ? _a : maxSize,
+            defaultSize: (_b = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _b !== void 0 ? _b : defaultSize,
             'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
             'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
             hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
@@ -90,10 +90,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             themeTag: query === null || query === void 0 ? void 0 : query.themeTag
         };
         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) => {
+            const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
+            })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
         const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -105,7 +105,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return result === null || result === void 0 ? void 0 : result.data;
     }), [bffFetch, utmVal, maxSize, defaultSize]);
     const loadVideos = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _j, _k;
+        var _f, _g;
         if (rtcList.length <= 0) {
             return;
         }
@@ -115,8 +115,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
             themeTag: themeTag.current
         });
-        setRtcList(rtcList.concat((_j = data === null || data === void 0 ? void 0 : data.recList) !== null && _j !== void 0 ? _j : []));
-        setCacheRtcList(cacheRtcList.concat((_k = data === null || data === void 0 ? void 0 : data.recList) !== null && _k !== void 0 ? _k : []));
+        setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
+        setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
     const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
         if (!enableReportEvent) {
@@ -174,16 +174,16 @@ 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 _l, _m, _o, _p, _q;
+        var _h, _j, _k, _l, _m;
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
+            const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
+            })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
+            setTagList((_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []);
         }
         catch (e) {
             console.log('e', e);
@@ -314,13 +314,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setIsAgreePolicy,
             curTime,
             h5EnterLink,
-            themeTag
-        } }, 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({
+            themeTag,
+            isShowConsent,
+            selectTag,
+            setSelectTag
+        } }, render({
         rtcList,
         mutateLike: bffMutateLike,
         mutateUnlike: bffMutateUnlike,
         submitForm: bffSubmitForm,
         tagList
-    }))));
+    })));
 };
 exports.default = (0, react_1.memo)(SxpDataSourceProvider);

package/lib/core/hooks/useEventReport.d.ts

@@ -2,5 +2,5 @@ import { RecItemType } from '../components/SxpPageRender/typing';
 export declare function useEventReport(): {
     jumpToWeb: (data?: RecItemType, product?: RecItemType['product'], cta?: RecItemType['cta'], position?: number) => void;
     productView: (data?: RecItemType, product?: RecItemType['product'], cta?: RecItemType['cta'], viewTime?: any, position?: number) => void;
-    backMainFeed: (lastFeed?: 'theme' | 'branch' | 'external', themeTag?: string, hashTag?: string) => void;
+    backMainFeed: (lastFeed: 'theme' | 'branch' | 'external', selectTag?: string, themeTag?: string, hashTag?: string) => void;
 };

package/lib/core/hooks/useEventReport.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEventReport = void 0;
 const react_1 = require("react");
 const useSxpDataSource_1 = require("./useSxpDataSource");
+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) => {
@@ -69,16 +70,18 @@ function useEventReport() {
             }
         });
     }, [bffEventReport, popupDetailData]);
-    const backMainFeed = (0, react_1.useCallback)((lastFeed, themeTag, hashTag) => {
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                lastFeed,
-                themeTags: themeTag ? `[${themeTag}]` : '',
-                hashTags: hashTag ? `[${hashTag}]` : '',
-                eventSubject: 'backMainFeed',
-                eventDescription: 'back Main Feed'
-            }
-        });
+    const backMainFeed = (0, react_1.useCallback)((lastFeed, selectTag, themeTag, hashTag) => {
+        if (selectTag && selectTag === SxpDataSourceProvider_1.DEFAULT_TAG) {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    lastFeed,
+                    themeTags: themeTag ? `['${themeTag}']` : '',
+                    hashTags: hashTag ? `['${hashTag}']` : '',
+                    eventSubject: 'backMainFeed',
+                    eventDescription: 'back Main Feed'
+                }
+            });
+        }
     }, [bffEventReport]);
     return {
         jumpToWeb,

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

@@ -86,6 +86,6 @@ const AppointForm = (_a) => {
             react_1.default.createElement("div", { className: 'pb-appoint-form-container' },
                 react_1.default.createElement(pro_components_1.BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
         react_1.default.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
-            react_1.default.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? react_1.default.createElement(react_1.default.Fragment, null, "loading...") : submitText))));
+            react_1.default.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? react_1.default.createElement(react_1.default.Fragment, null, "loading...") : submitText))));
 };
 exports.default = (0, react_1.memo)(AppointForm);

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

@@ -75,8 +75,8 @@ const CommodityDetail = (_a) => {
             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 = () => {
-        var _a;
-        return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website'))));
+        var _a, _b;
+        return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website'))));
     };
     const getStyle = (0, react_1.useCallback)((style) => {
         if (style === null || style === void 0 ? void 0 : style.lineClamp) {
@@ -122,7 +122,7 @@ const CommodityDetail = (_a) => {
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
             react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
         renderBtn(),
         react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },

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

@@ -11,7 +11,7 @@ const arrow_png_1 = tslib_1.__importDefault(require("./arrow.png"));
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const CommodityDetailDiro = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, index } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "index"]);
     const [spread, setSpread] = (0, react_1.useState)(true);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
@@ -151,7 +151,7 @@ const CommodityDetailDiro = (_a) => {
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
+                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: 'pdp image' }))),
             react_1.default.createElement("div", { className: 'pb-commondityDiro-content' },
                 react_1.default.createElement("div", { className: 'pb-commondityDiro-content-title' }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'MEDIUM LADY D-LITE BAG'),
                 react_1.default.createElement("div", { className: 'pb-commondityDiro-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (product === null || product === void 0 ? void 0 : product.collection) || 'Gold-Tone and White Butterfly Zodiac Embroidery'),
@@ -161,12 +161,12 @@ const CommodityDetailDiro = (_a) => {
             react_1.default.createElement("div", { className: 'pb-commondityDiro-desc', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
                 react_1.default.createElement("div", { className: 'pb-commondityDiro-desc-collapse', onClick: handleClickCollapse },
                     react_1.default.createElement("div", { className: 'pb-commondityDiro-desc-collapse-title' }, "DESCRIPTION"),
-                    react_1.default.createElement("img", { className: `pb-commondityDiro-desc-collapse-icon ${spread ? 'pb-commondityDiro-desc-collapse-iconActive' : ''}`, src: arrow_png_1.default, alt: '' })),
+                    react_1.default.createElement("img", { className: `pb-commondityDiro-desc-collapse-icon ${spread ? 'pb-commondityDiro-desc-collapse-iconActive' : ''}`, src: arrow_png_1.default, alt: 'arrow image' })),
                 react_1.default.createElement("div", { className: 'pb-commondityDiro-desc-info', hidden: !spread }, (product === null || product === void 0 ? void 0 : product.info) ||
                     'The Lady D-Lite bag combines classic elegance with House modernity. The style is fully embroidered with a gold-tone and white Butterfly Zodiac motif by Pietro Ruffo, showcasing a constellation enhanced by astrological signs and adorned with butterflies. A Christian Dior Paris signature adorns the front, while D.I.O.R. charms in pale gold-finish metal further enhance and highlight the silhouette. Featuring a wide, removable embroidered shoulder strap, the medium Lady D-Lite bag can be carried by hand or worn crossbody.')),
             (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("div", { className: 'pb-commondityDiro-h90' }),
                 react_1.default.createElement("div", { className: 'pb-commondityDiro-bottom' },
-                    react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondityDiro-bottom-btn' }, (_l = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _l !== void 0 ? _l : 'SHOP NOW')))))));
+                    react_1.default.createElement("button", { "aria-label": (_l = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _l !== void 0 ? _l : 'SHOP NOW', onClick: handleLink, className: 'pb-commondityDiro-bottom-btn' }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'SHOP NOW')))))));
 };
 exports.default = (0, react_1.memo)(CommodityDetailDiro);

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

@@ -12,7 +12,7 @@ const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/compo
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const CommodityDetailDiroNew = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
     const [spread, setSpread] = (0, react_1.useState)(true);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
@@ -140,7 +140,7 @@ Made in Italy` })));
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
             react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                     react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
@@ -149,7 +149,7 @@ Made in Italy` })));
                     react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
                         react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) }, priceText),
                         react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo) }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
-                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now')),
                 productInfoText({ isPost }))),
         react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
 };

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

@@ -29,8 +29,8 @@ const Prompt = (_a) => {
     };
     return (react_1.default.createElement("div", Object.assign({ className: `pb-prompt ${(0, css_1.css)(Object.assign({}, style))}` }, props),
         react_1.default.createElement("div", { className: 'pb-prompt-icon' },
-            react_1.default.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : success_png_1.default })),
+            react_1.default.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : success_png_1.default, alt: 'success image' })),
         react_1.default.createElement("div", { className: 'pb-prompt-content' }, content),
-        react_1.default.createElement("button", { className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
+        react_1.default.createElement("button", { "aria-label": btnText, className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
 };
 exports.default = (0, react_1.memo)(Prompt);

package/lib/materials/sxp/template/Appoint/index.js

@@ -12,7 +12,7 @@ const Appoint = (_a) => {
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
     return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
         react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
+            react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: 'cta image' })),
         react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
 };
 exports.default = (0, react_1.memo)(Appoint);

package/package.json

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