pb-sxp-ui 1.2.4 → 1.2.6

package/es/materials/sxp/popup/CommodityDetail/settingRender.js

@@ -104,6 +104,10 @@ export default [
                             {
                                 label: '商品描述',
                                 value: 'info'
+                            },
+                            {
+                                label: '税费说明',
+                                value: 'taxInfo'
                             }
                         ],
                         name: ['props', 'commodityStyles', 'field'],

package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -12,21 +12,29 @@ import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 import { setFontForText } from '../../../../core/utils/tool';
 import CommodityGroup from '../../template/components/CommodityGroup';
 const CommodityDetailDiroNew = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _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;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
     const [spread, setSpread] = useState(true);
-    const { sxpParameter } = useSxpDataSource();
-    const { popupDetailData, bffEventReport, isPreview, swiperRef, bffFbReport } = useSxpDataSource();
+    const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = useSxpDataSource();
     const { jumpToWeb, productView } = useEventReport();
     const [stopSlide, setStopSlide] = useState(false);
     const [isBottom, setIsBottom] = useState(false);
     const [isTop, setIsTop] = useState(true);
     const [showModal, setShowModal] = useState(false);
     const curTimeRef = useRef(null);
+    const [checkCommodityIndex, setCheckCommodityIndex] = useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
     const data = isPost ? rec : popupDetailData;
-    const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
-    const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
+    let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
+    let cta = isPost
+        ? (_g = data === null || data === void 0 ? void 0 : data.product) === null || _g === void 0 ? void 0 : _g.bindCta
+        : (_k = (_j = (_h = data === null || data === void 0 ? void 0 : data.video) === null || _h === void 0 ? void 0 : _h.bindProduct) === null || _j === void 0 ? void 0 : _j.bindCta) !== null && _k !== void 0 ? _k : (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta;
     const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
+    if (!isPost && (commodityGroup === null || commodityGroup === void 0 ? void 0 : commodityGroup.open) && ((_p = data === null || data === void 0 ? void 0 : data.video) === null || _p === void 0 ? void 0 : _p.bindProducts) && ((_r = (_q = data === null || data === void 0 ? void 0 : data.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length) > 0) {
+        checkCommodityIndexRef.current = checkCommodityIndex;
+        const p = (_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.bindProducts[checkCommodityIndex];
+        product = p;
+        cta = p === null || p === void 0 ? void 0 : p.bindCta;
+    }
     const handleLink = () => {
         if (product === null || product === void 0 ? void 0 : product.link) {
             jumpToWeb(data, product, cta, position);
@@ -64,7 +72,7 @@ const CommodityDetailDiroNew = (_a) => {
             return '£102,300.00';
         }
     }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-    const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
+    const width = isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth;
     const handleClickCollapse = () => {
         setSpread(!spread);
     };
@@ -80,15 +88,20 @@ Made in Italy` })));
         }
         return style;
     }, []);
+    const handleClick = useCallback((index) => {
+        popupCurTimeRef.current = new Date();
+        setCheckCommodityIndex(index);
+        checkCommodityIndexRef.current = index;
+    }, []);
     const renderCommodityGroup = useCallback(() => {
         var _a, _b, _c;
         if (isPost)
             return;
-        return (React.createElement(CommodityGroup, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' } }));
-    }, []);
+        return (React.createElement(CommodityGroup, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' }, onCLick: handleClick, popupDetailData: popupDetailData, check: checkCommodityIndex }));
+    }, [checkCommodityIndex]);
     return (React.createElement("div", { className: 'pb-commondityDiroNew' },
-        React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
-            product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
+        React.createElement("div", Object.assign({ className: css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
+            product && ((_u = product === null || product === void 0 ? void 0 : product.homePage) === null || _u === void 0 ? void 0 : _u.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
                     clickable: true,
                     bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
                     clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -96,7 +109,8 @@ Made in Italy` })));
                         : 'commondityDiroNew-swiper-clickable-center'
                 }, loop: true, autoplay: {
                     delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
+                } }, (_v = product === null || product === void 0 ? void 0 : product.homePage) === null || _v === void 0 ? void 0 : _v.map((src) => {
+                var _a;
                 return (React.createElement(SwiperSlide, { key: src },
                     React.createElement("div", { style: {
                             overflow: 'hidden',
@@ -109,9 +123,9 @@ Made in Italy` })));
                                 objectFit: 'cover',
                                 display: 'block',
                                 objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
-                            }, src: src }))));
+                            }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
             }))),
-            !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
+            !((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) && (React.createElement("div", { className: css({
                     position: 'relative',
                     height: 0,
                     width: '100%',
@@ -124,13 +138,13 @@ Made in Italy` })));
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
+                    }), src: (_x = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _x !== void 0 ? _x : bottom_image, alt: 'pdp image' }))),
             renderCommodityGroup(),
             React.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
