pb-sxp-ui 1.0.42 → 1.0.43

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 (60) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +111 -111
  3. package/dist/index.cjs +237 -600
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +4 -54
  6. package/dist/index.js +237 -599
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.min.cjs +3 -4
  9. package/dist/index.min.cjs.map +1 -1
  10. package/dist/index.min.js +3 -4
  11. package/dist/index.min.js.map +1 -1
  12. package/dist/pb-ui.js +241 -603
  13. package/dist/pb-ui.js.map +1 -1
  14. package/dist/pb-ui.min.js +3 -4
  15. package/dist/pb-ui.min.js.map +1 -1
  16. package/es/core/components/SxpPageCore/index.js +2 -2
  17. package/es/core/components/SxpPageRender/Nudge/index.js +5 -6
  18. package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  19. package/es/core/components/SxpPageRender/VideoWidget/index.js +119 -88
  20. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
  21. package/es/core/components/SxpPageRender/index.d.ts +0 -2
  22. package/es/core/components/SxpPageRender/index.js +63 -25
  23. package/es/core/context/SxpDataSourceProvider.d.ts +2 -3
  24. package/es/core/context/SxpDataSourceProvider.js +7 -28
  25. package/es/core/hooks/useEventReport.js +4 -4
  26. package/es/index.d.ts +0 -1
  27. package/es/index.js +0 -1
  28. package/es/materials/sxp/popup/CommodityDetail/index.js +10 -10
  29. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +10 -10
  30. package/lib/core/components/SxpPageCore/index.js +2 -2
  31. package/lib/core/components/SxpPageRender/Nudge/index.js +5 -6
  32. package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  33. package/lib/core/components/SxpPageRender/VideoWidget/index.js +119 -88
  34. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
  35. package/lib/core/components/SxpPageRender/index.d.ts +0 -2
  36. package/lib/core/components/SxpPageRender/index.js +63 -25
  37. package/lib/core/context/SxpDataSourceProvider.d.ts +2 -3
  38. package/lib/core/context/SxpDataSourceProvider.js +7 -28
  39. package/lib/core/hooks/useEventReport.js +4 -4
  40. package/lib/index.d.ts +0 -1
  41. package/lib/index.js +1 -3
  42. package/lib/materials/sxp/popup/CommodityDetail/index.js +10 -10
  43. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +10 -10
  44. package/package.json +114 -115
  45. package/es/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
  46. package/es/core/components/DiyPortalPreview/PictureGroup.js +0 -11
  47. package/es/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
  48. package/es/core/components/DiyPortalPreview/VideoWidget.js +0 -236
  49. package/es/core/components/DiyPortalPreview/index.d.ts +0 -6
  50. package/es/core/components/DiyPortalPreview/index.js +0 -127
  51. package/es/core/components/SxpPageRender/Tagbar.d.ts +0 -7
  52. package/es/core/components/SxpPageRender/Tagbar.js +0 -37
  53. package/lib/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
  54. package/lib/core/components/DiyPortalPreview/PictureGroup.js +0 -14
  55. package/lib/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
  56. package/lib/core/components/DiyPortalPreview/VideoWidget.js +0 -239
  57. package/lib/core/components/DiyPortalPreview/index.d.ts +0 -6
  58. package/lib/core/components/DiyPortalPreview/index.js +0 -130
  59. package/lib/core/components/SxpPageRender/Tagbar.d.ts +0 -7
  60. package/lib/core/components/SxpPageRender/Tagbar.js +0 -40
@@ -5,8 +5,7 @@ import { storeAndLoadFeSessionId } from '../utils/sessionStore';
5
5
  import { storeAndLoadFeUserId } from '../utils/localStore';
6
6
  import { useIconLink } from '../components/SxpPageRender/useIconLink';
7
7
  export const SxpDataSourceContext = createContext({
8
- rtcList: [],
9
- tagList: []
8
+ rtcList: []
10
9
  });
11
10
  var DataSourceType;
