pb-sxp-ui 1.13.4 → 1.14.0
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 +256 -309
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +256 -309
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +256 -309
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- 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 +0 -1
- package/es/core/context/SxpDataSourceProvider.js +18 -39
- package/es/core/utils/materials.js +3 -5
- 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/Iframe/index.d.ts +4 -0
- package/es/materials/sxp/popup/Iframe/index.js +5 -4
- package/es/materials/sxp/popup/Iframe/settingRender.js +15 -0
- 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 +0 -1
- package/lib/core/context/SxpDataSourceProvider.js +18 -39
- package/lib/core/utils/materials.js +3 -5
- 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/Iframe/index.d.ts +4 -0
- package/lib/materials/sxp/popup/Iframe/index.js +5 -4
- package/lib/materials/sxp/popup/Iframe/settingRender.js +15 -0
- package/package.json +1 -1
@@ -147,7 +147,6 @@ 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, handleSessionCompleted);
|
151
150
|
handleH5EnterLink();
|
152
151
|
if (repCond) {
|
153
152
|
event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
|
@@ -102,32 +102,29 @@ 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]);
|
109
105
|
const bffFetch = (0, react_1.useCallback)((path, options) => {
|
110
106
|
if (!bffDataSource)
|
111
107
|
return;
|
112
108
|
const url = bffDataSource.url;
|
109
|
+
const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
|
113
110
|
if (options === null || options === void 0 ? void 0 : options.query) {
|
114
111
|
const queryString = qs_1.default.stringify(options.query);
|
115
112
|
path = `${path}?${queryString}`;
|
116
113
|
}
|
117
114
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
118
|
-
return navigator.sendBeacon(`${url}/api
|
115
|
+
return navigator.sendBeacon(`${url}/api/v1${path}`, new Blob([
|
119
116
|
JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
|
120
117
|
], { type: 'application/json;charset=UTF-8' }));
|
121
118
|
}
|
122
119
|
return window
|
123
|
-
.fetch(`${url}/api
|
120
|
+
.fetch(`${url}/api/v1${path}`, {
|
124
121
|
headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
|
125
122
|
method: options.method,
|
126
123
|
body: JSON.stringify(options.body)
|
127
124
|
})
|
128
125
|
.then((res) => res.json())
|
129
126
|
.catch((err) => Promise.reject(err));
|
130
|
-
}, [bffDataSource
|
127
|
+
}, [bffDataSource]);
|
131
128
|
const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
132
129
|
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
133
130
|
query = {
|
@@ -164,7 +161,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
164
161
|
const recurveRecList = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
165
162
|
var _v, _w, _x, _y, _z, _0;
|
166
163
|
query.pageNum = pageNum;
|
167
|
-
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
164
|
+
result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
168
165
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
169
166
|
return undefined;
|
170
167
|
}
|
@@ -186,7 +183,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
186
183
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
187
184
|
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 });
|
188
185
|
}
|
189
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
186
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
|
190
187
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
191
188
|
return undefined;
|
192
189
|
}
|
@@ -236,7 +233,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
236
233
|
return expire;
|
237
234
|
}, [data]);
|
238
235
|
const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo, reportLayId = true }) => {
|
239
|
-
var _a;
|
240
236
|
if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
|
241
237
|
return;
|
242
238
|
}
|
@@ -253,23 +249,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
253
249
|
console.log('userInfo:', userInfo);
|
254
250
|
console.log('eventInfo:', ef);
|
255
251
|
console.log('========= 结束 =========');
|
256
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
252
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/event/report', {
|
257
253
|
method: 'POST',
|
258
254
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
259
255
|
type: 'beacon'
|
260
256
|
});
|
261
|
-
}, [
|
262
|
-
bffFetch,
|
263
|
-
curReqInfo,
|
264
|
-
enableReportEvent,
|
265
|
-
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
266
|
-
layoutVariantId,
|
267
|
-
globalConfig,
|
268
|
-
playbookType,
|
269
|
-
bffDataSource
|
270
|
-
]);
|
257
|
+
}, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
|
271
258
|
const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
|
272
|
-
var _a, _b, _c, _d, _e
|
259
|
+
var _a, _b, _c, _d, _e;
|
273
260
|
if (!enableReportEvent ||
|
274
261
|
!enabledMetaConversionApi ||
|
275
262
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
@@ -281,7 +268,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
281
268
|
const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
|
282
269
|
const fix_par = {
|
283
270
|
event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
|
284
|
-
external_id:
|
271
|
+
external_id: (0, localStore_1.storeAndLoadFeUserId)(),
|
285
272
|
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 : '',
|
286
273
|
fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
|
287
274
|
fbp: (0, tool_1.getCookie)('_fbp') ? `fb.2.${new Date().getTime()}.${(0, tool_1.getCookie)('_fbp')}` : '',
|
@@ -333,30 +320,22 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
333
320
|
}
|
334
321
|
};
|
335
322
|
getEventParams(jsonParams);
|
336
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(
|
323
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
|
337
324
|
method: 'POST',
|
338
325
|
body: jsonParams,
|
339
326
|
type: 'beacon'
|
340
327
|
});
|
341
|
-
}, [
|
342
|
-
bffFetch,
|
343
|
-
enableReportEvent,
|
344
|
-
enabledMetaConversionApi,
|
345
|
-
globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
|
346
|
-
globalConfig,
|
347
|
-
fakeUserId,
|
348
|
-
bffDataSource
|
349
|
-
]);
|
328
|
+
}, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, globalConfig]);
|
350
329
|
const bffMutateLike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
351
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
330
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/like', { method: 'POST', body }));
|
352
331
|
return res === null || res === void 0 ? void 0 : res.success;
|
353
332
|
}), [bffFetch]);
|
354
333
|
const bffMutateUnlike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
355
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
334
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/unlike', { method: 'POST', body }));
|
356
335
|
return res === null || res === void 0 ? void 0 : res.success;
|
357
336
|
}), [bffFetch]);
|
358
337
|
const bffSubmitForm = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
359
|
-
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
338
|
+
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
|
360
339
|
return res === null || res === void 0 ? void 0 : res.success;
|
361
340
|
}), [bffFetch]);
|
362
341
|
const bffGetTagList = (0, react_1.useCallback)((data) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
@@ -370,7 +349,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
370
349
|
const key = val.split('=')[0];
|
371
350
|
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);
|
372
351
|
})) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
|
373
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
352
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
374
353
|
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 : []);
|
375
354
|
}
|
376
355
|
catch (e) {
|
@@ -444,10 +423,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
444
423
|
let curData;
|
445
424
|
let gldata;
|
446
425
|
if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
|
447
|
-
layId = data === null || data === void 0 ? void 0 : data.layoutVariantId;
|
448
|
-
setLayoutVariantId(data === null || data === void 0 ? void 0 : data.layoutVariantId);
|
449
426
|
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];
|
450
427
|
if (id) {
|
428
|
+
layId = id;
|
429
|
+
setLayoutVariantId(id);
|
451
430
|
curData = dataList === null || dataList === void 0 ? void 0 : dataList.find((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
|
452
431
|
if (curData) {
|
453
432
|
setPageData(curData);
|
@@ -38,16 +38,14 @@ 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 = '';
|
42
41
|
if ((!(product === null || product === void 0 ? void 0 : product.currency) || !(product === null || product === void 0 ? void 0 : product.price)) && isHiddenDef)
|
43
42
|
return null;
|
44
|
-
let price =
|
45
|
-
|
46
|
-
return text;
|
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
|
+
let text = '';
|
47
45
|
let priceSymbol = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol;
|
48
46
|
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 : '' : '$';
|
49
47
|
const isToLocStr = enableFormattedPrice === undefined || enableFormattedPrice;
|
50
|
-
let decPic = price
|
48
|
+
let decPic = price.toString();
|
51
49
|
if (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.showTwoDecimalPoint) {
|
52
50
|
decPic = price === null || price === void 0 ? void 0 : price.toFixed(2);
|
53
51
|
}
|
@@ -37,7 +37,7 @@ const AniLink = (_a) => {
|
|
37
37
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
38
38
|
}
|
39
39
|
};
|
40
|
-
const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '
|
40
|
+
const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || 'Show More';
|
41
41
|
const aniTimStyle = (0, react_1.useMemo)(() => {
|
42
42
|
var _a, _b;
|
43
43
|
const ani = event === null || event === void 0 ? void 0 : event.animation;
|
@@ -37,7 +37,7 @@ const AniLinkPopup = (_a) => {
|
|
37
37
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
38
38
|
}
|
39
39
|
};
|
40
|
-
const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '
|
40
|
+
const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || 'Show More';
|
41
41
|
const aniTimStyle = (0, react_1.useMemo)(() => {
|
42
42
|
const ani = event === null || event === void 0 ? void 0 : event.animation;
|
43
43
|
if (ani) {
|
@@ -12,6 +12,10 @@ export interface IIframeProps {
|
|
12
12
|
submitButtonStyle?: CSSProperties;
|
13
13
|
contentStyle?: CSSProperties;
|
14
14
|
isTel?: boolean;
|
15
|
+
iframe?: {
|
16
|
+
src?: string;
|
17
|
+
allow?: string;
|
18
|
+
};
|
15
19
|
}
|
16
20
|
declare const _default: React.NamedExoticComponent<IIframeProps>;
|
17
21
|
export default _default;
|
@@ -7,11 +7,12 @@ require("./index.less");
|
|
7
7
|
const hooks_1 = require("../../../../core/hooks");
|
8
8
|
const Iframe = (_a) => {
|
9
9
|
var _b, _c;
|
10
|
-
var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel } = _a, props = tslib_1.__rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel"]);
|
10
|
+
var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel, iframe } = _a, props = tslib_1.__rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel", "iframe"]);
|
11
11
|
const { popupDetailData } = (0, hooks_1.useSxpDataSource)();
|
12
|
-
const
|
13
|
-
|
14
|
-
|
12
|
+
const { src, allow } = iframe || {};
|
13
|
+
const iframeUrl = src || ((_c = (_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _b === void 0 ? void 0 : _b.bindCta) === null || _c === void 0 ? void 0 : _c.remark);
|
14
|
+
return (react_1.default.createElement("div", Object.assign({ className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { overflow: 'hidden' }))}` }, props),
|
15
|
+
react_1.default.createElement("iframe", { src: iframeUrl, allow: allow, scrolling: 'no', style: {
|
15
16
|
width: '100%',
|
16
17
|
height: 'calc(100% - 50px)',
|
17
18
|
marginTop: '50px',
|
@@ -10,5 +10,20 @@ exports.default = [
|
|
10
10
|
name: ['style', 'backgroundColor']
|
11
11
|
}
|
12
12
|
]
|
13
|
+
},
|
14
|
+
{
|
15
|
+
title: 'iframe',
|
16
|
+
child: [
|
17
|
+
{
|
18
|
+
type: 'TextArea',
|
19
|
+
label: 'url',
|
20
|
+
name: ['props', 'iframe', 'src']
|
21
|
+
},
|
22
|
+
{
|
23
|
+
type: 'TextArea',
|
24
|
+
label: 'allow',
|
25
|
+
name: ['props', 'iframe', 'allow']
|
26
|
+
}
|
27
|
+
]
|
13
28
|
}
|
14
29
|
];
|