pb-sxp-ui 1.0.47 → 1.0.49

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 (28) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +111 -111
  3. package/dist/index.cjs +119 -120
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +2 -0
  6. package/dist/index.js +119 -120
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.min.cjs +3 -3
  9. package/dist/index.min.cjs.map +1 -1
  10. package/dist/index.min.js +3 -3
  11. package/dist/index.min.js.map +1 -1
  12. package/dist/pb-ui.js +119 -120
  13. package/dist/pb-ui.js.map +1 -1
  14. package/dist/pb-ui.min.js +3 -3
  15. package/dist/pb-ui.min.js.map +1 -1
  16. package/es/core/components/SxpPageRender/VideoWidget/index.js +55 -56
  17. package/es/core/components/SxpPageRender/WaterFall/List.js +8 -7
  18. package/es/core/components/SxpPageRender/index.js +0 -2
  19. package/es/core/context/SxpDataSourceProvider.js +10 -10
  20. package/es/materials/sxp/popup/CommodityDetail/index.js +4 -4
  21. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  22. package/lib/core/components/SxpPageRender/VideoWidget/index.js +55 -56
  23. package/lib/core/components/SxpPageRender/WaterFall/List.js +8 -7
  24. package/lib/core/components/SxpPageRender/index.js +0 -2
  25. package/lib/core/context/SxpDataSourceProvider.js +10 -10
  26. package/lib/materials/sxp/popup/CommodityDetail/index.js +4 -4
  27. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  28. package/package.json +115 -115
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -15,6 +15,33 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
15
15
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
16
16
  const videoId = `pb-cache-video-${index}`;
17
17
  const videoEleRef = useRef(null);
18
+ const blur = useMemo(() => {
19
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
20
+ }, [videoPostConfig]);
21
+ const translateY = useMemo(() => {
22
+ var _a;
23
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
24
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
25
+ : 'translateY(-50%)';
26
+ }, [videoPostConfig]);
27
+ const blurBgSrc = useMemo(() => {
28
+ var _a;
29
+ return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
30
+ }, [firstFrameSrc, rec]);
31
+ const blurStyle = useMemo(() => {
32
+ return blur
33
+ ? {
34
+ filter: 'blur(10px)',
35
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
36
+ }
37
+ : {};
38
+ }, [blur]);
39
+ const isBgColor = useMemo(() => {
40
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
41
+ }, [videoPostConfig]);
42
+ const bgStyle = useMemo(() => {
43
+ return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
44
+ }, [videoPostConfig, isBgColor]);
18
45
  useEffect(() => {
19
46
  if (!videoRef)
20
47
  return;
@@ -55,15 +82,36 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
55
82
  setIsFirstPlay(false);
56
83
  }
57
84
  }, [bffEventReport, data, index, isFirstPlay, videoRef]);
85
+ const handLoadeddata = useCallback(() => {
86
+ var _a;
87
+ if (!videoRef || isBgColor || firstFrameSrc || !blur)
88
+ return;
89
+ const videoDomRef = document.getElementById('player-container-id_html5_api');
90
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
91
+ return;
92
+ const setFrameImg = () => {
93
+ videoDomRef.style.objectFit = 'contain';
94
+ const video = videoDomRef;
95
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
96
+ const ctx = canvas.getContext('2d');
97
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
98
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
99
+ canvas.height = targetHeight;
100
+ canvas.width = targetWidth;
101
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
102
+ setFirstFrameSrc(canvas.toDataURL());
103
+ };
104
+ setFrameImg();
105
+ setTimeout(() => {
106
+ setFrameImg();
107
+ }, 500);
108
+ }, [videoRef, isBgColor, rec, firstFrameSrc, blur]);
58
109
  const handleLoadedmetadata = useCallback(() => {
59
110
  if (!videoRef)
60
111
  return;
61
- if (activeIndex !== index) {
62
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
63
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
64
- }
112
+ handLoadeddata();
65
113
  setIsLoadFinish(true);
66
- }, [activeIndex, index, videoRef]);
114
+ }, [videoRef, handLoadeddata]);
67
115
  const handleCanplay = useCallback(() => {
68
116
  setIsLoadFinish(true);
69
117
  }, []);
@@ -124,57 +172,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
124
172
  }
125
173
  });
126
174
  }