-                                __html: setFontForText((_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
+                                __html: setFontForText((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
                             } }),
                         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: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), dangerouslySetInnerHTML: {
                                 __html: setFontForText((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -140,11 +154,11 @@ Made in Italy` })));
                                 __html: setFontForText(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
                             } }),
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
-                                __html: setFontForText((_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
+                                __html: setFontForText((_z = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _z !== void 0 ? _z : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                             } }))),
-                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_0 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _0 !== void 0 ? _0 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
                     React.createElement("span", { dangerouslySetInnerHTML: {
-                            __html: setFontForText((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
+                            __html: setFontForText((_1 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _1 !== void 0 ? _1 : 'Shop now', buttonStyle)
                         } }))),
                 productInfoText({ isPost }))),
         React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));

package/es/materials/sxp/popup/CommodityList/index.js

@@ -1,16 +1,18 @@
 import { __rest } from "tslib";
 import { css } from '@emotion/css';
 import React, { memo, useCallback } from 'react';
-import { useSxpDataSource } from '../../../../core/hooks';
+import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 import './index.less';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
 import { setFontForText } from '../../../../core/utils/tool';
 import Img from '../../template/components/Img';
-import EventProvider from '../../template/components/EventProvider';
+import { throttle } from 'lodash';
 const CommodityList = (_a) => {
     var _b, _c;
-    var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, index, translateY = 0, commodityPicture, isExternalLink } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "index", "translateY", "commodityPicture", "isExternalLink"]);
-    const { sxpParameter } = useSxpDataSource();
-    const { popupDetailData, bffEventReport, isPreview, swiperRef, bffFbReport } = useSxpDataSource();
+    var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, index, translateY = 0, commodityPicture, isExternalLink, onClick } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "index", "translateY", "commodityPicture", "isExternalLink", "onClick"]);
+    const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent } = useSxpDataSource();
+    const { jumpToWeb } = useEventReport();
+    const { popup } = useEditor();
     const recData = isPost ? rec : popupDetailData;
     const product = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [null, null, null, null];
     const priceText = useCallback((product) => {
@@ -24,25 +26,40 @@ const CommodityList = (_a) => {
             return '$7,000';
         }
     }, []);
-    return (React.createElement("div", { className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        return (React.createElement(EventProvider, Object.assign({ key: index, isExternalLink: isExternalLink, rec: recData, index: index }, props, { className: css({
+    const handleClick = throttle((item, multiCheckIndex) => {
+        ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+            eventSubject: 'clickCta',
+            eventDescription: 'User clicked the CTA'
+        }, recData, item, index);
+        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 }), index, multiCheckIndex }));
+        if (isExternalLink) {
+            if (item === null || item === void 0 ? void 0 : item.link) {
+                jumpToWeb(recData, item, item.bindCta, index);
+                window.location.href = window.getJointUtmLink(item.link);
+            }
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    }, popup === null || popup === void 0 ? void 0 : popup.duration);
+    return (React.createElement("div", { className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement("div", Object.assign({ key: index }, props, { className: css({
                 display: 'flex'
-            }) }),
-            React.createElement(Img, { 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: commodityPicture }),
+            }), onClick: () => handleClick(item, index) }),
+            React.createElement(Img, { 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: commodityPicture, enableEventReport: false }),
             React.createElement("div", { style: {
-                    flex: 1,
-                    width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px - ${(_g = style === null || style === void 0 ? void 0 : style.padding) !== null && _g !== void 0 ? _g : 0}px)`,
+                    width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px)`,
                     display: 'flex',
                     flexDirection: 'column',
                     justifyContent: 'space-between'
                 } },
                 React.createElement("div", null,
                     React.createElement("div", { className: 'one-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
-                            __html: setFontForText((_h = item === null || item === void 0 ? void 0 : item.title) !== null && _h !== void 0 ? _h : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
+                            __html: setFontForText((_g = item === null || item === void 0 ? void 0 : item.title) !== null && _g !== void 0 ? _g : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
                         } }),
                     React.createElement("div", { className: 'two-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!item && (!(item === null || item === void 0 ? void 0 : item.collection) || (item === null || item === void 0 ? void 0 : item.collection) === ''), dangerouslySetInnerHTML: {
-                            __html: setFontForText((_j = item === null || item === void 0 ? void 0 : item.collection) !== null && _j !== void 0 ? _j : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
+                            __html: setFontForText((_h = item === null || item === void 0 ? void 0 : item.collection) !== null && _h !== void 0 ? _h : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
                         } })),
                 React.createElement("div", { className: css({
                         display: 'flex',
@@ -51,12 +68,13 @@ const CommodityList = (_a) => {
                         width: '100%',
                         overflow: 'hidden'
                     }) },
-                    React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
-                            __html: setFontForText(priceText(item), commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
-                        } }),
-                    React.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px', maxWidth: '100px' }), dangerouslySetInnerHTML: {
-                            __html: setFontForText((_l = (_k = item === null || item === void 0 ? void 0 : item.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', buttonStyle)
-                        } })))));
+                    React.createElement("div", null,
+                        React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
+                                __html: setFontForText(priceText(item), commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
+                            } })),
+                    React.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
+                            __html: setFontForText((_k = (_j = item === null || item === void 0 ? void 0 : item.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now', buttonStyle)
+                        } })))))));
     })));
 };
 export default memo(CommodityList);

package/es/materials/sxp/popup/CommodityList/material.js

@@ -37,6 +37,7 @@ const CommodityList = createMaterial(CommodityListComponent, {
                 backgroundColor: '#000',
                 fontSize: 12,
                 height: 30,
+                width: 100,
                 textAlign: 'center',
                 color: '#fff',
                 lineHeight: 2.5

package/es/materials/sxp/popup/CommodityList/settingRender.js

@@ -133,6 +133,11 @@ export default [
                 type: 'Group',
                 label: '尺寸',
                 child: [
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'width'],
+                        addonAfter: 'W'
+                    },
                     {
                         type: 'Number',
                         name: ['props', 'buttonStyle', 'height'],

package/es/materials/sxp/template/MultiCommodity/index.js

@@ -17,12 +17,12 @@ const MultiCommodity = (_a) => {
     const { popup } = useEditor();
     const [products, setProducts] = 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 = throttle((item) => {
+    const handleClick = throttle((item, multiCheckIndex) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, recData, item, index);
-        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 }), index }));
+        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 }), index, multiCheckIndex }));
         if (isExternalLink) {
             if (item === null || item === void 0 ? void 0 : item.link) {
                 jumpToWeb(recData, item, item.bindCta, index);
@@ -35,7 +35,7 @@ const MultiCommodity = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (React.createElement(Scroll, { 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(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+        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(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
             React.createElement(Img, { 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("div", { className: css({
                     color: '#fff',

package/es/materials/sxp/template/MultiCommodityDiro/index.js

@@ -16,12 +16,12 @@ const MultiCommodityDiro = (_a) => {
     const { popup } = useEditor();
     const { jumpToWeb } = useEventReport();
     const [products, setProducts] = 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 = throttle((item) => {
+    const handleClick = throttle((item, multiCheckIndex) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, recData, item, index);
-        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 }), index }));
+        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 }), index, multiCheckIndex }));
         if (isExternalLink) {
             if (item === null || item === void 0 ? void 0 : item.link) {
                 jumpToWeb(recData, item, item.bindCta, index);
@@ -34,7 +34,7 @@ const MultiCommodityDiro = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (React.createElement(Scroll, { 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(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+        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(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
             React.createElement(Img, { 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("div", { className: css({
                     color: '#000',

package/es/materials/sxp/template/components/CommodityGroup.d.ts

@@ -1,5 +1,6 @@
 import { VideoInfoType } from '../../../../core/components/SxpPageRender/typing';
 import React, { CSSProperties } from 'react';
+import { ISxpDataSourceContext } from '../../../../core/context/SxpDataSourceProvider';
 interface ICommodityGroupProps {
     products?: VideoInfoType['bindProducts'];
     data?: {
@@ -9,6 +10,9 @@ interface ICommodityGroupProps {
     };
     defImg: string;
     style?: CSSProperties;
+    onCLick?: (i: number) => void;
+    popupDetailData?: ISxpDataSourceContext['popupDetailData'];
+    check?: number;
 }
 declare const _default: React.NamedExoticComponent<ICommodityGroupProps>;
 export default _default;

package/es/materials/sxp/template/components/CommodityGroup.js

@@ -1,31 +1,38 @@
-import React, { memo, useState, useCallback } from 'react';
+import React, { memo } from 'react';
 import Scroll from './Scroll';
 import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { SwiperSlide } from 'swiper/react';
 import { css } from '@emotion/css';
-const CommodityGroup = ({ products, data, defImg, style }) => {
-    var _a, _b;
-    const { setPopupDetailData, popupDetailData } = useSxpDataSource();
-    const [check, setCheck] = useState((_a = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _a !== void 0 ? _a : 0);
-    const handleClick = useCallback((index) => {
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData((val) => (Object.assign(Object.assign({}, val), { video: Object.assign(Object.assign({}, val === null || val === void 0 ? void 0 : val.video), { bindProduct: products === null || products === void 0 ? void 0 : products[index] }), multiCheckIndex: index })));
-    }, []);
-    return (React.createElement(React.Fragment, null, (data === null || data === void 0 ? void 0 : data.open) && ((products && (products === null || products === void 0 ? void 0 : products.length) > 0) || !popupDetailData) && (React.createElement(Scroll, { isPadding: false, style: Object.assign(Object.assign({}, style), data === null || data === void 0 ? void 0 : data.style) }, (_b = (popupDetailData ? products : [0, 1, 2, 3])) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+import { useEventReport } from '../../../../core/hooks/useEventReport';
+const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailData, check }) => {
+    var _a;
+    const { productView } = useEventReport();
+    const { popupCurTimeRef } = useSxpDataSource();
+    const handleClick = (item, index) => {
+        if (check === index)
+            return;
+        productView(popupDetailData, item, item === null || item === void 0 ? void 0 : item.bindCta, popupCurTimeRef.current, popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index);
+        onCLick === null || onCLick === void 0 ? void 0 : onCLick(index);
+    };
+    return (React.createElement(React.Fragment, null, (data === null || data === void 0 ? void 0 : data.open) && ((products && (products === null || products === void 0 ? void 0 : products.length) > 1) || !popupDetailData) && (React.createElement(Scroll, { enableSlideActive: true, isPadding: false, style: Object.assign(Object.assign({}, style), data === null || data === void 0 ? void 0 : data.style) }, (_a = (popupDetailData ? products : [0, 1, 2, 3])) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
         var _a, _b, _c;
-        return (React.createElement(SwiperSlide, { className: css({
+        return (React.createElement(React.Fragment, null, (item === null || item === void 0 ? void 0 : item.bindCta) ? (React.createElement(SwiperSlide, { className: css({
                 width: '50px',
                 height: '50px',
                 marginRight: '10px'
-            }), onClick: () => handleClick(index), key: index },
+            }), onClick: () => {
+                handleClick(item, index);
+            }, key: index },
             React.createElement(FormatImage, { style: {
                     height: '100%',
                     width: '100%',
                     objectFit: 'cover',
                     display: 'block',
-                    objectPosition: `50% ${(data === null || data === void 0 ? void 0 : data.translateY) ? -(data === null || data === void 0 ? void 0 : data.translateY) + 50 : 50}%`,
-                    border: check === index ? '1px solid #000' : '1px solid #f2f2f2'
-                }, src: (_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 : defImg })));
+                    objectPosition: `50% ${(data === null || data === void 0 ? void 0 : data.translateY) ? (data === null || data === void 0 ? void 0 : data.translateY) + 50 : 50}%`,
+                    border: check === index ? '1px solid #000' : '1px solid #f2f2f2',
+                    boxSizing: 'border-box'
+                }, src: (_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 : defImg }))) : null));
     })))));
 };
 export default memo(CommodityGroup);

package/es/materials/sxp/template/components/Img.d.ts

@@ -8,6 +8,7 @@ export interface IImgProps {
     style?: CSSProperties;
     translateY?: number;
     imgStyle?: CSSProperties;
+    enableEventReport?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IImgProps>;
 export default _default;

package/es/materials/sxp/template/components/Img.js

@@ -3,18 +3,18 @@ import React, { memo, useEffect, useMemo, useRef } from 'react';
 import useOnScreen from '../../../../core/hooks/useOnScreen';
 import { useSxpDataSource } from '../../../../core/hooks';
 import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
-const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
+const Img = ({ src, rec, item, index, style, translateY, imgStyle, enableEventReport = true }) => {
     const ref = useRef(null);
     const isOnScreen = useOnScreen(ref);
     const { ctaEvent } = useSxpDataSource();
     useEffect(() => {
-        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current)) {
+        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current) && enableEventReport) {
             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]);
+    }, [isOnScreen, src, ref, rec, ctaEvent, item, index, enableEventReport]);
     const imgSrc = useMemo(() => {
         return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/20`;
     }, [src]);

