pb-sxp-ui 1.0.79 → 1.0.81

package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -6,6 +6,7 @@ const hooks_1 = require("../../../../core/hooks");
 require("./WaterfallList.less");
 const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
 const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
+const css_1 = require("@emotion/css");
 const WaterfallFlowItem = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = (0, hooks_1.useSxpDataSource)();
@@ -142,8 +143,8 @@ const WaterfallFlowItem = (props) => {
             react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
 };
 function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var { reportTagsView, showBanner } = _a, props = tslib_1.__rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
     const scrollParent = (0, react_1.useRef)(null);
     const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
@@ -314,24 +315,29 @@ function WaterfallList(_a) {
     return (react_1.default.createElement(react_1.default.Fragment, null, isLoadingData ? (react_1.default.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
         react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement("div", { className: 'waterFallList', ref: waterfallFlowDom },
         react_1.default.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent },
-            react_1.default.createElement("div", { className: 'waterFallList-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
-            react_1.default.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'waterFallList-collection', style: Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
+            showBanner && ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.picture) && (react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
+                    width: '100%',
+                    objectFit: 'cover',
+                    marginBottom: '20px'
+                }), src: (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.picture })),
+            react_1.default.createElement("div", { className: 'waterFallList-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc }, (_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info),
+            react_1.default.createElement("div", { hidden: !((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.link), className: 'waterFallList-collection', style: Object.assign({}, (_g = props === null || props === void 0 ? void 0 : props.textStyles) === null || _g === void 0 ? void 0 : _g.hashTagLink), onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'),
             react_1.default.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
                 list.map((item, ind) => {
                     var _a;
                     return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
                 }),
-                react_1.default.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
+                react_1.default.createElement("div", { hidden: !((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.link), style: {
                         position: 'absolute',
                         width: '100%',
-                        transform: `translate(0px,${(_m = ((_j = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_h = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _h === void 0 ? void 0 : _h.length) - 1]) === null || _j === void 0 ? void 0 : _j.top) +
-                            ((_l = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_k = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _k === void 0 ? void 0 : _k.length) - 1]) === null || _l === void 0 ? void 0 : _l.height)) !== null && _m !== void 0 ? _m : 0}px)`,
-                        height: ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link)
-                            ? ((_p = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _p === void 0 ? void 0 : _p.offsetHeight) || ((_q = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _q === void 0 ? void 0 : _q.height) || '100px'
+                        transform: `translate(0px,${(_p = ((_l = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_k = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _k === void 0 ? void 0 : _k.length) - 1]) === null || _l === void 0 ? void 0 : _l.top) +
+                            ((_o = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_m = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _m === void 0 ? void 0 : _m.length) - 1]) === null || _o === void 0 ? void 0 : _o.height)) !== null && _p !== void 0 ? _p : 0}px)`,
+                        height: ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.link)
+                            ? ((_r = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _r === void 0 ? void 0 : _r.offsetHeight) || ((_s = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _s === void 0 ? void 0 : _s.height) || '100px'
                             : 0
                     } }))),
-        react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
-        react_1.default.createElement("div", { ref: buttonRef, hidden: !((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-            react_1.default.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.linkTitle) || 'Shop the collection'))))));
+        react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        react_1.default.createElement("div", { ref: buttonRef, hidden: !((_u = data === null || data === void 0 ? void 0 : data.tag) === null || _u === void 0 ? void 0 : _u.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            react_1.default.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection'))))));
 }
 exports.default = WaterfallList;

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

@@ -10,9 +10,11 @@ const WaterfallList_1 = tslib_1.__importDefault(require("./WaterfallList"));
 const left_png_1 = tslib_1.__importDefault(require("./left.png"));
 const List_1 = tslib_1.__importDefault(require("./List"));
 const hooks_1 = require("../../../../core/hooks");
+const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const WaterFall = (props) => {
     var _a;
-    const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport } = (0, hooks_1.useSxpDataSource)();
+    const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag } = (0, hooks_1.useSxpDataSource)();
+    const { backMainFeed } = (0, useEventReport_1.useEventReport)();
     const ref = (0, react_1.useRef)(null);
     const modalEleRef = (0, react_1.useRef)(null);
     const [viewTime, setViewTime] = (0, react_1.useState)();
@@ -33,6 +35,9 @@ const WaterFall = (props) => {
         if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
             setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
         }
+        if (!(themeTag === null || themeTag === void 0 ? void 0 : themeTag.current)) {
+            backMainFeed('branch', themeTag === null || themeTag === void 0 ? void 0 : themeTag.current, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
+        }
         reportTagsView();
         setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
         setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
@@ -100,6 +105,6 @@ const WaterFall = (props) => {
             display: openHashtag ? 'block' : 'none'
         } },
         react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { top: '32px' }, textStyle: (_a = props === null || props === void 0 ? void 0 : props.textStyles) === null || _a === void 0 ? void 0 : _a.hashTagTitle, onClose: handleClose }),
-        (props === null || props === void 0 ? void 0 : props.isWaterfallFlow) ? (react_1.default.createElement(WaterfallList_1.default, Object.assign({ reportTagsView: reportTagsView }, props))) : (react_1.default.createElement(List_1.default, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
+        (props === null || props === void 0 ? void 0 : props.openFixedSize) === true || (props === null || props === void 0 ? void 0 : props.openFixedSize) === undefined ? (react_1.default.createElement(List_1.default, Object.assign({ reportTagsView: reportTagsView }, props))) : (react_1.default.createElement(WaterfallList_1.default, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
 };
 exports.default = (0, react_1.memo)(WaterFall);

package/lib/core/components/SxpPageRender/index.d.ts

@@ -34,6 +34,7 @@ export interface ISxpPageRenderProps {
         likeIconYPosit?: string;
         likeIconXPosit?: string;
         swipeTipOffset?: number;
+        consent?: any[];
     };
     descStyle?: CSSProperties;
     tipText?: {
@@ -68,7 +69,7 @@ export interface ISxpPageRenderProps {
     ctaType?: string;
     _schema?: any;
     hashTagStyle?: CSSProperties;
-    licenseUrl?: String;
+    licenseUrl?: string;
 }
 declare const SxpPageRender: FC<ISxpPageRenderProps>;
 export default SxpPageRender;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
-const qs_1 = tslib_1.__importDefault(require("qs"));
 const ExpandableText_1 = tslib_1.__importDefault(require("./ExpandableText"));
 const LikeButton_1 = tslib_1.__importDefault(require("./LikeButton"));
 const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
@@ -32,11 +31,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const viewImageStartTime = (0, react_1.useRef)(0);
     const [isInit, setIsInit] = (0, react_1.useState)(false);
     const [isMuted, setIsMuted] = (0, react_1.useState)(true);
-    const curTime = (0, react_1.useRef)();
     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 } = (0, hooks_1.useSxpDataSource)();
+    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink } = (0, hooks_1.useSxpDataSource)();
+    const { backMainFeed } = (0, useEventReport_1.useEventReport)();
     const [videoRef, setVideoRef] = (0, react_1.useState)(null);
     const playerRef = (0, react_1.useRef)();
     const { productView } = (0, useEventReport_1.useEventReport)();
@@ -44,42 +43,20 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
     }, [data, loading]);
     const handleH5EnterLink = (0, react_1.useCallback)(() => {
-        var _a, _b;
         if (data.length <= 0) {
             return;
         }
-        initTime();
-        const queryString = location.search.slice(1);
-        const params = qs_1.default.parse(queryString.replace(/\+/g, '%2B'));
-        for (const key in params) {
-            params[key] = params[key].replace(/%2B/g, '+');
+        (0, sessionStore_1.refreshFeSessionId)();
+        const now = new Date();
+        viewTime.current = now;
+        if (isInit) {
+            h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
         }
-        const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                eventSubject: 'h5LinkEnterFeed',
-                eventDescription: 'User enter h5 link',
-                utmSource: getVal('utm_source'),
-                utmMedium: getVal('utm_medium'),
-                utmCampaign: getVal('utm_campaign'),
-                utmId: getVal('utm_id'),
-                utmContent: getVal('utm_content'),
-                enterTime: `${Date.now()}`,
-                requestId: null,
-                enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : '',
-                clSource: getVal('cl_sourc')
-            }
-        });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView'
         });
         setIsInit(true);
-    }, [bffEventReport, data.length, bffFbReport]);
-    const initTime = () => {
-        curTime.current = new Date();
-        viewTime.current = new Date();
-        (0, sessionStore_1.refreshFeSessionId)();
-    };
+    }, [data.length, bffFbReport, h5EnterLink, isInit]);
     const firstRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