12
11
  (function (DataSourceType) {
@@ -15,7 +14,6 @@ var DataSourceType;
15
14
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
16
15
  const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false }) => {
17
16
  const [rtcList, setRtcList] = useState([]);
18
- const [tagList, setTagList] = useState([]);
19
17
  const [loading, setLoading] = useState(false);
20
18
  const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
21
19
  const swiperRef = useRef(null);
@@ -26,6 +24,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
26
24
  const [cacheRtcList, setCacheRtcList] = useState([]);
27
25
  const [cacheActiveIndex, setCacheActiveIndex] = useState(0);
28
26
  const [isFromHashtag, setIsFromHashtag] = useState(false);
27
+ const [videoRef, setVideoRef] = useState(null);
29
28
  useEffect(() => {
30
29
  setOpenHashtag(isOpenHashTag);
31
30
  }, [isOpenHashTag]);
@@ -128,18 +127,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
128
127
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
129
128
  return res === null || res === void 0 ? void 0 : res.success;
130
129
  }), [bffFetch]);
131
- const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
132
- var _g, _h;
133
- if (!utmVal)
134
- return;
135
- try {
136
- const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: utmVal } }));
137
- setTagList((_h = (_g = result === null || result === void 0 ? void 0 : result.data) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []);
138
- }
139
- catch (e) {
140
- console.log('e', e);
141
- }
142
- }), [bffFetch, utmVal]);
143
130
  const ctaEvent = useCallback((eventInfo, rec, product, position) => {
144
131
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
145
132
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
@@ -155,12 +142,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
155
142
  fromKName = 'imagePage';
156
143
  }
157
144
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
158
- 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 })
145
+ 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 + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: 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 })
159
146
  });
160
147
  }, [bffEventReport, isFromHashtag]);
161
148
  useEffect(() => {
162
149
  setLoading(true);
163
- bffGetTagList();
164
150
  getRecommendVideos()
165
151
  .then((data) => {
166
152
  var _a, _b;
@@ -176,7 +162,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
176
162
  if (!isInit.current)
177
163
  return;
178
164
  setLoading(true);
179
- bffGetTagList();
180
165
  getRecommendVideos()
181
166
  .then((data) => {
182
167
  var _a, _b;
@@ -186,7 +171,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
186
171
  .finally(() => {
187
172
  setLoading(false);
188
173
  });
189
- }, [getRecommendVideos, bffGetTagList]);
174
+ }, [getRecommendVideos]);
190
175
  const defaultLoadingImage = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
191
176
  return (React.createElement(SxpDataSourceContext.Provider, { value: {
192
177
  rtcList,
@@ -219,14 +204,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
219
204
  hashTagSize,
220
205
  loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage,
221
206
  isOpenHashTag,
222
- tagList,
223
- setLoading
224
- } }, render({
225
- rtcList,
226
- mutateLike: bffMutateLike,
227
- mutateUnlike: bffMutateUnlike,
228
- submitForm: bffSubmitForm,
229
- tagList
230
- })));
207
+ videoRef,
208
+ setVideoRef
209
+ } }, render({ rtcList, mutateLike: bffMutateLike, mutateUnlike: bffMutateUnlike, submitForm: bffSubmitForm })));
231
210
  };
232
211
  export default memo(SxpDataSourceProvider);
@@ -32,8 +32,8 @@ export function useEventReport() {
32
32
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
33
33
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
34
34
  position: position + '',
35
- 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 : '',
36
- ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
35
+ relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
36
+ relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
37
37
  traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
38
38
  }
39
39
  });
