pb-sxp-ui 1.6.0 → 1.6.2

package/dist/index.cjs

@@ -10838,22 +10838,24 @@ function useOnScreen(ref) {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-16 14:50:13
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-07-04 18:13:23
+ * @LastEditTime: 2024-10-12 18:31:19
  * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
  *
  */
-const Img = ({ src, rec, item, index, style, translateY, imgStyle, enableEventReport = true }) => {
+const Img = ({ src, rec, item, index, style, translateY, imgStyle, enableEventReport = true, isActive }) => {
     const ref = React.useRef(null);
     const isOnScreen = useOnScreen(ref);
     const { ctaEvent } = useSxpDataSource();
+    const [visible, setVisible] = React.useState(false);
     React.useEffect(() => {
-        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current) && enableEventReport) {
+        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current) && enableEventReport && !visible && isActive) {
+            setVisible(true);
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'ctaExposure',
                 eventDescription: 'The cta was shown to the user'
             }, rec, item, index);
         }
-    }, [isOnScreen, src, ref, rec, ctaEvent, item, index, enableEventReport]);
+    }, [isOnScreen, src, ref, rec, ctaEvent, item, index, enableEventReport, visible, isActive]);
     React.useMemo(() => {
         return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/20`;
     }, [src]);
@@ -11377,12 +11379,12 @@ var styles$8 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
 
 const Commodity$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
     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 = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
     return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css.css({
                 color: '#fff',
                 display: 'flex',
@@ -11471,12 +11473,12 @@ var interactionRender$8 = [
 
 const Appoint$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "isActive"]);
     const { sxpParameter } = useSxpDataSource();
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
     const 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;
     return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
-        React.createElement(Img$1, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
                 __html: setFontForText((_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
             } })));
@@ -11653,14 +11655,14 @@ var styles$7 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__nkBlU","one
 
 const Link$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle", "isActive"]);
     const { sxpParameter, bffEventReport } = useSxpDataSource();
     useEventReport();
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
     (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct;
     const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== 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({ index: index, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { jumpLink: (_f = cta === null || cta === void 0 ? void 0 : cta.link) !== null && _f !== void 0 ? _f : '' }),
-        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css.css({
                 display: 'flex',
                 alignItems: 'center',
@@ -11770,12 +11772,12 @@ var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
 
 const CommodityDiro$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
     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 = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
     return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css.css({
                 color: '#fff',
                 display: 'flex',
@@ -11866,12 +11868,12 @@ var styles$5 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
 
 const CommodityDiroNew$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
     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 = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
     return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css.css({
                 color: '#fff',
                 display: 'flex',
@@ -11963,7 +11965,7 @@ var styles$4 = {"two-line-ellipsis":"index-module_two-line-ellipsis__SFQwJ"};
 
 const MultiCommodityDiro$1 = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
+    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
     const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
     const { popup } = useEditor();
     const { jumpToWeb } = useEventReport();
@@ -11987,7 +11989,7 @@ const MultiCommodityDiro$1 = (_a) => {
     return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
-            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
             React.createElement("div", { className: css.css({
                     color: '#000',
                     display: 'flex',
@@ -12079,7 +12081,7 @@ var styles$3 = {"two-line-ellipsis":"index-module_two-line-ellipsis__mdzn0"};
 
 const MultiCommodity$1 = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
+    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
     const { sxpParameter } = useSxpDataSource();
     const { ctaEvent, setPopupDetailData } = useSxpDataSource();
     const { popup } = useEditor();
@@ -12104,7 +12106,7 @@ const MultiCommodity$1 = (_a) => {
     return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
-            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
             React.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -12204,7 +12206,7 @@ var styles$2 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__fselR"};
 
 const MultiCommodityDiroNew$1 = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
+    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
     const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
     const { popup } = useEditor();
     const { jumpToWeb } = useEventReport();
@@ -12229,7 +12231,7 @@ const MultiCommodityDiroNew$1 = (_a) => {
     return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g;
         return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
-            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
             React.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -14799,7 +14801,7 @@ var styles$1 = {"animated-button":"index-module_animated-button__lqTbg","gradien
 
 const AniLink$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink"]);
+    var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink", "isActive"]);
     const { ctaEvent, setPopupDetailData } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
     const [visible, setVisible] = React.useState(false);
@@ -14843,13 +14845,13 @@ const AniLink$1 = (_a) => {
     }, [event === null || event === void 0 ? void 0 : event.animation]);
     React.useEffect(() => {
         var _a, _b, _c;
-        if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
+        if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current) && isActive) {
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'ctaExposure',
                 eventDescription: 'The cta was shown to the user'
             }, recData, ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video), index);
         }
-    }, [isOnScreen]);
+    }, [isOnScreen, isActive]);
     React.useEffect(() => {
         if (isOnScreen) {
             setVisible(true);
@@ -15298,7 +15300,7 @@ const AniLinkPopup$1 = (_a) => {
         } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css.css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles['aniLinkPopup']} ${aniNamStyle}  ${css.css(aniTimStyle)}`, onClick: handleTo }),
         React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
             React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