@@ -172,13 +149,33 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 handleH5EnterLink();
                 handleViewImageStartEvent(activeIndex);
                 event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
+                backMainFeed('external');
             }
         };
         document.addEventListener('visibilitychange', visibleChange);
         return () => {
             document.removeEventListener('visibilitychange', visibleChange);
         };
-    }, [activeIndex, bffEventReport, curTime, data, handleH5EnterLink, popupDetailData, isFromHashtag, tempMap]);
+    }, [
+        activeIndex,
+        bffEventReport,
+        data,
+        handleH5EnterLink,
+        popupDetailData,
+        isFromHashtag,
+        tempMap,
+        curTime,
+        backMainFeed
+    ]);
+    (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) {

package/lib/core/components/SxpPageRender/typing.d.ts

@@ -3,6 +3,7 @@ export type TagType = {
     link: string;
     linkTitle: string;
     linkType: string;
+    picture?: string;
 };
 export type RecItemType = {
     position: string;

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

@@ -7,10 +7,19 @@ interface IEditorDataContext {
         placeholderImage: string;
         hashTagSize: number;
         loadingImage: string;
+        industry?: string;
+        privacyContent?: string;
+        privacyNecessity?: boolean;
+        privacyPolicyTitle?: string;
+        privacyPolicyUrl?: string;
+        privacyTitle?: string;
+        template?: any | null;
     };
     appDomain?: string;
     openHashtag?: boolean;
     setOpenHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
+    openConsent?: boolean;
+    setOpenConsent?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 interface IEditorProviderProps {
     data?: any;

package/lib/core/context/EditorDataProvider.js

@@ -5,8 +5,9 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const EditorDataContext = (0, react_1.createContext)({});
 const EditorDataProvider = ({ children, data }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const [openHashtag, setOpenHashtag] = (0, react_1.useState)(false);
+    const [openConsent, setOpenConsent] = (0, react_1.useState)(false);
     return (react_1.default.createElement(EditorDataContext.Provider, { value: {
             sxpPrameter: {
                 bottomImage: (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.bottom_image,
@@ -14,11 +15,20 @@ const EditorDataProvider = ({ children, data }) => {
                 personalizedRecommend: (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.personalized_recommend,
                 placeholderImage: (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.placeholder_image,
                 hashTagSize: (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size,
-                loadingImage: (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.loading_image
+                loadingImage: (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.loading_image,
+                privacyContent: (_g = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _g === void 0 ? void 0 : _g.privacy_context,
+                privacyNecessity: (_h = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _h === void 0 ? void 0 : _h.privacy_necessity,
+                privacyPolicyTitle: (_j = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _j === void 0 ? void 0 : _j.privacy_policy_title,
+                privacyPolicyUrl: (_k = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _k === void 0 ? void 0 : _k.privacy_policy_url,
+                privacyTitle: (_l = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _l === void 0 ? void 0 : _l.privacy_title,
+                template: (_m = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _m === void 0 ? void 0 : _m.template,
+                industry: (_o = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _o === void 0 ? void 0 : _o.industry
             },
             appDomain: data === null || data === void 0 ? void 0 : data.appDomain,
             openHashtag,
-            setOpenHashtag
+            setOpenHashtag,
+            openConsent,
+            setOpenConsent
         } }, children));
 };
 function useEditorDataProvider() {

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

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { DataSource, PageData } from '../Pagebuilder/type';
 import { ProductInfoType, RecItemType, RecommendVideoResultType, VideoInfoType } from '../components/SxpPageRender/typing';
+import { ISxpPageRenderProps } from '../components/SxpPageRender';
 export interface IWaterFallDataType {
     hashTag: string;
     itemId?: string;
@@ -62,6 +63,8 @@ export interface ISxpDataSourceContext {
     loadingImage?: string;
     isOpenHashTag?: boolean;
     tagList: string[];
+    isAgreePolicy?: boolean;
+    setIsAgreePolicy?: React.Dispatch<React.SetStateAction<boolean>>;
     setLoading?: React.Dispatch<React.SetStateAction<boolean>>;
     videoRef?: any;
     setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
@@ -71,6 +74,9 @@ export interface ISxpDataSourceContext {
         eventSourceUrl?: string;
         externalId?: string;
     }) => Promise<any> | undefined | boolean;
+    curTime?: any;
+    h5EnterLink?: () => void;
+    themeTag?: any;
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {
@@ -103,6 +109,10 @@ export interface SxpDataSourceProviderProps {
     isOpenHashTag?: boolean;
     enabledMetaConversionApi?: boolean;
     isShowTag?: boolean;
+    consentWidth?: number;
+    consentHeight?: number;
+    isOpenConsent?: boolean;
+    globalConfig?: ISxpPageRenderProps['globalConfig'];
 }
 declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
 export default _default;

package/lib/core/context/SxpDataSourceProvider.js

@@ -8,6 +8,7 @@ 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: []
@@ -17,13 +18,15 @@ var DataSourceType;
     DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
 })(DataSourceType || (DataSourceType = {}));
 const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
-const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
+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 }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const [rtcList, setRtcList] = (0, react_1.useState)([]);
     const [tagList, setTagList] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [curReqInfo, setCurReqInfo] = (0, react_1.useState)({ rtc: '', requestId: '' });
     const swiperRef = (0, react_1.useRef)(null);
     const isInit = (0, react_1.useRef)(false);
+    const [isAgreePolicy, setIsAgreePolicy] = (0, react_1.useState)(() => !!window.localStorage.getItem(localStore_1.AGREE_POLICY));
     const [popupDetailData, setPopupDetailData] = (0, react_1.useState)();
     const [waterFallData, setWaterFallData] = (0, react_1.useState)();
     const [openHashtag, setOpenHashtag] = (0, react_1.useState)(isOpenHashTag);
@@ -32,6 +35,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const [isFromHashtag, setIsFromHashtag] = (0, react_1.useState)(false);
     const [videoRef, setVideoRef] = (0, react_1.useState)(null);
     const themeTag = (0, react_1.useRef)();
+    const curTime = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         const handleChangeThemeTag = (tag) => {
             themeTag.current = tag;
@@ -71,10 +75,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 _a, _b, _c, _d, _e;
+        var _h, _j, _k, _l, _m;
         query = {
-            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,
+            maxSize: (_h = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _h !== void 0 ? _h : maxSize,
+            defaultSize: (_j = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _j !== void 0 ? _j : 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,
@@ -82,10 +86,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             themeTag: query === null || query === void 0 ? void 0 : query.themeTag
         };
         if (utmVal) {
-            const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
+            const val = (_m = (_l = (_k = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _k === void 0 ? void 0 : _k.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
+            })) === null || _l === void 0 ? void 0 : _l.join('&')) !== null && _m !== void 0 ? _m : '';
             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 }));
@@ -97,7 +101,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 _f, _g;
+        var _o, _p;
         if (rtcList.length <= 0) {
             return;
         }
@@ -107,8 +111,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
             themeTag: themeTag.current
         });
-        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 : []));
+        setRtcList(rtcList.concat((_o = data === null || data === void 0 ? void 0 : data.recList) !== null && _o !== void 0 ? _o : []));
+        setCacheRtcList(cacheRtcList.concat((_p = data === null || data === void 0 ? void 0 : data.recList) !== null && _p !== void 0 ? _p : []));
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
     const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
         if (!enableReportEvent) {
@@ -166,16 +170,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 _h, _j, _k, _l, _m;
+        var _q, _r, _s, _t, _u;
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
+            const val = (_s = (_r = (_q = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _q === void 0 ? void 0 : _q.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
+            })) === null || _r === void 0 ? void 0 : _r.join('&')) !== null && _s !== void 0 ? _s : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            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 : []);
+            setTagList((_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []);
         }
         catch (e) {
             console.log('e', e);
@@ -199,7 +203,38 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
         });
     }, [bffEventReport, isFromHashtag]);
+    const h5EnterLink = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        const queryString = location.search.slice(1);
+        const params = qs_1.default.parse(queryString.replace(/\+/g, '%2B'));
+        for (const key in params) {
+            params[key] = params[key].replace(/%2B/g, '+');
+        }
+        const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
+        const time = new Date();
+        curTime.current = time;
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'h5LinkEnterFeed',
+                eventDescription: 'User enter h5 link',
+                utmSource: getVal('utm_source'),
+                utmMedium: getVal('utm_medium'),
+                utmCampaign: getVal('utm_campaign'),
+                utmId: getVal('utm_id'),
+                utmContent: getVal('utm_content'),
+                enterTime: Math.floor(time / 1000) + '',
+                requestId: null,
+                enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : '',
+                clSource: getVal('cl_source')
+            }
+        });
+    }, [bffEventReport]);
     (0, react_1.useEffect)(() => {
+        h5EnterLink();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!isAgreePolicy)
+            return;
         setLoading(true);
         bffGetTagList();
         getRecommendVideos()
@@ -218,7 +253,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setLoading(false);
             isInit.current = true;
         });
-    }, []);
+    }, [isAgreePolicy]);
     (0, react_1.useEffect)(() => {
         if (!isInit.current)
             return;
@@ -270,13 +305,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setLoading,
             videoRef,
             setVideoRef,
-            bffFbReport
-        } }, render({
+            bffFbReport,
+            isAgreePolicy,
+            setIsAgreePolicy,
+            curTime,
+            h5EnterLink,
+            themeTag
+        } }, (((_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) || isOpenConsent ? (react_1.default.createElement(Consent_1.default, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props))) : (render({
         rtcList,
         mutateLike: bffMutateLike,
         mutateUnlike: bffMutateUnlike,
         submitForm: bffSubmitForm,
         tagList
-    })));
+    }))));
 };
 exports.default = (0, react_1.memo)(SxpDataSourceProvider);

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

