pb-sxp-ui 14.0.5 → 14.0.7
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/dist/index.cjs +807 -418
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +89 -0
- package/dist/index.js +807 -418
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +4 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +807 -418
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +4 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/ConsentPopup.js +8 -8
- package/es/core/components/SxpPageRender/Navbar.js +1 -1
- package/es/core/components/SxpPageRender/WaterFall/preview.json +207 -272
- package/es/core/components/SxpPageRender/index.js +5 -2
- package/es/core/context/SxpDataSourceProvider.js +54 -22
- package/es/core/utils/materials.js +5 -3
- package/es/materials/sxp/consentPopup/Click/index.d.ts +19 -0
- package/es/materials/sxp/consentPopup/Click/index.js +19 -0
- package/es/materials/sxp/consentPopup/Click/material.d.ts +2 -0
- package/es/materials/sxp/consentPopup/Click/material.js +48 -0
- package/es/materials/sxp/consentPopup/Click/settingRender.d.ts +63 -0
- package/es/materials/sxp/consentPopup/Click/settingRender.js +210 -0
- package/es/materials/sxp/consentPopup/Display/index.d.ts +2 -2
- package/es/materials/sxp/consentPopup/Display/index.js +7 -5
- package/es/materials/sxp/consentPopup/Swipe/index.d.ts +12 -0
- package/es/materials/sxp/consentPopup/Swipe/index.js +44 -0
- package/es/materials/sxp/consentPopup/Swipe/material.d.ts +2 -0
- package/es/materials/sxp/consentPopup/Swipe/material.js +24 -0
- package/es/materials/sxp/consentPopup/Swipe/settingRender.d.ts +29 -0
- package/es/materials/sxp/consentPopup/Swipe/settingRender.js +43 -0
- package/es/materials/sxp/consentPopup/index.d.ts +2 -0
- package/es/materials/sxp/consentPopup/index.js +2 -0
- package/es/materials/sxp/cta/AniLink/index.js +1 -1
- package/es/materials/sxp/cta/AniLinkPopup/index.js +1 -1
- package/es/materials/sxp/popup/ConsentDetail/index.d.ts +2 -1
- package/es/materials/sxp/popup/ConsentDetail/index.js +2 -2
- package/es/materials/sxp/popup/Iframe/index.d.ts +0 -4
- package/es/materials/sxp/popup/Iframe/index.js +4 -5
- package/es/materials/sxp/popup/Iframe/settingRender.js +0 -15
- package/lib/core/components/SxpPageRender/ConsentPopup.js +7 -7
- package/lib/core/components/SxpPageRender/Navbar.js +1 -1
- package/lib/core/components/SxpPageRender/WaterFall/preview.json +207 -272
- package/lib/core/components/SxpPageRender/index.js +5 -2
- package/lib/core/context/SxpDataSourceProvider.js +54 -22
- package/lib/core/utils/materials.js +5 -3
- package/lib/materials/sxp/consentPopup/Click/index.d.ts +19 -0
- package/lib/materials/sxp/consentPopup/Click/index.js +21 -0
- package/lib/materials/sxp/consentPopup/Click/material.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/Click/material.js +52 -0
- package/lib/materials/sxp/consentPopup/Click/settingRender.d.ts +63 -0
- package/lib/materials/sxp/consentPopup/Click/settingRender.js +212 -0
- package/lib/materials/sxp/consentPopup/Display/index.d.ts +2 -2
- package/lib/materials/sxp/consentPopup/Display/index.js +7 -5
- package/lib/materials/sxp/consentPopup/Swipe/index.d.ts +12 -0
- package/lib/materials/sxp/consentPopup/Swipe/index.js +46 -0
- package/lib/materials/sxp/consentPopup/Swipe/material.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/Swipe/material.js +28 -0
- package/lib/materials/sxp/consentPopup/Swipe/settingRender.d.ts +29 -0
- package/lib/materials/sxp/consentPopup/Swipe/settingRender.js +45 -0
- package/lib/materials/sxp/consentPopup/index.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/index.js +2 -0
- package/lib/materials/sxp/cta/AniLink/index.js +1 -1
- package/lib/materials/sxp/cta/AniLinkPopup/index.js +1 -1
- package/lib/materials/sxp/popup/ConsentDetail/index.d.ts +2 -1
- package/lib/materials/sxp/popup/ConsentDetail/index.js +2 -2
- package/lib/materials/sxp/popup/Iframe/index.d.ts +0 -4
- package/lib/materials/sxp/popup/Iframe/index.js +4 -5
- package/lib/materials/sxp/popup/Iframe/settingRender.js +0 -15
- package/package.json +1 -1
@@ -120,7 +120,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
120
120
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
121
121
|
productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
|
122
122
|
position: activeIndex + '',
|
123
|
-
fromKName: fk
|
123
|
+
fromKName: fk || fromKName,
|
124
124
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
125
125
|
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 : '',
|
126
126
|
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
|
@@ -147,9 +147,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
147
147
|
setIsReload(new Date().getTime());
|
148
148
|
skipLinkRef.current = false;
|
149
149
|
}
|
150
|
+
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false);
|
150
151
|
handleH5EnterLink();
|
151
152
|
if (repCond) {
|
152
|
-
|
153
|
+
setTimeout(() => {
|
154
|
+
event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
|
155
|
+
});
|
153
156
|
backMainFeed('external', selectTag);
|
154
157
|
}
|
155
158
|
}
|
@@ -102,29 +102,32 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
102
102
|
const bffDataSource = (0, react_1.useMemo)(() => {
|
103
103
|
return dataSources === null || dataSources === void 0 ? void 0 : dataSources.find((d) => d.type === DataSourceType.BFF);
|
104
104
|
}, [dataSources]);
|
105
|
+
const fakeUserId = (0, react_1.useMemo)(() => {
|
106
|
+
var _a;
|
107
|
+
return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + (0, localStore_1.storeAndLoadFeUserId)();
|
108
|
+
}, [bffDataSource]);
|
105
109
|
const bffFetch = (0, react_1.useCallback)((path, options) => {
|
106
110
|
if (!bffDataSource)
|
107
111
|
return;
|
108
112
|
const url = bffDataSource.url;
|
109
|
-
const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
|
110
113
|
if (options === null || options === void 0 ? void 0 : options.query) {
|
111
114
|
const queryString = qs_1.default.stringify(options.query);
|
112
115
|
path = `${path}?${queryString}`;
|
113
116
|
}
|
114
117
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
115
|
-
return navigator.sendBeacon(`${url}/api
|
118
|
+
return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
|
116
119
|
JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
|
117
120
|
], { type: 'application/json;charset=UTF-8' }));
|
118
121
|
}
|
119
122
|
return window
|
120
|
-
.fetch(`${url}/api
|
123
|
+
.fetch(`${url}/api/${path}`, {
|
121
124
|
headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
|
122
125
|
method: options.method,
|
123
126
|
body: JSON.stringify(options.body)
|
124
127
|
})
|
125
128
|
.then((res) => res.json())
|
126
129
|
.catch((err) => Promise.reject(err));
|
127
|
-
}, [bffDataSource]);
|
130
|
+
}, [bffDataSource, fakeUserId]);
|
128
131
|
const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
129
132
|
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
130
133
|
query = {
|
@@ -161,14 +164,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
161
164
|
const recurveRecList = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
162
165
|
var _v, _w, _x, _y, _z, _0;
|
163
166
|
query.pageNum = pageNum;
|
164
|
-
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
167
|
+
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
|
165
168
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
166
169
|
return undefined;
|
167
170
|
}
|
168
171
|
setLoading(false);
|
169
172
|
list = list.concat((_y = (_x = (_w = (_v = result === null || result === void 0 ? void 0 : result.data) === null || _v === void 0 ? void 0 : _v.recList) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.call(_w, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _y !== void 0 ? _y : []);
|
170
|
-
|
171
|
-
|
173
|
+
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
174
|
+
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
175
|
+
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
176
|
+
}
|
172
177
|
const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
173
178
|
if (isNotNullList) {
|
174
179
|
pageNum = pageNum + 1;
|
@@ -178,12 +183,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
178
183
|
yield recurveRecList(query);
|
179
184
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
180
185
|
setCurReqInfo({ rtc: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.rtc, requestId: (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.requestId });
|
181
|
-
return Object.assign(Object.assign({}, result.data), { recList: list });
|
186
|
+
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
182
187
|
}
|
183
188
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
184
189
|
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_o = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _o !== void 0 ? _o : 1 });
|
185
190
|
}
|
186
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
191
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
|
187
192
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
188
193
|
return undefined;
|
189
194
|
}
|
@@ -233,6 +238,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
233
238
|
return expire;
|
234
239
|
}, [data]);
|
235
240
|
const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo, reportLayId = true }) => {
|
241
|
+
var _a, _b;
|
236
242
|
if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
|
237
243
|
return;
|
238
244
|
}
|
@@ -240,7 +246,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
240
246
|
userInfo = {};
|
241
247
|
}
|
242
248
|
const sessionID = (0, sessionStore_1.storeAndLoadFeSessionId)();
|
243
|
-
const
|
249
|
+
const params = {};
|
250
|
+
const queryString = location.search.slice(1);
|
251
|
+
(_a = (0, tool_1.splitUrlParams)(queryString)) === null || _a === void 0 ? void 0 : _a.map((val) => {
|
252
|
+
const key = val.split('=')[0];
|
253
|
+
const value = val.split('=')[1];
|
254
|
+
params[key] = value;
|
255
|
+
});
|
256
|
+
console.log(params, '111');
|
257
|
+
const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
|
258
|
+
const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, { playbookType }), (layoutVariantId && reportLayId && { layoutVariantId })), eventInfo), ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) && channel && { position: Number(eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.position) + 1 + '' })), (cl_source && { cl_source }));
|
244
259
|
const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
|
245
260
|
const realEventInfo = Object.entries(ef)
|
246
261
|
.map(([k, v]) => v && { name: k, value: v })
|
@@ -249,14 +264,23 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
249
264
|
console.log('userInfo:', userInfo);
|
250
265
|
console.log('eventInfo:', ef);
|
251
266
|
console.log('========= 结束 =========');
|
252
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
267
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
|
253
268
|
method: 'POST',
|
254
269
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
255
270
|
type: 'beacon'
|
256
271
|
});
|
257
|
-
}, [
|
272
|
+
}, [
|
273
|
+
bffFetch,
|
274
|
+
curReqInfo,
|
275
|
+
enableReportEvent,
|
276
|
+
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
277
|
+
layoutVariantId,
|
278
|
+
globalConfig,
|
279
|
+
playbookType,
|
280
|
+
bffDataSource
|
281
|
+
]);
|
258
282
|
const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
|
259
|
-
var _a, _b, _c, _d, _e;
|
283
|
+
var _a, _b, _c, _d, _e, _f;
|
260
284
|
if (!enableReportEvent ||
|
261
285
|
!enabledMetaConversionApi ||
|
262
286
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
@@ -268,7 +292,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
268
292
|
const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
|
269
293
|
const fix_par = {
|
270
294
|
event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
|
271
|
-
external_id:
|
295
|
+
external_id: fakeUserId,
|
272
296
|
client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
|
273
297
|
fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
|
274
298
|
fbp: (0, tool_1.getCookie)('_fbp') ? `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` : '',
|
@@ -320,22 +344,30 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
320
344
|
}
|
321
345
|
};
|
322
346
|
getEventParams(jsonParams);
|
323
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
347
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/FB/${(_f = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _f === void 0 ? void 0 : _f['x-app-id']}/${eventName}`, {
|
324
348
|
method: 'POST',
|
325
349
|
body: jsonParams,
|
326
350
|
type: 'beacon'
|
327
351
|
});
|
328
|
-
}, [
|
352
|
+
}, [
|
353
|
+
bffFetch,
|
354
|
+
enableReportEvent,
|
355
|
+
enabledMetaConversionApi,
|
356
|
+
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
357
|
+
globalConfig,
|
358
|
+
fakeUserId,
|
359
|
+
bffDataSource
|
360
|
+
]);
|
329
361
|
const bffMutateLike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
330
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/like', { method: 'POST', body }));
|
362
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
|
331
363
|
return res === null || res === void 0 ? void 0 : res.success;
|
332
364
|
}), [bffFetch]);
|
333
365
|
const bffMutateUnlike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
334
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/unlike', { method: 'POST', body }));
|
366
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/unlike', { method: 'POST', body }));
|
335
367
|
return res === null || res === void 0 ? void 0 : res.success;
|
336
368
|
}), [bffFetch]);
|
337
369
|
const bffSubmitForm = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
338
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
|
370
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/customform', { method: 'POST', body }));
|
339
371
|
return res === null || res === void 0 ? void 0 : res.success;
|
340
372
|
}), [bffFetch]);
|
341
373
|
const bffGetTagList = (0, react_1.useCallback)((data) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
@@ -349,7 +381,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
349
381
|
const key = val.split('=')[0];
|
350
382
|
return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
|
351
383
|
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
352
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
384
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
353
385
|
setTagList((_12 = (_11 = result === null || result === void 0 ? void 0 : result.data) === null || _11 === void 0 ? void 0 : _11.tags) !== null && _12 !== void 0 ? _12 : []);
|
354
386
|
}
|
355
387
|
catch (e) {
|
@@ -428,10 +460,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
428
460
|
let curData;
|
429
461
|
let gldata;
|
430
462
|
if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
|
463
|
+
layId = data === null || data === void 0 ? void 0 : data.layoutVariantId;
|
464
|
+
setLayoutVariantId(data === null || data === void 0 ? void 0 : data.layoutVariantId);
|
431
465
|
const id = (_b = (_a = data === null || data === void 0 ? void 0 : data.layoutVariantId) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[1];
|
432
466
|
if (id) {
|
433
|
-
layId = id;
|
434
|
-
setLayoutVariantId(id);
|
435
467
|
curData = dataList === null || dataList === void 0 ? void 0 : dataList.find((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
|
436
468
|
if (curData) {
|
437
469
|
setPageData(curData);
|
@@ -38,14 +38,16 @@ const getBgStyleByImg = (data) => {
|
|
38
38
|
exports.getBgStyleByImg = getBgStyleByImg;
|
39
39
|
const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef, style }) => {
|
40
40
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
41
|
+
let text = '';
|
41
42
|
if ((!(product === null || product === void 0 ? void 0 : product.currency) || !(product === null || product === void 0 ? void 0 : product.price)) && isHiddenDef)
|
42
43
|
return null;
|
43
|
-
let price = (product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price) ? product === null || product === void 0 ? void 0 : product.price : 7000;
|
44
|
-
|
44
|
+
let price = Number((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price) ? product === null || product === void 0 ? void 0 : product.price : 7000);
|
45
|
+
if (typeof price !== 'number')
|
46
|
+
return text;
|
45
47
|
let priceSymbol = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol;
|
46
48
|
let currency = (product === null || product === void 0 ? void 0 : product.currency) ? (_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : '' : '$';
|
47
49
|
const isToLocStr = enableFormattedPrice === undefined || enableFormattedPrice;
|
48
|
-
let decPic = price.toString();
|
50
|
+
let decPic = price === null || price === void 0 ? void 0 : price.toString();
|
49
51
|
if (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.showTwoDecimalPoint) {
|
50
52
|
decPic = price === null || price === void 0 ? void 0 : price.toFixed(2);
|
51
53
|
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
2
|
+
import './index.less';
|
3
|
+
export interface IClickProps {
|
4
|
+
open?: boolean;
|
5
|
+
content?: string;
|
6
|
+
style?: Record<string, any>;
|
7
|
+
isTel?: boolean;
|
8
|
+
acceptButton?: {
|
9
|
+
text?: string;
|
10
|
+
style?: CSSProperties;
|
11
|
+
};
|
12
|
+
rejectButton?: {
|
13
|
+
text?: string;
|
14
|
+
style?: CSSProperties;
|
15
|
+
};
|
16
|
+
consentPopupCate?: string;
|
17
|
+
}
|
18
|
+
declare const _default: React.NamedExoticComponent<IClickProps>;
|
19
|
+
export default _default;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
const tslib_1 = require("tslib");
|
4
|
+
const react_1 = tslib_1.__importStar(require("react"));
|
5
|
+
require("./index.less");
|
6
|
+
const tel_png_1 = tslib_1.__importDefault(require("./tel.png"));
|
7
|
+
const ConsentDetail_1 = tslib_1.__importDefault(require("../../popup/ConsentDetail"));
|
8
|
+
const Click = (_a) => {
|
9
|
+
var { isTel, open, content, style, consentPopupCate, acceptButton, rejectButton } = _a, props = tslib_1.__rest(_a, ["isTel", "open", "content", "style", "consentPopupCate", "acceptButton", "rejectButton"]);
|
10
|
+
const visivle = (0, react_1.useMemo)(() => {
|
11
|
+
return consentPopupCate || (open && style);
|
12
|
+
}, [consentPopupCate, open]);
|
13
|
+
const handleClickAccept = () => { };
|
14
|
+
const handleClickReject = () => { };
|
15
|
+
return (react_1.default.createElement(react_1.default.Fragment, null, isTel ? (react_1.default.createElement("img", { src: tel_png_1.default, style: { objectFit: 'cover', width: '100%', height: '100%' } })) : (react_1.default.createElement(react_1.default.Fragment, null, visivle && (react_1.default.createElement("div", { className: 'consentPopupClick' },
|
16
|
+
react_1.default.createElement("div", { className: 'consentPopupClick-container', style: style },
|
17
|
+
react_1.default.createElement(ConsentDetail_1.default, { content: content, style: { padding: 0 } }),
|
18
|
+
react_1.default.createElement("button", { style: acceptButton === null || acceptButton === void 0 ? void 0 : acceptButton.style, onClick: handleClickAccept }, acceptButton === null || acceptButton === void 0 ? void 0 : acceptButton.text),
|
19
|
+
react_1.default.createElement("button", { style: rejectButton === null || rejectButton === void 0 ? void 0 : rejectButton.style, onClick: handleClickReject }, rejectButton === null || rejectButton === void 0 ? void 0 : rejectButton.text))))))));
|
20
|
+
};
|
21
|
+
exports.default = (0, react_1.memo)(Click);
|
@@ -0,0 +1,52 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.Click = void 0;
|
4
|
+
const tslib_1 = require("tslib");
|
5
|
+
const settingRender_1 = tslib_1.__importDefault(require("./settingRender"));
|
6
|
+
const _1 = tslib_1.__importDefault(require("."));
|
7
|
+
const create_1 = require("../../../../core/create");
|
8
|
+
const Click = (0, create_1.createMaterial)(_1.default, {
|
9
|
+
displayName: 'Click Consent',
|
10
|
+
icon: '',
|
11
|
+
category: 'consentPopup',
|
12
|
+
type: 'Click',
|
13
|
+
related: {
|
14
|
+
settingRender: settingRender_1.default,
|
15
|
+
bindableProps: []
|
16
|
+
},
|
17
|
+
defaulSetting: {
|
18
|
+
props: {
|
19
|
+
content: '<p><strong><span style="font-size:14px"><span style="line-height:3">Your Cookie Preferences</span></span></strong></p><p>We use cookie, including third-party cookies, to ensure the proper functioning and security of this site, to analyse its use, and to show you personalised content. You can authorise the use of all cookies by clicking on "Accept all cookies". If you click on "Reject all cookies", we will only use cookies necessary for the proper functioning and security of this site. To personalise on adjust your preferences at any time, click on "Cookies Settings" below or at the bottom of any Fendi.com webpage. For more information, read our Cookie Policy.</p><p></p>',
|
20
|
+
acceptButton: {
|
21
|
+
text: 'Accept all cookies',
|
22
|
+
style: {
|
23
|
+
backgroundColor: '#000',
|
24
|
+
height: 45,
|
25
|
+
color: '#fff',
|
26
|
+
fontSize: 12,
|
27
|
+
textAlign: 'center',
|
28
|
+
marginTop: 5,
|
29
|
+
marginBottom: 5
|
30
|
+
}
|
31
|
+
},
|
32
|
+
rejectButton: {
|
33
|
+
text: 'Reject all cookies',
|
34
|
+
style: {
|
35
|
+
backgroundColor: '#000',
|
36
|
+
height: 45,
|
37
|
+
color: '#fff',
|
38
|
+
fontSize: 12,
|
39
|
+
textAlign: 'center',
|
40
|
+
marginTop: 5,
|
41
|
+
marginBottom: 5
|
42
|
+
}
|
43
|
+
}
|
44
|
+
},
|
45
|
+
style: {
|
46
|
+
backgroundColor: '#fff',
|
47
|
+
padding: 18
|
48
|
+
}
|
49
|
+
},
|
50
|
+
sort: 2
|
51
|
+
});
|
52
|
+
exports.Click = Click;
|
@@ -0,0 +1,63 @@
|
|
1
|
+
declare const _default: ({
|
2
|
+
title: string;
|
3
|
+
child: {
|
4
|
+
type: string;
|
5
|
+
name: string[];
|
6
|
+
}[];
|
7
|
+
} | {
|
8
|
+
title: string;
|
9
|
+
child: ({
|
10
|
+
type: string;
|
11
|
+
label: string;
|
12
|
+
name: string[];
|
13
|
+
addonAfter?: undefined;
|
14
|
+
child?: undefined;
|
15
|
+
} | {
|
16
|
+
type: string;
|
17
|
+
label: string;
|
18
|
+
name: string[];
|
19
|
+
addonAfter: string;
|
20
|
+
child?: undefined;
|
21
|
+
} | {
|
22
|
+
type: string;
|
23
|
+
label: string;
|
24
|
+
child: ({
|
25
|
+
type: string;
|
26
|
+
name: string[];
|
27
|
+
max: number;
|
28
|
+
addonAfter?: undefined;
|
29
|
+
} | {
|
30
|
+
type: string;
|
31
|
+
name: string[];
|
32
|
+
addonAfter: string;
|
33
|
+
max: number;
|
34
|
+
})[];
|
35
|
+
name?: undefined;
|
36
|
+
addonAfter?: undefined;
|
37
|
+
} | {
|
38
|
+
type: string;
|
39
|
+
label: string;
|
40
|
+
child: {
|
41
|
+
type: string;
|
42
|
+
name: string[];
|
43
|
+
bottomText: string;
|
44
|
+
}[];
|
45
|
+
name?: undefined;
|
46
|
+
addonAfter?: undefined;
|
47
|
+
} | {
|
48
|
+
type: string;
|
49
|
+
label: string;
|
50
|
+
child: ({
|
51
|
+
type: string;
|
52
|
+
name: string[];
|
53
|
+
addonAfter?: undefined;
|
54
|
+
} | {
|
55
|
+
type: string;
|
56
|
+
name: string[];
|
57
|
+
addonAfter: string;
|
58
|
+
})[];
|
59
|
+
name?: undefined;
|
60
|
+
addonAfter?: undefined;
|
61
|
+
})[];
|
62
|
+
})[];
|
63
|
+
export default _default;
|
@@ -0,0 +1,212 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.default = [
|
4
|
+
{
|
5
|
+
title: '全局设置',
|
6
|
+
child: [
|
7
|
+
{
|
8
|
+
type: 'Switch',
|
9
|
+
label: '弹窗开关',
|
10
|
+
name: ['props', 'open']
|
11
|
+
},
|
12
|
+
{
|
13
|
+
type: 'Color',
|
14
|
+
label: '背景色',
|
15
|
+
name: ['style', 'backgroundColor']
|
16
|
+
},
|
17
|
+
{
|
18
|
+
type: 'Number',
|
19
|
+
label: '内边距',
|
20
|
+
name: ['style', 'padding'],
|
21
|
+
addonAfter: 'px'
|
22
|
+
}
|
23
|
+
]
|
24
|
+
},
|
25
|
+
{
|
26
|
+
title: '弹窗文本',
|
27
|
+
child: [
|
28
|
+
{
|
29
|
+
type: 'RichText',
|
30
|
+
name: ['props', 'content']
|
31
|
+
}
|
32
|
+
]
|
33
|
+
},
|
34
|
+
{
|
35
|
+
title: '接受按钮样式',
|
36
|
+
child: [
|
37
|
+
{
|
38
|
+
type: 'Color',
|
39
|
+
label: '背景色',
|
40
|
+
name: ['props', 'acceptButton', 'style', 'backgroundColor']
|
41
|
+
},
|
42
|
+
{
|
43
|
+
type: 'Number',
|
44
|
+
label: '尺寸',
|
45
|
+
name: ['props', 'acceptButton', 'style', 'height'],
|
46
|
+
addonAfter: 'H'
|
47
|
+
},
|
48
|
+
{
|
49
|
+
type: 'Group',
|
50
|
+
label: '圆角',
|
51
|
+
child: [
|
52
|
+
{
|
53
|
+
type: 'Slider',
|
54
|
+
name: ['props', 'acceptButton', 'style', 'borderRadius'],
|
55
|
+
max: 100
|
56
|
+
},
|
57
|
+
{
|
58
|
+
type: 'Number',
|
59
|
+
name: ['props', 'acceptButton', 'style', 'borderRadius'],
|
60
|
+
addonAfter: 'px',
|
61
|
+
max: 100
|
62
|
+
}
|
63
|
+
]
|
64
|
+
},
|
65
|
+
{
|
66
|
+
type: 'TextMargin',
|
67
|
+
label: '边距',
|
68
|
+
name: ['props', 'acceptButton', 'style']
|
69
|
+
},
|
70
|
+
{
|
71
|
+
type: 'Group',
|
72
|
+
label: '字体',
|
73
|
+
child: [
|
74
|
+
{
|
75
|
+
type: 'Select',
|
76
|
+
name: ['props', 'acceptButton', 'style', 'fontFamily-cn'],
|
77
|
+
bottomText: '中文字体'
|
78
|
+
},
|
79
|
+
{
|
80
|
+
type: 'Select',
|
81
|
+
name: ['props', 'acceptButton', 'style', 'fontFamily-en'],
|
82
|
+
bottomText: '英文/其他字体'
|
83
|
+
}
|
84
|
+
]
|
85
|
+
},
|
86
|
+
{
|
87
|
+
type: 'Group',
|
88
|
+
label: '',
|
89
|
+
child: [
|
90
|
+
{
|
91
|
+
type: 'Color',
|
92
|
+
name: ['props', 'acceptButton', 'style', 'color']
|
93
|
+
},
|
94
|
+
{
|
95
|
+
type: 'Number',
|
96
|
+
name: ['props', 'acceptButton', 'style', 'fontSize'],
|
97
|
+
addonAfter: 'px'
|
98
|
+
}
|
99
|
+
]
|
100
|
+
},
|
101
|
+
{
|
102
|
+
label: '样式',
|
103
|
+
type: 'TextStyle',
|
104
|
+
name: ['props', 'acceptButton', 'style']
|
105
|
+
},
|
106
|
+
{
|
107
|
+
label: '对齐',
|
108
|
+
type: 'TextAlign',
|
109
|
+
name: ['props', 'acceptButton', 'style']
|
110
|
+
},
|
111
|
+
{
|
112
|
+
label: '间距',
|
113
|
+
type: 'TextSpace',
|
114
|
+
name: ['props', 'acceptButton', 'style']
|
115
|
+
},
|
116
|
+
{
|
117
|
+
label: '文本',
|
118
|
+
type: 'TextArea',
|
119
|
+
name: ['props', 'acceptButton', 'text']
|
120
|
+
}
|
121
|
+
]
|
122
|
+
},
|
123
|
+
{
|
124
|
+
title: '拒绝按钮样式',
|
125
|
+
child: [
|
126
|
+
{
|
127
|
+
type: 'Color',
|
128
|
+
label: '背景色',
|
129
|
+
name: ['props', 'rejectButton', 'style', 'backgroundColor']
|
130
|
+
},
|
131
|
+
{
|
132
|
+
type: 'Number',
|
133
|
+
label: '尺寸',
|
134
|
+
name: ['props', 'rejectButton', 'style', 'height'],
|
135
|
+
addonAfter: 'H'
|
136
|
+
},
|
137
|
+
{
|
138
|
+
type: 'Group',
|
139
|
+
label: '圆角',
|
140
|
+
child: [
|
141
|
+
{
|
142
|
+
type: 'Slider',
|
143
|
+
name: ['props', 'rejectButton', 'style', 'borderRadius'],
|
144
|
+
max: 100
|
145
|
+
},
|
146
|
+
{
|
147
|
+
type: 'Number',
|
148
|
+
name: ['props', 'rejectButton', 'style', 'borderRadius'],
|
149
|
+
addonAfter: 'px',
|
150
|
+
max: 100
|
151
|
+
}
|
152
|
+
]
|
153
|
+
},
|
154
|
+
{
|
155
|
+
type: 'TextMargin',
|
156
|
+
label: '边距',
|
157
|
+
name: ['props', 'acceptButton', 'style']
|
158
|
+
},
|
159
|
+
{
|
160
|
+
type: 'Group',
|
161
|
+
label: '字体',
|
162
|
+
child: [
|
163
|
+
{
|
164
|
+
type: 'Select',
|
165
|
+
name: ['props', 'rejectButton', 'style', 'fontFamily-cn'],
|
166
|
+
bottomText: '中文字体'
|
167
|
+
},
|
168
|
+
{
|
169
|
+
type: 'Select',
|
170
|
+
name: ['props', 'rejectButton', 'style', 'fontFamily-en'],
|
171
|
+
bottomText: '英文/其他字体'
|
172
|
+
}
|
173
|
+
]
|
174
|
+
},
|
175
|
+
{
|
176
|
+
type: 'Group',
|
177
|
+
label: '',
|
178
|
+
child: [
|
179
|
+
{
|
180
|
+
type: 'Color',
|
181
|
+
name: ['props', 'rejectButton', 'style', 'color']
|
182
|
+
},
|
183
|
+
{
|
184
|
+
type: 'Number',
|
185
|
+
name: ['props', 'rejectButton', 'style', 'fontSize'],
|
186
|
+
addonAfter: 'px'
|
187
|
+
}
|
188
|
+
]
|
189
|
+
},
|
190
|
+
{
|
191
|
+
label: '样式',
|
192
|
+
type: 'TextStyle',
|
193
|
+
name: ['props', 'rejectButton', 'style']
|
194
|
+
},
|
195
|
+
{
|
196
|
+
label: '对齐',
|
197
|
+
type: 'TextAlign',
|
198
|
+
name: ['props', 'rejectButton', 'style']
|
199
|
+
},
|
200
|
+
{
|
201
|
+
label: '间距',
|
202
|
+
type: 'TextSpace',
|
203
|
+
name: ['props', 'rejectButton', 'style']
|
204
|
+
},
|
205
|
+
{
|
206
|
+
label: '文本',
|
207
|
+
type: 'TextArea',
|
208
|
+
name: ['props', 'rejectButton', 'text']
|
209
|
+
}
|
210
|
+
]
|
211
|
+
}
|
212
|
+
];
|
@@ -13,9 +13,9 @@ export interface IDisplayProps {
|
|
13
13
|
};
|
14
14
|
style?: Record<string, any>;
|
15
15
|
isTel?: boolean;
|
16
|
-
onClick?: () => void;
|
17
|
-
contsentState?: boolean;
|
18
16
|
isShowClose?: boolean;
|
17
|
+
consentPopupCate?: string;
|
18
|
+
onClick?: () => void;
|
19
19
|
}
|
20
20
|
declare const _default: React.NamedExoticComponent<IDisplayProps>;
|
21
21
|
export default _default;
|
@@ -3,18 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
4
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
5
5
|
require("./index.less");
|
6
|
-
const EditorDataProvider_1 = require("../../../../core/context/EditorDataProvider");
|
7
6
|
const close_svg_1 = tslib_1.__importDefault(require("./close.svg"));
|
8
7
|
const tel_png_1 = tslib_1.__importDefault(require("./tel.png"));
|
9
8
|
const tool_1 = require("../../../../core/utils/tool");
|
9
|
+
const localStore_1 = require("../../../../core/utils/localStore");
|
10
10
|
const Display = (_a) => {
|
11
11
|
var _b, _c;
|
12
|
-
var { isTel, isShowOnce, open, content, interaction, style, onClick,
|
13
|
-
const { consentPopupCate } = (0, EditorDataProvider_1.useEditorDataProvider)();
|
12
|
+
var { isTel, isShowOnce, open, content, interaction, style, onClick, isShowClose, consentPopupCate } = _a, props = tslib_1.__rest(_a, ["isTel", "isShowOnce", "open", "content", "interaction", "style", "onClick", "isShowClose", "consentPopupCate"]);
|
14
13
|
const [isClose, setIsClose] = (0, react_1.useState)(false);
|
14
|
+
const contsentState = (0, react_1.useMemo)(() => {
|
15
|
+
return (0, localStore_1.getContsentState)();
|
16
|
+
}, []);
|
15
17
|
const visivle = (0, react_1.useMemo)(() => {
|
16
|
-
return consentPopupCate
|
17
|
-
}, [consentPopupCate, open, isClose]);
|
18
|
+
return consentPopupCate || (open && (isShowOnce || contsentState) && style && !isClose);
|
19
|
+
}, [consentPopupCate, open, isClose, contsentState]);
|
18
20
|
const handleClickClose = (0, react_1.useCallback)(() => {
|
19
21
|
setIsClose(true);
|
20
22
|
}, []);
|