pb-sxp-ui 1.2.5 → 1.2.7

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 (42) hide show
  1. package/dist/index.cjs +102 -58
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +10 -4
  4. package/dist/index.js +102 -58
  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 +102 -58
  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/FormatImage.js +7 -3
  15. package/es/core/components/SxpPageRender/Popup/index.js +8 -6
  16. package/es/core/components/SxpPageRender/index.js +5 -5
  17. package/es/core/context/SxpDataSourceProvider.js +26 -16
  18. package/es/core/hooks/useEventReport.js +4 -4
  19. package/es/materials/sxp/popup/CommodityDetail/index.d.ts +1 -0
  20. package/es/materials/sxp/popup/CommodityDetail/index.js +11 -6
  21. package/es/materials/sxp/popup/CommodityDetail/material.js +6 -0
  22. package/es/materials/sxp/popup/CommodityDetail/settingRender.js +4 -0
  23. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +5 -2
  24. package/es/materials/sxp/popup/CommodityList/index.d.ts +0 -1
  25. package/es/materials/sxp/popup/CommodityList/index.js +12 -11
  26. package/es/materials/sxp/template/components/CommodityGroup.d.ts +1 -1
  27. package/es/materials/sxp/template/components/CommodityGroup.js +12 -1
  28. package/lib/core/components/SxpPageRender/FormatImage.js +7 -3
  29. package/lib/core/components/SxpPageRender/Popup/index.js +8 -6
  30. package/lib/core/components/SxpPageRender/index.js +5 -5
  31. package/lib/core/context/SxpDataSourceProvider.js +26 -16
  32. package/lib/core/hooks/useEventReport.js +4 -4
  33. package/lib/materials/sxp/popup/CommodityDetail/index.d.ts +1 -0
  34. package/lib/materials/sxp/popup/CommodityDetail/index.js +10 -5
  35. package/lib/materials/sxp/popup/CommodityDetail/material.js +6 -0
  36. package/lib/materials/sxp/popup/CommodityDetail/settingRender.js +4 -0
  37. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +5 -2
  38. package/lib/materials/sxp/popup/CommodityList/index.d.ts +0 -1
  39. package/lib/materials/sxp/popup/CommodityList/index.js +12 -11
  40. package/lib/materials/sxp/template/components/CommodityGroup.d.ts +1 -1
  41. package/lib/materials/sxp/template/components/CommodityGroup.js +12 -1
  42. package/package.json +1 -1
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -81,7 +81,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
81
81
  (0, react_1.useEffect)(() => {
82
82
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
83
83
  const visibleChange = () => {
84
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
84
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
85
85
  const repCond = !openHashtag && !isShowConsent;
86
86
  if (document.visibilityState === 'hidden') {
87
87
  if (repCond) {
@@ -119,7 +119,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
119
119
  fromKName,
120
120
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
121
121
  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 : '',
122
- traceInfo: (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : ''
122
+ traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
123
123
  }
124
124
  });
125
125
  }
@@ -163,7 +163,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
163
163
  const minusHeight = (0, react_1.useMemo)(() => {
164
164
  let minusHeight = 0;
165
165
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
166
- minusHeight += 45;
166
+ minusHeight += 56;
167
167
  }
168
168
  return minusHeight;
169
169
  }, []);
@@ -289,7 +289,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
289
289
  }
290
290
  };
291
291
  const handleSlideSkip = (item, position) => {
292
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
292
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
293
293
  if (isPreview || waterFallData)
294
294
  return;
295
295
  const t = new Date() - curTime.current;
@@ -308,7 +308,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
308
308
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
309
309
  position: position + '',
310
310
  contentId: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
311
- traceInfo: (_r = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _r !== void 0 ? _r : ''
311
+ traceInfo: (_u = (_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : (_t = item === null || item === void 0 ? void 0 : item.product) === null || _t === void 0 ? void 0 : _t.traceInfo) !== null && _u !== void 0 ? _u : ''
312
312
  }
313
313
  });
