pb-sxp-ui 1.2.4 → 1.2.6

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 (70) hide show
  1. package/dist/index.cjs +283 -175
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +11 -3
  4. package/dist/index.js +283 -175
  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 +283 -175
  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/LikeButton/index.js +34 -15
  15. package/es/core/components/SxpPageRender/Popup/index.js +26 -13
  16. package/es/core/components/SxpPageRender/RenderCard.d.ts +1 -0
  17. package/es/core/components/SxpPageRender/RenderCard.js +3 -3
  18. package/es/core/components/SxpPageRender/index.js +4 -4
  19. package/es/core/components/SxpPageRender/typing.d.ts +1 -0
  20. package/es/core/context/SxpDataSourceProvider.d.ts +3 -3
  21. package/es/core/context/SxpDataSourceProvider.js +7 -3
  22. package/es/core/hooks/useEventReport.js +4 -4
  23. package/es/materials/sxp/cta/AniLink/index.js +2 -1
  24. package/es/materials/sxp/cta/AniLinkPopup/index.d.ts +1 -0
  25. package/es/materials/sxp/cta/AniLinkPopup/index.js +11 -20
  26. package/es/materials/sxp/popup/CommodityDetail/index.d.ts +1 -0
  27. package/es/materials/sxp/popup/CommodityDetail/index.js +32 -15
  28. package/es/materials/sxp/popup/CommodityDetail/material.js +6 -0
  29. package/es/materials/sxp/popup/CommodityDetail/settingRender.js +4 -0
  30. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +32 -18
  31. package/es/materials/sxp/popup/CommodityList/index.js +38 -20
  32. package/es/materials/sxp/popup/CommodityList/material.js +1 -0
  33. package/es/materials/sxp/popup/CommodityList/settingRender.js +5 -0
  34. package/es/materials/sxp/template/MultiCommodity/index.js +3 -3
  35. package/es/materials/sxp/template/MultiCommodityDiro/index.js +3 -3
  36. package/es/materials/sxp/template/components/CommodityGroup.d.ts +4 -0
  37. package/es/materials/sxp/template/components/CommodityGroup.js +21 -14
  38. package/es/materials/sxp/template/components/Img.d.ts +1 -0
  39. package/es/materials/sxp/template/components/Img.js +3 -3
  40. package/es/materials/sxp/template/components/Scroll.d.ts +1 -0
  41. package/es/materials/sxp/template/components/Scroll.js +5 -4
  42. package/lib/core/components/SxpPageRender/LikeButton/index.js +34 -15
  43. package/lib/core/components/SxpPageRender/Popup/index.js +25 -12
  44. package/lib/core/components/SxpPageRender/RenderCard.d.ts +1 -0
  45. package/lib/core/components/SxpPageRender/RenderCard.js +3 -3
  46. package/lib/core/components/SxpPageRender/index.js +4 -4
  47. package/lib/core/components/SxpPageRender/typing.d.ts +1 -0
  48. package/lib/core/context/SxpDataSourceProvider.d.ts +3 -3
  49. package/lib/core/context/SxpDataSourceProvider.js +7 -3
  50. package/lib/core/hooks/useEventReport.js +4 -4
  51. package/lib/materials/sxp/cta/AniLink/index.js +2 -1
  52. package/lib/materials/sxp/cta/AniLinkPopup/index.d.ts +1 -0
  53. package/lib/materials/sxp/cta/AniLinkPopup/index.js +10 -19
  54. package/lib/materials/sxp/popup/CommodityDetail/index.d.ts +1 -0
  55. package/lib/materials/sxp/popup/CommodityDetail/index.js +32 -15
  56. package/lib/materials/sxp/popup/CommodityDetail/material.js +6 -0
  57. package/lib/materials/sxp/popup/CommodityDetail/settingRender.js +4 -0
  58. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +32 -18
  59. package/lib/materials/sxp/popup/CommodityList/index.js +37 -19
  60. package/lib/materials/sxp/popup/CommodityList/material.js +1 -0
  61. package/lib/materials/sxp/popup/CommodityList/settingRender.js +5 -0
  62. package/lib/materials/sxp/template/MultiCommodity/index.js +3 -3
  63. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +3 -3
  64. package/lib/materials/sxp/template/components/CommodityGroup.d.ts +4 -0
  65. package/lib/materials/sxp/template/components/CommodityGroup.js +20 -13
  66. package/lib/materials/sxp/template/components/Img.d.ts +1 -0
  67. package/lib/materials/sxp/template/components/Img.js +3 -3
  68. package/lib/materials/sxp/template/components/Scroll.d.ts +1 -0
  69. package/lib/materials/sxp/template/components/Scroll.js +5 -4
  70. package/package.json +1 -1