-        React.createElement(Img$1, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                 __html: setFontForText((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
             } })),
@@ -16173,7 +16175,7 @@ function withBindDataSource(Component) {
  * @Author: binruan@chatlabs.com
  * @Date: 2023-12-26 16:11:34
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-08-21 15:46:07
+ * @LastEditTime: 2024-10-12 16:22:10
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
  *
  */
@@ -16193,38 +16195,44 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }
         cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
     }
     const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
-    const renderComp = React.useCallback(() => {
-        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;
+    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, _3, _4, _5, _6, _7, _8;
         if (!(rec === null || rec === void 0 ? void 0 : rec.video))
             return null;
+        if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) ;
+        else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) ;
+        else {
+            (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
+        }
         //如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
-        if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
+        if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type)))
             return;
         //默认不渲染category为cta类型的组件，该类型的组件只用于某一处
-        if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
+        if (!includesCtaType && ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.category) === 'cta')
             return;
-        if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
-            (((_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.type) === 'Commodity' && !((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct)) ||
-            (((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type) === 'CommodityDiroNew' && !((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.bindProduct)) ||
-            (((_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.type) === 'MultiCommodity' && !((_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.bindProducts) === null || _l === void 0 ? void 0 : _l.length)) ||
-            (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodityDiro' && !((_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p.length)) ||
-            (((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiroNew' && !((_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s.length))) {
+        if ((((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'CommodityDiro' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
+            (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'Commodity' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
+            (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'CommodityDiroNew' && !((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProduct)) ||
+            (((_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.type) === 'MultiCommodity' && !((_r = (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length)) ||
+            (((_s = value === null || value === void 0 ? void 0 : value.item) === null || _s === void 0 ? void 0 : _s.type) === 'MultiCommodityDiro' && !((_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u.length)) ||
+            (((_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.type) === 'MultiCommodityDiroNew' && !((_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindProducts) === null || _x === void 0 ? void 0 : _x.length))) {
             //
             return null;
         }
         if (value && resolver) {
-            const t = resolver[(_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type];
+            const t = resolver[(_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.type];
             const Component = withBindDataSource(t);
-            const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
-            const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
-            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.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, index: index, isActive: isActive })));
+            const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
+            const isExternalLink = ((_2 = (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.event) === null || _1 === void 0 ? void 0 : _1.onClick) === null || _2 === void 0 ? void 0 : _2.linkType) === 'externalLink';
+            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.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, index: index, isActive: isActive })));
         }
         else {
             return null;
         }
     }, [rec, resolver, tempMap, schema, value === null || value === void 0 ? void 0 : value.id, isActive]);
-    return React.createElement(React.Fragment, null, renderComp());
+    return React.createElement(React.Fragment, null, renderComp);
 };
+var RenderCard$1 = React.memo(RenderCard);
 
 /*
  * @Author: binruan@chatlabs.com
@@ -16309,7 +16317,7 @@ var Tagbar$1 = React.memo(Tagbar);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-10-11 18:16:31
+ * @LastEditTime: 2024-10-12 18:38:11
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
@@ -16563,12 +16571,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
                     React.createElement(Nudge, { nudge: nudge }),
                     (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
+                        React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex }))) : null,
                     React.createElement("div", null,
                         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: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
+                        React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
                         React.createElement(Hashtag$1, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
-                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
+                React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
         }
         return null;
     }, [
@@ -16811,7 +16819,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 position: 'absolute',
                 [(_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _g === void 0 ? void 0 : _g.xPosit) !== null && _h !== void 0 ? _h : 'left']: (_k = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _j === void 0 ? void 0 : _j.x) !== null && _k !== void 0 ? _k : 0,
                 [(_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _l === void 0 ? void 0 : _l.yPosit) !== null && _m !== void 0 ? _m : 'top']: (_p = (_o = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _o === void 0 ? void 0 : _o.y) !== null && _p !== void 0 ? _p : 0,
-                zIndex: 10,
+                zIndex: 8,
                 border: 'none',
                 padding: 0,
                 background: 'transparent'
@@ -17147,7 +17155,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
     const CTA = (rec, index) => {
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
             return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
+                React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1 })));
         }
         return null;
     };