314
314
  (0, localStore_1.setSlideSkipState)();
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -37,12 +37,25 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
37
37
  const themeTag = (0, react_1.useRef)();
38
38
  const curTime = (0, react_1.useRef)();
39
39
  const [selectTag, setSelectTag] = (0, react_1.useState)(exports.DEFAULT_TAG);
40
- const checkCommodityIndexRef = (0, react_1.useRef)();
40
+ const checkCommodityIndexRef = (0, react_1.useRef)(-1);
41
41
  const popupCurTimeRef = (0, react_1.useRef)(null);
42
42
  const isShowConsent = (0, react_1.useMemo)(() => {
43
43
  var _a, _b, _c, _d;
44
44
  return (((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent;
45
45
  }, [isAgreePolicy, globalConfig, isOpenConsent, isEditor]);
46
+ const getFilterRecList = (0, react_1.useCallback)((data) => {
47
+ var _a;
48
+ const recList = data === null || data === void 0 ? void 0 : data.recList;
49
+ const nList = (_a = recList === null || recList === void 0 ? void 0 : recList.map((item) => {
50
+ var _a, _b, _c, _d, _e, _f;
51
+ if (((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) && ((_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c.length) > 0) {
52
+ const bindProducts = (_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindProducts) === null || _e === void 0 ? void 0 : _e.filter((item) => !!(item === null || item === void 0 ? void 0 : item.bindCta))) !== null && _f !== void 0 ? _f : [];
53
+ return Object.assign(Object.assign({}, item), { video: Object.assign(Object.assign({}, item === null || item === void 0 ? void 0 : item.video), { bindProducts }) });
54
+ }
55
+ return item;
56
+ })) !== null && _a !== void 0 ? _a : [];
57
+ return nList;
58
+ }, []);
46
59
  (0, react_1.useEffect)(() => {
47
60
  const handleChangeThemeTag = (tag) => {
48
61
  themeTag.current = tag;
@@ -109,7 +122,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
109
122
  return result === null || result === void 0 ? void 0 : result.data;
110
123
  }), [bffFetch, utmVal, maxSize, defaultSize]);
111
124
  const loadVideos = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
112
- var _j, _k;
113
125
  if (rtcList.length <= 0) {
114
126
  return;
115
127
  }
@@ -119,8 +131,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
119
131
  'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
120
132
  themeTag: themeTag.current
121
133
  });
122
- setRtcList(rtcList.concat((_j = data === null || data === void 0 ? void 0 : data.recList) !== null && _j !== void 0 ? _j : []));
123
- setCacheRtcList(cacheRtcList.concat((_k = data === null || data === void 0 ? void 0 : data.recList) !== null && _k !== void 0 ? _k : []));
134
+ setRtcList(getFilterRecList(data));
135
+ setCacheRtcList(getFilterRecList(data));
124
136
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
125
137
  const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
126
138
  if (!enableReportEvent) {
@@ -178,24 +190,24 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
178
190
  return res === null || res === void 0 ? void 0 : res.success;
179
191
  }), [bffFetch]);
180
192
  const bffGetTagList = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
181
- var _l, _m, _o, _p, _q;
193
+ var _j, _k, _l, _m, _o;
182
194
  if (!utmVal || !isShowTag)
183
195
  return;
184
196
  try {
185
- const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
197
+ const val = (_l = (_k = (_j = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _j === void 0 ? void 0 : _j.filter((val) => {
186
198
  var _a, _b;
187
199
  const key = val.split('=')[0];
188
200
  return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
189
- })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
201
+ })) === null || _k === void 0 ? void 0 : _k.join('&')) !== null && _l !== void 0 ? _l : '';
190
202
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
191
- setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
203
+ setTagList((_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.tags) !== null && _o !== void 0 ? _o : []);
192
204
  }
193
205
  catch (e) {
194
206
  console.log('e', e);
195
207
  }