127
- }, [data, index, bffEventReport, videoRef]);
128
- const blur = useMemo(() => {
129
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
130
- }, [videoPostConfig]);
131
- const translateY = useMemo(() => {
132
- var _a;
133
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
134
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
135
- : 'translateY(-50%)';
136
- }, [videoPostConfig]);
137
- const blurBgSrc = useMemo(() => {
138
- var _a;
139
- return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
140
- }, [firstFrameSrc, rec]);
141
- const blurStyle = useMemo(() => {
142
- return blur
143
- ? {
144
- filter: 'blur(10px)',
145
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
146
- }
147
- : {};
148
- }, [blur]);
149
- const isBgColor = useMemo(() => {
150
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
151
- }, [videoPostConfig]);
152
- const bgStyle = useMemo(() => {
153
- return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
154
- }, [videoPostConfig, isBgColor]);
155
- const handLoadeddata = useCallback(() => {
156
- var _a;
157
- if (!videoRef || isBgColor)
158
- return;
159
- const videoDomRef = document.getElementById('player-container-id_html5_api');
160
- if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
161
- return;
162
- const setFrameImg = () => {
163
- const video = videoDomRef;
164
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
165
- const ctx = canvas.getContext('2d');
166
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
167
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
168
- canvas.height = targetHeight;
169
- canvas.width = targetWidth;
170
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
171
- setFirstFrameSrc(canvas.toDataURL());
172
- };
173
- setFrameImg();
174
- setTimeout(() => {
175
- setFrameImg();
176
- }, 500);
177
- }, [videoRef, isBgColor, rec]);
175
+ }, [data, index, bffEventReport, videoRef, activeIndex]);
178
176
  useEffect(() => {
179
177
  if (!isActive || !videoRef)
180
178
  return;
@@ -188,6 +186,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
188
186
  if (!dom && !dom2)
189
187
  return;
190
188
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
189
+ videoRef.poster('https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240218/fsTan2fgYKJWrCpJtGZPogm0NnvdT1708239153661.jpeg');
191
190
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
192
191
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
193
192
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
package/es/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -117,7 +117,7 @@ const WaterfallFlowItem = (props) => {
117
117
  React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
118
118
  };
119
119
  export default function WaterfallList(_a) {
120
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
120
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
121
121
  var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
122
122
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
123
123
  const [list, setList] = useState();
@@ -148,7 +148,8 @@ export default function WaterfallList(_a) {
148
148
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
149
149
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
150
150
  'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
151
- defaultSize: hashTagSize
151
+ defaultSize: hashTagSize,
152
+ maxSize: hashTagSize
152
153
  }).then((res) => {
153
154
  var _a, _b;
154
155
  setData(res);
@@ -178,10 +179,10 @@ export default function WaterfallList(_a) {
178
179
  return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
179
180
  })),
180
181
  React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
181
- React.createElement("div", { style: {
182
- height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
182
+ React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
183
+ height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.height) || '100px' : 0
183
184
  } })),
184
- React.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
185
- React.createElement("div", { className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
186
- React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
185
+ React.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
186
+ React.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
187
+ React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
187
188
  }
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -21,7 +21,6 @@ import './index.less';
21
21
  import { useEventReport } from '../../../core/hooks/useEventReport';
22
22
  import withBindDataSource from '../../../core/hoc/withBindDataSource';
23
23
  import { getFeUserId } from '../../../core/utils/localStore';
24
- import Tagbar from './Tagbar';
25
24
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
26
25
  var _a, _b, _c, _d, _e, _f, _g;
27
26
  const { schema } = useEditor();
@@ -389,7 +388,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
389
388
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
390
389
  } })),
391
390
  renderLogo,
392
- React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
393
391
  isShowFingerTip ? React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
394
392
  React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
395
393
  swiperRef.current.swiper.allowTouchMove = false;
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -57,20 +57,20 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
57
57
  .catch((err) => Promise.reject(err));
58
58
  }, [bffDataSource]);
59
59
  const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
