pb-sxp-ui 1.0.73 → 1.0.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/index.cjs +59 -41
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +6 -6
  4. package/dist/index.js +59 -41
  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 +59 -41
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/index.js +27 -21
  15. package/es/materials/sxp/popup/CommodityDetail/index.js +10 -4
  16. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +11 -5
  17. package/es/materials/sxp/template/Commodity/index.js +4 -4
  18. package/es/materials/sxp/template/CommodityDiro/index.js +4 -4
  19. package/es/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  20. package/lib/core/components/SxpPageRender/index.js +27 -21
  21. package/lib/materials/sxp/popup/CommodityDetail/index.js +9 -3
  22. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +10 -4
  23. package/lib/materials/sxp/template/Commodity/index.js +4 -4
  24. package/lib/materials/sxp/template/CommodityDiro/index.js +4 -4
  25. package/lib/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  26. package/package.json +1 -1
package/dist/pb-ui.js CHANGED
@@ -8544,9 +8544,9 @@
8544
8544
  const renderContent = ({ isPost }) => {
8545
8545
  var _a, _b, _c;
8546
8546
  return (React.createElement("div", null,
8547
- React.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
8548
- React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
8549
- React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
8547
+ React.createElement("div", { className: 'pb-commondity-content-collection', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
8548
+ React.createElement("div", { className: 'pb-commondity-content-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
8549
+ React.createElement("div", { className: 'pb-commondity-content-price', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price), hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
8550
8550
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
8551
8551
  React.createElement(ExpandableText$1, { 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
8552
8552
  bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
@@ -8558,6 +8558,12 @@
8558
8558
  var _a;
8559
8559
  return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website'))));
8560
8560
  };
8561
+ const getStyle = React.useCallback((style) => {
8562
+ if (style === null || style === void 0 ? void 0 : style.lineClamp) {
8563
+ return Object.assign(Object.assign({}, style), { overflow: 'hidden', WebkitLineClamp: style === null || style === void 0 ? void 0 : style.lineClamp, textOverflow: 'ellipsis', display: '-webkit-box', webkitBoxOrient: 'vertical' });
8564
+ }
8565
+ return style;
8566
+ }, []);
8561
8567
  return (React.createElement("div", { className: 'pb-commondity' },
8562
8568
  React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
8563
8569
  product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
@@ -9088,6 +9094,12 @@
9088
9094
  `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
9089
9095
  Made in Italy` })));
9090
9096
  };
9097
+ const getStyle = React.useCallback((style) => {
9098
+ if (style === null || style === void 0 ? void 0 : style.lineClamp) {
9099
+ return Object.assign(Object.assign({}, style), { overflow: 'hidden', WebkitLineClamp: style === null || style === void 0 ? void 0 : style.lineClamp, textOverflow: 'ellipsis', display: '-webkit-box', webkitBoxOrient: 'vertical' });
9100
+ }
9101
+ return style;
9102
+ }, []);
9091
9103
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
9092
9104
  React.createElement("div", Object.assign({ ref: scrollRef, className: css.css(Object.assign({}, style)) }, props),
9093
9105
  product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
@@ -9130,11 +9142,11 @@ Made in Italy` })));
9130
9142
  React.createElement("div", { className: 'pb-commondityDiroNew-content' },
9131
9143
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
9132
9144
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
9133
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours Bag'),
9134
- React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
9145
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title) }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours BagLarge'),
9146
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection) }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge')),
9135
9147
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
9136
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
9137
- React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
9148
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) }, priceText),
9149
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo) }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
9138
9150
  (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
9139
9151
  productInfoText({ isPost }))),
9140
9152
  React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
@@ -9525,11 +9537,11 @@ Made in Italy` })));
9525
9537
  var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
9526
9538
 
9527
9539
  const Commodity$1 = (_a) => {
9528
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
9540
+ var _b, _c, _d, _e, _f, _g, _h, _j;
9529
9541
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
9530
9542
  const { sxpParameter } = useSxpDataSource();
9531
9543
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
9532
- const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
9544
+ const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
9533
9545
  return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
9534
9546
  React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
9535
9547
  React.createElement(FormatImage$1, { className: css.css({
@@ -9547,8 +9559,8 @@ Made in Italy` })));
9547
9559
  width: '100%',
9548
9560
  overflow: 'hidden'
9549
9561
  }) },
9550
- React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
9551
- React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
9562
+ React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
9563
+ React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
9552
9564
  };
9553
9565
  var CommodityComponent = React.memo(Commodity$1);
9554
9566
 
@@ -9774,11 +9786,11 @@ Made in Italy` })));
9774
9786
  var styles$4 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
9775
9787
 
9776
9788
  const CommodityDiro$1 = (_a) => {
9777
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
9789
+ var _b, _c, _d, _e, _f, _g, _h, _j;
9778
9790
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
9779
9791
  const { sxpParameter } = useSxpDataSource();
9780
9792
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
9781
- const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
9793
+ const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
9782
9794
  return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
9783
9795
  React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
9784
9796
  React.createElement(FormatImage$1, { className: css.css({
@@ -9796,8 +9808,8 @@ Made in Italy` })));
9796
9808
  width: '100%',
9797
9809
  overflow: 'hidden'
9798
9810
  }) },
9799
- React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
9800
- React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
9811
+ React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
9812
+ React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
9801
9813
  };
9802
9814
  var CommodityDiroComponent = React.memo(CommodityDiro$1);
9803
9815
 
@@ -9872,11 +9884,11 @@ Made in Italy` })));
9872
9884
  var styles$3 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
9873
9885
 
9874
9886
  const CommodityDiroNew$1 = (_a) => {
9875
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
9887
+ var _b, _c, _d, _e, _f, _g, _h, _j;
9876
9888
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
9877
9889
  const { sxpParameter } = useSxpDataSource();
9878
9890
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
9879
- const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
9891
+ const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
9880
9892
  return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
9881
9893
  React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
9882
9894
  React.createElement(FormatImage$1, { className: css.css({
@@ -9894,8 +9906,8 @@ Made in Italy` })));
9894
9906
  width: '100%',
9895
9907
  overflow: 'hidden'
9896
9908
  }) },
9897
- React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
9898
- React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop now'))));
9909
+ React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
9910
+ React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop now'))));
9899
9911
  };
9900
9912
  var CommodityDiroNewComponent = React.memo(CommodityDiroNew$1);
9901
9913
 
@@ -12947,7 +12959,7 @@ Made in Italy` })));
12947
12959
  * @Author: binruan@chatlabs.com
12948
12960
  * @Date: 2024-01-15 19:03:09
12949
12961
  * @LastEditors: binruan@chatlabs.com
12950
- * @LastEditTime: 2024-05-24 16:32:06
12962
+ * @LastEditTime: 2024-05-29 17:41:35
12951
12963
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
12952
12964
  *
12953
12965
  */
@@ -13073,7 +13085,7 @@ Made in Italy` })));
13073
13085
  React.useEffect(() => {
13074
13086
  const item = data === null || data === void 0 ? void 0 : data[activeIndex];
13075
13087
  const visibleChange = () => {
13076
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
13088
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
13077
13089
  if (document.visibilityState === 'hidden') {
13078
13090
  // 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面（即离开原页面时），或者在移动设备上从浏览器切换到不同的应用程序时
13079
13091
  // 移动端h5直接杀掉浏览器或宿主app时不会触发，pc端直接杀掉标签页时能触发
@@ -13084,16 +13096,16 @@ Made in Italy` })));
13084
13096
  if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
13085
13097
  fromKName = 'pdpPage';
13086
13098
  }
13087
- else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
13099
+ else if (popupDetailData && ((_g = tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item) === null || _g === void 0 ? void 0 : _g.type) === 'Appoint') {
13088
13100
  fromKName = 'formPage';
13089
13101
  }
13090
13102
  else if (isFromHashtag) {
13091
13103
  fromKName = 'hashTagPage';
13092
13104
  }
13093
- else if ((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url) {
13105
+ else if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
13094
13106
  fromKName = 'videoPage';
13095
13107
  }
13096
- else if (((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.imgUrls) && ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) === null || _k === void 0 ? void 0 : _k.length)) {
13108
+ else if (((_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) && ((_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.imgUrls) === null || _l === void 0 ? void 0 : _l.length)) {
13097
13109
  fromKName = 'imagePage';
13098
13110
  }
13099
13111
  else if (item === null || item === void 0 ? void 0 : item.product) {
@@ -13104,12 +13116,12 @@ Made in Italy` })));
13104
13116
  sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
13105
13117
  eventSubject: 'sessionCompleted',
13106
13118
  eventDescription: 'Session completed',
13107
- contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
13108
- productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
13119
+ contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
13120
+ productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
13109
13121
  position: activeIndex + '',
13110
13122
  fromKName,
13111
13123
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
13112
- ctatId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
13124
+ ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : ''
13113
13125
  }
13114
13126
  });
13115
13127
  }
@@ -13197,8 +13209,10 @@ Made in Italy` })));
13197
13209
  ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