@@ -57,8 +57,8 @@ export function useEventReport() {
57
57
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
58
58
  contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
59
59
  position: position + '',
60
- contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
61
- ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
60
+ relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
61
+ relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
62
62
  traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
63
63
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
64
64
  eventSubject: 'productView',
package/es/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import { Pagebuilder } from './core/Pagebuilder';
2
2
  export * as core from './core';
3
3
  export * as materials from './materials';
4
4
  export { default as SxpPageRender } from './core/components/SxpPageRender';
5
- export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
6
5
  export { default as Modal } from './core/components/SxpPageRender/Modal';
7
6
  export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
8
7
  export { default as SxpPageCore } from './core/components/SxpPageCore';
package/es/index.js CHANGED
@@ -4,7 +4,6 @@ export { core_1 as core };
4
4
  import * as materials_1 from './materials';
5
5
  export { materials_1 as materials };
6
6
  export { default as SxpPageRender } from './core/components/SxpPageRender';
7
- export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
8
7
  export { default as Modal } from './core/components/SxpPageRender/Modal';
9
8
  export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
10
9
  export { default as SxpPageCore } from './core/components/SxpPageCore';
@@ -10,7 +10,7 @@ import Modal from '../../../../core/components/SxpPageRender/Modal';
10
10
  import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  const CommodityDetail = (_a) => {
13
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
13
+ var _b, _c, _d, _e, _f, _g, _h, _j;
14
14
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
15
15
  const { sxpParameter } = useSxpDataSource();
16
16
  const { popupDetailData, bffEventReport, isPreview, waterFallData } = useSxpDataSource();
@@ -51,7 +51,7 @@ const CommodityDetail = (_a) => {
51
51
  return '$7,000';
52
52
  }
53
53
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
54
- const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
54
+ const width = isPreview ? 375 : window.innerWidth;
55
55
  const renderContent = ({ isPost }) => {
56
56
  var _a, _b, _c;
57
57
  return (React.createElement("div", null,
@@ -59,10 +59,10 @@ const CommodityDetail = (_a) => {
59
59
  React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
60
60
  React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
61
61
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
62
- React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
63
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
62
+ React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
63
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
64
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
65
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
66
66
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
67
67
  };
68
68
  const renderBtn = () => {
@@ -71,7 +71,7 @@ const CommodityDetail = (_a) => {
71
71
  };
72
72
  return (React.createElement("div", { className: 'pb-commondity' },
73
73
  React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
74
- 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: {
74
+ product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
75
75
  clickable: true,
76
76
  bulletActiveClass: 'swipe-item-active-bullet',
77
77
  clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -79,7 +79,7 @@ const CommodityDetail = (_a) => {
79
79
  : 'commondityDetail-swiper-clickable-center'
80
80
  }, loop: true, autoplay: {
81
81
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
82
- } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
82
+ } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
83
83
  return (React.createElement(SwiperSlide, { key: src },
84
84
  React.createElement("div", { style: {
85
85
  overflow: 'hidden',
@@ -88,7 +88,7 @@ const CommodityDetail = (_a) => {
88
88
  } },
89
89
  React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
90
90
  }))),
91
- !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
91
+ !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
92
92
  position: 'relative',
93
93
  height: 0,
94
94
  width: '100%',
@@ -101,7 +101,7 @@ const CommodityDetail = (_a) => {
101
101
  top: 0,
102
102
  objectFit: 'cover',
103
103
  width: '100%'
104
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
104
+ }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
105
105
  React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
106
106
  renderBtn(),
107
107
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
@@ -10,7 +10,7 @@ import ExpandableText from '../../../../core/components/SxpPageRender/Expandable
10
10
  import { useEventReport } from '../../../../core/hooks/useEventReport';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  const CommodityDetailDiroNew = (_a) => {
13
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
13
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
14
14
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
15
15
  const [spread, setSpread] = useState(true);
16
16
  const { sxpParameter } = useSxpDataSource();
@@ -58,7 +58,7 @@ const CommodityDetailDiroNew = (_a) => {
58
58
  return '£102,300.00';
59
59
  }
60
60
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
61
- const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
61
+ const width = isPreview ? 375 : window.innerWidth;
62
62
  const handleClickCollapse = () => {
63
63
  setSpread(!spread);
64
64
  };
@@ -84,12 +84,12 @@ const CommodityDetailDiroNew = (_a) => {
84
84
  const productInfoText = ({ isPost }) => {
85
85
  return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
86
86
  React.createElement(ExpandableText, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
87
- `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
87
+ `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
88
88
  Made in Italy` })));
89
89
  };
90
90
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
91
91
  React.createElement("div", Object.assign({ ref: scrollRef, className: css(Object.assign({}, style)) }, props),
92
- 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: {
92
+ product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
93
93
  clickable: true,
94
94
  bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
95
95
  clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -97,7 +97,7 @@ Made in Italy` })));
97
97
  : 'commondityDiroNew-swiper-clickable-center'
98
98
  }, loop: true, autoplay: {
99
99
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
100
- } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
100
+ } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
101
101
  return (React.createElement(SwiperSlide, { key: src },
102
102
  React.createElement("div", { style: {
103
103
  overflow: 'hidden',
@@ -106,7 +106,7 @@ Made in Italy` })));
106
106
  } },
107
107
  React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
108
108
  }))),
109
- !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
109
+ !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
110
110
  position: 'relative',
111
111
  height: 0,
112
112
  width: '100%',
@@ -119,16 +119,16 @@ Made in Italy` })));
119
119
  top: 0,
120
120
  objectFit: 'cover',
121
121
  width: '100%'
122
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
122
+ }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
123
123
  React.createElement("div", { className: 'pb-commondityDiroNew-content' },
124
124
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
125
125
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
126
- 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'),
126
+ React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
127
127
  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')),
128
128
  React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
129
129
  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),
130
- 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 : '税费'))),
131
- (!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')),
130
+ 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 }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
131
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
132
132
  productInfoText({ isPost }))),
133
133
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
134
134
  };