package/es/materials/sxp/template/components/Scroll.d.ts

@@ -6,6 +6,7 @@ interface IScrollProps {
     children: any;
     isPadding?: boolean;
     style?: CSSProperties;
+    enableSlideActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IScrollProps>;
 export default _default;

package/es/materials/sxp/template/components/Scroll.js

@@ -5,13 +5,14 @@ import 'swiper/css/free-mode';
 import 'swiper/css/scrollbar';
 import { FreeMode, Scrollbar, Mousewheel } from 'swiper/modules';
 import { useSxpDataSource } from '../../../../core/hooks';
-const Scroll = ({ children, isPadding = true, style }) => {
+const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }) => {
     const ref = useRef();
     const { popupDetailData } = useSxpDataSource();
     useEffect(() => {
-        var _a;
-        (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex);
-    }, [popupDetailData]);
+        var _a, _b;
+        if (enableSlideActive)
+            (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
+    }, [popupDetailData, enableSlideActive]);
     return (React.createElement(Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [FreeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
 };
 export default memo(Scroll);

package/lib/core/components/SxpPageRender/LikeButton/index.js

@@ -8,50 +8,69 @@ const hooks_1 = require("../../../../core/hooks");
 const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
 const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
 const LikeButton = (_a) => {
+    var _b;
     var { active, activeIcon, unActicveIcon, recData, position } = _a, props = tslib_1.__rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
-    const { mutateLike, mutateUnlike, bffEventReport } = (0, hooks_1.useSxpDataSource)();
-    const [state, setState] = (0, react_1.useState)(active);
+    const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = (0, hooks_1.useSxpDataSource)();
+    const [state, setState] = (0, react_1.useState)((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
     const likeIcon = (0, useIconLink_1.useIconLink)(defaultLikeIconPath);
     const unlikeIcon = (0, useIconLink_1.useIconLink)(defaultUnLikeIconPath);
     const handleClick = (0, lodash_1.debounce)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
         if (state) {
             setState(false);
-            const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
+            const result = (_e = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '' })))) !== null && _e !== void 0 ? _e : false;
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'favoriteContentCanceled',
                     eventDescription: 'This content was unfavorite by the user',
-                    contentId: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
-                    contentName: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
-                    contentTags: JSON.stringify((_k = (_j = recData === null || recData === void 0 ? void 0 : recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
+                    contentId: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
+                    contentName: (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '',
+                    contentTags: JSON.stringify((_l = (_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.tags) !== null && _l !== void 0 ? _l : []),
                     position: position + '',
-                    contentFormat: ((_l = recData === null || recData === void 0 ? void 0 : recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
-                    traceInfo: (_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
+                    contentFormat: ((_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.url) ? 'video' : 'image',
+                    traceInfo: (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.traceInfo
                 }
             });
             if (!result) {
                 setState(true);
             }
+            else {
+                const nRtcList = (_p = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
+                    if (index === position) {
+                        item.isCollected = false;
+                    }
+                    return item;
+                })) !== null && _p !== void 0 ? _p : [];
+                setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
+            }
         }
         else {
             setState(true);
-            const result = (_o = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _o !== void 0 ? _o : false;
+            const result = (_q = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _q !== void 0 ? _q : false;
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'favoriteContent',
                     eventDescription: 'This content was favorite by the user',
-                    contentId: (_q = (_p = recData === null || recData === void 0 ? void 0 : recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
-                    contentName: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
-                    contentTags: JSON.stringify((_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
+                    contentId: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
+                    contentName: (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.title) !== null && _u !== void 0 ? _u : '',
+                    contentTags: JSON.stringify((_w = (_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.tags) !== null && _w !== void 0 ? _w : []),
                     position: position + '',
-                    contentFormat: ((_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
-                    traceInfo: (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
+                    contentFormat: ((_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.url) ? 'video' : 'image',
+                    traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
                 }
             });
             if (!result) {
                 setState(false);
             }
+            else {
+                const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
+                    if (index === position) {
+                        item.isCollected = true;
+                    }
+                    return item;
+                })) !== null && _z !== void 0 ? _z : [];
+                setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
+            }
         }
     }), 200);
     return (react_1.default.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),