13198
13210
  React.createElement("div", { className: 'clc-sxp-bottom' },
13199
13211
  React.createElement(Nudge, { nudge: nudge }),
13200
- (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
13201
- React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
13212
+ (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)
13213
+ ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
13214
+ React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })))
13215
+ : null,
13202
13216
  React.createElement("div", null,
13203
13217
  React.createElement(ExpandableText$1, { 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 === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', 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 }),
13204
13218
  React.createElement(Hashtag$1, { 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 === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
@@ -13348,17 +13362,19 @@ Made in Italy` })));
13348
13362
  React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })));
13349
13363
  }
13350
13364
  return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
13351
- return (React.createElement(SwiperSlide, { key: index, virtualIndex: index }, rec && (React.createElement(React.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading) ? (React.createElement("div", { style: {
13352
- height,
13353
- width: containerWidth,
13354
- display: 'flex',
13355
- justifyContent: 'center',
13356
- alignItems: 'center'
13357
- } },
13358
- React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
13359
- renderContent(rec, index),
13360
- renderBottom(rec, index),
13361
- renderLikeButton(rec, index)))))));
13365
+ return (React.createElement(SwiperSlide, { key: index, virtualIndex: index }, rec && (React.createElement(React.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading)
13366
+ ? (React.createElement("div", { style: {
13367
+ height,
13368
+ width: containerWidth,
13369
+ display: 'flex',
13370
+ justifyContent: 'center',
13371
+ alignItems: 'center'
13372
+ } },
13373
+ React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })))
13374
+ : (React.createElement(React.Fragment, null,
13375
+ renderContent(rec, index),
13376
+ renderBottom(rec, index),
13377
+ renderLikeButton(rec, index)))))));
13362
13378
  });
13363
13379
  }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage]);
13364
13380
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
@@ -13369,7 +13385,9 @@ Made in Italy` })));
13369
13385
  } })),
13370
13386
  renderLogo,
13371
13387
  React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex }),
13372
- isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
13388
+ isShowFingerTip
13389
+ ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } }))
13390
+ : null,
13373
13391
  React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
13374
13392
  swiperRef.current.swiper.allowTouchMove = false;
13375
13393
  setTimeout(() => {