60
- var _a, _b, _c, _d;
60
+ var _a, _b, _c, _d, _e;
61
61
  query = {
62
- maxSize,
63
- defaultSize: (_a = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _a !== void 0 ? _a : defaultSize,
62
+ maxSize: (_a = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _a !== void 0 ? _a : maxSize,
63
+ defaultSize: (_b = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _b !== void 0 ? _b : defaultSize,
64
64
  'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
65
65
  'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
66
66
  hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
67
67
  traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo
68
68
  };
69
69
  if (utmVal) {
70
- const val = (_d = (_c = (_b = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _b === void 0 ? void 0 : _b.filter((val) => {
70
+ const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
71
71
  const key = val.split('=')[0];
72
72
  return UTM_KEYS.includes(key);
73
- })) === null || _c === void 0 ? void 0 : _c.join('&')) !== null && _d !== void 0 ? _d : '';
73
+ })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
74
74
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
75
75
  }
76
76
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -82,7 +82,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
82
82
  return result === null || result === void 0 ? void 0 : result.data;
83
83
  }), [bffFetch, utmVal, maxSize, defaultSize]);
84
84
  const loadVideos = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
85
- var _e, _f;
85
+ var _f, _g;
86
86
  if (rtcList.length <= 0) {
87
87
  return;
88
88
  }
@@ -91,8 +91,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
91
91
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
92
92
  'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
93
93
  });
94
- setRtcList(rtcList.concat((_e = data === null || data === void 0 ? void 0 : data.recList) !== null && _e !== void 0 ? _e : []));
95
- setCacheRtcList(cacheRtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
94
+ setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
95
+ setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
96
96
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
97
97
  const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
98
98
  if (!enableReportEvent) {
@@ -130,12 +130,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
130
130
  return res === null || res === void 0 ? void 0 : res.success;
131
131
  }), [bffFetch]);
132
132
  const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
133
- var _g, _h;
133
+ var _h, _j;
134
134
  if (!utmVal)
135
135
  return;
136
136
  try {
137
137
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: utmVal } }));
138
- setTagList((_h = (_g = result === null || result === void 0 ? void 0 : result.data) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []);
138
+ setTagList((_j = (_h = result === null || result === void 0 ? void 0 : result.data) === null || _h === void 0 ? void 0 : _h.tags) !== null && _j !== void 0 ? _j : []);
139
139
  }
140
140
  catch (e) {
141
141
  console.log('e', e);
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -59,10 +59,10 @@ const CommodityDetail = (_a) => {
59
59
  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'),
60
60
  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),
61
61
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
62
- 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
63
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
62
+ 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
63
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
66
66
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
67
67
  };
