pb-sxp-ui 1.0.3-alpha.4 → 1.0.4

package/dist/pb-ui.js

@@ -770,7 +770,6 @@
         });
         typeof window !== 'undefined' &&
             (window.sxpPopup = (type, aniType) => {
-                setPopup(type);
                 if (aniType && (aniType === null || aniType === void 0 ? void 0 : aniType.name) !== 'none') {
                     setPopupAni(Object.assign(Object.assign({}, popupAni), aniType));
                 }
@@ -780,6 +779,9 @@
                         duration: 0
                     });
                 }
+                setTimeout(() => {
+                    setPopup(type);
+                });
             });
         typeof window !== 'undefined' &&
             (window.getJointUtmLink = (url) => {
@@ -8172,7 +8174,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-11-02 18:34:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-02 10:33:15
+     * @LastEditTime: 2024-04-10 11:11:50
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
      *
      */
@@ -8829,8 +8831,8 @@ Made in Italy` })));
                         }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
                 React.createElement("div", { className: 'pb-commondityDiroNew-content' },
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
-                        React.createElement("div", null,
-                            React.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
+                            React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
@@ -8845,7 +8847,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-02 15:12:53
+     * @LastEditTime: 2024-04-09 16:25:44
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\material.tsx
      *
      */
@@ -8867,7 +8869,7 @@ Made in Italy` })));
                     price: {
                         color: '#000',
                         fontWeight: 'bold',
-                        fontSize: 18
+                        fontSize: 13
                     },
                     title: {
                         color: '#000',
@@ -8911,7 +8913,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-03 15:51:15
+     * @LastEditTime: 2024-04-09 21:40:18
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\settingRender.tsx
      *
      */
@@ -9171,11 +9173,12 @@ Made in Italy` })));
     }
 
     const EventProvider = (_a) => {
-        var { rec, children, className, onClick, style } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style"]);
+        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 { setPopupDetailData, ctaEvent } = useSxpDataSource();
+        const { jumpToWeb } = useEventReport();
         React.useEffect(() => {
             var _a, _b;
             if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
@@ -9187,14 +9190,24 @@ Made in Italy` })));
             }
         }, [isOnScreen, ref, rec, ctaEvent]);
         const handleClick = lodash.throttle(() => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'clickCta',
                 eventDescription: 'User clicked the CTA'
             }, rec, item);
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(rec);
-            onClick === null || onClick === void 0 ? void 0 : onClick();
+            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) {
+                    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;
+                }
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
         }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
         return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
     };
@@ -9204,11 +9217,11 @@ Made in Italy` })));
 
     const Commodity$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g, _h;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
         const { sxpParameter } = useSxpDataSource();
         const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
         const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
                 React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
             React.createElement("div", { className: css.css({
@@ -9271,7 +9284,8 @@ Made in Italy` })));
                 width: 236,
                 height: 74,
                 borderRadius: 3,
-                backgroundColor: 'rgba(0,0,0,.3)'
+                backgroundColor: 'rgba(0,0,0,.3)',
+                marginBottom: 8
             }
         },
         w: 100,
@@ -9293,12 +9307,12 @@ Made in Italy` })));
 
     const Appoint$1 = (_a) => {
         var _b, _c, _d, _e;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
         const { sxpParameter } = useSxpDataSource();
         const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
-        return (React.createElement(EventProvider$1, Object.assign({ rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
+                React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
     };
     var AppointComponent = React.memo(Appoint$1);
@@ -9307,7 +9321,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-29 17:03:49
+     * @LastEditTime: 2024-04-09 21:42:21
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\Appoint\material.tsx
      *
      */
@@ -9344,7 +9358,8 @@ Made in Italy` })));
                 width: 236,
                 height: 44,
                 borderRadius: 3,
-                backgroundColor: 'rgba(0,0,0,.3)'
+                backgroundColor: 'rgba(0,0,0,.3)',
+                marginBottom: 8
             }
         },
         w: 100,