196
208
  }), [bffFetch, utmVal, isShowTag]);
197
209
  const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
198
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
210
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
199
211
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
200
212
  const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
201
213
  let fromKName = '';
@@ -209,7 +221,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
209
221
  fromKName = 'imagePage';
210
222
  }
211
223
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
212
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName, fromKPage: (_o = location === null || location === void 0 ? void 0 : location.href) !== null && _o !== void 0 ? _o : '' })
224
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_2 = (_z = (_u = (_q = (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : (_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : (_t = (_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProduct) === null || _s === void 0 ? void 0 : _s.bindCta) === null || _t === void 0 ? void 0 : _t.traceInfo) !== null && _u !== void 0 ? _u : (_y = (_x = (_w = (_v = rec === null || rec === void 0 ? void 0 : rec.video) === null || _v === void 0 ? void 0 : _v.bindProducts) === null || _w === void 0 ? void 0 : _w[0]) === null || _x === void 0 ? void 0 : _x.bindCta) === null || _y === void 0 ? void 0 : _y.traceInfo) !== null && _z !== void 0 ? _z : (_1 = (_0 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : '', fromKName, fromKPage: (_3 = location === null || location === void 0 ? void 0 : location.href) !== null && _3 !== void 0 ? _3 : '' })
213
225
  });
214
226
  }, [bffEventReport, isFromHashtag]);