package/lib/core/components/SxpPageRender/Popup/index.js CHANGED
@@ -8,13 +8,12 @@ const withBindDataSource_1 = tslib_1.__importDefault(require("../../../../core/h
8
8
  const useEventReport_1 = require("../../../../core/hooks/useEventReport");
9
9
  const Popup = () => {
10
10
  const { schema, resolver, popup } = (0, hooks_1.useEditor)();
11
- const { setPopupDetailData, popupDetailData, bffEventReport } = (0, hooks_1.useSxpDataSource)();
11
+ const { setPopupDetailData, popupDetailData, popupCurTimeRef, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
12
12
  const { productView } = (0, useEventReport_1.useEventReport)();
13
13
  const [visible, setVisible] = (0, react_1.useState)();
14
- const curTimeRef = (0, react_1.useRef)(null);
15
14
  (0, react_1.useEffect)(() => {
16
15
  const initTime = () => {
17
- curTimeRef.current = new Date();
16
+ popupCurTimeRef.current = new Date();
18
17
  };
19
18
  initTime();
20
19
  window.addEventListener('pageshow', initTime);
@@ -24,25 +23,39 @@ const Popup = () => {
24
23
  }, []);
25
24
  (0, react_1.useEffect)(() => {
26
25
  if (popup && (popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') {
27
- curTimeRef.current = new Date();
26
+ popupCurTimeRef.current = new Date();
28
27
  setVisible(popup);
29
28
  }
30
29
  }, [popup]);
31
30
  const handleClose = () => {
32
- var _a, _b, _c, _d;
33
- if (!popup || (popup === null || popup === void 0 ? void 0 : popup.id) === '' || !visible || new Date() - curTimeRef.current < ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0)) {
31
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
32
+ if (!popup ||
33
+ (popup === null || popup === void 0 ? void 0 : popup.id) === '' ||
34
+ !visible ||
35
+ new Date() - popupCurTimeRef.current < ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0)) {
34
36
  return;
35
37
  }
36
38
  setVisible(Object.assign(Object.assign({}, popup), { id: '' }));
37
- const data = popupDetailData;
38
- const product = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
39
- const cta = (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.bindCta;
40
- if (product && cta) {
41
- productView(data, product, cta, curTimeRef.current, popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index);
39
+ const value = (_d = (_c = (_b = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _b === void 0 ? void 0 : _b.globalConfig) === null || _c === void 0 ? void 0 : _c.popupList) === null || _d === void 0 ? void 0 : _d.find((item) => (item === null || item === void 0 ? void 0 : item.id) === (popup === null || popup === void 0 ? void 0 : popup.id));
40
+ if (((_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.type) === 'CommodityDetail' || ((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type) === 'CommodityDetailDiroNew') {
41
+ const data = popupDetailData;
42
+ let product = (_g = data === null || data === void 0 ? void 0 : data.video) === null || _g === void 0 ? void 0 : _g.bindProduct;
43
+ let cta = (_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;
44
+ if ((checkCommodityIndexRef === null || checkCommodityIndexRef === void 0 ? void 0 : checkCommodityIndexRef.current) >= 0) {
45
+ const p = (_l = (_k = data === null || data === void 0 ? void 0 : data.video) === null || _k === void 0 ? void 0 : _k.bindProducts) === null || _l === void 0 ? void 0 : _l[checkCommodityIndexRef === null || checkCommodityIndexRef === void 0 ? void 0 : checkCommodityIndexRef.current];
46
+ if (p) {
47
+ product = p;
48
+ cta = p === null || p === void 0 ? void 0 : p.bindCta;
49
+ }
50
+ }
51
+ if (product && cta) {
52
+ productView(data, product, cta, popupCurTimeRef.current, popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index);
53
+ }
42
54
  }
43
55
  setTimeout(() => {
44
56
  window === null || window === void 0 ? void 0 : window.sxpPopup('');
45
57
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(null);
58
+ checkCommodityIndexRef.current = -1;
46
59
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
47
60
  };
48
61
  const renderPopupDetail = (0, react_1.useMemo)(() => {
@@ -55,7 +68,7 @@ const Popup = () => {
55
68
  const isExternalLink = ((_d = (_c = (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.event) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
56
69
  const isPopup = ((_g = (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.event) === null || _f === void 0 ? void 0 : _f.onClick) === null || _g === void 0 ? void 0 : _g.linkType) === 'popup';
57
70
  const defaulSetting = (_h = t === null || t === void 0 ? void 0 : t.extend) === null || _h === void 0 ? void 0 : _h.defaulSetting;
58
- return (react_1.default.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw', height: '100%' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
71
+ return (react_1.default.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw', height: '100%' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose, index: index })));
59
72
  }
60
73
  else {
61
74
  return react_1.default.createElement(react_1.default.Fragment, null);
package/lib/core/components/SxpPageRender/RenderCard.d.ts CHANGED
@@ -7,6 +7,7 @@ interface IRenderCardProps {
7
7
  tempMap?: Record<string, any>;
8
8
  resolver: any;
9
9
  includesCtaType?: string[];
10
+ isActive?: boolean;
10
11
  }
11
12
  declare const _default: React.NamedExoticComponent<IRenderCardProps>;
12
13
  export default _default;
package/lib/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -5,7 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
5
5
  require("./index.less");
6
6
  const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
7
7
  const hooks_1 = require("../../../core/hooks");
8
- const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType }) => {
8
+ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }) => {
9
9
  var _a, _b, _c, _d, _e;
10
10
  const { schema } = (0, hooks_1.useEditor)();
11
11
  if (!(rec === null || rec === void 0 ? void 0 : rec.video))
@@ -52,12 +52,12 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType }) => {
52
52
  const Component = (0, withBindDataSource_1.default)(t);
53
53
  const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
54
54
  const isExternalLink = ((_2 = (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.event) === null || _1 === void 0 ? void 0 : _1.onClick) === null || _2 === void 0 ? void 0 : _2.linkType) === 'externalLink';
55
- return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
55
+ return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
56
56
  }
57
57
  else {
58
58
  return null;
59
59
  }
60
- }, [rec, resolver, tempMap, schema, value === null || value === void 0 ? void 0 : value.id]);
60
+ }, [rec, resolver, tempMap, schema, value === null || value === void 0 ? void 0 : value.id, isActive]);
61
61
  return react_1.default.createElement(react_1.default.Fragment, null, renderComp);
62
62
  };
63
63
  exports.default = (0, react_1.memo)(RenderCard);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -235,7 +235,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
235
235
  react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
236
236
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
237
237
  react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
238
- react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'] })));
238
+ react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
239
239
  }
240
240
  return null;
241
241
  }, [
@@ -289,8 +289,8 @@ 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;
293
- if (isPreview)
292
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
293
+ if (isPreview || waterFallData)
294
294
  return;
295
295
  const t = new Date() - curTime.current;
296
296
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.openSlideSkip) && t >= ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.slideSkipStartTime) !== null && _a !== void 0 ? _a : 0) && (0, localStore_1.getSlideSkipState)() && item) {
@@ -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: (_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : ''
312
312
  }
313
313
  });
314
314
  (0, localStore_1.setSlideSkipState)();
package/lib/core/components/SxpPageRender/typing.d.ts CHANGED
@@ -14,6 +14,7 @@ export type RecItemType = {
14
14
  hashTags: string[];
15
15
  tags: string[];
16
16
  multiCheckIndex?: number;
17
+ index?: number;
17
18
  };
18
19
  export type CTAInfoType = {
19
20
  traceInfo: string;
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -23,9 +23,7 @@ export interface ISxpDataSourceContext {
23
23
  mutateLike?: (body: {
24
24
  content: string;
25
25
  }) => Promise<boolean>;
26
- popupDetailData?: RecItemType & {
27
- index: number;
28
- };
26
+ popupDetailData?: RecItemType;
29
27
  setPopupDetailData?: React.Dispatch<React.SetStateAction<any | null>>;
30
28
  loadVideos?: (page: number) => Promise<void>;
31
29
  getRecommendVideos?: (query?: {
@@ -81,6 +79,8 @@ export interface ISxpDataSourceContext {
81
79
  selectTag?: string;
82
80
  setSelectTag?: React.Dispatch<React.SetStateAction<string>>;
83
81
  globalConfig?: ISxpPageRenderProps['globalConfig'];
82
+ popupCurTimeRef?: any;
83
+ checkCommodityIndexRef?: any;
84
84
  }
85
85
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
86
86
  export interface SxpDataSourceProviderProps {
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -37,6 +37,8 @@ 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)(-1);
41
+ const popupCurTimeRef = (0, react_1.useRef)(null);
40
42
  const isShowConsent = (0, react_1.useMemo)(() => {
41
43
  var _a, _b, _c, _d;
42
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;
@@ -193,7 +195,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
193
195
  }
194
196
  }), [bffFetch, utmVal, isShowTag]);
195
197
  const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
196
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
198
+ 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;
197
199
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
198
200
  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);
199
201
  let fromKName = '';
@@ -207,7 +209,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
207
209
  fromKName = 'imagePage';
208
210
  }
209
211
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
210
- 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 })
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: (_1 = (_y = (_t = (_p = (_o = (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.bindCta) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : (_s = (_r = (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.bindProduct) === null || _r === void 0 ? void 0 : _r.bindCta) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_x = (_w = (_v = (_u = rec === null || rec === void 0 ? void 0 : rec.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.product) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : '', fromKName, fromKPage: (_2 = location === null || location === void 0 ? void 0 : location.href) !== null && _2 !== void 0 ? _2 : '' })
211
213
  });
212
214
  }, [bffEventReport, isFromHashtag]);
213
215
  const h5EnterLink = (0, react_1.useCallback)(() => {
@@ -322,7 +324,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
322
324
  isShowConsent,
323
325
  selectTag,
324
326
  setSelectTag,
325
- globalConfig
327
+ globalConfig,
328
+ popupCurTimeRef,
329
+ checkCommodityIndexRef
326
330
  } }, isShowConsent ? (react_1.default.createElement(Consent_1.default, Object.assign({}, (_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))) : (render({
327
331
  rtcList,
328
332
  mutateLike: bffMutateLike,
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;
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: (_0 = (_x = (_v = (_r = (_q = (_p = data === null || data === void 0 ? void 0 : data.video) === null || _p === void 0 ? void 0 : _p.bindProduct) === null || _q === void 0 ? void 0 : _q.traceInfo) !== null && _r !== void 0 ? _r : (_u = (_t = (_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.bindProducts) === null || _t === void 0 ? void 0 : _t[0]) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : (_w = data === null || data === void 0 ? void 0 : data.product) === null || _w === void 0 ? void 0 : _w.traceInfo) !== null && _x !== void 0 ? _x : (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindCta) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : ''
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;
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: (_o = (_l = (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.traceInfo) !== null && _g !== void 0 ? _g : (_k = (_j = (_h = data === null || data === void 0 ? void 0 : data.video) === null || _h === void 0 ? void 0 : _h.bindProducts) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : (_m = data === null || data === void 0 ? void 0 : data.product) === null || _m === void 0 ? void 0 : _m.traceInfo) !== null && _o !== void 0 ? _o : '',
67
67
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
68
68
  eventSubject: 'productView',
69
69
  eventDescription: 'User browsed the product'
package/lib/materials/sxp/cta/AniLink/index.js CHANGED
@@ -53,11 +53,12 @@ const AniLink = (_a) => {
53
53
  }
54
54
  }, [event === null || event === void 0 ? void 0 : event.animation]);
55
55
  (0, react_1.useEffect)(() => {
56
+ var _a, _b, _c;
56
57
  if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
57
58
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
58
59
  eventSubject: 'ctaExposure',
59
60
  eventDescription: 'The cta was shown to the user'
60
- }, recData, product, index);
61
+ }, recData, ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video), index);
61
62
  }
62
63
  }, [isOnScreen]);
63
64
  (0, react_1.useEffect)(() => {
package/lib/materials/sxp/cta/AniLinkPopup/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface IAniLinkPopupProps {
12
12
  isTel?: boolean;
13
13
  onClick?: () => void;
14
14
  isExternalLink?: boolean;
15
+ isActive?: boolean;
15
16
  }
16
17
  declare const _default: React.NamedExoticComponent<IAniLinkPopupProps>;
17
18
  export default _default;
package/lib/materials/sxp/cta/AniLinkPopup/index.js CHANGED
@@ -8,18 +8,14 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
8
8
  const Img_1 = tslib_1.__importDefault(require("../../template/components/Img"));
9
9
  const tool_1 = require("../../../../core/utils/tool");
10
10
  const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
11
- const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
12
11
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
13
12
  const AniLinkPopup = (_a) => {
14
13
  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;
15
- var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink"]);
14
+ var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false, isActive } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink", "isActive"]);
16
15
  style === null || style === void 0 ? true : delete style.transform;
17
16
  const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
18
17
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
19
- const ref = (0, react_1.useRef)(null);
20
- const isOnScreen = (0, useOnScreen_1.default)(ref);
21
- const [visible, setVisible] = (0, react_1.useState)(false);
22
- const [startAni, setStartAni] = (0, react_1.useState)(true);
18
+ const [visible, setVisible] = (0, react_1.useState)(true);
23
19
  const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
24
20
  const product = ((_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.bindProducts) === null || _j === void 0 ? void 0 : _j[0]) || ((_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.bindProduct);
25
21
  const handleTo = () => {
@@ -55,26 +51,21 @@ const AniLinkPopup = (_a) => {
55
51
  const src = (_q = (_p = (_o = (_l = product === null || product === void 0 ? void 0 : product.cover) !== null && _l !== void 0 ? _l : (_m = product === null || product === void 0 ? void 0 : product.homePage) === null || _m === void 0 ? void 0 : _m[0]) !== null && _o !== void 0 ? _o : cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _p !== void 0 ? _p : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _q !== void 0 ? _q : bottom_image;
56
52
  const onClose = (event) => {
57
53
  event.stopPropagation();
58
- setStartAni(false);
54
+ setVisible(false);
59
55
  };
60
56
  (0, react_1.useEffect)(() => {
61
- if (isOnScreen) {
62
- setVisible(true);
63
- }
64
- else {
65
- setVisible(false);
66
- }
67
- }, [isOnScreen]);
57
+ setVisible(true);
58
+ }, [isActive]);
68
59
  const aniNamStyle = (0, react_1.useMemo)(() => {
69
- if (!visible)
60
+ if (!isActive)
70
61
  return null;
71
- return startAni ? index_module_less_1.default['animated-fadeIn'] : null;
72
- }, [visible, startAni]);
62
+ return visible ? index_module_less_1.default['animated-fadeIn'] : null;
63
+ }, [isActive, visible]);
73
64
  return (react_1.default.createElement(react_1.default.Fragment, null, isTel ? (react_1.default.createElement("div", { style: {
74
65
  height: '40px',
75
66
  lineHeight: '40px',
76
67
  paddingLeft: '6px'
77
- } }, "Cta Title")) : (react_1.default.createElement(react_1.default.Fragment, null, aniNamStyle ? (react_1.default.createElement("div", Object.assign({ ref: ref }, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default['aniLinkPopup']} ${aniNamStyle} ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
68
+ } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({}, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default['aniLinkPopup']} ${aniNamStyle} ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
78
69
  react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
79
70
  react_1.default.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
80
71
  react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
@@ -83,6 +74,6 @@ const AniLinkPopup = (_a) => {
83
74
  } })),
84
75
  react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
85
76
  __html: (0, tool_1.setFontForText)(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
86
- } }))) : (react_1.default.createElement("div", { ref: ref, style: { position: 'absolute', height: '50px', width: '50px', bottom: 0, right: 0, zIndex: 1000 } }))))));
77
+ } })))));
87
78
  };
