pb-sxp-ui 1.2.0 → 1.2.1

package/dist/index.cjs

@@ -553,7 +553,6 @@ var DataSourceType;
 (function (DataSourceType) {
     DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
 })(DataSourceType || (DataSourceType = {}));
-const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
 const DEFAULT_TAG = 'FOR U';
 const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
     var _a, _b, _c;
@@ -637,7 +636,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
                 var _a, _b;
                 const key = val.split('=')[0];
-                return (_b = ((_a = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.channels) !== null && _a !== void 0 ? _a : UTM_KEYS)) === null || _b === void 0 ? void 0 : _b.includes(key);
+                return (_b = ((_a = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
             })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
@@ -732,7 +731,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
                 var _a, _b;
                 const key = val.split('=')[0];
-                return (_b = ((_a = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.channels) !== null && _a !== void 0 ? _a : UTM_KEYS)) === null || _b === void 0 ? void 0 : _b.includes(key);
+                return (_b = ((_a = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
             })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
             setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
@@ -10163,7 +10162,6 @@ const CommodityList$1 = (_a) => {
     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();
-    React.useRef(null);
     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 = React.useCallback((product) => {
@@ -10183,13 +10181,14 @@ const CommodityList$1 = (_a) => {
                 display: 'flex'
             }) }),
             React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: commodityPicture }),
-            React.createElement("div", null,
-                React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
-                        __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
-                    } }),
-                React.createElement("div", { 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((_f = item === null || item === void 0 ? void 0 : item.collection) !== null && _f !== void 0 ? _f : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
-                    } }),
+            React.createElement("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } },
+                React.createElement("div", null,
+                    React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
+                            __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
+                        } }),
+                    React.createElement("div", { 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((_f = item === null || item === void 0 ? void 0 : item.collection) !== null && _f !== void 0 ? _f : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
+                        } })),
                 React.createElement("div", { className: css.css({
                         display: 'flex',
                         alignItems: 'flex-end',
@@ -10200,7 +10199,7 @@ const CommodityList$1 = (_a) => {
                     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", { style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
+                    React.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px', maxWidth: '100px' }), dangerouslySetInnerHTML: {
                             __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', buttonStyle)
                         } })))));
     })));
@@ -13933,7 +13932,7 @@ var styles$1 = {"animated-button":"index-module_animated-button__lqTbg","gradien
 const AniLink$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink"]);
-    const { ctaEvent } = useSxpDataSource();
+    const { ctaEvent, setPopupDetailData } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
     const ref = React.useRef(null);
     const isOnScreen = useOnScreen(ref);
@@ -13946,6 +13945,7 @@ const AniLink$1 = (_a) => {
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, recData, item, index);
+        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
             jumpToWeb(recData, product, cta, index);
         }
@@ -14346,7 +14346,7 @@ const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAB
 const AniLinkPopup$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink"]);
-    const { sxpParameter, globalConfig, ctaEvent } = useSxpDataSource();
+    const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
     const [visible, setVisible] = React.useState(true);
     const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
@@ -14358,6 +14358,7 @@ const AniLinkPopup$1 = (_a) => {
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, recData, item, index);
+        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
             jumpToWeb(recData, product, cta, index);
         }
@@ -14387,7 +14388,7 @@ const AniLinkPopup$1 = (_a) => {
             height: '40px',
             lineHeight: '40px',
             paddingLeft: '6px'
-        } }, "Cta Title")) : (React.createElement("div", Object.assign({ style: Object.assign(Object.assign({}, style), { position: 'fixed', right: 0, bottom: 0, zIndex: 1000, display: visible ? 'block' : 'none' }) }, props, { className: `${styles['animated-button']} ${css.css(aniStyle)}`, onClick: handleTo }),
+        } }, "Cta Title")) : (React.createElement("div", Object.assign({ style: Object.assign(Object.assign({}, style), { position: 'absolute', right: 0, bottom: 0, zIndex: 1000, display: visible ? 'block' : 'none' }) }, props, { className: `${styles['animated-button']} ${css.css(aniStyle)}`, onClick: handleTo }),
         React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_r = style === null || style === void 0 ? void 0 : style['padding']) !== null && _r !== void 0 ? _r : 0 } },
             React.createElement("img", { src: (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _s !== void 0 ? _s : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
         React.createElement(Img$1, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),