@@ -2,4 +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;
 };

package/lib/core/hooks/useEventReport.js

@@ -69,9 +69,21 @@ 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'
+            }
+        });
+    }, [bffEventReport]);
     return {
         jumpToWeb,
-        productView
+        productView,
+        backMainFeed
     };
 }
 exports.useEventReport = useEventReport;

package/lib/core/utils/localStore.d.ts

@@ -1,5 +1,6 @@
 export declare const FAKE_USER_KEY = "SXP_FAKE_USER_ID";
 export declare const FAKE_USER_STATE = "FAKE_USER_STATE";
+export declare const AGREE_POLICY = "AGREE_POLICY";
 export declare const storeAndLoadFeUserId: () => string;
 export declare const removeFeUserId: () => void;
 export declare const getFeUserId: () => boolean;

package/lib/core/utils/localStore.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFeUserId = exports.removeFeUserId = exports.storeAndLoadFeUserId = exports.FAKE_USER_STATE = exports.FAKE_USER_KEY = void 0;
+exports.getFeUserId = exports.removeFeUserId = exports.storeAndLoadFeUserId = exports.AGREE_POLICY = exports.FAKE_USER_STATE = exports.FAKE_USER_KEY = void 0;
 const lodash_1 = require("lodash");
 const tool_1 = require("./tool");
 exports.FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
 exports.FAKE_USER_STATE = 'FAKE_USER_STATE';
+exports.AGREE_POLICY = 'AGREE_POLICY';
 const storeAndLoadFeUserId = () => {
     let fakeUserId = window.localStorage.getItem(exports.FAKE_USER_KEY);
     if ((0, lodash_1.isEmpty)(fakeUserId)) {

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface IConsentProps {
+    width?: number;
+    height?: number;
+    privacy_title?: string;
+    privacy_context?: string;
+    privacy_policy_url?: string;
+    privacy_policy_title?: string;
+    privacy_necessity?: boolean;
+}
+declare const _default: React.NamedExoticComponent<IConsentProps>;
+export default _default;

package/lib/materials/sxp/Consent/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Consent = (props) => {
+    return react_1.default.createElement(Consent, Object.assign({}, props));
+};
+exports.default = (0, react_1.memo)(Consent);

package/lib/materials/sxp/Consent/material.d.ts

@@ -0,0 +1,2 @@
+declare const Consent: import("../../../core/create").MaterialComponet<import(".").IConsentProps>;
+export { Consent };

package/lib/materials/sxp/Consent/material.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Consent = void 0;
+const tslib_1 = require("tslib");
+const settingRender_1 = tslib_1.__importDefault(require("./settingRender"));
+const _1 = tslib_1.__importDefault(require("."));
+const create_1 = require("../../../core/create");
+const Consent = (0, create_1.createMaterial)(_1.default, {
+    displayName: 'Consent',
+    icon: '',
+    category: 'base',
+    type: 'Consent',
+    related: {
+        settingRender: settingRender_1.default
+    },
+    defaulSetting: {
+        props: {},
+        style: {}
+    },
+    w: 100,
+    h: 40,
+    sort: 1
+});
+exports.Consent = Consent;