88
79
  exports.default = (0, react_1.memo)(AniLinkPopup);
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
@@ -14,18 +14,26 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
14
14
  const tool_1 = require("../../../../core/utils/tool");
15
15
  const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
16
16
  const CommodityDetail = (_a) => {
17
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
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 } = (0, hooks_1.useSxpDataSource)();
20
- const { popupDetailData, bffEventReport, isPreview, bffFbReport } = (0, hooks_1.useSxpDataSource)();
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);
24
23
  const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
24
+ const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
25
25
  const data = isPost ? rec : popupDetailData;
26
- const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
27
- const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
26
+ let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
27
+ let cta = isPost
28
+ ? (_g = data === null || data === void 0 ? void 0 : data.product) === null || _g === void 0 ? void 0 : _g.bindCta
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;
28
30
  const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
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
+ const p = (_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.bindProducts[checkCommodityIndex];
34
+ product = p;
35
+ cta = p === null || p === void 0 ? void 0 : p.bindCta;
36
+ }
29
37
  const handleLink = () => {
30
38
  if (product === null || product === void 0 ? void 0 : product.link) {
31
39
  jumpToWeb(data, product, cta, position);
@@ -63,9 +71,9 @@ const CommodityDetail = (_a) => {
63
71
  return '$7,000';
64
72
  }
65
73
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
66
- const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
74
+ const width = isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth;
67
75
  const renderContent = ({ isPost }) => {
68
- var _a, _b, _c;
76
+ var _a, _b, _c, _d;
69
77
  return (react_1.default.createElement("div", null,
70
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: {
71
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)
@@ -76,8 +84,11 @@ const CommodityDetail = (_a) => {
76
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: {
77
85
  __html: (0, tool_1.setFontForText)(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
78
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
+ } }),
79
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) === '') },
80
- 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
81
92
  bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
82
93
  collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
83
94
  necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
@@ -96,15 +107,20 @@ const CommodityDetail = (_a) => {
96
107
  }
97
108
  return style;
98
109
  }, []);
