pb-sxp-ui 1.0.3 → 1.0.4

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 (50) hide show
  1. package/dist/index.cjs +64 -23
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -0
  4. package/dist/index.js +64 -23
  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 +64 -23
  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/RenderCard.js +3 -2
  15. package/es/core/components/SxpPageRender/index.js +1 -2
  16. package/es/materials/sxp/template/Appoint/index.d.ts +1 -0
  17. package/es/materials/sxp/template/Appoint/index.js +3 -3
  18. package/es/materials/sxp/template/Commodity/index.d.ts +1 -0
  19. package/es/materials/sxp/template/Commodity/index.js +2 -2
  20. package/es/materials/sxp/template/CommodityDiro/index.d.ts +1 -0
  21. package/es/materials/sxp/template/CommodityDiro/index.js +2 -2
  22. package/es/materials/sxp/template/CommodityDiroNew/index.d.ts +1 -0
  23. package/es/materials/sxp/template/CommodityDiroNew/index.js +2 -2
  24. package/es/materials/sxp/template/MultiCommodity/index.d.ts +1 -0
  25. package/es/materials/sxp/template/MultiCommodity/index.js +13 -2
  26. package/es/materials/sxp/template/MultiCommodityDiro/index.d.ts +1 -0
  27. package/es/materials/sxp/template/MultiCommodityDiro/index.js +13 -2
  28. package/es/materials/sxp/template/MultiCommodityDiroNew/index.d.ts +1 -0
  29. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +13 -2
  30. package/es/materials/sxp/template/components/EventProvider.d.ts +1 -0
  31. package/es/materials/sxp/template/components/EventProvider.js +15 -3
  32. package/lib/core/components/SxpPageRender/RenderCard.js +3 -2
  33. package/lib/core/components/SxpPageRender/index.js +1 -2
  34. package/lib/materials/sxp/template/Appoint/index.d.ts +1 -0
  35. package/lib/materials/sxp/template/Appoint/index.js +3 -3
  36. package/lib/materials/sxp/template/Commodity/index.d.ts +1 -0
  37. package/lib/materials/sxp/template/Commodity/index.js +2 -2
  38. package/lib/materials/sxp/template/CommodityDiro/index.d.ts +1 -0
  39. package/lib/materials/sxp/template/CommodityDiro/index.js +2 -2
  40. package/lib/materials/sxp/template/CommodityDiroNew/index.d.ts +1 -0
  41. package/lib/materials/sxp/template/CommodityDiroNew/index.js +2 -2
  42. package/lib/materials/sxp/template/MultiCommodity/index.d.ts +1 -0
  43. package/lib/materials/sxp/template/MultiCommodity/index.js +13 -2
  44. package/lib/materials/sxp/template/MultiCommodityDiro/index.d.ts +1 -0
  45. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +13 -2
  46. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.d.ts +1 -0
  47. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +13 -2
  48. package/lib/materials/sxp/template/components/EventProvider.d.ts +1 -0
  49. package/lib/materials/sxp/template/components/EventProvider.js +15 -3
  50. package/package.json +1 -1
package/es/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -5,7 +5,7 @@ import { useEditor } from '../../../core/hooks';
5
5
  const RenderCard = ({ rec, index, tempMap, resolver }) => {
6
6
  const { schema } = useEditor();
7
7
  const renderComp = useMemo(() => {
8
- 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;
8
+ 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, _4, _5, _6;
9
9
  if (!(rec === null || rec === void 0 ? void 0 : rec.video))
10
10
  return null;
11
11
  let cta = null;
@@ -31,7 +31,8 @@ const RenderCard = ({ rec, index, tempMap, resolver }) => {
31
31
  const t = resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type];
32
32
  const Component = withBindDataSource(t);
33
33
  const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
34
- return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.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 })));
34
+ const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
35
+ return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.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 })));
35
36
  }
