pb-sxp-ui 1.2.4 → 1.2.6

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

@@ -14,21 +14,29 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
 const tool_1 = require("../../../../core/utils/tool");
 const CommodityGroup_1 = tslib_1.__importDefault(require("../../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 = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
     const [spread, setSpread] = (0, react_1.useState)(true);
-    const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
-    const { popupDetailData, bffEventReport, isPreview, swiperRef, bffFbReport } = (0, hooks_1.useSxpDataSource)();
+    const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
     const [stopSlide, setStopSlide] = (0, react_1.useState)(false);
     const [isBottom, setIsBottom] = (0, react_1.useState)(false);
     const [isTop, setIsTop] = (0, react_1.useState)(true);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const curTimeRef = (0, react_1.useRef)(null);
+    const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.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);
@@ -66,7 +74,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);
     };
@@ -82,15 +90,20 @@ Made in Italy` })));
         }
         return style;
     }, []);
+    const handleClick = (0, react_1.useCallback)((index) => {
+        popupCurTimeRef.current = new Date();
+        setCheckCommodityIndex(index);
+        checkCommodityIndexRef.current = index;
+    }, []);
     const renderCommodityGroup = (0, react_1.useCallback)(() => {
         var _a, _b, _c;
         if (isPost)
             return;
-        return (react_1.default.createElement(CommodityGroup_1.default, { 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_1.default.createElement(CommodityGroup_1.default, { 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_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
-        react_1.default.createElement("div", Object.assign({ className: (0, css_1.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_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
+        react_1.default.createElement("div", Object.assign({ className: (0, css_1.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_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
                     clickable: true,
                     bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
                     clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -98,7 +111,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_1.default.createElement(react_2.SwiperSlide, { key: src },
                     react_1.default.createElement("div", { style: {
                             overflow: 'hidden',
@@ -111,9 +125,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_1.default.createElement("div", { className: (0, css_1.css)({
+            !((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
                     position: 'relative',
                     height: 0,
                     width: '100%',
@@ -126,13 +140,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_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                     react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
                         react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
-                                __html: (0, tool_1.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: (0, tool_1.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_1.default.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: (0, tool_1.setFontForText)((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -142,11 +156,11 @@ Made in Italy` })));
                                 __html: (0, tool_1.setFontForText)(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
                             } }),
                         react_1.default.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: (0, tool_1.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: (0, tool_1.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_1.default.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_1.default.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_1.default.createElement("span", { dangerouslySetInnerHTML: {
-                            __html: (0, tool_1.setFontForText)((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
+                            __html: (0, tool_1.setFontForText)((_1 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _1 !== void 0 ? _1 : 'Shop now', buttonStyle)
                         } }))),
                 productInfoText({ isPost }))),
         react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));

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

@@ -5,14 +5,16 @@ const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../../../core/hooks");
 require("./index.less");
+const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const tool_1 = require("../../../../core/utils/tool");
 const Img_1 = tslib_1.__importDefault(require("../../template/components/Img"));