@@ -9420,7 +9435,8 @@ Made in Italy` })));
                 width: 236,
                 height: 74,
                 borderRadius: 3,
-                backgroundColor: 'rgba(0,0,0,.3)'
+                backgroundColor: 'rgba(0,0,0,.3)',
+                marginBottom: 8
             }
         },
         w: 100,
@@ -9444,11 +9460,11 @@ Made in Italy` })));
 
     const CommodityDiro$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g, _h;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
         const { sxpParameter } = useSxpDataSource();
         const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
         const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
                 React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
             React.createElement("div", { className: css.css({
@@ -9511,7 +9527,8 @@ Made in Italy` })));
                 width: 236,
                 height: 74,
                 borderRadius: 3,
-                backgroundColor: '#fff'
+                backgroundColor: '#fff',
+                marginBottom: 8
             }
         },
         w: 100,
@@ -9535,11 +9552,11 @@ Made in Italy` })));
 
     const CommodityDiroNew$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g, _h;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
         const { sxpParameter } = useSxpDataSource();
         const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
         const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
                 React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
             React.createElement("div", { className: css.css({
@@ -9559,7 +9576,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-29 11:56:56
+     * @LastEditTime: 2024-04-09 11:54:27
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\CommodityDiroNew\material.tsx
      *
      */
@@ -9583,13 +9600,13 @@ Made in Italy` })));
                         marginRight: 16
                     },
                     title: {
-                        fontSize: 12,
+                        fontSize: 13,
                         color: '#000',
                         textAlign: 'left'
                     },
                     ctaTitle: {
                         textDecoration: 'underline',
-                        fontSize: 12,
+                        fontSize: 14,
                         fontWeight: 'bold',
                         color: '#000',
                         textAlign: 'left',
@@ -9603,7 +9620,8 @@ Made in Italy` })));
                 width: 260,
                 height: 86,
                 padding: 4,
-                backgroundColor: 'rgba(255,255,255,0.75)'
+                backgroundColor: 'rgba(255,255,255,0.75)',
+                marginBottom: 8
             }
         },
         w: 100,
@@ -9623,8 +9641,8 @@ Made in Italy` })));
         }
     ];
 
-    const Scroll = ({ children }) => {
-        return (React.createElement(Swiper, { direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [freeMode, Scrollbar, Mousewheel], style: { paddingRight: '20px' } }, children));
+    const Scroll = ({ children, isPadding = true }) => {
+        return (React.createElement(Swiper, { direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [freeMode, Scrollbar, Mousewheel], style: { padding: isPadding ? '0 12px 0 20px' : 0 } }, children));
     };
     var Scroll$1 = React.memo(Scroll);
 
@@ -9656,21 +9674,31 @@ Made in Italy` })));
 
     const MultiCommodityDiro$1 = (_a) => {
         var _b, _c;
-        var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles"]);
+        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 { 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 }) }));
-            onClick === null || onClick === void 0 ? void 0 : onClick();
+            if (isExternalLink) {
+                if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
+                    jumpToWeb(recData, item, item.bindCta);
+                    window.location.href = item.bindCta.link;
+                }
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
         }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
-        return (React.createElement(Scroll$1, null, products === null || products === void 0 ? void 0 : products.map((item) => {
+        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({ flexShrink: 0 }, style)), style: { display: 'flex' } }, props, { onClick: () => handleClick(item) }),
+            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) }),
                 React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
                     React.createElement(Img$1, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item })),
                 React.createElement("div", { className: css.css({
@@ -9734,7 +9762,8 @@ Made in Italy` })));
                 width: 236,
                 height: 74,
                 borderRadius: 3,
-                backgroundColor: '#fff'
+                backgroundColor: '#fff',
+                marginBottom: 8
             }
         },
         w: 100,
@@ -9758,22 +9787,32 @@ Made in Italy` })));
 
     const MultiCommodity$1 = (_a) => {
         var _b, _c;
-        var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles"]);
+        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 [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 }) }));
-            onClick === null || onClick === void 0 ? void 0 : onClick();
+            if (isExternalLink) {
+                if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
+                    jumpToWeb(recData, item, item.bindCta);
+                    window.location.href = item.bindCta.link;
+                }
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
         }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
-        return (React.createElement(Scroll$1, null, products === null || products === void 0 ? void 0 : products.map((item) => {
+        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({ flexShrink: 0 }, style)), style: { display: 'flex' } }, props, { onClick: () => handleClick(item) }),
+            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) }),
                 React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
                     React.createElement(Img$1, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item })),
                 React.createElement("div", { className: css.css({
@@ -9837,7 +9876,8 @@ Made in Italy` })));
                 width: 236,
                 height: 74,
                 borderRadius: 3,
-                backgroundColor: 'rgba(0,0,0,.3)'
+                backgroundColor: 'rgba(0,0,0,.3)',
+                marginBottom: 8
             }
         },
         w: 100,
@@ -9861,21 +9901,31 @@ Made in Italy` })));
 
     const MultiCommodityDiroNew$1 = (_a) => {
         var _b, _c;
-        var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles"]);
+        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 { 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 }) }));
-            onClick === null || onClick === void 0 ? void 0 : onClick();
+            if (isExternalLink) {
+                if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
+                    jumpToWeb(recData, item, item.bindCta);
+                    window.location.href = item.bindCta.link;
+                }
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
         }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
