pb-sxp-ui 1.0.4 → 1.0.6

package/dist/pb-ui.js

@@ -716,6 +716,11 @@
         pathArr: [0],
         positionY: 0
     };
+    const popupInit = {
+        id: '',
+        duration: 0,
+        name: 'none'
+    };
     const EditorContext = React.createContext({
         resolver: {},
         currentNode: null,
@@ -735,12 +740,8 @@
         prePiontData: [],
         undoStack: [item],
         redoStack: [],
-        popup: '',
-        setPopup: () => { },
-        popupAni: {
-            name: 'none',
-            duration: 0
-        }
+        popup: popupInit,
+        setPopup: () => { }
     });
     const EditorCore = React.forwardRef(({ children, resolver, isSsr, schema, enableDataSource = true, utmVal }, ref) => {
         const [currentNode, setCurrentNode] = React.useState(null);
@@ -763,25 +764,10 @@
          */
         const [undoStack, setUndoStack] = React.useState([[item]]);
         const [redoStack, setRedoStack] = React.useState([]);
-        const [popup, setPopup] = React.useState('');
-        const [popupAni, setPopupAni] = React.useState({
-            name: 'none',
-            duration: 0
-        });
+        const [popup, setPopup] = React.useState(popupInit);
         typeof window !== 'undefined' &&
             (window.sxpPopup = (type, aniType) => {
-                if (aniType && (aniType === null || aniType === void 0 ? void 0 : aniType.name) !== 'none') {
-                    setPopupAni(Object.assign(Object.assign({}, popupAni), aniType));
-                }
-                else {
-                    setPopupAni({
-                        name: 'none',
-                        duration: 0
-                    });
-                }
-                setTimeout(() => {
-                    setPopup(type);
-                });
+                setPopup(Object.assign(Object.assign(Object.assign({}, popupInit), { id: type }), aniType));
             });
         typeof window !== 'undefined' &&
             (window.getJointUtmLink = (url) => {
@@ -857,8 +843,7 @@
                 setUndoStack,
                 getCurPageConf,
                 popup,
-                setPopup,
-                popupAni
+                setPopup
             } },
             React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
     });
@@ -997,7 +982,6 @@
 
     const AppointForm$1 = (_a) => {
         var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, onClick } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "onClick"]);
-        useEditor();
         const { submitForm } = useSxpDataSource();
         const formRef = React.useRef();
         const [loading, setLoading] = React.useState(false);
@@ -8094,7 +8078,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-12 10:59:06
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-18 17:38:46
+     * @LastEditTime: 2024-04-11 22:30:45
      * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
      *
      */
@@ -8118,23 +8102,25 @@
             else if (data === null || data === void 0 ? void 0 : data.product) {
                 fromKName = 'productPage';
             }
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'jumpToWeb',
-                    eventDescription: 'User jumped to website',
-                    productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
-                    productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
-                    price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
-                    productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
-                    fromKName,
-                    fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                    contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
-                    position: (data === null || data === void 0 ? void 0 : data.position) + '',
-                    relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
-                    relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
-                    traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
-                }
-            });
+            if (product === null || product === void 0 ? void 0 : product.price) {
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'jumpToWeb',
+                        eventDescription: 'User jumped to website',
+                        productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
+                        productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
+                        price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
+                        productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
+                        fromKName,
+                        fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                        contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
+                        position: (data === null || data === void 0 ? void 0 : data.position) + '',
+                        relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
+                        relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
+                        traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
+                    }
+                });
+            }
         }, [bffEventReport, popupDetailData, isFromHashtag]);
         const productView = React.useCallback((data, product, cta, viewTime) => {
             var _a, _b, _c, _d;
@@ -8145,24 +8131,26 @@
             else if (data === null || data === void 0 ? void 0 : data.product) {
                 fromKName = 'productPage';
             }
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    productId: product === null || product === void 0 ? void 0 : product.itemId,
-                    productName: product === null || product === void 0 ? void 0 : product.title,
-                    price: (product === null || product === void 0 ? void 0 : product.price) + '',
-                    productCollection: product === null || product === void 0 ? void 0 : product.collection,
-                    fromKName,
-                    fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                    contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
-                    position: (data === null || data === void 0 ? void 0 : data.position) + '',
-                    relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
-                    relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
-                    traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
-                    timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
-                    eventSubject: 'productView',
-                    eventDescription: 'User browsed the product'
-                }
-            });
+            if (product === null || product === void 0 ? void 0 : product.price) {
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        productId: product === null || product === void 0 ? void 0 : product.itemId,
+                        productName: product === null || product === void 0 ? void 0 : product.title,
+                        price: (product === null || product === void 0 ? void 0 : product.price) + '',
+                        productCollection: product === null || product === void 0 ? void 0 : product.collection,
+                        fromKName,
+                        fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                        contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
+                        position: (data === null || data === void 0 ? void 0 : data.position) + '',
+                        relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                        relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
+                        traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
+                        timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
+                        eventSubject: 'productView',
+                        eventDescription: 'User browsed the product'
+                    }
+                });
+            }
         }, [bffEventReport, popupDetailData]);
         return {
             jumpToWeb,
@@ -8174,14 +8162,13 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-11-02 18:34:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-10 11:11:50
+     * @LastEditTime: 2024-04-12 11:23:00
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
      *
      */
     const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
-    const Modal = ({ visible, onClose, children, modalStyle, padding, popupAniData }) => {
-        const { popupAni } = useEditor();
-        const cssAni = popupAniData !== null && popupAniData !== void 0 ? popupAniData : popupAni;
+    const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
+        var _a;
         const [isShow, setIsShow] = React.useState(false);
         const modalEleRef = React.useRef(null);
         React.useEffect(() => {
@@ -8196,29 +8183,32 @@
                 parentNode === null || parentNode === void 0 ? void 0 : parentNode.appendChild(modalEleRef.current);
             }
         }, []);
+        const isOpen = React.useMemo(() => {
+            return ((popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') || visible;
+        }, [visible, popup]);
         React.useEffect(() => {
-            if (visible) {
+            if (isOpen) {
                 setIsShow(true);
             }
             else {
                 setTimeout(() => {
                     setIsShow(false);
-                }, cssAni === null || cssAni === void 0 ? void 0 : cssAni.duration);
+                }, popup === null || popup === void 0 ? void 0 : popup.duration);
             }
-        }, [visible, cssAni]);
+        }, [isOpen, popup]);
         if (!modalEleRef.current)
             return null;
         const handleClose = lodash.debounce(() => {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, 300);
-        return ReactDOM__namespace.createPortal(React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: isShow ? 'flex' : 'none', backgroundColor: visible ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
-            React.createElement("div", { className: `modal-container ${visible ? 'modal-popIn' : 'modal-popOut'}`, style: { padding, animationDuration: (cssAni === null || cssAni === void 0 ? void 0 : cssAni.duration) / 1000 + 's' }, onClick: (e) => {
+        return ReactDOM__namespace.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
+            React.createElement("div", { className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: { padding, animationDuration: ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0) / 1000 + 's' }, onClick: (e) => {
                     e.stopPropagation();
                     e.preventDefault();
                 } },
                 React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
                     React.createElement("img", { src: closeIcon, alt: 'close', className: 'modal-icon' })),
-                children)), modalEleRef.current);
+                children)))), modalEleRef.current);
     };
     var Modal$1 = React.memo(Modal);
 
@@ -8524,7 +8514,6 @@
 
     const Prompt$1 = (_a) => {
         var { content, btnText, style, icon, onClick } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "onClick"]);
-        useEditor();
         const iconSrc = typeof icon === 'string' ? icon : getMediaValueByMode(icon);
         const handleOk = () => {
             window === null || window === void 0 ? void 0 : window.sxpPopup('');
@@ -9176,7 +9165,7 @@ Made in Italy` })));
         var { rec, children, className, onClick, style, isExternalLink = false } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink"]);
         const ref = React.useRef(null);
         const isOnScreen = useOnScreen(ref);
-        const { popupAni } = useEditor();
+        const { popup } = useEditor();
         const { setPopupDetailData, ctaEvent } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
         React.useEffect(() => {
@@ -9198,17 +9187,17 @@ Made in Italy` })));
             }, rec, item);
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(rec);
             if (isExternalLink) {
-                if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindCta) === null || _d === void 0 ? void 0 : _d.link) {
+                if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
                     const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
                     const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
                     jumpToWeb(rec, product, cta);
-                    window.location.href = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) === null || _h === void 0 ? void 0 : _h.link;
+                    window.location.href = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link;
                 }
             }
             else {
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
-        }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+        }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
     };
     var EventProvider$1 = React.memo(EventProvider);
@@ -9676,26 +9665,25 @@ Made in Italy` })));
         var _b, _c;
         var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
         const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
-        const { popupAni } = useEditor();
+        const { popup } = useEditor();
         const { jumpToWeb } = useEventReport();
         const [products, setProducts] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
         const handleClick = lodash.throttle((item) => {
-            var _a;
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'clickCta',
                 eventDescription: 'User clicked the CTA'
             }, recData, item);
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
             if (isExternalLink) {
-                if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
+                if (item === null || item === void 0 ? void 0 : item.link) {
                     jumpToWeb(recData, item, item.bindCta);
-                    window.location.href = item.bindCta.link;
+                    window.location.href = item.link;
                 }
             }
             else {
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
-        }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+        }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
             var _a, _b, _c, _d, _e, _f;
             return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
@@ -9790,26 +9778,25 @@ Made in Italy` })));
         var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
         const { sxpParameter } = useSxpDataSource();
         const { ctaEvent, setPopupDetailData } = useSxpDataSource();
-        const { popupAni } = useEditor();
+        const { popup } = useEditor();
         const [products, setProducts] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
         const { jumpToWeb } = useEventReport();
         const handleClick = lodash.throttle((item) => {
-            var _a;
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'clickCta',
                 eventDescription: 'User clicked the CTA'
             }, recData, item);
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
             if (isExternalLink) {
-                if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
+                if (item === null || item === void 0 ? void 0 : item.link) {
                     jumpToWeb(recData, item, item.bindCta);
-                    window.location.href = item.bindCta.link;
+                    window.location.href = item.link;
                 }
             }
             else {
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
-        }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+        }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
             var _a, _b, _c, _d, _e, _f;
             return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
@@ -9903,26 +9890,25 @@ Made in Italy` })));
         var _b, _c;
         var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
         const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
-        const { popupAni } = useEditor();
+        const { popup } = useEditor();
         const { jumpToWeb } = useEventReport();
         const [products, setProducts] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
         const handleClick = lodash.throttle((item) => {
-            var _a;
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'clickCta',
                 eventDescription: 'User clicked the CTA'
             }, recData, item);
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
             if (isExternalLink) {
-                if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
+                if (item === null || item === void 0 ? void 0 : item.link) {
                     jumpToWeb(recData, item, item.bindCta);
-                    window.location.href = item.bindCta.link;
+                    window.location.href = item.link;
                 }
             }
             else {
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
-        }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+        }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
             var _a, _b, _c, _d, _e, _f;
             return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
@@ -11678,7 +11664,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-10 10:58:24
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-07 15:18:35
+     * @LastEditTime: 2024-04-12 11:29:01
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
      *
      */
@@ -11742,7 +11728,7 @@ Made in Italy` })));
                     relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
                     position: rec === null || rec === void 0 ? void 0 : rec.position,
                     contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
-                    traceInfo: JSON.stringify((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo),
+                    traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
                     hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
                     fromKName,
                     fromKPage: location === null || location === void 0 ? void 0 : location.href,
@@ -12846,15 +12832,15 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-10-31 10:56:01
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-10 09:57:19
+     * @LastEditTime: 2024-04-12 09:50:58
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
      *
      */
     const Popup = () => {
-        const { schema, resolver, popup, popupAni } = useEditor();
+        const { schema, resolver, popup } = useEditor();
         const { setPopupDetailData, popupDetailData, bffEventReport } = useSxpDataSource();
         const { productView } = useEventReport();
-        const [visible, setVisible] = React.useState(false);
+        const [visible, setVisible] = React.useState();
         const curTimeRef = React.useRef(null);
         React.useEffect(() => {
             const initTime = () => {
@@ -12867,33 +12853,33 @@ Made in Italy` })));
             };
         }, []);
         React.useEffect(() => {
-            if (popup && popup !== '') {
+            if (popup && (popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') {
                 curTimeRef.current = new Date();
-                setVisible(true);
+                setVisible(popup);
             }
         }, [popup]);
         const handleClose = () => {
-            var _a, _b, _c;
-            if (!popup || popup === '' || !visible || new Date() - curTimeRef.current < (popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration)) {
+            var _a, _b, _c, _d;
+            if (!popup || (popup === null || popup === void 0 ? void 0 : popup.id) === '' || !visible || new Date() - curTimeRef.current < ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0)) {
                 return;
             }
-            setVisible(false);
+            setVisible(Object.assign(Object.assign({}, popup), { id: '' }));
             const data = popupDetailData;
-            const product = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProduct;
-            const cta = (_c = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct) === null || _c === void 0 ? void 0 : _c.bindCta;
+            const product = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+            const cta = (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.bindCta;
             if (product && cta) {
                 productView(data, product, cta, curTimeRef.current);
             }
             setTimeout(() => {
                 window === null || window === void 0 ? void 0 : window.sxpPopup('');
                 setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(null);
-            }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+            }, popup === null || popup === void 0 ? void 0 : popup.duration);
         };
         const renderPopupDetail = React.useMemo(() => {
             var _a, _b, _c;
             return (_c = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.map((value, index) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h;
-                if ((value === null || value === void 0 ? void 0 : value.id) === popup) {
+                if ((value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id)) {
                     const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
                     const Component = withBindDataSource(t);
                     const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
@@ -12904,7 +12890,7 @@ Made in Italy` })));
                 }
             });
         }, [schema, popup, resolver]);
-        return (React.createElement(Modal$1, { visible: !!visible, onClose: handleClose, padding: 0, modalStyle: { position: 'fixed' } }, renderPopupDetail));
+        return (React.createElement(Modal$1, { popup: visible, onClose: handleClose, padding: 0, modalStyle: { position: 'fixed' } }, renderPopupDetail));
     };
 
     /*