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.
- package/LICENSE +21 -21
- package/README.md +111 -111
- package/dist/index.cjs +237 -600
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +4 -54
- package/dist/index.js +237 -599
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +241 -603
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageCore/index.js +2 -2
- package/es/core/components/SxpPageRender/Nudge/index.js +5 -6
- package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
- package/es/core/components/SxpPageRender/VideoWidget/index.js +119 -88
- package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
- package/es/core/components/SxpPageRender/index.d.ts +0 -2
- package/es/core/components/SxpPageRender/index.js +63 -25
- package/es/core/context/SxpDataSourceProvider.d.ts +2 -3
- package/es/core/context/SxpDataSourceProvider.js +7 -28
- package/es/core/hooks/useEventReport.js +4 -4
- package/es/index.d.ts +0 -1
- package/es/index.js +0 -1
- package/es/materials/sxp/popup/CommodityDetail/index.js +10 -10
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +10 -10
- package/lib/core/components/SxpPageCore/index.js +2 -2
- package/lib/core/components/SxpPageRender/Nudge/index.js +5 -6
- package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +119 -88
- package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
- package/lib/core/components/SxpPageRender/index.d.ts +0 -2
- package/lib/core/components/SxpPageRender/index.js +63 -25
- package/lib/core/context/SxpDataSourceProvider.d.ts +2 -3
- package/lib/core/context/SxpDataSourceProvider.js +7 -28
- package/lib/core/hooks/useEventReport.js +4 -4
- package/lib/index.d.ts +0 -1
- package/lib/index.js +1 -3
- package/lib/materials/sxp/popup/CommodityDetail/index.js +10 -10
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +10 -10
- package/package.json +114 -115
- package/es/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
- package/es/core/components/DiyPortalPreview/PictureGroup.js +0 -11
- package/es/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
- package/es/core/components/DiyPortalPreview/VideoWidget.js +0 -236
- package/es/core/components/DiyPortalPreview/index.d.ts +0 -6
- package/es/core/components/DiyPortalPreview/index.js +0 -127
- package/es/core/components/SxpPageRender/Tagbar.d.ts +0 -7
- package/es/core/components/SxpPageRender/Tagbar.js +0 -37
- package/lib/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
- package/lib/core/components/DiyPortalPreview/PictureGroup.js +0 -14
- package/lib/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
- package/lib/core/components/DiyPortalPreview/VideoWidget.js +0 -239
- package/lib/core/components/DiyPortalPreview/index.d.ts +0 -6
- package/lib/core/components/DiyPortalPreview/index.js +0 -130
- package/lib/core/components/SxpPageRender/Tagbar.d.ts +0 -7
- 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 + '',
|
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
|
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
|
-
|
223
|
-
|
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
|
-
|
36
|
-
|
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
|
-
|
61
|
-
|
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
|
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 :
|
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 && ((
|
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
|
-
} }, (
|
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
|
-
!((
|
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: (
|
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
|
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 :
|
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 && ((
|
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
|
-
} }, (
|
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
|
-
!((
|
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: (
|
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 }, (
|
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 }, (
|
131
|
-
(!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (
|
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
|
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, {
|
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:
|
9
|
-
width:
|
10
|
-
height:
|
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:
|
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) },
|
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;
|