pb-sxp-ui 1.0.80 → 1.0.82

package/es/core/context/SxpDataSourceProvider.js

@@ -2,9 +2,10 @@ import { __awaiter } from "tslib";
 import React, { createContext, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import qs from 'qs';
 import { storeAndLoadFeSessionId } from '../utils/sessionStore';
-import { storeAndLoadFeUserId } from '../utils/localStore';
+import { storeAndLoadFeUserId, AGREE_POLICY } from '../utils/localStore';
 import { useIconLink } from '../components/SxpPageRender/useIconLink';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../utils/event';
+import Consent from '../components/Consent';
 export const SxpDataSourceContext = createContext({
     rtcList: [],
     tagList: []
@@ -14,13 +15,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] = useState([]);
     const [tagList, setTagList] = useState([]);
     const [loading, setLoading] = useState(false);
     const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
     const swiperRef = useRef(null);
     const isInit = useRef(false);
+    const [isAgreePolicy, setIsAgreePolicy] = useState(() => !!window.localStorage.getItem(AGREE_POLICY));
     const [popupDetailData, setPopupDetailData] = useState();
     const [waterFallData, setWaterFallData] = useState();
     const [openHashtag, setOpenHashtag] = useState(isOpenHashTag);
@@ -29,6 +32,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const [isFromHashtag, setIsFromHashtag] = useState(false);
     const [videoRef, setVideoRef] = useState(null);
     const themeTag = useRef();
+    const curTime = useRef();
     useEffect(() => {
         const handleChangeThemeTag = (tag) => {
             themeTag.current = tag;
@@ -68,10 +72,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             .catch((err) => Promise.reject(err));
     }, [bffDataSource]);
     const getRecommendVideos = useCallback((query) => __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,
@@ -79,10 +83,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 }));
@@ -94,7 +98,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return result === null || result === void 0 ? void 0 : result.data;
     }), [bffFetch, utmVal, maxSize, defaultSize]);
     const loadVideos = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g;
+        var _o, _p;
         if (rtcList.length <= 0) {
             return;
         }
@@ -104,8 +108,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 = useCallback(({ userInfo, eventInfo }) => {
         if (!enableReportEvent) {
@@ -163,16 +167,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return res === null || res === void 0 ? void 0 : res.success;
     }), [bffFetch]);
     const bffGetTagList = useCallback(() => __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);
@@ -196,7 +200,7 @@ 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]);
-    useEffect(() => {
+    const h5EnterLink = useCallback(() => {
         var _a, _b;
         const queryString = location.search.slice(1);
         const params = qs.parse(queryString.replace(/\+/g, '%2B'));
@@ -204,6 +208,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             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',
@@ -213,14 +219,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 utmCampaign: getVal('utm_campaign'),
                 utmId: getVal('utm_id'),
                 utmContent: getVal('utm_content'),
-                enterTime: `${Date.now()}`,
+                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_sourc')
+                clSource: getVal('cl_source')
             }
         });
+    }, [bffEventReport]);
+    useEffect(() => {
+        h5EnterLink();
     }, []);
     useEffect(() => {
+        if (!isAgreePolicy)
+            return;
         setLoading(true);
         bffGetTagList();
         getRecommendVideos()
@@ -239,7 +250,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setLoading(false);
             isInit.current = true;
         });
-    }, []);
+    }, [isAgreePolicy]);
     useEffect(() => {
         if (!isInit.current)
             return;
@@ -291,13 +302,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.createElement(Consent, 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
-    })));
+    }))));
 };
 export default memo(SxpDataSourceProvider);

package/es/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/es/core/hooks/useEventReport.js

@@ -66,8 +66,20 @@ export function useEventReport() {
             }
         });
     }, [bffEventReport, popupDetailData]);
+    const backMainFeed = 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
     };
 }

package/es/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/es/core/utils/localStore.js

@@ -2,6 +2,7 @@ import { isEmpty } from 'lodash';
 import { uuid } from './tool';
 export const FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
 export const FAKE_USER_STATE = 'FAKE_USER_STATE';
+export const AGREE_POLICY = 'AGREE_POLICY';
 export const storeAndLoadFeUserId = () => {
     let fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
     if (isEmpty(fakeUserId)) {

package/es/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/es/materials/sxp/Consent/index.js

@@ -0,0 +1,5 @@
+import React, { memo } from 'react';
+const Consent = (props) => {
+    return React.createElement(Consent, Object.assign({}, props));
+};
+export default memo(Consent);

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

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

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

@@ -0,0 +1,20 @@
+import settingRender from './settingRender';
+import ConsentComponent from '.';
+import { createMaterial } from '../../../core/create';
+const Consent = createMaterial(ConsentComponent, {
+    displayName: 'Consent',
+    icon: '',
+    category: 'base',
+    type: 'Consent',
+    related: {
+        settingRender
+    },
+    defaulSetting: {
+        props: {},
+        style: {}
+    },
+    w: 100,
+    h: 40,
+    sort: 1
+});
+export { Consent };

package/es/materials/sxp/Consent/settingRender.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        name: string[];
+        extra: string;
+        child?: undefined;
+    } | {
+        type: string;
+        label: string;
+        name: string[];
+        extra?: undefined;
+        child?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            addonBefore?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonBefore: string;
+        })[];
+        extra: string;
+        name?: undefined;
+    })[];
+}[];
+export default _default;

package/es/materials/sxp/Consent/settingRender.js

@@ -0,0 +1,39 @@
+export default [
+    {
+        title: '协议详情',
+        child: [
+            {
+                type: 'Switch',
+                label: '必须同意用户协议',
+                name: ['props', 'privacy_necessity'],
+                extra: '当新用户进入页面时，会出现用户协议弹窗，用户需要先同意协议后才能访问内容。'
+            },
+            {
+                type: 'Text',
+                label: '弹窗标题',
+                name: ['props', 'privacy_title']
+            },
+            {
+                type: 'TextArea',
+                label: '用户协议弹窗内容',
+                name: ['props', 'privacy_context']
+            },
+            {
+                type: 'Group',
+                label: '隐私政策',
+                child: [
+                    {
+                        type: 'Text',
+                        name: ['props', 'privacy_policy_title']
+                    },
+                    {
+                        type: 'Text',
+                        name: ['props', 'privacy_policy_url'],
+                        addonBefore: 'https://'
+                    }
+                ],
+                extra: '当用户点击更多信息按钮时，将会跳转至设置的链接查看政策内容'
+            }
+        ]
+    }
+];

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

@@ -12,7 +12,7 @@ export interface IHashTagProps {
     };
     buttonBgStyle: CSSProperties;
     showBanner?: boolean;
-    isWaterfallFlow?: boolean;
+    openFixedSize?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IHashTagProps>;
 export default _default;

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

@@ -23,7 +23,7 @@ export default [
             {
                 type: 'Switch',
                 label: '固定宽高',
-                name: ['props', 'isWaterfallFlow'],
+                name: ['props', 'openFixedSize'],
                 initialValue: true
             }
         ]

package/es/materials/sxp/index.d.ts

@@ -1,3 +1,4 @@
 export * from './popup';
 export * from './template';
 export * from './HashTag/material';
+export * from './Consent/material';

package/es/materials/sxp/index.js

@@ -1,3 +1,4 @@
 export * from './popup';
 export * from './template';
 export * from './HashTag/material';
+export * from './Consent/material';

package/lib/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/lib/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/lib/core/components/Consent/index.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const qs_1 = tslib_1.__importDefault(require("qs"));
+const hooks_1 = require("../../../core/hooks");
+require("./index.less");
+const localStore_1 = require("../../../core/utils/localStore");
+const Consent = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
+    const { setIsAgreePolicy, bffEventReport } = (0, hooks_1.useSxpDataSource)();
+    const channelObj = (0, react_1.useMemo)(() => {
+        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, '+');
+        }
+        return params;
+    }, []);
+    const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
+    (0, react_1.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(localStore_1.AGREE_POLICY, 'yes');
+    };
+    return (react_1.default.createElement("div", { className: 'consent-bg' },
+        react_1.default.createElement("div", { className: 'consent' },
+            react_1.default.createElement("div", { className: 'consent-col' },
+                react_1.default.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
+                react_1.default.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_1.default.createElement("div", { className: 'consent-col' },
+                react_1.default.createElement("button", { className: 'consent-btn', onClick: handleAgree }, "Agree"),
+                react_1.default.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')))));
+};
+exports.default = (0, react_1.memo)(Consent);

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

@@ -12,14 +12,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 = (0, react_1.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_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
-        react_1.default.createElement(SxpDataSourceProvider_1.default, { 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_1.default.createElement(SxpDataSourceProvider_1.default, { 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_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(SxpPageRender_1.default, 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/lib/core/components/SxpPageRender/Tagbar.js

@@ -4,16 +4,30 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../../core/hooks");
 const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
+const useEventReport_1 = require("../../../core/hooks/useEventReport");
 const DEFAULT_TAG = 'FOR U';
 const Tagbar = ({ tagList = [], setActiveIndex }) => {
     const [selectTag, setSelectTag] = (0, react_1.useState)(DEFAULT_TAG);
-    const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData } = (0, hooks_1.useSxpDataSource)();
+    const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport } = (0, hooks_1.useSxpDataSource)();
+    const { backMainFeed } = (0, useEventReport_1.useEventReport)();
     const realTagList = (0, react_1.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/lib/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/lib/core/components/SxpPageRender/WaterFall/List.js

@@ -6,6 +6,7 @@ require("./List.less");
 const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
 const hooks_1 = require("../../../../core/hooks");
+const css_1 = require("@emotion/css");
 const WaterfallFlowItem = (props) => {
     const { rec, index, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = (0, hooks_1.useSxpDataSource)();
@@ -115,8 +116,8 @@ const WaterfallFlowItem = (props) => {
             react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
 };
 function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var { reportTagsView, showBanner } = _a, props = tslib_1.__rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
     const [list, setList] = (0, react_1.useState)();
     const [data, setData] = (0, react_1.useState)();
@@ -171,17 +172,22 @@ 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: 'list' },
         react_1.default.createElement("div", { className: 'list-scroll', ref: containerRef },
-            react_1.default.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_1.default.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_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: '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_1.default.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_1.default.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
                 return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
             })),
             react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
-            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: {
-                    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_1.default.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_1.default.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_1.default.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_1.default.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_1.default.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_1.default.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_1.default.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'))))));
 }
 exports.default = WaterfallList;

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