215
227
  const h5EnterLink = (0, react_1.useCallback)(() => {
@@ -249,9 +261,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
249
261
  bffGetTagList();
250
262
  getRecommendVideos()
251
263
  .then((data) => {
252
- var _a, _b;
253
- setRtcList((_a = data === null || data === void 0 ? void 0 : data.recList) !== null && _a !== void 0 ? _a : []);
254
- setCacheRtcList((_b = data === null || data === void 0 ? void 0 : data.recList) !== null && _b !== void 0 ? _b : []);
264
+ setRtcList(getFilterRecList(data));
265
+ setCacheRtcList(getFilterRecList(data));
255
266
  })
256
267
  .finally(() => {
257
268
  bffEventReport({
@@ -271,9 +282,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
271
282
  bffGetTagList();
272
283
  getRecommendVideos()
273
284
  .then((data) => {
274
- var _a, _b;
275
- setRtcList((_a = data === null || data === void 0 ? void 0 : data.recList) !== null && _a !== void 0 ? _a : []);
276
- setCacheRtcList((_b = data === null || data === void 0 ? void 0 : data.recList) !== null && _b !== void 0 ? _b : []);
285
+ setRtcList(getFilterRecList(data));
286
+ setCacheRtcList(getFilterRecList(data));
277
287
  })
278
288
  .finally(() => {
279
289
  setLoading(false);
package/lib/core/hooks/useEventReport.js CHANGED
@@ -7,7 +7,7 @@ const SxpDataSourceProvider_1 = require("../context/SxpDataSourceProvider");
7
7
  function useEventReport() {
8
8
  const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = (0, useSxpDataSource_1.useSxpDataSource)();
9
9
  const jumpToWeb = (0, react_1.useCallback)((data, product, cta, position) => {
10
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
10
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
11
11
  let fromKName = '';
12
12
  if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
13
13
  fromKName = 'pdpPage';
@@ -38,12 +38,12 @@ function useEventReport() {
38
38
  position: position + '',
39
39
  contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
40
40
  ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
41
- traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
41
+ traceInfo: (_1 = (_y = (_w = (_s = (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : (_r = (_q = data === null || data === void 0 ? void 0 : data.video) === null || _q === void 0 ? void 0 : _q.bindProduct) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : (_v = (_u = (_t = data === null || data === void 0 ? void 0 : data.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) === null || _v === void 0 ? void 0 : _v.traceInfo) !== null && _w !== void 0 ? _w : (_x = data === null || data === void 0 ? void 0 : data.product) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = data === null || data === void 0 ? void 0 : data.video) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : ''
42
42
  }
43
43
  });
44
44
  }, [bffEventReport, popupDetailData, isFromHashtag]);
45
45
  const productView = (0, react_1.useCallback)((data, product, cta, viewTime, position) => {
46
- var _a, _b, _c, _d;
46
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
47
47
  let fromKName = '';
48
48
  if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
49
49
  fromKName = 'pdpPage';
@@ -63,7 +63,7 @@ function useEventReport() {
63
63
  position: position + '',
64
64
  contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
65
65
  ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
66
- traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
66
+ traceInfo: (_p = (_m = (_h = (_e = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _e !== void 0 ? _e : (_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct) === null || _g === void 0 ? void 0 : _g.traceInfo) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : (_o = data === null || data === void 0 ? void 0 : data.product) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : '',
67
67
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
68
68
  eventSubject: 'productView',
69
69
  eventDescription: 'User browsed the product'
package/lib/materials/sxp/popup/CommodityDetail/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export interface ICommodityDetailProps {
27
27
  collection: CSSProperties;
28
28
  price: CSSProperties;
29
29
  info: CSSProperties;
30
+ taxInfo: CSSProperties;
30
31
  };
31
32
  buttonStyle?: CSSProperties;
32
33
  index?: number;
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -16,8 +16,7 @@ const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/compone
16
16
  const CommodityDetail = (_a) => {
17
17
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
18
18
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
19
- const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef } = (0, hooks_1.useSxpDataSource)();
20
- const { popup } = (0, hooks_1.useEditor)();
19
+ const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
21
20
  const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
22
21
  const curTimeRef = (0, react_1.useRef)(null);
23
22
  const [showModal, setShowModal] = (0, react_1.useState)(false);
@@ -30,6 +29,7 @@ const CommodityDetail = (_a) => {
30
29
  : (_k = (_j = (_h = data === null || data === void 0 ? void 0 : data.video) === null || _h === void 0 ? void 0 : _h.bindProduct) === null || _j === void 0 ? void 0 : _j.bindCta) !== null && _k !== void 0 ? _k : (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta;
31
30
  const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
32
31
  if (!isPost && (commodityGroup === null || commodityGroup === void 0 ? void 0 : commodityGroup.open) && ((_p = data === null || data === void 0 ? void 0 : data.video) === null || _p === void 0 ? void 0 : _p.bindProducts) && ((_r = (_q = data === null || data === void 0 ? void 0 : data.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length) > 0) {
32
+ checkCommodityIndexRef.current = checkCommodityIndex;
33
33
  const p = (_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.bindProducts[checkCommodityIndex];
34
34
  product = p;
35
35
  cta = p === null || p === void 0 ? void 0 : p.bindCta;
@@ -73,7 +73,7 @@ const CommodityDetail = (_a) => {
73
73
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
74
74
  const width = isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth;
75
75
  const renderContent = ({ isPost }) => {
76
- var _a, _b, _c;
76
+ var _a, _b, _c, _d;
77
77
  return (react_1.default.createElement("div", null,
78
78
  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) === ''), dangerouslySetInnerHTML: {
79
79
  __html: (0, tool_1.setFontForText)((_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -84,8 +84,11 @@ const CommodityDetail = (_a) => {
84
84
  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), dangerouslySetInnerHTML: {
85
85
  __html: (0, tool_1.setFontForText)(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
86
86
  } }),
87
+ react_1.default.createElement("div", { hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
88
+ __html: (0, tool_1.setFontForText)((_c = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _c !== void 0 ? _c : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
89
+ } }),
87
90
  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
- 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
91
+ 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: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
89
92
  bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
90
93
  collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
91
94
  necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
@@ -107,6 +110,7 @@ const CommodityDetail = (_a) => {
107
110
  const handleClick = (0, react_1.useCallback)((index) => {
108
111
  popupCurTimeRef.current = new Date();
109
112
  setCheckCommodityIndex(index);
113
+ checkCommodityIndexRef.current = index;
110
114
  }, []);
111
115
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
112
116
  var _a, _b, _c;
@@ -127,6 +131,7 @@ const CommodityDetail = (_a) => {
127
131
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
128
132
  } },
129
133
  react_1.default.createElement(react_1.default.Fragment, null, (_v = product === null || product === void 0 ? void 0 : product.homePage) === null || _v === void 0 ? void 0 : _v.map((src) => {
134
+ var _a;
130
135
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
131
136
  react_1.default.createElement("div", { style: {
132
137
  overflow: 'hidden',
@@ -139,7 +144,7 @@ const CommodityDetail = (_a) => {
139
144
  objectFit: 'cover',
140
145
  display: 'block',
141
146
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
142
- }, src: src }))));
147
+ }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
143
148
  }))))),
144
149
  !((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
145
150
  position: 'relative',
package/lib/materials/sxp/popup/CommodityDetail/material.js CHANGED
@@ -40,6 +40,12 @@ const CommodityDetail = (0, create_1.createMaterial)(_1.default, {
40
40
  info: {
41
41
  color: 'gray',
42
42
  fontSize: 12
43
+ },
44
+ taxInfo: {
45
+ color: '#000',
46
+ fontSize: 13,
47
+ textAlign: 'left',
48
+ marginBottom: '10px'
43
49
  }
44
50
  },
45
51
  buttonStyle: {
package/lib/materials/sxp/popup/CommodityDetail/settingRender.js CHANGED
@@ -106,6 +106,10 @@ exports.default = [
106
106
  {
107
107
  label: '商品描述',
108
108
  value: 'info'
109
+ },
110
+ {
111
+ label: '税费说明',
112
+ value: 'taxInfo'
109
113
  }
110
114
  ],
111
115
  name: ['props', 'commodityStyles', 'field'],
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -17,7 +17,7 @@ const CommodityDetailDiroNew = (_a) => {
17
17
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
18
18
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
19
19
  const [spread, setSpread] = (0, react_1.useState)(true);
20
- const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport } = (0, hooks_1.useSxpDataSource)();
20
+ const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
21
21
  const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
22
22
  const [stopSlide, setStopSlide] = (0, react_1.useState)(false);
23
23
  const [isBottom, setIsBottom] = (0, react_1.useState)(false);
@@ -32,6 +32,7 @@ const CommodityDetailDiroNew = (_a) => {
32
32
  : (_k = (_j = (_h = data === null || data === void 0 ? void 0 : data.video) === null || _h === void 0 ? void 0 : _h.bindProduct) === null || _j === void 0 ? void 0 : _j.bindCta) !== null && _k !== void 0 ? _k : (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta;
33
33
  const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
34
34
  if (!isPost && (commodityGroup === null || commodityGroup === void 0 ? void 0 : commodityGroup.open) && ((_p = data === null || data === void 0 ? void 0 : data.video) === null || _p === void 0 ? void 0 : _p.bindProducts) && ((_r = (_q = data === null || data === void 0 ? void 0 : data.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length) > 0) {
35
+ checkCommodityIndexRef.current = checkCommodityIndex;
35
36
  const p = (_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.bindProducts[checkCommodityIndex];
36
37
  product = p;
37
38
  cta = p === null || p === void 0 ? void 0 : p.bindCta;
@@ -92,6 +93,7 @@ Made in Italy` })));
92
93
  const handleClick = (0, react_1.useCallback)((index) => {
93
94
  popupCurTimeRef.current = new Date();
94
95
  setCheckCommodityIndex(index);
96
+ checkCommodityIndexRef.current = index;
95
97
  }, []);
96
98
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
97
99
  var _a, _b, _c;
@@ -110,6 +112,7 @@ Made in Italy` })));
110
112
  }, loop: true, autoplay: {
111
113
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
112
114
  } }, (_v = product === null || product === void 0 ? void 0 : product.homePage) === null || _v === void 0 ? void 0 : _v.map((src) => {
115
+ var _a;
113
116
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
114
117
  react_1.default.createElement("div", { style: {
115
118
  overflow: 'hidden',
@@ -122,7 +125,7 @@ Made in Italy` })));
122
125
  objectFit: 'cover',
123
126
  display: 'block',
124
127
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
125
- }, src: src }))));
128
+ }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
126
129
  }))),
127
130
  !((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
128
131
  position: 'relative',
package/lib/materials/sxp/popup/CommodityList/index.d.ts CHANGED
@@ -19,7 +19,6 @@ export interface ICommodityListProps {
19
19
  price: CSSProperties;
20
20
  };
21
21
  buttonStyle?: CSSProperties;
22
- index?: number;
23
22
  translateY?: number;
24
23
  commodityPicture?: CSSProperties;
25
24
  isExternalLink?: boolean;
package/lib/materials/sxp/popup/CommodityList/index.js CHANGED
@@ -11,12 +11,13 @@ const Img_1 = tslib_1.__importDefault(require("../../template/components/Img"));
11
11
  const lodash_1 = require("lodash");
12
12
  const CommodityList = (_a) => {
13
13
  var _b, _c;
14
- var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, index, translateY = 0, commodityPicture, isExternalLink, onClick } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "index", "translateY", "commodityPicture", "isExternalLink", "onClick"]);
14
+ var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, translateY = 0, commodityPicture, isExternalLink, onClick } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "translateY", "commodityPicture", "isExternalLink", "onClick"]);
15
15
  const { sxpParameter, popupDetailData, setPopupDetailData, ctaEvent } = (0, hooks_1.useSxpDataSource)();
16
16
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
17
17
  const { popup } = (0, hooks_1.useEditor)();
18
18
  const recData = isPost ? rec : popupDetailData;
19
19
  const product = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [null, null, null, null];
20
+ const index = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
20
21
  const priceText = (0, react_1.useCallback)((product) => {
21
22
  var _a, _b, _c, _d, _e;
22
23
  if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
@@ -44,25 +45,24 @@ const CommodityList = (_a) => {
44
45
  onClick === null || onClick === void 0 ? void 0 : onClick();
45
46
  }
46
47
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
47
- return (react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
48
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
48
+ return (react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
49
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
49
50
  return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement("div", Object.assign({ key: index }, props, { className: (0, css_1.css)({
50
51
  display: 'flex'
51
52
  }), onClick: () => handleClick(item, index) }),
52
53
  react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: commodityPicture, enableEventReport: false }),
53
54
  react_1.default.createElement("div", { style: {
54
- flex: 1,
55
- width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px - ${(_g = style === null || style === void 0 ? void 0 : style.padding) !== null && _g !== void 0 ? _g : 0}px)`,
55
+ width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px)`,
56
56
  display: 'flex',
57
57
  flexDirection: 'column',
58
58
  justifyContent: 'space-between'
59
59
  } },
60
60
  react_1.default.createElement("div", null,
61
61
  react_1.default.createElement("div", { className: 'one-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
62
- __html: (0, tool_1.setFontForText)((_h = item === null || item === void 0 ? void 0 : item.title) !== null && _h !== void 0 ? _h : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
62
+ __html: (0, tool_1.setFontForText)((_g = item === null || item === void 0 ? void 0 : item.title) !== null && _g !== void 0 ? _g : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
63
63
  } }),
64
64
  react_1.default.createElement("div", { className: 'two-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!item && (!(item === null || item === void 0 ? void 0 : item.collection) || (item === null || item === void 0 ? void 0 : item.collection) === ''), dangerouslySetInnerHTML: {
65
- __html: (0, tool_1.setFontForText)((_j = item === null || item === void 0 ? void 0 : item.collection) !== null && _j !== void 0 ? _j : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
65
+ __html: (0, tool_1.setFontForText)((_h = item === null || item === void 0 ? void 0 : item.collection) !== null && _h !== void 0 ? _h : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
66
66
  } })),
67
67
  react_1.default.createElement("div", { className: (0, css_1.css)({
68
68
  display: 'flex',
@@ -71,11 +71,12 @@ const CommodityList = (_a) => {
71
71
  width: '100%',
72
72
  overflow: 'hidden'
73
73
  }) },
74
- react_1.default.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
75
- __html: (0, tool_1.setFontForText)(priceText(item), commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
76
- } }),
74
+ react_1.default.createElement("div", null,
75
+ react_1.default.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
76
+ __html: (0, tool_1.setFontForText)(priceText(item), commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
77
+ } })),
77
78
  react_1.default.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
78
- __html: (0, tool_1.setFontForText)((_l = (_k = item === null || item === void 0 ? void 0 : item.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', buttonStyle)
79
+ __html: (0, tool_1.setFontForText)((_k = (_j = item === null || item === void 0 ? void 0 : item.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now', buttonStyle)
79
80
  } })))))));
80
81
  })));
81
82
  };
package/lib/materials/sxp/template/components/CommodityGroup.d.ts CHANGED
@@ -12,7 +12,7 @@ interface ICommodityGroupProps {
12
12
  style?: CSSProperties;
13
13
  onCLick?: (i: number) => void;
14
14
  popupDetailData?: ISxpDataSourceContext['popupDetailData'];
15
- check?: number;
15
+ check: number;
16
16
  }
17
17
  declare const _default: React.NamedExoticComponent<ICommodityGroupProps>;
18
18
  export default _default;
package/lib/materials/sxp/template/components/CommodityGroup.js CHANGED
@@ -4,10 +4,21 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const Scroll_1 = tslib_1.__importDefault(require("./Scroll"));
6
6
  const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
7
+ const hooks_1 = require("../../../../core/hooks");
7
8
  const react_2 = require("swiper/react");
8
9
  const css_1 = require("@emotion/css");
10
+ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
9
11
  const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailData, check }) => {
10
12
  var _a;
13
+ const { productView } = (0, useEventReport_1.useEventReport)();
14
+ const { popupCurTimeRef } = (0, hooks_1.useSxpDataSource)();
15
+ const handleClick = (item, index) => {
16
+ if (check === index)
17
+ return;
18
+ const prevItem = products === null || products === void 0 ? void 0 : products[check];
19
+ productView(popupDetailData, prevItem, prevItem === null || prevItem === void 0 ? void 0 : prevItem.bindCta, popupCurTimeRef.current, popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index);
20
+ onCLick === null || onCLick === void 0 ? void 0 : onCLick(index);
21
+ };
11
22
  return (react_1.default.createElement(react_1.default.Fragment, null, (data === null || data === void 0 ? void 0 : data.open) && ((products && (products === null || products === void 0 ? void 0 : products.length) > 1) || !popupDetailData) && (react_1.default.createElement(Scroll_1.default, { enableSlideActive: true, isPadding: false, style: Object.assign(Object.assign({}, style), data === null || data === void 0 ? void 0 : data.style) }, (_a = (popupDetailData ? products : [0, 1, 2, 3])) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
12
23
  var _a, _b, _c;
13
24
  return (react_1.default.createElement(react_1.default.Fragment, null, (item === null || item === void 0 ? void 0 : item.bindCta) ? (react_1.default.createElement(react_2.SwiperSlide, { className: (0, css_1.css)({
@@ -15,7 +26,7 @@ const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailDat
15
26
  height: '50px',
16
27
  marginRight: '10px'
17
28
  }), onClick: () => {
18
- onCLick === null || onCLick === void 0 ? void 0 : onCLick(index);
29
+ handleClick(item, index);
19
30
  }, key: index },
20
31
  react_1.default.createElement(FormatImage_1.default, { style: {
21
32
  height: '100%',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.2.5",
3
+ "version": "1.2.7",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",