68
68
  const renderBtn = () => {
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -84,7 +84,7 @@ const CommodityDetailDiroNew = (_a) => {
84
84
  const productInfoText = ({ isPost }) => {
85
85
  return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
86
86
  React.createElement(ExpandableText, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
87
- `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
87
+ `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
88
88
  Made in Italy` })));
89
89
  };
90
90
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -18,6 +18,33 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
18
18
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
19
19
  const videoId = `pb-cache-video-${index}`;
20
20
  const videoEleRef = (0, react_1.useRef)(null);
21
+ const blur = (0, react_1.useMemo)(() => {
22
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
23
+ }, [videoPostConfig]);
24
+ const translateY = (0, react_1.useMemo)(() => {
25
+ var _a;
26
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
27
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
28
+ : 'translateY(-50%)';
29
+ }, [videoPostConfig]);
30
+ const blurBgSrc = (0, react_1.useMemo)(() => {
31
+ var _a;
32
+ return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
33
+ }, [firstFrameSrc, rec]);
34
+ const blurStyle = (0, react_1.useMemo)(() => {
35
+ return blur
36
+ ? {
37
+ filter: 'blur(10px)',
38
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
39
+ }
40
+ : {};
41
+ }, [blur]);
42
+ const isBgColor = (0, react_1.useMemo)(() => {
43
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
44
+ }, [videoPostConfig]);
45
+ const bgStyle = (0, react_1.useMemo)(() => {
46
+ return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
47
+ }, [videoPostConfig, isBgColor]);
21
48
  (0, react_1.useEffect)(() => {
22
49
  if (!videoRef)
23
50
  return;
@@ -58,15 +85,36 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
58
85
  setIsFirstPlay(false);
59
86
  }
60
87
  }, [bffEventReport, data, index, isFirstPlay, videoRef]);
88
+ const handLoadeddata = (0, react_1.useCallback)(() => {
89
+ var _a;
90
+ if (!videoRef || isBgColor || firstFrameSrc || !blur)
91
+ return;
92
+ const videoDomRef = document.getElementById('player-container-id_html5_api');
93
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
94
+ return;
95
+ const setFrameImg = () => {
96
+ videoDomRef.style.objectFit = 'contain';
97
+ const video = videoDomRef;
98
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
99
+ const ctx = canvas.getContext('2d');
100
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
101
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
102
+ canvas.height = targetHeight;
103
+ canvas.width = targetWidth;
104
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
105
+ setFirstFrameSrc(canvas.toDataURL());
106
+ };
107
+ setFrameImg();
108
+ setTimeout(() => {
109
+ setFrameImg();
110
+ }, 500);
111
+ }, [videoRef, isBgColor, rec, firstFrameSrc, blur]);
61
112
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
62
113
  if (!videoRef)
63
114
  return;
64
- if (activeIndex !== index) {
65
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
66
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
67
- }
115
+ handLoadeddata();
68
116
  setIsLoadFinish(true);
69
- }, [activeIndex, index, videoRef]);
117
+ }, [videoRef, handLoadeddata]);
70
118
  const handleCanplay = (0, react_1.useCallback)(() => {
71
119
  setIsLoadFinish(true);
72
120
  }, []);
@@ -127,57 +175,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
127
175
  }
128
176
  });
129
177
  }
130
- }, [data, index, bffEventReport, videoRef]);
131
- const blur = (0, react_1.useMemo)(() => {
132
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
133
- }, [videoPostConfig]);
134
- const translateY = (0, react_1.useMemo)(() => {
135
- var _a;
136
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
137
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
138
- : 'translateY(-50%)';
139
- }, [videoPostConfig]);
140
- const blurBgSrc = (0, react_1.useMemo)(() => {
141
- var _a;
142
- return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
143
- }, [firstFrameSrc, rec]);
144
- const blurStyle = (0, react_1.useMemo)(() => {
145
- return blur
146
- ? {
147
- filter: 'blur(10px)',
148
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
149
- }
150
- : {};
151
- }, [blur]);
152
- const isBgColor = (0, react_1.useMemo)(() => {
153
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
154
- }, [videoPostConfig]);
155
- const bgStyle = (0, react_1.useMemo)(() => {
156
- return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
157
- }, [videoPostConfig, isBgColor]);
158
- const handLoadeddata = (0, react_1.useCallback)(() => {
159
- var _a;
160
- if (!videoRef || isBgColor)
161
- return;
162
- const videoDomRef = document.getElementById('player-container-id_html5_api');
163
- if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
164
- return;
165
- const setFrameImg = () => {
166
- const video = videoDomRef;
167
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
168
- const ctx = canvas.getContext('2d');
169
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
170
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
171
- canvas.height = targetHeight;
172
- canvas.width = targetWidth;
173
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
174
- setFirstFrameSrc(canvas.toDataURL());
175
- };
176
- setFrameImg();
177
- setTimeout(() => {
178
- setFrameImg();
179
- }, 500);
180
- }, [videoRef, isBgColor, rec]);
178
+ }, [data, index, bffEventReport, videoRef, activeIndex]);
181
179
  (0, react_1.useEffect)(() => {
182
180
  if (!isActive || !videoRef)
183
181
  return;
@@ -191,6 +189,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
191
189
  if (!dom && !dom2)
192
190
  return;
193
191
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
192
+ videoRef.poster('https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240218/fsTan2fgYKJWrCpJtGZPogm0NnvdT1708239153661.jpeg');
194
193
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
195
194
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
196
195
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
package/lib/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -119,7 +119,7 @@ const WaterfallFlowItem = (props) => {
119
119
  react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
120
120
  };
121
121
  function WaterfallList(_a) {
122
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
122
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
123
123
  var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
124
124
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
125
125
  const [list, setList] = (0, react_1.useState)();
@@ -150,7 +150,8 @@ function WaterfallList(_a) {
150
150
  hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
151
151
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
152
152
  'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
153
- defaultSize: hashTagSize
153
+ defaultSize: hashTagSize,
154
+ maxSize: hashTagSize
154
155
  }).then((res) => {
155
156
  var _a, _b;
156
157
  setData(res);
@@ -180,11 +181,11 @@ function WaterfallList(_a) {
180
181
  return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
181
182
  })),
182
183
  react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
183
- react_1.default.createElement("div", { style: {
184
- height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
184
+ react_1.default.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
185
+ height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.height) || '100px' : 0
185
186
  } })),
186
- react_1.default.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
187
- react_1.default.createElement("div", { className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
188
- react_1.default.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
187
+ react_1.default.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
188
+ react_1.default.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
189
+ react_1.default.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
189
190
  }
190
191
  exports.default = WaterfallList;
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -24,7 +24,6 @@ require("./index.less");
24
24
  const useEventReport_1 = require("../../../core/hooks/useEventReport");
25
25
  const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
26
26
  const localStore_1 = require("../../../core/utils/localStore");
27
- const Tagbar_1 = tslib_1.__importDefault(require("./Tagbar"));
28
27
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
29
28
  var _a, _b, _c, _d, _e, _f, _g;
30
29
  const { schema } = (0, hooks_1.useEditor)();
@@ -392,7 +391,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
392
391
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
393
392
  } })),
394
393
  renderLogo,
395
- react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
396
394
  isShowFingerTip ? react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
397
395
  react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onSlideChange: () => {
398
396
  swiperRef.current.swiper.allowTouchMove = false;
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -60,20 +60,20 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
60
60
  .catch((err) => Promise.reject(err));
61
61
  }, [bffDataSource]);
62
62
  const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
63
- var _a, _b, _c, _d;
63
+ var _a, _b, _c, _d, _e;
64
64
  query = {
65
- maxSize,
66
- defaultSize: (_a = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _a !== void 0 ? _a : defaultSize,
65
+ maxSize: (_a = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _a !== void 0 ? _a : maxSize,
66
+ defaultSize: (_b = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _b !== void 0 ? _b : defaultSize,
67
67
  'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
68
68
  'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
69
69
  hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
70
70
  traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo
71
71
  };
72
72
  if (utmVal) {
73
- const val = (_d = (_c = (_b = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _b === void 0 ? void 0 : _b.filter((val) => {
73
+ const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
74
74
  const key = val.split('=')[0];
75
75
  return UTM_KEYS.includes(key);
76
- })) === null || _c === void 0 ? void 0 : _c.join('&')) !== null && _d !== void 0 ? _d : '';
76
+ })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
77
77
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
78
78
  }
79
79
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -85,7 +85,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
85
85
  return result === null || result === void 0 ? void 0 : result.data;
86
86
  }), [bffFetch, utmVal, maxSize, defaultSize]);
87
87
  const loadVideos = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
88
- var _e, _f;
88
+ var _f, _g;
89
89
  if (rtcList.length <= 0) {
90
90
  return;
91
91
  }
@@ -94,8 +94,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
94
94
  'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
95
95
  'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
96
96
  });
97
- setRtcList(rtcList.concat((_e = data === null || data === void 0 ? void 0 : data.recList) !== null && _e !== void 0 ? _e : []));
98
- setCacheRtcList(cacheRtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
97
+ setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
98
+ setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
99
99
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
100
100
  const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
101
101
  if (!enableReportEvent) {
@@ -133,12 +133,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
133
133
  return res === null || res === void 0 ? void 0 : res.success;
134
134
  }), [bffFetch]);
135
135
  const bffGetTagList = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
136
- var _g, _h;
136
+ var _h, _j;
137
137
  if (!utmVal)
138
138
  return;
139
139
  try {
140
140
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: utmVal } }));
141
- setTagList((_h = (_g = result === null || result === void 0 ? void 0 : result.data) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []);
141
+ setTagList((_j = (_h = result === null || result === void 0 ? void 0 : result.data) === null || _h === void 0 ? void 0 : _h.tags) !== null && _j !== void 0 ? _j : []);
142
142
  }
143
143
  catch (e) {
144
144
  console.log('e', e);
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -61,10 +61,10 @@ const CommodityDetail = (_a) => {
61
61
  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'),
62
62
  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),
63
63
  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) === '') },
64
- 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
65
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
66
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
67
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
64
+ 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
65
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
66
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
67
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
68
68
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
69
69
  };
70
70
  const renderBtn = () => {
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -86,7 +86,7 @@ const CommodityDetailDiroNew = (_a) => {
86
86
  const productInfoText = ({ isPost }) => {
87
87
  return (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) === '') },
88
88
  react_1.default.createElement(ExpandableText_1.default, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
89
- `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
89
+ `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
90
90
  Made in Italy` })));
91
91
  };
92
92
  return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },