pb-sxp-ui 1.0.80 → 1.0.82

package/dist/pb-ui.js

@@ -385,6 +385,7 @@
 
     const FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
     const FAKE_USER_STATE = 'FAKE_USER_STATE';
+    const AGREE_POLICY = 'AGREE_POLICY';
     const storeAndLoadFeUserId = () => {
         let fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
         if (lodash.isEmpty(fakeUserId)) {
@@ -429,6 +430,70 @@
         SXP_EVENT_TYPE["CHANGE_THEME_TAG"] = "changeThemeTag";
     })(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-06-13 15:16:53
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-06-13 18:22:53
+     * @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
+     *
+     */
+    const Consent$2 = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
+        const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
+        const channelObj = React.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; };
+        React.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')))));
+    };
+    var Consent$3 = React.memo(Consent$2);
+
     const SxpDataSourceContext = React.createContext({
         rtcList: [],
         tagList: []
@@ -438,13 +503,15 @@
         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] = React.useState([]);
         const [tagList, setTagList] = React.useState([]);
         const [loading, setLoading] = React.useState(false);
         const [curReqInfo, setCurReqInfo] = React.useState({ rtc: '', requestId: '' });
         const swiperRef = React.useRef(null);
         const isInit = React.useRef(false);
+        const [isAgreePolicy, setIsAgreePolicy] = React.useState(() => !!window.localStorage.getItem(AGREE_POLICY));
         // 弹窗数据
         const [popupDetailData, setPopupDetailData] = React.useState();
         const [waterFallData, setWaterFallData] = React.useState();
@@ -454,6 +521,7 @@
         const [isFromHashtag, setIsFromHashtag] = React.useState(false);
         const [videoRef, setVideoRef] = React.useState(null);
         const themeTag = React.useRef();
+        const curTime = React.useRef();
         React.useEffect(() => {
             const handleChangeThemeTag = (tag) => {
                 themeTag.current = tag;
@@ -498,10 +566,10 @@
         }, [bffDataSource]);
         // 获取推荐视频数据
         const getRecommendVideos = React.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,
@@ -509,10 +577,10 @@
                 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 }));
@@ -524,7 +592,7 @@
             return result === null || result === void 0 ? void 0 : result.data;
         }), [bffFetch, utmVal, maxSize, defaultSize]);
         const loadVideos = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _f, _g;
+            var _o, _p;
             if (rtcList.length <= 0) {
                 return;
             }
@@ -534,8 +602,8 @@
                 '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 = React.useCallback(({ userInfo, eventInfo }) => {
             // 关闭 BFF 事件上报
@@ -599,16 +667,16 @@
         }), [bffFetch]);
         // 获取 Tag
         const bffGetTagList = React.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);
@@ -632,7 +700,7 @@
                 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]);
-        React.useEffect(() => {
+        const h5EnterLink = React.useCallback(() => {
             var _a, _b;
             const queryString = location.search.slice(1);
             const params = qs.parse(queryString.replace(/\+/g, '%2B'));
@@ -640,6 +708,8 @@
                 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',
@@ -649,14 +719,19 @@
                     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]);
+        React.useEffect(() => {
+            h5EnterLink();
         }, []);
         React.useEffect(() => {
+            if (!isAgreePolicy)
+                return;
             setLoading(true);
             bffGetTagList();
             getRecommendVideos()
@@ -675,7 +750,7 @@
                 setLoading(false);
                 isInit.current = true;
             });
-        }, []);
+        }, [isAgreePolicy]);
         React.useEffect(() => {
             if (!isInit.current)
                 return;
@@ -727,14 +802,19 @@
                 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$3, 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
-        })));
+        }))));
     };
     var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
 
@@ -1000,7 +1080,7 @@
      *
      */
     var _a$5, _b$5, _c;
-    var settingRender$5 = [
+    var settingRender$6 = [
         {
             type: 'Text',
             label: '组件名称',
@@ -1138,7 +1218,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-12 10:59:06
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-15 09:47:08
+     * @LastEditTime: 2024-06-12 10:53:57
      * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
      *
      */
@@ -1208,9 +1288,21 @@
                 }
             });
         }, [bffEventReport, popupDetailData]);
+        const backMainFeed = React.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
         };
     }
 
@@ -1315,7 +1407,7 @@
         category: 'popup',
         type: 'AppointForm',
         related: {
-            settingRender: settingRender$5,
+            settingRender: settingRender$6,
             bindableProps: [],
             interactionRender: interactionRender$8
         },
@@ -1341,7 +1433,7 @@
     });
 
     var _a$4, _b$4;
-    var settingRender$4 = [
+    var settingRender$5 = [
         {
             title: '商品图片',
             child: [
@@ -3000,7 +3092,7 @@
           dragEl
         } = scrollbar;
         if (!isTouched) return;
-        if (e.preventDefault) e.preventDefault();else e.returnValue = false;
+        if (e.preventDefault && e.cancelable) e.preventDefault();else e.returnValue = false;
         setDragPosition(e);
         wrapperEl.style.transitionDuration = '0ms';
         el.style.transitionDuration = '0ms';
@@ -3227,7 +3319,7 @@
         if (!swiper || swiper.destroyed || !swiper.wrapperEl) return;
         if (e.target !== swiper.wrapperEl) return;
         swiper.wrapperEl.removeEventListener('transitionend', onTransitionEnd);
-        if (pausedByPointerEnter) {
+        if (pausedByPointerEnter || e.detail && e.detail.bySwiperTouchMove) {
           return;
         }
         resume();
@@ -3398,8 +3490,10 @@
         }
       };
       const detachMouseEvents = () => {
-        swiper.el.removeEventListener('pointerenter', onPointerEnter);
-        swiper.el.removeEventListener('pointerleave', onPointerLeave);
+        if (swiper.el && typeof swiper.el !== 'string') {
+          swiper.el.removeEventListener('pointerenter', onPointerEnter);
+          swiper.el.removeEventListener('pointerleave', onPointerLeave);
+        }
       };
       const attachDocumentEvents = () => {
         const document = getDocument();
@@ -4321,8 +4415,9 @@
           allSlidesSize += slideSizeValue + (spaceBetween || 0);
         });
         allSlidesSize -= spaceBetween;
-        if (allSlidesSize < swiperSize) {
-          const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
+        const offsetSize = (params.slidesOffsetBefore || 0) + (params.slidesOffsetAfter || 0);
+        if (allSlidesSize + offsetSize < swiperSize) {
+          const allSlidesOffset = (swiperSize - allSlidesSize - offsetSize) / 2;
           snapGrid.forEach((snap, snapIndex) => {
             snapGrid[snapIndex] = snap - allSlidesOffset;
           });
@@ -4426,6 +4521,13 @@
       }
     }
 
+    const toggleSlideClasses$1 = (slideEl, condition, className) => {
+      if (condition && !slideEl.classList.contains(className)) {
+        slideEl.classList.add(className);
+      } else if (!condition && slideEl.classList.contains(className)) {
+        slideEl.classList.remove(className);
+      }
+    };
     function updateSlidesProgress(translate) {
       if (translate === void 0) {
         translate = this && this.translate || 0;
@@ -4441,11 +4543,6 @@
       if (typeof slides[0].swiperSlideOffset === 'undefined') swiper.updateSlidesOffset();
       let offsetCenter = -translate;
       if (rtl) offsetCenter = translate;
-
-      // Visible Slides
-      slides.forEach(slideEl => {
-        slideEl.classList.remove(params.slideVisibleClass, params.slideFullyVisibleClass);
-      });
       swiper.visibleSlidesIndexes = [];
       swiper.visibleSlides = [];
       let spaceBetween = params.spaceBetween;
@@ -4469,11 +4566,9 @@
         if (isVisible) {
           swiper.visibleSlides.push(slide);
           swiper.visibleSlidesIndexes.push(i);
-          slides[i].classList.add(params.slideVisibleClass);
-        }
-        if (isFullyVisible) {
-          slides[i].classList.add(params.slideFullyVisibleClass);
         }
+        toggleSlideClasses$1(slide, isVisible, params.slideVisibleClass);
+        toggleSlideClasses$1(slide, isFullyVisible, params.slideFullyVisibleClass);
         slide.progress = rtl ? -slideProgress : slideProgress;
         slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress;
       }
@@ -4542,6 +4637,13 @@
       swiper.emit('progress', progress);
     }
 
+    const toggleSlideClasses = (slideEl, condition, className) => {
+      if (condition && !slideEl.classList.contains(className)) {
+        slideEl.classList.add(className);
+      } else if (!condition && slideEl.classList.contains(className)) {
+        slideEl.classList.remove(className);
+      }
+    };
     function updateSlidesClasses() {
       const swiper = this;
       const {
@@ -4555,9 +4657,6 @@
       const getFilteredSlide = selector => {
         return elementChildren(slidesEl, `.${params.slideClass}${selector}, swiper-slide${selector}`)[0];
       };
-      slides.forEach(slideEl => {
-        slideEl.classList.remove(params.slideActiveClass, params.slideNextClass, params.slidePrevClass);
-      });
       let activeSlide;
       let prevSlide;
       let nextSlide;
@@ -4580,35 +4679,25 @@
         }
       }
       if (activeSlide) {
-        // Active classes
-        activeSlide.classList.add(params.slideActiveClass);
-        if (gridEnabled) {
-          if (nextSlide) {
-            nextSlide.classList.add(params.slideNextClass);
-          }
-          if (prevSlide) {
-            prevSlide.classList.add(params.slidePrevClass);
-          }
-        } else {
+        if (!gridEnabled) {
           // Next Slide
           nextSlide = elementNextAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
           if (params.loop && !nextSlide) {
             nextSlide = slides[0];
           }
-          if (nextSlide) {
-            nextSlide.classList.add(params.slideNextClass);
-          }
 
           // Prev Slide
           prevSlide = elementPrevAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
           if (params.loop && !prevSlide === 0) {
             prevSlide = slides[slides.length - 1];
           }
-          if (prevSlide) {
-            prevSlide.classList.add(params.slidePrevClass);
-          }
         }
       }
+      slides.forEach(slideEl => {
+        toggleSlideClasses(slideEl, slideEl === activeSlide, params.slideActiveClass);
+        toggleSlideClasses(slideEl, slideEl === nextSlide, params.slideNextClass);
+        toggleSlideClasses(slideEl, slideEl === prevSlide, params.slidePrevClass);
+      });
       swiper.emitSlidesClasses();
     }
 
@@ -4986,6 +5075,7 @@
               swiper.wrapperEl.removeEventListener('transitionend', swiper.onTranslateToWrapperTransitionEnd);
               swiper.onTranslateToWrapperTransitionEnd = null;
               delete swiper.onTranslateToWrapperTransitionEnd;
+              swiper.animating = false;
               if (runCallbacks) {
                 swiper.emit('transitionEnd');
               }
@@ -5093,9 +5183,6 @@
       if (index === void 0) {
         index = 0;
       }
-      if (speed === void 0) {
-        speed = this.params.speed;
-      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -5115,9 +5202,12 @@
         wrapperEl,
         enabled
       } = swiper;
-      if (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial || swiper.destroyed) {
+      if (!enabled && !internal && !initial || swiper.destroyed || swiper.animating && params.preventInteractionOnTransition) {
         return false;
       }
+      if (typeof speed === 'undefined') {
+        speed = swiper.params.speed;
+      }
       const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);
       let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup);
       if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
@@ -5244,9 +5334,6 @@
       if (index === void 0) {
         index = 0;
       }
-      if (speed === void 0) {
-        speed = this.params.speed;
-      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -5256,6 +5343,9 @@
       }
       const swiper = this;
       if (swiper.destroyed) return;
+      if (typeof speed === 'undefined') {
+        speed = swiper.params.speed;
+      }
       const gridEnabled = swiper.grid && swiper.params.grid && swiper.params.grid.rows > 1;
       let newIndex = index;
       if (swiper.params.loop) {
@@ -5287,6 +5377,9 @@
           if (centeredSlides) {
             needLoopFix = needLoopFix || targetSlideIndex < Math.ceil(slidesPerView / 2);
           }
+          if (internal && centeredSlides && swiper.params.slidesPerView !== 'auto' && !gridEnabled) {
+            needLoopFix = false;
+          }
           if (needLoopFix) {
             const direction = centeredSlides ? targetSlideIndex < swiper.activeIndex ? 'prev' : 'next' : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView ? 'next' : 'prev';
             swiper.loopFix({
@@ -5312,9 +5405,6 @@
 
     /* eslint no-unused-vars: "off" */
     function slideNext(speed, runCallbacks, internal) {
-      if (speed === void 0) {
-        speed = this.params.speed;
-      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -5325,6 +5415,9 @@
         animating
       } = swiper;
       if (!enabled || swiper.destroyed) return swiper;
+      if (typeof speed === 'undefined') {
+        speed = swiper.params.speed;
+      }
       let perGroup = params.slidesPerGroup;
       if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
         perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);
@@ -5353,9 +5446,6 @@
 
     /* eslint no-unused-vars: "off" */
     function slidePrev(speed, runCallbacks, internal) {
-      if (speed === void 0) {
-        speed = this.params.speed;
-      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -5369,6 +5459,9 @@
         animating
       } = swiper;
       if (!enabled || swiper.destroyed) return swiper;
+      if (typeof speed === 'undefined') {
+        speed = swiper.params.speed;
+      }
       const isVirtual = swiper.virtual && params.virtual.enabled;
       if (params.loop) {
         if (animating && !isVirtual && params.loopPreventsSliding) return false;
@@ -5421,22 +5514,19 @@
 
     /* eslint no-unused-vars: "off" */
     function slideReset(speed, runCallbacks, internal) {
-      if (speed === void 0) {
-        speed = this.params.speed;
-      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
       const swiper = this;
       if (swiper.destroyed) return;
+      if (typeof speed === 'undefined') {
+        speed = swiper.params.speed;
+      }
       return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
     }
 
     /* eslint no-unused-vars: "off" */
     function slideToClosest(speed, runCallbacks, internal, threshold) {
-      if (speed === void 0) {
-        speed = this.params.speed;
-      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -5445,6 +5535,9 @@
       }
       const swiper = this;
       if (swiper.destroyed) return;
+      if (typeof speed === 'undefined') {
+        speed = swiper.params.speed;
+      }
       let index = swiper.activeIndex;
       const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
       const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);
@@ -6079,7 +6172,7 @@
           data.startMoving = true;
         }
       }
-      if (data.isScrolling) {
+      if (data.isScrolling || e.type === 'touchmove' && data.preventTouchMoveFromPointerMove) {
         data.isTouched = false;
         return;
       }
@@ -6121,7 +6214,10 @@
         if (swiper.animating) {
           const evt = new window.CustomEvent('transitionend', {
             bubbles: true,
-            cancelable: true
+            cancelable: true,
+            detail: {
+              bySwiperTouchMove: true
+            }
           });
           swiper.wrapperEl.dispatchEvent(evt);
         }
@@ -6515,6 +6611,7 @@
       const capture = !!params.nested;
       const domMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';
       const swiperMethod = method;
+      if (!el || typeof el === 'string') return;
 
       // Touch Events
       document[domMethod]('touchstart', swiper.onDocumentTouchStart, {
@@ -6623,6 +6720,8 @@
       const breakpointParams = breakpointOnlyParams || swiper.originalParams;
       const wasMultiRow = isGridEnabled(swiper, params);
       const isMultiRow = isGridEnabled(swiper, breakpointParams);
+      const wasGrabCursor = swiper.params.grabCursor;
+      const isGrabCursor = breakpointParams.grabCursor;
       const wasEnabled = params.enabled;
       if (wasMultiRow && !isMultiRow) {
         el.classList.remove(`${params.containerModifierClass}grid`, `${params.containerModifierClass}grid-column`);
@@ -6634,6 +6733,11 @@
         }
         swiper.emitContainerClasses();
       }
+      if (wasGrabCursor && !isGrabCursor) {
+        swiper.unsetGrabCursor();
+      } else if (!wasGrabCursor && isGrabCursor) {
+        swiper.setGrabCursor();
+      }
 
       // Toggle navigation, pagination, scrollbar
       ['navigation', 'pagination', 'scrollbar'].forEach(prop => {
@@ -6784,6 +6888,7 @@
         el,
         classNames
       } = swiper;
+      if (!el || typeof el === 'string') return;
       el.classList.remove(...classNames);
       swiper.emitContainerClasses();
     }
@@ -7548,8 +7653,12 @@
         // Cleanup styles
         if (cleanStyles) {
           swiper.removeClasses();
-          el.removeAttribute('style');
-          wrapperEl.removeAttribute('style');
+          if (el && typeof el !== 'string') {
+            el.removeAttribute('style');
+          }
+          if (wrapperEl) {
+            wrapperEl.removeAttribute('style');
+          }
           if (slides && slides.length) {
             slides.forEach(slideEl => {
               slideEl.classList.remove(params.slideVisibleClass, params.slideFullyVisibleClass, params.slideActiveClass, params.slideNextClass, params.slidePrevClass);
@@ -7565,7 +7674,9 @@
           swiper.off(eventName);
         });
         if (deleteInstance !== false) {
-          swiper.el.swiper = null;
+          if (swiper.el && typeof swiper.el !== 'string') {
+            swiper.el.swiper = null;
+          }
           deleteProps(swiper);
         }
         swiper.destroyed = true;
@@ -7959,7 +8070,7 @@
     };
 
     /**
-     * Swiper React 11.0.7
+     * Swiper React 11.1.4
      * Most modern mobile touch slider and framework with hardware accelerated transitions
      * https://swiperjs.com
      *
@@ -7967,7 +8078,7 @@
      *
      * Released under the MIT License
      *
-     * Released on: February 27, 2024
+     * Released on: May 30, 2024
      */
 
 
@@ -8655,7 +8766,7 @@
         category: 'popup',
         type: 'CommodityDetail',
         related: {
-            settingRender: settingRender$4
+            settingRender: settingRender$5
         },
         defaulSetting: {
             props: {
@@ -8721,7 +8832,7 @@
      *
      */
     var _a$3, _b$3;
-    var settingRender$3 = [
+    var settingRender$4 = [
         {
             title: '',
             child: [
@@ -8848,7 +8959,7 @@
         category: 'popup',
         type: 'Prompt',
         related: {
-            settingRender: settingRender$3,
+            settingRender: settingRender$4,
             bindableProps: [],
             interactionRender: interactionRender$7
         },
@@ -8874,7 +8985,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\settingRender.tsx
      *
      */
-    var settingRender$2 = [
+    var settingRender$3 = [
         {
             title: '商品图片',
             child: [
@@ -9197,7 +9308,7 @@ Made in Italy` })));
         category: 'popup',
         type: 'CommodityDetailDiroNew',
         related: {
-            settingRender: settingRender$2
+            settingRender: settingRender$3
         },
         defaulSetting: {
             props: {
@@ -9258,7 +9369,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\settingRender.tsx
      *
      */
-    var settingRender$1 = [
+    var settingRender$2 = [
         {
             title: '主题样式',
             child: [
@@ -9610,7 +9721,7 @@ Made in Italy` })));
         related: {
             interactionRender: interactionRender$6,
             bindableProps: [],
-            settingRender: settingRender$1
+            settingRender: settingRender$2
         },
         defaulSetting: {
             props: {
@@ -9689,7 +9800,7 @@ Made in Italy` })));
         type: 'Appoint',
         related: {
             interactionRender: interactionRender$5,
-            settingRender: settingRender$1 === null || settingRender$1 === void 0 ? void 0 : settingRender$1.filter((i) => i.type !== 'commodityTitle'),
+            settingRender: settingRender$2 === null || settingRender$2 === void 0 ? void 0 : settingRender$2.filter((i) => i.type !== 'commodityTitle'),
             bindableProps: []
         },
         defaulSetting: {
@@ -9766,7 +9877,7 @@ Made in Italy` })));
         category: 'template',
         type: 'Link',
         related: {
-            settingRender: settingRender$1 === null || settingRender$1 === void 0 ? void 0 : settingRender$1.filter((i) => i.type !== 'commodityTitle'),
+            settingRender: settingRender$2 === null || settingRender$2 === void 0 ? void 0 : settingRender$2.filter((i) => i.type !== 'commodityTitle'),
             bindableProps: []
         },
         defaulSetting: {
@@ -9858,7 +9969,7 @@ Made in Italy` })));
         type: 'CommodityDiro',
         related: {
             interactionRender: interactionRender$4,
-            settingRender: settingRender$1,
+            settingRender: settingRender$2,
             bindableProps: []
         },
         defaulSetting: {
@@ -9957,7 +10068,7 @@ Made in Italy` })));
         related: {
             interactionRender: interactionRender$3,
             bindableProps: [],
-            settingRender: settingRender$1
+            settingRender: settingRender$2
         },
         defaulSetting: {
             props: {
@@ -10102,7 +10213,7 @@ Made in Italy` })));
         related: {
             interactionRender: interactionRender$2,
             bindableProps: [],
-            settingRender: settingRender$1
+            settingRender: settingRender$2
         },
         defaulSetting: {
             props: {
@@ -10216,7 +10327,7 @@ Made in Italy` })));
         type: 'MultiCommodity',
         related: {
             interactionRender: interactionRender$1,
-            settingRender: settingRender$1,
+            settingRender: settingRender$2,
             bindableProps: []
         },
         defaulSetting: {
@@ -10332,7 +10443,7 @@ Made in Italy` })));
         related: {
             interactionRender,
             bindableProps: [],
-            settingRender: settingRender$1
+            settingRender: settingRender$2
         },
         defaulSetting: {
             props: {
@@ -10378,11 +10489,11 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-04-07 14:07:12
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-07 15:51:49
+     * @LastEditTime: 2024-06-11 11:04:55
      * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\settingRender.tsx
      *
      */
-    var settingRender = [
+    var settingRender$1 = [
         {
             title: 'Banner',
             child: [
@@ -10405,7 +10516,7 @@ Made in Italy` })));
                 {
                     type: 'Switch',
                     label: '固定宽高',
-                    name: ['props', 'isWaterfallFlow'],
+                    name: ['props', 'openFixedSize'],
                     initialValue: true
                 }
             ]
@@ -12015,8 +12126,8 @@ Made in Italy` })));
                 React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
     };
     function WaterfallList$1(_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 = React.useRef(null);
@@ -12220,25 +12331,30 @@ Made in Italy` })));
         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$1, { className: css.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$1, 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'))))));
     }
 
     var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
@@ -12367,8 +12483,8 @@ Made in Italy` })));
                 React.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 = __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] = React.useState();
         const [data, setData] = React.useState();
@@ -12439,31 +12555,37 @@ Made in Italy` })));
         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$1, { className: css.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'))))));
     }
 
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-10 10:58:24
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-07 15:57:29
+     * @LastEditTime: 2024-06-12 14:18:56
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
      *
      */
     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();
         React.useRef(null);
         const modalEleRef = React.useRef(null);
         const [viewTime, setViewTime] = React.useState();
@@ -12484,6 +12606,9 @@ Made in Italy` })));
             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);
@@ -12551,7 +12676,7 @@ Made in Italy` })));
                 display: openHashtag ? 'block' : 'none'
             } },
             React.createElement(Navbar$1, { icon: img$1, 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(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))) : (React.createElement(WaterfallList$1, 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(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))) : (React.createElement(WaterfallList$1, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
     };
     var WaterFall$1 = React.memo(WaterFall);
 
@@ -12582,7 +12707,7 @@ Made in Italy` })));
         category: 'base',
         type: 'HashTag',
         related: {
-            settingRender,
+            settingRender: settingRender$1,
             bindableProps: []
         },
         defaulSetting: {
@@ -12639,6 +12764,84 @@ Made in Italy` })));
         sort: 2
     });
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-06-13 10:08:32
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-06-13 17:42:50
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\settingRender.tsx
+     *
+     */
+    var settingRender = [
+        {
+            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: '当用户点击更多信息按钮时，将会跳转至设置的链接查看政策内容'
+                }
+            ]
+        }
+    ];
+
+    const Consent$1 = (props) => {
+        return React.createElement(Consent$1, Object.assign({}, props));
+    };
+    var ConsentComponent = React.memo(Consent$1);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-07-28 18:29:57
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-06-13 17:32:17
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\material.tsx
+     *
+     */
+    const Consent = createMaterial(ConsentComponent, {
+        displayName: 'Consent',
+        icon: '',
+        category: 'base',
+        type: 'Consent',
+        related: {
+            settingRender
+        },
+        defaulSetting: {
+            props: {},
+            style: {}
+        },
+        w: 100,
+        h: 40,
+        sort: 1
+    });
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-25 14:56:49
@@ -12657,6 +12860,7 @@ Made in Italy` })));
         CommodityDetailDiroNew: CommodityDetailDiroNew,
         CommodityDiro: CommodityDiro,
         CommodityDiroNew: CommodityDiroNew,
+        Consent: Consent,
         HashTag: HashTag,
         Link: Link,
         MultiCommodity: MultiCommodity,
@@ -13329,16 +13533,37 @@ Made in Italy` })));
             React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
     };
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-04-29 16:32:21
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-06-12 11:01:48
+     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Tagbar.tsx
+     *
+     */
     const DEFAULT_TAG = 'FOR U';
     const Tagbar = ({ tagList = [], setActiveIndex }) => {
         const [selectTag, setSelectTag] = React.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 = React.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;
@@ -13370,7 +13595,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-07 11:10:42
+     * @LastEditTime: 2024-06-13 18:09:16
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -13381,11 +13606,11 @@ Made in Italy` })));
         const viewImageStartTime = React.useRef(0);
         const [isInit, setIsInit] = React.useState(false);
         const [isMuted, setIsMuted] = React.useState(true);
-        const curTime = React.useRef();
         const viewTime = React.useRef();
         const [isLoadMore, setIsLoadMore] = React.useState(false);
         const [isShowMore, setIsShowMore] = React.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] = React.useState(null);
         const playerRef = React.useRef();
         const { productView } = useEventReport();
@@ -13396,17 +13621,17 @@ Made in Italy` })));
             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 = React.useRef();
         React.useEffect(() => {
             var _a, _b, _c, _d;
@@ -13502,13 +13727,33 @@ Made in Italy` })));
                     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
+        ]);
+        React.useEffect(() => {
+            const initTime = () => {
+                backMainFeed('external');
+            };
+            window.addEventListener('pageshow', initTime);
+            return () => {
+                window.removeEventListener('pageshow', initTime);
+            };
+        }, []);
         const tagHeight = React.useMemo(() => {
             let h = 0;
             if (tagList.length > 0) {
@@ -14250,7 +14495,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-17 18:41:05
+     * @LastEditTime: 2024-06-13 14:54:12
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
      *
      */
@@ -14267,14 +14512,14 @@ Made in Italy` })));
         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 = React.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$1, { 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$1, { 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 })),
@@ -14293,8 +14538,9 @@ Made in Italy` })));
      */
     const EditorDataContext = React.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] = React.useState(false);
+        const [openConsent, setOpenConsent] = React.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,
@@ -14302,11 +14548,20 @@ Made in Italy` })));
                     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() {