-const EventProvider_1 = tslib_1.__importDefault(require("../../template/components/EventProvider"));
+const lodash_1 = require("lodash");
 const CommodityList = (_a) => {
     var _b, _c;
-    var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, index, translateY = 0, commodityPicture, isExternalLink } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "index", "translateY", "commodityPicture", "isExternalLink"]);
-    const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
-    const { popupDetailData, bffEventReport, isPreview, swiperRef, bffFbReport } = (0, hooks_1.useSxpDataSource)();
+    var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, index, translateY = 0, commodityPicture, isExternalLink, onClick } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "index", "translateY", "commodityPicture", "isExternalLink", "onClick"]);
+    const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent } = (0, hooks_1.useSxpDataSource)();
+    const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
+    const { popup } = (0, hooks_1.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 = (0, react_1.useCallback)((product) => {
@@ -26,25 +28,40 @@ const CommodityList = (_a) => {
             return '$7,000';
         }
     }, []);
-    return (react_1.default.createElement("div", { className: (0, css_1.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_1.default.createElement(EventProvider_1.default, Object.assign({ key: index, isExternalLink: isExternalLink, rec: recData, index: index }, props, { className: (0, css_1.css)({
+    const handleClick = (0, lodash_1.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_1.default.createElement("div", { className: (0, css_1.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_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement("div", Object.assign({ key: index }, props, { className: (0, css_1.css)({
                 display: 'flex'
-            }) }),
-            react_1.default.createElement(Img_1.default, { 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_1.default.createElement(Img_1.default, { 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_1.default.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_1.default.createElement("div", null,
                     react_1.default.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: (0, tool_1.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: (0, tool_1.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_1.default.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: (0, tool_1.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: (0, tool_1.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_1.default.createElement("div", { className: (0, css_1.css)({
                         display: 'flex',
@@ -53,12 +70,13 @@ const CommodityList = (_a) => {
                         width: '100%',
                         overflow: 'hidden'
                     }) },
-                    react_1.default.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: (0, tool_1.setFontForText)(priceText(item), commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
-                        } }),
-                    react_1.default.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px', maxWidth: '100px' }), dangerouslySetInnerHTML: {
-                            __html: (0, tool_1.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_1.default.createElement("div", null,
+                        react_1.default.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: (0, tool_1.setFontForText)(priceText(item), commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
+                            } })),
+                    react_1.default.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
+                            __html: (0, tool_1.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)
+                        } })))))));
     })));
 };
 exports.default = (0, react_1.memo)(CommodityList);

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

@@ -41,6 +41,7 @@ const CommodityList = (0, create_1.createMaterial)(_1.default, {
                 backgroundColor: '#000',
                 fontSize: 12,
                 height: 30,
+                width: 100,
                 textAlign: 'center',
                 color: '#fff',
                 lineHeight: 2.5

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

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

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

@@ -19,12 +19,12 @@ const MultiCommodity = (_a) => {
     const { popup } = (0, hooks_1.useEditor)();
     const [products, setProducts] = (0, react_1.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 } = (0, useEventReport_1.useEventReport)();
-    const handleClick = (0, lodash_1.throttle)((item) => {
+    const handleClick = (0, lodash_1.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);
@@ -37,7 +37,7 @@ const MultiCommodity = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: index, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+        return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: index, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
             react_1.default.createElement(Img_1.default, { 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_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#fff',

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

@@ -18,12 +18,12 @@ const MultiCommodityDiro = (_a) => {
     const { popup } = (0, hooks_1.useEditor)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const [products, setProducts] = (0, react_1.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 = (0, lodash_1.throttle)((item) => {
+    const handleClick = (0, lodash_1.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);
@@ -36,7 +36,7 @@ const MultiCommodityDiro = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: index, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+        return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: index, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
             react_1.default.createElement(Img_1.default, { 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_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#000',

package/lib/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/lib/materials/sxp/template/components/CommodityGroup.js

@@ -7,28 +7,35 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
 const hooks_1 = require("../../../../core/hooks");
 const react_2 = require("swiper/react");
 const css_1 = require("@emotion/css");
-const CommodityGroup = ({ products, data, defImg, style }) => {
-    var _a, _b;
-    const { setPopupDetailData, popupDetailData } = (0, hooks_1.useSxpDataSource)();
-    const [check, setCheck] = (0, react_1.useState)((_a = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _a !== void 0 ? _a : 0);
-    const handleClick = (0, react_1.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_1.default.createElement(react_1.default.Fragment, null, (data === null || data === void 0 ? void 0 : data.open) && ((products && (products === null || products === void 0 ? void 0 : products.length) > 0) || !popupDetailData) && (react_1.default.createElement(Scroll_1.default, { 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) => {
+const useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailData, check }) => {
+    var _a;
+    const { productView } = (0, useEventReport_1.useEventReport)();
+    const { popupCurTimeRef } = (0, hooks_1.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_1.default.createElement(react_1.default.Fragment, null, (data === null || data === void 0 ? void 0 : data.open) && ((products && (products === null || products === void 0 ? void 0 : products.length) > 1) || !popupDetailData) && (react_1.default.createElement(Scroll_1.default, { 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_1.default.createElement(react_2.SwiperSlide, { className: (0, css_1.css)({
+        return (react_1.default.createElement(react_1.default.Fragment, null, (item === null || item === void 0 ? void 0 : item.bindCta) ? (react_1.default.createElement(react_2.SwiperSlide, { className: (0, css_1.css)({
                 width: '50px',
                 height: '50px',
                 marginRight: '10px'
-            }), onClick: () => handleClick(index), key: index },
+            }), onClick: () => {
+                handleClick(item, index);
+            }, key: index },
             react_1.default.createElement(FormatImage_1.default, { 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));
     })))));
 };
 exports.default = (0, react_1.memo)(CommodityGroup);

package/lib/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/lib/materials/sxp/template/components/Img.js

@@ -6,18 +6,18 @@ const react_1 = tslib_1.__importStar(require("react"));
 const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
 const hooks_1 = require("../../../../core/hooks");
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../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 = (0, react_1.useRef)(null);
     const isOnScreen = (0, useOnScreen_1.default)(ref);
     const { ctaEvent } = (0, hooks_1.useSxpDataSource)();
     (0, react_1.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 = (0, react_1.useMemo)(() => {
         return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/20`;
     }, [src]);

package/lib/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/lib/materials/sxp/template/components/Scroll.js

@@ -8,13 +8,14 @@ require("swiper/css/free-mode");
 require("swiper/css/scrollbar");
 const modules_1 = require("swiper/modules");
 const hooks_1 = require("../../../../core/hooks");
-const Scroll = ({ children, isPadding = true, style }) => {
+const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }) => {
     const ref = (0, react_1.useRef)();
     const { popupDetailData } = (0, hooks_1.useSxpDataSource)();
     (0, react_1.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_1.default.createElement(react_2.Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [modules_1.FreeMode, modules_1.Scrollbar, modules_1.Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
 };
 exports.default = (0, react_1.memo)(Scroll);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",