pb-sxp-ui 1.0.80 → 1.0.81

package/es/core/Pagebuilder/type.d.ts

@@ -19,6 +19,13 @@ export interface PageData {
         placeholder_image: string;
         hash_tag_size: number;
         loading_image: string;
+        industry?: string;
+        privacy_context?: string;
+        privacy_necessity?: boolean;
+        privacy_policy_title?: string;
+        privacy_policy_url?: string;
+        privacy_title?: string;
+        template?: any | null;
     };
 }
 export interface DataSource {

package/es/core/components/Consent/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+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/es/core/components/Consent/index.js

@@ -0,0 +1,60 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import qs from 'qs';
+import { useSxpDataSource } from '../../../core/hooks';
+import './index.less';
+import { AGREE_POLICY } from '../../../core/utils/localStore';
+const Consent = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
+    const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
+    const channelObj = useMemo(() => {
+        const queryString = location.search.slice(1);
+        const params = qs.parse(queryString.replace(/\+/g, '%2B'));
+        for (const key in params) {
+            params[key] = params[key].replace(/%2B/g, '+');
+        }
+        return params;
+    }, []);
+    const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
+    useEffect(() => {
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'privacyEnter',
+                eventDescription: 'User enter privacy page',
+                utmSource: getUtmValue('utm_source'),
+                utmMedium: getUtmValue('utm_medium'),
+                utmCampaign: getUtmValue('utm_campaign'),
+                utmId: getUtmValue('utm_id'),
+                utmContent: getUtmValue('utm_content'),
+                clSource: getUtmValue('cl_source'),
+                enterTime: `${Date.now()}`,
+                enterUrl: window.location.href,
+                rtc: null,
+                requestId: null,
+                sessionID: null
+            }
+        });
+    }, []);
+    const handleAgree = () => {
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'userConsent',
+                eventDescription: '用户授权【操作结果】',
+                consentResult: '0',
+                consentTags: '[]',
+                rtc: null,
+                requestId: null,
+                sessionID: null
+            }
+        });
+        setIsAgreePolicy === null || setIsAgreePolicy === void 0 ? void 0 : setIsAgreePolicy(true);
+        window.localStorage.setItem(AGREE_POLICY, 'yes');
+    };
+    return (React.createElement("div", { className: 'consent-bg' },
+        React.createElement("div", { className: 'consent' },
+            React.createElement("div", { className: 'consent-col' },
+                React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
+                React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
+            React.createElement("div", { className: 'consent-col' },
+                React.createElement("button", { className: 'consent-btn', onClick: handleAgree }, "Agree"),
+                React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
+};
+export default memo(Consent);

package/es/core/components/SxpPageCore/index.js

@@ -9,14 +9,14 @@ Object.values(_materials_).forEach((v) => {
     RESOLVER[v.extend.type] = v;
 });
 const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl, enabledMetaConversionApi }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const utmVal = useMemo(() => {
         var _a;
         const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
         return searchParams;
     }, []);
     return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
-        React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, isShowTag: (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.sxpPageConf) === null || _h === void 0 ? void 0 : _h.globalConfig) === null || _j === void 0 ? void 0 : _j.isShowTag, render: ({ rtcList, tagList }) => {
+        React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, isShowTag: (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.sxpPageConf) === null || _h === void 0 ? void 0 : _h.globalConfig) === null || _j === void 0 ? void 0 : _j.isShowTag, globalConfig: (_l = (_k = data === null || data === void 0 ? void 0 : data.data) === null || _k === void 0 ? void 0 : _k.sxpPageConf) === null || _l === void 0 ? void 0 : _l.globalConfig, render: ({ rtcList, tagList }) => {
                 var _a;
                 return (React.createElement(React.Fragment, null,
                     React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),

package/es/core/components/SxpPageRender/Tagbar.js

@@ -1,16 +1,30 @@
 import React, { memo, useMemo, useState } from 'react';
 import { useSxpDataSource } from '../../../core/hooks';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
+import { useEventReport } from '../../../core/hooks/useEventReport';
 const DEFAULT_TAG = 'FOR U';
 const Tagbar = ({ tagList = [], setActiveIndex }) => {
     const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
-    const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData } = useSxpDataSource();
+    const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport } = useSxpDataSource();
+    const { backMainFeed } = useEventReport();
     const realTagList = useMemo(() => {
         return [DEFAULT_TAG, ...tagList];
     }, [tagList]);
     const handleSelectTag = (tag) => () => {
         if (tag === selectTag)
             return;
+        if (tag !== 'FOR U') {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'clickThemeTagsViewContents',
+                    eventDescription: 'click Theme Tags View Contents',
+                    themeTags: `[${tag}]`
+                }
+            });
+        }
+        else {
+            backMainFeed('theme', selectTag);
+        }
         let themeTag;
         if (tag !== DEFAULT_TAG) {
             themeTag = tag;

package/es/core/components/SxpPageRender/WaterFall/List.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import './List.less';
 import { IHashTagProps } from '../../../../materials/sxp/HashTag';
-export default function WaterfallList({ reportTagsView, ...props }: any & IHashTagProps): React.JSX.Element;
+export default function WaterfallList({ reportTagsView, showBanner, ...props }: any & IHashTagProps): React.JSX.Element;

package/es/core/components/SxpPageRender/WaterFall/List.js

@@ -4,6 +4,7 @@ import './List.less';
 import FormatImage from '../FormatImage';
 import previewData from './preview.json';
 import { useSxpDataSource } from '../../../../core/hooks';
+import { css } from '@emotion/css';
 const WaterfallFlowItem = (props) => {
     const { rec, index, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
@@ -113,8 +114,8 @@ const WaterfallFlowItem = (props) => {
             React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
 };
 export default function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
     const [list, setList] = useState();
     const [data, setData] = useState();
@@ -169,16 +170,21 @@ export default function WaterfallList(_a) {
     return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
         React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
         React.createElement("div", { className: 'list-scroll', ref: containerRef },
-            React.createElement("div", { className: 'list-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.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }) }, ((_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.createElement(FormatImage, { className: 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.createElement("div", { className: 'list-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.createElement("div", { hidden: !((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_g = props === null || props === void 0 ? void 0 : props.textStyles) === null || _g === void 0 ? void 0 : _g.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }) }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'),
             React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
                 return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
             })),
             React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
-            React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
-                    height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.height) || '100px' : 0
+            React.createElement("div", { hidden: !((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.link), style: {
+                    height: ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.link) ? ((_l = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _l === void 0 ? void 0 : _l.height) || ((_m = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _m === void 0 ? void 0 : _m.height) || '100px' : 0
                 } })),
-        React.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
-        React.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-            React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
+        React.createElement("div", { className: 'list-bottom', hidden: !((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        React.createElement("div", { hidden: !((_p = data === null || data === void 0 ? void 0 : data.tag) === null || _p === void 0 ? void 0 : _p.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection'))))));
 }

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import './WaterfallList.less';
 import { IHashTagProps } from '../../../../materials/sxp/HashTag';
-export default function WaterfallList({ reportTagsView, ...props }: any & IHashTagProps): React.JSX.Element;
+export default function WaterfallList({ reportTagsView, showBanner, ...props }: any & IHashTagProps): React.JSX.Element;

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

@@ -4,6 +4,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
 import './WaterfallList.less';
 import previewData from './preview.json';
 import FormatImage from '../FormatImage';
+import { css } from '@emotion/css';
 const WaterfallFlowItem = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
@@ -140,8 +141,8 @@ const WaterfallFlowItem = (props) => {
             React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
 };
 export default 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 = __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 = __rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
     const scrollParent = useRef(null);
     const [scrollTop, setScrollTop] = useState(0);
@@ -312,23 +313,28 @@ export default function WaterfallList(_a) {
     return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
         React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'waterFallList', ref: waterfallFlowDom },
         React.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent },
-            React.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.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.createElement(FormatImage, { className: 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.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.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.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
                 list.map((item, ind) => {
                     var _a;
                     return (React.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.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
+                React.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.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.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.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.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.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.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'))))));
 }

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

@@ -7,9 +7,11 @@ import WaterfallList from './WaterfallList';
 import left from './left.png';
 import List from './List';
 import { useSxpDataSource } from '../../../../core/hooks';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
 const WaterFall = (props) => {
     var _a;
-    const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport } = useSxpDataSource();
+    const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag } = useSxpDataSource();
+    const { backMainFeed } = useEventReport();
     const ref = useRef(null);
     const modalEleRef = useRef(null);
     const [viewTime, setViewTime] = useState();
@@ -30,6 +32,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);
@@ -97,6 +102,6 @@ const WaterFall = (props) => {
             display: openHashtag ? 'block' : 'none'
         } },
         React.createElement(Navbar, { icon: left, 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) === true || (props === null || props === void 0 ? void 0 : props.isWaterfallFlow) === undefined ? (React.createElement(List, Object.assign({ reportTagsView: reportTagsView }, props))) : (React.createElement(WaterfallList, 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.createElement(List, Object.assign({ reportTagsView: reportTagsView }, props))) : (React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
 };
 export default memo(WaterFall);

package/es/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/es/core/components/SxpPageRender/index.js

@@ -28,11 +28,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const viewImageStartTime = useRef(0);
     const [isInit, setIsInit] = useState(false);
     const [isMuted, setIsMuted] = useState(true);
-    const curTime = useRef();
     const viewTime = useRef();
     const [isLoadMore, setIsLoadMore] = useState(false);
     const [isShowMore, setIsShowMore] = useState(false);
-    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport } = useSxpDataSource();
+    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink } = useSxpDataSource();
+    const { backMainFeed } = useEventReport();
     const [videoRef, setVideoRef] = useState(null);
     const playerRef = useRef();
     const { productView } = useEventReport();
@@ -43,17 +43,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         if (data.length <= 0) {
             return;
         }
-        initTime();
+        refreshFeSessionId();
+        const now = new Date();
+        viewTime.current = now;
+        if (isInit) {
+            h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
+        }
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView'
         });
         setIsInit(true);
-    }, [data.length, bffFbReport]);
-    const initTime = () => {
-        curTime.current = new Date();
-        viewTime.current = new Date();
-        refreshFeSessionId();
-    };
+    }, [data.length, bffFbReport, h5EnterLink, isInit]);
     const firstRef = useRef();
     useEffect(() => {
         var _a, _b, _c, _d;
@@ -146,13 +146,33 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 handleH5EnterLink();
                 handleViewImageStartEvent(activeIndex);
                 SXP_EVENT_BUS.emit(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
+    ]);
+    useEffect(() => {
+        const initTime = () => {
+            backMainFeed('external');
+        };
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
     const tagHeight = useMemo(() => {
         let h = 0;
         if (tagList.length > 0) {

package/es/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/es/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/es/core/context/EditorDataProvider.js

@@ -1,8 +1,9 @@
 import React, { createContext, useContext, useState } from 'react';
 const EditorDataContext = 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] = useState(false);
+    const [openConsent, setOpenConsent] = useState(false);
     return (React.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,
@@ -10,11 +11,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));
 };
 export function useEditorDataProvider() {

package/es/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;