@@ -19,10 +19,10 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
19
19
  return searchParams;
20
20
  }, []);
21
21
  return (react_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
22
- react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, render: ({ rtcList, tagList }) => {
22
+ react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, render: ({ rtcList }) => {
23
23
  var _a;
24
24
  return (react_1.default.createElement(react_1.default.Fragment, null,
25
- react_1.default.createElement(SxpPageRender_1.default, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
25
+ react_1.default.createElement(SxpPageRender_1.default, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { data: rtcList, resolver: RESOLVER })),
26
26
  react_1.default.createElement(Popup_1.default, null)));
27
27
  } })));
28
28
  };
@@ -3,15 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importDefault(require("react"));
5
5
  const Nudge = ({ nudge }) => {
6
- var _a, _b, _c, _d, _e, _f, _g;
7
6
  return (react_1.default.createElement(react_1.default.Fragment, null, (nudge === null || nudge === void 0 ? void 0 : nudge.isOpen) && (react_1.default.createElement("div", { className: 'clc-sxp-bottom-nudge', style: {
8
- marginBottom: (_a = nudge === null || nudge === void 0 ? void 0 : nudge.marginBottom) !== null && _a !== void 0 ? _a : 5,
9
- width: (_c = (_b = nudge === null || nudge === void 0 ? void 0 : nudge.size) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 212,
10
- height: (_e = (_d = nudge === null || nudge === void 0 ? void 0 : nudge.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 38,
7
+ marginBottom: nudge === null || nudge === void 0 ? void 0 : nudge.marginBottom,
8
+ width: nudge === null || nudge === void 0 ? void 0 : nudge.size.width,
9
+ height: nudge === null || nudge === void 0 ? void 0 : nudge.size.height,
11
10
  backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
12
- borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
11
+ borderRadius: nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius
13
12
  } },
14
13
  (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? react_1.default.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
15
- react_1.default.createElement("p", { style: Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
14
+ react_1.default.createElement("p", { style: Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle) }, nudge === null || nudge === void 0 ? void 0 : nudge.content)))));
16
15
  };
17
16
  exports.default = Nudge;
@@ -9,6 +9,7 @@ interface IVideoWidgetProps {
9
9
  muted: boolean;
10
10
  activeIndex?: number;
11
11
  videoPostConfig?: postConfigType;
12
+ videoRef?: any;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
14
15
  export default _default;