36
37
  else {
37
38
  return null;
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -176,8 +176,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
176
176
  React.createElement(Nudge, { nudge: nudge }),
177
177
  React.createElement("div", { className: 'clc-sxp-bottom-card' },
178
178
  React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
179
- React.createElement("div", { className: 'clc-sxp-bottom-text' },
180
- React.createElement(ExpandableText, { isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: descStyle })),
179
+ React.createElement(ExpandableText, { 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: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: descStyle }),
181
180
  React.createElement(Hashtag, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
182
181
  }
183
182
  return null;
package/es/materials/sxp/template/Appoint/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface IAppointProps {
8
8
  recData?: RecItemType;
9
9
  bottom_image?: string;
10
10
  ctaTempStyles?: ICtaTempStylesType;
11
+ isExternalLink?: boolean;
11
12
  }
12
13
  declare const _default: React.NamedExoticComponent<IAppointProps>;
13
14
  export default _default;
package/es/materials/sxp/template/Appoint/index.js CHANGED
@@ -5,12 +5,12 @@ import EventProvider from '../components/EventProvider';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
6
  const Appoint = (_a) => {
7
7
  var _b, _c, _d, _e;
8
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
8
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
9
9
  const { sxpParameter } = useSxpDataSource();
10
10
  const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
11
- return (React.createElement(EventProvider, Object.assign({ rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
11
+ return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
12
12
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
13
- React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
13
+ React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
14
14
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
15
15
  };
16
16
  export default memo(Appoint);
package/es/materials/sxp/template/Commodity/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface ICommodityProps {
8
8
  recData?: RecItemType;
9
9
  bottom_image?: string;
10
10
  ctaTempStyles?: ICtaTempStylesType;
11
+ isExternalLink?: boolean;
11
12
  }
12
13
  declare const _default: React.NamedExoticComponent<ICommodityProps>;
13
14
  export default _default;
package/es/materials/sxp/template/Commodity/index.js CHANGED
@@ -6,11 +6,11 @@ import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  const Commodity = (_a) => {
8
8
  var _b, _c, _d, _e, _f, _g, _h;
9
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
9
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
10
10
  const { sxpParameter } = useSxpDataSource();
11
11
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
12
12
  const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
13
- return (React.createElement(EventProvider, Object.assign({ rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
13
+ return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
14
14
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
15
15
  React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
16
16
  React.createElement("div", { className: css({
package/es/materials/sxp/template/CommodityDiro/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface ICommodityDiroProps {
8
8
  recData?: RecItemType;
9
9
  bottom_image?: string;
10
10
  ctaTempStyles?: ICtaTempStylesType;
11
+ isExternalLink?: boolean;
11
12
  }
12
13
  declare const _default: React.NamedExoticComponent<ICommodityDiroProps>;
13
14
  export default _default;
package/es/materials/sxp/template/CommodityDiro/index.js CHANGED
@@ -6,11 +6,11 @@ import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  const CommodityDiro = (_a) => {
8
8
  var _b, _c, _d, _e, _f, _g, _h;
9
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
9
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
10
10
  const { sxpParameter } = useSxpDataSource();
11
11
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
12
12
  const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
13
- return (React.createElement(EventProvider, Object.assign({ rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
13
+ return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
14
14
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
15
15
  React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
16
16
  React.createElement("div", { className: css({
package/es/materials/sxp/template/CommodityDiroNew/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface ICommodityDiroNewProps {
8
8
  recData?: RecItemType;
9
9
  bottom_image?: string;
10
10
  ctaTempStyles?: ICtaTempStylesType;
11
+ isExternalLink?: boolean;
11
12
  }
12
13
  declare const _default: React.NamedExoticComponent<ICommodityDiroNewProps>;
13
14
  export default _default;
package/es/materials/sxp/template/CommodityDiroNew/index.js CHANGED
@@ -6,11 +6,11 @@ import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  const CommodityDiroNew = (_a) => {
8
8
  var _b, _c, _d, _e, _f, _g, _h;
9
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
9
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
10
10
  const { sxpParameter } = useSxpDataSource();
11
11
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
12
12
  const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
13
- return (React.createElement(EventProvider, Object.assign({ rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
13
+ return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
14
14
  React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
15
15
  React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
16
16
  React.createElement("div", { className: css({
package/es/materials/sxp/template/MultiCommodity/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface IMultiCommodityProps {
9
9
  onClick?: () => void;
10
10
  bottom_image?: string;
11
11
  ctaTempStyles?: ICtaTempStylesType;
12
+ isExternalLink?: boolean;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IMultiCommodityProps>;
14
15
  export default _default;
package/es/materials/sxp/template/MultiCommodity/index.js CHANGED
@@ -7,20 +7,31 @@ import Img from '../components/Img';
7
7
  import Scroll from '../components/Scroll';
8
8
  import styles from './index.module.less';
9
9
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
10
+ import { useEventReport } from '../../../../core/hooks/useEventReport';
10
11
  const MultiCommodity = (_a) => {
11
12
  var _b, _c;
12
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles"]);
13
+ var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
13
14
  const { sxpParameter } = useSxpDataSource();
14
15
  const { ctaEvent, setPopupDetailData } = useSxpDataSource();
15
16
  const { popupAni } = useEditor();
16
17
  const [products, setProducts] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
18
+ const { jumpToWeb } = useEventReport();
17
19
  const handleClick = throttle((item) => {
20
+ var _a;
18
21
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
19
22
  eventSubject: 'clickCta',
20
23
  eventDescription: 'User clicked the CTA'
21
24
  }, recData, item);
22
25
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
23
- onClick === null || onClick === void 0 ? void 0 : onClick();
26
+ if (isExternalLink) {
27
+ if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
28
+ jumpToWeb(recData, item, item.bindCta);
29
+ window.location.href = item.bindCta.link;
30
+ }
31
+ }
32
+ else {
33
+ onClick === null || onClick === void 0 ? void 0 : onClick();
34
+ }
24
35
  }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
25
36
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
26
37
  var _a, _b, _c, _d, _e, _f;
package/es/materials/sxp/template/MultiCommodityDiro/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface IMultiCommodityDiroProps {
9
9
  onClick?: () => void;
10
10
  bottom_image?: string;
11
11
  ctaTempStyles?: ICtaTempStylesType;
12
+ isExternalLink?: boolean;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IMultiCommodityDiroProps>;
14
15
  export default _default;
package/es/materials/sxp/template/MultiCommodityDiro/index.js CHANGED
@@ -7,19 +7,30 @@ import Scroll from '../components/Scroll';
7
7
  import Img from '../components/Img';
8
8
  import styles from './index.module.less';
9
9
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
10
+ import { useEventReport } from '../../../../core/hooks/useEventReport';
10
11
  const MultiCommodityDiro = (_a) => {
11
12
  var _b, _c;
12
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles"]);
13
+ var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
13
14
  const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
14
15
  const { popupAni } = useEditor();
16
+ const { jumpToWeb } = useEventReport();
15
17
  const [products, setProducts] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
16
18
  const handleClick = throttle((item) => {
19
+ var _a;
17
20
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
18
21
  eventSubject: 'clickCta',
19
22
  eventDescription: 'User clicked the CTA'
20
23
  }, recData, item);
21
24
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
22
- onClick === null || onClick === void 0 ? void 0 : onClick();
25
+ if (isExternalLink) {
26
+ if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
27
+ jumpToWeb(recData, item, item.bindCta);
28
+ window.location.href = item.bindCta.link;
29
+ }
30
+ }
31
+ else {
32
+ onClick === null || onClick === void 0 ? void 0 : onClick();
33
+ }
23
34
  }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
24
35
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
25
36
  var _a, _b, _c, _d, _e, _f;
package/es/materials/sxp/template/MultiCommodityDiroNew/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface IMultiCommodityDiroNewProps {
9
9
  onClick?: () => void;
10
10
  bottom_image?: string;
11
11
  ctaTempStyles?: ICtaTempStylesType;
12
+ isExternalLink?: boolean;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IMultiCommodityDiroNewProps>;
14
15
  export default _default;
package/es/materials/sxp/template/MultiCommodityDiroNew/index.js CHANGED
@@ -7,19 +7,30 @@ import Scroll from '../components/Scroll';
7
7
  import Img from '../components/Img';
8
8
  import styles from './index.module.less';
9
9
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
10
+ import { useEventReport } from '../../../../core/hooks/useEventReport';
10
11
  const MultiCommodityDiroNew = (_a) => {
11
12
  var _b, _c;
12
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles"]);
13
+ var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
13
14
  const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
14
15
  const { popupAni } = useEditor();
16
+ const { jumpToWeb } = useEventReport();
15
17
  const [products, setProducts] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
16
18
  const handleClick = throttle((item) => {
19
+ var _a;
17
20
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
18
21
  eventSubject: 'clickCta',
19
22
  eventDescription: 'User clicked the CTA'
20
23
  }, recData, item);
21
24
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
22
- onClick === null || onClick === void 0 ? void 0 : onClick();
25
+ if (isExternalLink) {
26
+ if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
27
+ jumpToWeb(recData, item, item.bindCta);
28
+ window.location.href = item.bindCta.link;
29
+ }
30
+ }
31
+ else {
32
+ onClick === null || onClick === void 0 ? void 0 : onClick();
33
+ }
23
34
  }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
24
35
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
25
36
  var _a, _b, _c, _d, _e, _f;
package/es/materials/sxp/template/components/EventProvider.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface IImgProps {
6
6
  className?: any;
7
7
  onClick?: any;
8
8
  style?: CSSProperties;
9
+ isExternalLink?: boolean;
9
10
  }
10
11
  declare const _default: React.NamedExoticComponent<IImgProps>;
11
12
  export default _default;
package/es/materials/sxp/template/components/EventProvider.js CHANGED
@@ -3,12 +3,14 @@ import React, { memo, useEffect, useRef } from 'react';
3
3
  import { throttle } from 'lodash';
4
4
  import useOnScreen from '../../../../core/hooks/useOnScreen';
5
5
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
6
+ import { useEventReport } from '../../../../core/hooks/useEventReport';
6
7
  const EventProvider = (_a) => {
7
- var { rec, children, className, onClick, style } = _a, props = __rest(_a, ["rec", "children", "className", "onClick", "style"]);
8
+ var { rec, children, className, onClick, style, isExternalLink = false } = _a, props = __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink"]);
8
9
  const ref = useRef(null);
9
10
  const isOnScreen = useOnScreen(ref);
10
11
  const { popupAni } = useEditor();
11
12
  const { setPopupDetailData, ctaEvent } = useSxpDataSource();
13
+ const { jumpToWeb } = useEventReport();
12
14
  useEffect(() => {
13
15
  var _a, _b;
14
16
  if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
@@ -20,14 +22,24 @@ const EventProvider = (_a) => {
20
22
  }
21
23
  }, [isOnScreen, ref, rec, ctaEvent]);
22
24
  const handleClick = throttle(() => {
23
- var _a, _b;
25
+ var _a, _b, _c, _d, _e, _f, _g, _h;
24
26
  const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
25
27
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
26
28
  eventSubject: 'clickCta',
27
29
  eventDescription: 'User clicked the CTA'
28
30
  }, rec, item);
29
31
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(rec);
30
- onClick === null || onClick === void 0 ? void 0 : onClick();
32
+ if (isExternalLink) {
33
+ if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindCta) === null || _d === void 0 ? void 0 : _d.link) {
34
+ const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
35
+ const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
36
+ jumpToWeb(rec, product, cta);
37
+ window.location.href = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) === null || _h === void 0 ? void 0 : _h.link;
38
+ }
39
+ }
40
+ else {
41
+ onClick === null || onClick === void 0 ? void 0 : onClick();
42
+ }
31
43
  }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
32
44
  return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
33
45
  };
package/lib/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -8,7 +8,7 @@ const hooks_1 = require("../../../core/hooks");
8
8
  const RenderCard = ({ rec, index, tempMap, resolver }) => {
9
9
  const { schema } = (0, hooks_1.useEditor)();
10
10
  const renderComp = (0, react_1.useMemo)(() => {
11
- 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;
11
+ 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, _4, _5, _6;
12
12
  if (!(rec === null || rec === void 0 ? void 0 : rec.video))
13
13
  return null;
14
14
  let cta = null;
@@ -34,7 +34,8 @@ const RenderCard = ({ rec, index, tempMap, resolver }) => {
34
34
  const t = resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type];
35
35
  const Component = (0, withBindDataSource_1.default)(t);
36
36
  const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
37
- return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.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 })));
37
+ const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
38
+ return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.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 })));
38
39
  }
39
40
  else {
40
41
  return null;
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -179,8 +179,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
179
179
  react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
180
180
  react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
181
181
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
182
- react_1.default.createElement("div", { className: 'clc-sxp-bottom-text' },
183
- react_1.default.createElement(ExpandableText_1.default, { isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: descStyle })),
182
+ 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: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: descStyle }),
184
183
  react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
185
184
  }
186
185
  return null;
package/lib/materials/sxp/template/Appoint/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface IAppointProps {
8
8
  recData?: RecItemType;
9
9
  bottom_image?: string;
10
10
  ctaTempStyles?: ICtaTempStylesType;
11
+ isExternalLink?: boolean;
11
12
  }
12
13
  declare const _default: React.NamedExoticComponent<IAppointProps>;
13
14
  export default _default;
package/lib/materials/sxp/template/Appoint/index.js CHANGED
@@ -7,12 +7,12 @@ const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProv
7
7
  const hooks_1 = require("../../../../core/hooks");
8
8
  const Appoint = (_a) => {
9
9
  var _b, _c, _d, _e;
10
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
10
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
11
11
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
12
12
  const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
13
- return (react_1.default.createElement(EventProvider_1.default, Object.assign({ rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
13
+ return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
14
14
  react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
15
- react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
15
+ react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
16
16
  react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
17
17
  };
18
18
  exports.default = (0, react_1.memo)(Appoint);
package/lib/materials/sxp/template/Commodity/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface ICommodityProps {
8
8
  recData?: RecItemType;
9
9
  bottom_image?: string;
10
10
  ctaTempStyles?: ICtaTempStylesType;
11
+ isExternalLink?: boolean;
11
12
  }
12
13
  declare const _default: React.NamedExoticComponent<ICommodityProps>;
13
14
  export default _default;
package/lib/materials/sxp/template/Commodity/index.js CHANGED
@@ -8,11 +8,11 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const Commodity = (_a) => {
10
10
  var _b, _c, _d, _e, _f, _g, _h;
11
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
11
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
12
12
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
13
13
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
14
14
  const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
15
- return (react_1.default.createElement(EventProvider_1.default, Object.assign({ rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
15
+ return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
16
16
  react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
17
17
  react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
18
18
  react_1.default.createElement("div", { className: (0, css_1.css)({
package/lib/materials/sxp/template/CommodityDiro/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface ICommodityDiroProps {
8
8
  recData?: RecItemType;
9
9
  bottom_image?: string;
10
10
  ctaTempStyles?: ICtaTempStylesType;
11
+ isExternalLink?: boolean;
11
12
  }
12
13
  declare const _default: React.NamedExoticComponent<ICommodityDiroProps>;
13
14
  export default _default;
package/lib/materials/sxp/template/CommodityDiro/index.js CHANGED
@@ -8,11 +8,11 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const CommodityDiro = (_a) => {
10
10
  var _b, _c, _d, _e, _f, _g, _h;
11
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
11
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
12
12
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
13
13
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
14
14
  const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
15
- return (react_1.default.createElement(EventProvider_1.default, Object.assign({ rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
15
+ return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
16
16
  react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
17
17
  react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
18
18
  react_1.default.createElement("div", { className: (0, css_1.css)({
package/lib/materials/sxp/template/CommodityDiroNew/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface ICommodityDiroNewProps {
8
8
  recData?: RecItemType;
9
9
  bottom_image?: string;
10
10
  ctaTempStyles?: ICtaTempStylesType;
11
+ isExternalLink?: boolean;
11
12
  }
12
13
  declare const _default: React.NamedExoticComponent<ICommodityDiroNewProps>;
13
14
  export default _default;
package/lib/materials/sxp/template/CommodityDiroNew/index.js CHANGED
@@ -8,11 +8,11 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const CommodityDiroNew = (_a) => {
10
10
  var _b, _c, _d, _e, _f, _g, _h;
11
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
11
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
12
12
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
13
13
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
14
14
  const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
15
- return (react_1.default.createElement(EventProvider_1.default, Object.assign({ rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
15
+ return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
16
16
  react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
17
17
  react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
18
18
  react_1.default.createElement("div", { className: (0, css_1.css)({
package/lib/materials/sxp/template/MultiCommodity/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface IMultiCommodityProps {
9
9
  onClick?: () => void;
10
10
  bottom_image?: string;
11
11
  ctaTempStyles?: ICtaTempStylesType;
12
+ isExternalLink?: boolean;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IMultiCommodityProps>;
14
15
  export default _default;
package/lib/materials/sxp/template/MultiCommodity/index.js CHANGED
@@ -9,20 +9,31 @@ const Img_1 = tslib_1.__importDefault(require("../components/Img"));
9
9
  const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
10
10
  const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
11
11
  const hooks_1 = require("../../../../core/hooks");
12
+ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
12
13
  const MultiCommodity = (_a) => {
13
14
  var _b, _c;
14
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles"]);
15
+ var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
15
16
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
16
17
  const { ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
17
18
  const { popupAni } = (0, hooks_1.useEditor)();
18
19
  const [products, setProducts] = (0, react_1.useState)((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
20
+ const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
19
21
  const handleClick = (0, lodash_1.throttle)((item) => {
22
+ var _a;
20
23
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
21
24
  eventSubject: 'clickCta',
22
25
  eventDescription: 'User clicked the CTA'
23
26
  }, recData, item);
24
27
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
25
- onClick === null || onClick === void 0 ? void 0 : onClick();
28
+ if (isExternalLink) {
29
+ if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
30
+ jumpToWeb(recData, item, item.bindCta);
31
+ window.location.href = item.bindCta.link;
32
+ }
33
+ }
34
+ else {
35
+ onClick === null || onClick === void 0 ? void 0 : onClick();
36
+ }
26
37
  }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
27
38
  return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
28
39
  var _a, _b, _c, _d, _e, _f;
package/lib/materials/sxp/template/MultiCommodityDiro/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface IMultiCommodityDiroProps {
9
9
  onClick?: () => void;
10
10
  bottom_image?: string;
11
11
  ctaTempStyles?: ICtaTempStylesType;
12
+ isExternalLink?: boolean;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IMultiCommodityDiroProps>;
14
15
  export default _default;
package/lib/materials/sxp/template/MultiCommodityDiro/index.js CHANGED
@@ -9,19 +9,30 @@ const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
9
9
  const Img_1 = tslib_1.__importDefault(require("../components/Img"));
10
10
  const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
11
11
  const hooks_1 = require("../../../../core/hooks");
12
+ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
12
13
  const MultiCommodityDiro = (_a) => {
13
14
  var _b, _c;
14
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles"]);
15
+ var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
15
16
  const { ctaEvent, setPopupDetailData, sxpParameter } = (0, hooks_1.useSxpDataSource)();
16
17
  const { popupAni } = (0, hooks_1.useEditor)();
18
+ const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
17
19
  const [products, setProducts] = (0, react_1.useState)((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
18
20
  const handleClick = (0, lodash_1.throttle)((item) => {
21
+ var _a;
19
22
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
20
23
  eventSubject: 'clickCta',
21
24
  eventDescription: 'User clicked the CTA'
22
25
  }, recData, item);
23
26
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
24
- onClick === null || onClick === void 0 ? void 0 : onClick();
27
+ if (isExternalLink) {
28
+ if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
29
+ jumpToWeb(recData, item, item.bindCta);
30
+ window.location.href = item.bindCta.link;
31
+ }
32
+ }
33
+ else {
34
+ onClick === null || onClick === void 0 ? void 0 : onClick();
35
+ }
25
36
  }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
26
37
  return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
27
38
  var _a, _b, _c, _d, _e, _f;
package/lib/materials/sxp/template/MultiCommodityDiroNew/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface IMultiCommodityDiroNewProps {
9
9
  onClick?: () => void;
10
10
  bottom_image?: string;
11
11
  ctaTempStyles?: ICtaTempStylesType;
12
+ isExternalLink?: boolean;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IMultiCommodityDiroNewProps>;
14
15
  export default _default;