110
+ const handleClick = (0, react_1.useCallback)((index) => {
111
+ popupCurTimeRef.current = new Date();
112
+ setCheckCommodityIndex(index);
113
+ checkCommodityIndexRef.current = index;
114
+ }, []);
99
115
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
100
116
  var _a, _b, _c;
101
117
  if (isPost)
102
118
  return;
103
- return (react_1.default.createElement(CommodityGroup_1.default, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' } }));
104
- }, []);
119
+ return (react_1.default.createElement(CommodityGroup_1.default, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' }, onCLick: handleClick, popupDetailData: popupDetailData, check: checkCommodityIndex }));
120
+ }, [checkCommodityIndex]);
105
121
  return (react_1.default.createElement(react_1.default.Fragment, null,
106
122
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
107
- product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (react_1.default.createElement("div", { style: { position: 'relative' } },
123
+ product && ((_u = product === null || product === void 0 ? void 0 : product.homePage) === null || _u === void 0 ? void 0 : _u.length) > 0 && (react_1.default.createElement("div", { style: { position: 'relative' } },
108
124
  react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
109
125
  clickable: true,
110
126
  bulletActiveClass: 'swipe-item-active-bullet',
@@ -114,7 +130,8 @@ const CommodityDetail = (_a) => {
114
130
  }, loop: true, autoplay: {
115
131
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
116
132
  } },
117
- react_1.default.createElement(react_1.default.Fragment, null, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
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;
118
135
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
119
136
  react_1.default.createElement("div", { style: {
120
137
  overflow: 'hidden',
@@ -127,9 +144,9 @@ const CommodityDetail = (_a) => {
127
144
  objectFit: 'cover',
128
145
  display: 'block',
129
146
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
130
- }, 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 }))));
131
148
  }))))),
132
- !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
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)({
133
150
  position: 'relative',
134
151
  height: 0,
135
152
  width: '100%',
@@ -142,7 +159,7 @@ const CommodityDetail = (_a) => {
142
159
  top: 0,
143
160
  objectFit: 'cover',
144
161
  width: '100%'
145
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
162
+ }), src: (_x = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _x !== void 0 ? _x : bottom_image, alt: 'pdp image' }))),
146
163
  renderCommodityGroup(),
147
164
  react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
148
165
  renderBtn(),
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'],