-        return (React.createElement(Scroll$1, null, products === null || products === void 0 ? void 0 : products.map((item) => {
+        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({ flexShrink: 0 }, style)), style: { display: 'flex' } }, props, { onClick: () => handleClick(item) }),
+            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) }),
                 React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
                     React.createElement(Img$1, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item })),
                 React.createElement("div", { className: css.css({
@@ -9897,7 +9947,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-29 15:40:54
+     * @LastEditTime: 2024-04-09 21:40:37
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\MultiCommodityDiroNew\material.tsx
      *
      */
@@ -9941,7 +9991,8 @@ Made in Italy` })));
                 width: 260,
                 height: 86,
                 padding: 4,
-                backgroundColor: 'rgba(255,255,255,0.75)'
+                backgroundColor: 'rgba(255,255,255,0.75)',
+                marginBottom: 8
             }
         },
         w: 100,
@@ -12356,14 +12407,14 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-12-26 16:11:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-04 14:25:27
+     * @LastEditTime: 2024-04-10 16:49:34
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
      *
      */
     const RenderCard = ({ rec, index, tempMap, resolver }) => {
         const { schema } = useEditor();
         const renderComp = React.useMemo(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
             if (!(rec === null || rec === void 0 ? void 0 : rec.video))
                 return null;
             let cta = null;
@@ -12386,8 +12437,11 @@ Made in Italy` })));
                 return null;
             }
             if (value && resolver) {
-                const Component = withBindDataSource(resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type]);
-                return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign({}, (_x = value === null || value === void 0 ? void 0 : value.item) === null || _x === void 0 ? void 0 : _x.style), { zIndex: 50, marginLeft: '20px' }), textStyle: (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.textStyle, bindDatas: (_0 = (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.bindDatas) !== null && _0 !== void 0 ? _0 : [] }, (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.props, { event: ((_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec })));
+                const t = resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type];
+                const Component = withBindDataSource(t);
+                const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
+                const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
+                return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink })));
             }
             else {
                 return null;
@@ -12413,7 +12467,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-07 17:06:06
+     * @LastEditTime: 2024-04-10 10:13:48
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -12580,9 +12634,11 @@ Made in Italy` })));
             }
             if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
                 return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, index) => {
-                    var _a, _b, _c, _d, _e, _f;
-                    const Component = withBindDataSource(resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type]);
-                    return (React.createElement(Component, Object.assign({ key: index, textStyle: (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.textStyle, bindDatas: (_d = (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.bindDatas) !== null && _d !== void 0 ? _d : [] }, (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.props, { event: ((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, viewTime: viewTime.current, rec: rec, isPost: true, tipText: tipText, style: { height: '100%', overflow: 'auto' } })));
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                    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;
+                    return (React.createElement(Component, Object.assign({ key: index, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle), bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, viewTime: viewTime.current, rec: rec, isPost: true, tipText: tipText, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.style), { height: '100%', overflow: 'auto' }) })));
                 });
             }
             return null;
@@ -12596,8 +12652,7 @@ Made in Italy` })));
                         React.createElement(Nudge, { nudge: nudge }),
                         React.createElement("div", { className: 'clc-sxp-bottom-card' },
                             React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
-                        React.createElement("div", { className: 'clc-sxp-bottom-text' },
-                            React.createElement(ExpandableText$1, { isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: descStyle })),
+                        React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: descStyle }),
                         React.createElement(Hashtag$1, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
             }
             return null;
@@ -12791,7 +12846,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-10-31 10:56:01
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-02 10:31:51
+     * @LastEditTime: 2024-04-10 09:57:19
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
      *
      */
@@ -12837,10 +12892,12 @@ Made in Italy` })));
         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;
+                var _a, _b, _c, _d, _e, _f, _g, _h;
                 if ((value === null || value === void 0 ? void 0 : value.id) === popup) {
-                    const Component = withBindDataSource(resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type]);
-                    return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign({}, (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.style), { width: '100%', height: '80vh', overflow: 'auto' }), textStyle: (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle, bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.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;
+                    return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.style), { width: '100%', height: '80vh', overflow: 'auto' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.textStyle), bindDatas: (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.bindDatas) !== null && _f !== void 0 ? _f : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.props, { event: ((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id })));
                 }
                 else {
                     return React.createElement(React.Fragment, null);