pb-sxp-ui 1.0.73 → 1.0.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/index.cjs +54 -36
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +11 -7
  4. package/dist/index.js +54 -36
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +54 -36
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/index.js +22 -16
  15. package/es/materials/sxp/popup/CommodityDetail/index.js +10 -4
  16. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +11 -5
  17. package/es/materials/sxp/template/Commodity/index.js +4 -4
  18. package/es/materials/sxp/template/CommodityDiro/index.js +4 -4
  19. package/es/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  20. package/lib/core/components/SxpPageRender/index.js +22 -16
  21. package/lib/materials/sxp/popup/CommodityDetail/index.js +9 -3
  22. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +10 -4
  23. package/lib/materials/sxp/template/Commodity/index.js +4 -4
  24. package/lib/materials/sxp/template/CommodityDiro/index.js +4 -4
  25. package/lib/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  26. package/package.json +1 -1
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -122,7 +122,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
122
122
  useEffect(() => {
123
123
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
124
124
  const visibleChange = () => {
125
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
125
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
126
126
  if (document.visibilityState === 'hidden') {
127
127
  SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
128
128
  handleReportViewImageEnd(item);
@@ -131,16 +131,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
131
131
  if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
132
132
  fromKName = 'pdpPage';
133
133
  }
134
- else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
134
+ else if (popupDetailData && ((_g = tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item) === null || _g === void 0 ? void 0 : _g.type) === 'Appoint') {
135
135
  fromKName = 'formPage';
136
136
  }
137
137
  else if (isFromHashtag) {
138
138
  fromKName = 'hashTagPage';
139
139
  }
140
- else if ((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url) {
140
+ else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
141
141
  fromKName = 'videoPage';
142
142
  }
143
- else if (((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.imgUrls) && ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) === null || _k === void 0 ? void 0 : _k.length)) {
143
+ else if (((_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) && ((_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.imgUrls) === null || _l === void 0 ? void 0 : _l.length)) {
144
144
  fromKName = 'imagePage';
145
145
  }
146
146
  else if (item === null || item === void 0 ? void 0 : item.product) {
@@ -151,12 +151,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
151
151
  sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
152
152
  eventSubject: 'sessionCompleted',
153
153
  eventDescription: 'Session completed',
154
- contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
155
- productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
154
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
155
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
156
156
  position: activeIndex + '',
157
157
  fromKName,
158
158
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
159
- ctatId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
159
+ ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : ''
160
160
  }
161
161
  });
162
162
  }
@@ -171,19 +171,23 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
171
171
  document.removeEventListener('visibilitychange', visibleChange);
172
172
  };
173
173
  }, [activeIndex, bffEventReport, curTime, data, handleH5EnterLink, popupDetailData, isFromHashtag, tempMap]);
174
+ const tagHeight = useMemo(() => {
175
+ let h = 0;
176
+ if (tagList.length > 0) {
177
+ h += 45;
178
+ if (waterFallData) {
179
+ h -= 45;
180
+ }
181
+ }
182
+ return h;
183
+ }, [tagList, waterFallData]);
174
184
  const height = useMemo(() => {
175
185
  let minusHeight = 0;
176
186
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
177
187
  minusHeight += 45;
178
188
  }
179
- if (tagList.length > 0) {
180
- minusHeight += 45;
181
- if (waterFallData) {
182
- minusHeight -= 45;
183
- }
184
- }
185
- return containerHeight - minusHeight;
186
- }, [globalConfig, containerHeight, tagList, waterFallData]);
189
+ return containerHeight - minusHeight - tagHeight;
190
+ }, [globalConfig, containerHeight, tagHeight]);
187
191
  const renderLogo = useMemo(() => {
188
192
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
189
193
  return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
@@ -412,7 +416,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
412
416
  renderLogo,
413
417
  React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
414
418
  isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
415
- React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
419
+ React.createElement(Swiper, { style: {
420
+ marginTop: tagHeight
421
+ }, ref: swiperRef, onSlideChange: () => {
416
422
  swiperRef.current.swiper.allowTouchMove = false;
417
423
  setTimeout(() => {
418
424
  swiperRef.current.swiper.allowTouchMove = true;
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
- import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
3
+ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
4
  import { useSxpDataSource } from '../../../../core/hooks';
5
5
  import './index.less';
6
6
  import { Autoplay, Pagination } from 'swiper/modules';
@@ -62,9 +62,9 @@ const CommodityDetail = (_a) => {
62
62
  const renderContent = ({ isPost }) => {
63
63
  var _a, _b, _c;
64
64
  return (React.createElement("div", null,
65
- React.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
66
- React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
67
- React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
65
+ React.createElement("div", { className: 'pb-commondity-content-collection', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
66
+ React.createElement("div", { className: 'pb-commondity-content-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
67
+ React.createElement("div", { className: 'pb-commondity-content-price', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
68
68
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
69
69
  React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
70
70
  bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
@@ -76,6 +76,12 @@ const CommodityDetail = (_a) => {
76
76
  var _a;
77
77
  return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website'))));
78
78
  };
79
+ const getStyle = useCallback((style) => {
80
+ if (style === null || style === void 0 ? void 0 : style.lineClamp) {
81
+ return Object.assign(Object.assign({}, style), { overflow: 'hidden', WebkitLineClamp: style === null || style === void 0 ? void 0 : style.lineClamp, textOverflow: 'ellipsis', display: '-webkit-box', webkitBoxOrient: 'vertical' });
82
+ }
83
+ return style;
84
+ }, []);
79
85
  return (React.createElement("div", { className: 'pb-commondity' },
80
86
  React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
81
87
  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: {
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
- import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
3
+ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
4
  import { useSxpDataSource } from '../../../../core/hooks';
5
5
  import './index.less';
6
6
  import { Autoplay, Pagination } from 'swiper/modules';
@@ -94,6 +94,12 @@ const CommodityDetailDiroNew = (_a) => {
94
94
  `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
95
95
  Made in Italy` })));
96
96
  };
97
+ const getStyle = useCallback((style) => {
98
+ if (style === null || style === void 0 ? void 0 : style.lineClamp) {
99
+ return Object.assign(Object.assign({}, style), { overflow: 'hidden', WebkitLineClamp: style === null || style === void 0 ? void 0 : style.lineClamp, textOverflow: 'ellipsis', display: '-webkit-box', webkitBoxOrient: 'vertical' });
100
+ }
101
+ return style;
102
+ }, []);
97
103
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
98
104
  React.createElement("div", Object.assign({ ref: scrollRef, className: css(Object.assign({}, style)) }, props),
99
105
  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: {
@@ -136,11 +142,11 @@ Made in Italy` })));
136
142
  React.createElement("div", { className: 'pb-commondityDiroNew-content' },
137
143
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
138
144
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
139
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours Bag'),
140
- React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
145
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title) }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours BagLarge'),
146
+ 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) }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge')),
141
147
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
142
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
143
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
148
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) }, priceText),
149
+ 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) }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
144
150
  (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
145
151
  productInfoText({ isPost }))),
146
152
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
package/es/materials/sxp/template/Commodity/index.js CHANGED
@@ -6,11 +6,11 @@ import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
8
8
  const Commodity = (_a) => {
9
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
9
+ var _b, _c, _d, _e, _f, _g, _h, _j;
10
10
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
11
11
  const { sxpParameter } = useSxpDataSource();
12
12
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
13
- const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
13
+ const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
14
14
  return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
15
15
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
16
16
  React.createElement(FormatImage, { className: css({
@@ -28,7 +28,7 @@ const Commodity = (_a) => {
28
28
  width: '100%',
29
29
  overflow: 'hidden'
30
30
  }) },
31
- React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
32
- React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
31
+ React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
32
+ React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
33
33
  };
34
34
  export default memo(Commodity);
package/es/materials/sxp/template/CommodityDiro/index.js CHANGED
@@ -6,11 +6,11 @@ import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
8
8
  const CommodityDiro = (_a) => {
9
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
9
+ var _b, _c, _d, _e, _f, _g, _h, _j;
10
10
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
11
11
  const { sxpParameter } = useSxpDataSource();
12
12
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
13
- const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
13
+ const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
14
14
  return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
15
15
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
16
16
  React.createElement(FormatImage, { className: css({
@@ -28,7 +28,7 @@ const CommodityDiro = (_a) => {
28
28
  width: '100%',
29
29
  overflow: 'hidden'
30
30
  }) },
31
- React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
32
- React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
31
+ React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
32
+ React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
33
33
  };
34
34
  export default memo(CommodityDiro);
package/es/materials/sxp/template/CommodityDiroNew/index.js CHANGED
@@ -6,11 +6,11 @@ import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
8
8
  const CommodityDiroNew = (_a) => {
9
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
9
+ var _b, _c, _d, _e, _f, _g, _h, _j;
10
10
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
11
11
  const { sxpParameter } = useSxpDataSource();
12
12
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
13
- const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
13
+ const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
14
14
  return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
15
15
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
16
16
  React.createElement(FormatImage, { className: css({
@@ -28,7 +28,7 @@ const CommodityDiroNew = (_a) => {
28
28
  width: '100%',
29
29
  overflow: 'hidden'
30
30
  }) },
31
- React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
32
- React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop now'))));
31
+ React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
32
+ React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop now'))));
33
33
  };
34
34
  export default memo(CommodityDiroNew);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -125,7 +125,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
125
125
  (0, react_1.useEffect)(() => {
126
126
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
127
127
  const visibleChange = () => {
128
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
128
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
129
129
  if (document.visibilityState === 'hidden') {
130
130
  event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
131
131
  handleReportViewImageEnd(item);
@@ -134,16 +134,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
134
134
  if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
135
135
  fromKName = 'pdpPage';
136
136
  }
137
- else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
137
+ else if (popupDetailData && ((_g = tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item) === null || _g === void 0 ? void 0 : _g.type) === 'Appoint') {
138
138
  fromKName = 'formPage';
139
139
  }
140
140
  else if (isFromHashtag) {
141
141
  fromKName = 'hashTagPage';
142
142
  }
143
- else if ((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url) {
143
+ else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
144
144
  fromKName = 'videoPage';
145
145
  }
146
- else if (((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.imgUrls) && ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) === null || _k === void 0 ? void 0 : _k.length)) {
146
+ else if (((_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) && ((_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.imgUrls) === null || _l === void 0 ? void 0 : _l.length)) {
147
147
  fromKName = 'imagePage';
148
148
  }
149
149
  else if (item === null || item === void 0 ? void 0 : item.product) {
@@ -154,12 +154,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
154
154
  sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
155
155
  eventSubject: 'sessionCompleted',
156
156
  eventDescription: 'Session completed',
157
- contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
158
- productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
157
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
158
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
159
159
  position: activeIndex + '',
160
160
  fromKName,
161
161
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
162
- ctatId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
162
+ ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : ''
163
163
  }
164
164
  });
165
165
  }
@@ -174,19 +174,23 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
174
174
  document.removeEventListener('visibilitychange', visibleChange);
175
175
  };
176
176
  }, [activeIndex, bffEventReport, curTime, data, handleH5EnterLink, popupDetailData, isFromHashtag, tempMap]);
177
+ const tagHeight = (0, react_1.useMemo)(() => {
178
+ let h = 0;
179
+ if (tagList.length > 0) {
180
+ h += 45;
181
+ if (waterFallData) {
182
+ h -= 45;
183
+ }
184
+ }
185
+ return h;
186
+ }, [tagList, waterFallData]);
177
187
  const height = (0, react_1.useMemo)(() => {
178
188
  let minusHeight = 0;
179
189
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
180
190
  minusHeight += 45;
181
191
  }
182
- if (tagList.length > 0) {
183
- minusHeight += 45;
184
- if (waterFallData) {
185
- minusHeight -= 45;
186
- }
187
- }
188
- return containerHeight - minusHeight;
189
- }, [globalConfig, containerHeight, tagList, waterFallData]);
192
+ return containerHeight - minusHeight - tagHeight;
193
+ }, [globalConfig, containerHeight, tagHeight]);
190
194
  const renderLogo = (0, react_1.useMemo)(() => {
191
195
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
192
196
  return (react_1.default.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
@@ -415,7 +419,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
415
419
  renderLogo,
416
420
  react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
417
421
  isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
418
- react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onSlideChange: () => {
422
+ react_1.default.createElement(react_2.Swiper, { style: {
423
+ marginTop: tagHeight
424
+ }, ref: swiperRef, onSlideChange: () => {
419
425
  swiperRef.current.swiper.allowTouchMove = false;
420
426
  setTimeout(() => {
421
427
  swiperRef.current.swiper.allowTouchMove = true;
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -64,9 +64,9 @@ const CommodityDetail = (_a) => {
64
64
  const renderContent = ({ isPost }) => {
65
65
  var _a, _b, _c;
66
66
  return (react_1.default.createElement("div", null,
67
- react_1.default.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
68
- react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
69
- react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
67
+ react_1.default.createElement("div", { className: 'pb-commondity-content-collection', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
68
+ react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
69
+ react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
70
70
  react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
71
71
  react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
72
72
  bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
@@ -78,6 +78,12 @@ const CommodityDetail = (_a) => {
78
78
  var _a;
79
79
  return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website'))));
80
80
  };
81
+ const getStyle = (0, react_1.useCallback)((style) => {
82
+ if (style === null || style === void 0 ? void 0 : style.lineClamp) {
83
+ return Object.assign(Object.assign({}, style), { overflow: 'hidden', WebkitLineClamp: style === null || style === void 0 ? void 0 : style.lineClamp, textOverflow: 'ellipsis', display: '-webkit-box', webkitBoxOrient: 'vertical' });
84
+ }
85
+ return style;
86
+ }, []);
81
87
  return (react_1.default.createElement("div", { className: 'pb-commondity' },
82
88
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
83
89
  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: {
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -96,6 +96,12 @@ const CommodityDetailDiroNew = (_a) => {
96
96
  `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
97
97
  Made in Italy` })));
98
98
  };
99
+ const getStyle = (0, react_1.useCallback)((style) => {
100
+ if (style === null || style === void 0 ? void 0 : style.lineClamp) {
101
+ return Object.assign(Object.assign({}, style), { overflow: 'hidden', WebkitLineClamp: style === null || style === void 0 ? void 0 : style.lineClamp, textOverflow: 'ellipsis', display: '-webkit-box', webkitBoxOrient: 'vertical' });
102
+ }
103
+ return style;
104
+ }, []);
99
105
  return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
100
106
  react_1.default.createElement("div", Object.assign({ ref: scrollRef, className: (0, css_1.css)(Object.assign({}, style)) }, props),
101
107
  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: {
@@ -138,11 +144,11 @@ Made in Italy` })));
138
144
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
139
145
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
140
146
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
141
- react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours Bag'),
142
- 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: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
147
+ react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title) }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours BagLarge'),
148
+ 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) }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge')),
143
149
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
144
- react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
145
- react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
150
+ react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) }, priceText),
151
+ 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) }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
146
152
  (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
147
153
  productInfoText({ isPost }))),
148
154
  react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
package/lib/materials/sxp/template/Commodity/index.js CHANGED
@@ -8,11 +8,11 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
10
10
  const Commodity = (_a) => {
11
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
11
+ var _b, _c, _d, _e, _f, _g, _h, _j;
12
12
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
13
13
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
14
14
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
15
- const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
15
+ const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
16
16
  return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
17
17
  react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
18
18
  react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
@@ -30,7 +30,7 @@ const Commodity = (_a) => {
30
30
  width: '100%',
31
31
  overflow: 'hidden'
32
32
  }) },
33
- react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
34
- react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
33
+ react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
34
+ react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
35
35
  };
36
36
  exports.default = (0, react_1.memo)(Commodity);
package/lib/materials/sxp/template/CommodityDiro/index.js CHANGED
@@ -8,11 +8,11 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
10
10
  const CommodityDiro = (_a) => {
11
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
11
+ var _b, _c, _d, _e, _f, _g, _h, _j;
12
12
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
13
13
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
14
14
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
15
- const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
15
+ const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
16
16
  return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
17
17
  react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
18
18
  react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
@@ -30,7 +30,7 @@ const CommodityDiro = (_a) => {
30
30
  width: '100%',
31
31
  overflow: 'hidden'
32
32
  }) },
33
- react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
34
- react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
33
+ react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
34
+ react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
35
35
  };
36
36
  exports.default = (0, react_1.memo)(CommodityDiro);
package/lib/materials/sxp/template/CommodityDiroNew/index.js CHANGED
@@ -8,11 +8,11 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
10
10
  const CommodityDiroNew = (_a) => {
11
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
11
+ var _b, _c, _d, _e, _f, _g, _h, _j;
12
12
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
13
13
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
14
14
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
15
- const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
15
+ const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
16
16
  return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
17
17
  react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
18
18
  react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
@@ -30,7 +30,7 @@ const CommodityDiroNew = (_a) => {
30
30
  width: '100%',
31
31
  overflow: 'hidden'
32
32
  }) },
33
- react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
34
- react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop now'))));
33
+ react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
34
+ react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop now'))));
35
35
  };
36
36
  exports.default = (0, react_1.memo)(CommodityDiroNew);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.73",
3
+ "version": "1.0.75",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",