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.
Files changed (33) hide show
  1. package/dist/index.cjs +256 -309
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +256 -309
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +256 -309
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/Navbar.js +1 -1
  14. package/es/core/components/SxpPageRender/WaterFall/preview.json +207 -272
  15. package/es/core/components/SxpPageRender/index.js +0 -1
  16. package/es/core/context/SxpDataSourceProvider.js +18 -39
  17. package/es/core/utils/materials.js +3 -5
  18. package/es/materials/sxp/cta/AniLink/index.js +1 -1
  19. package/es/materials/sxp/cta/AniLinkPopup/index.js +1 -1
  20. package/es/materials/sxp/popup/Iframe/index.d.ts +4 -0
  21. package/es/materials/sxp/popup/Iframe/index.js +5 -4
  22. package/es/materials/sxp/popup/Iframe/settingRender.js +15 -0
  23. package/lib/core/components/SxpPageRender/Navbar.js +1 -1
  24. package/lib/core/components/SxpPageRender/WaterFall/preview.json +207 -272
  25. package/lib/core/components/SxpPageRender/index.js +0 -1
  26. package/lib/core/context/SxpDataSourceProvider.js +18 -39
  27. package/lib/core/utils/materials.js +3 -5
  28. package/lib/materials/sxp/cta/AniLink/index.js +1 -1
  29. package/lib/materials/sxp/cta/AniLinkPopup/index.js +1 -1
  30. package/lib/materials/sxp/popup/Iframe/index.d.ts +4 -0
  31. package/lib/materials/sxp/popup/Iframe/index.js +5 -4
  32. package/lib/materials/sxp/popup/Iframe/settingRender.js +15 -0
  33. package/package.json +1 -1
@@ -144,7 +144,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
144
144
  setIsReload(new Date().getTime());
145
145
  skipLinkRef.current = false;
146
146
  }
147
- refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
148
147
  handleH5EnterLink();
149
148
  if (repCond) {
150
149
  SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
@@ -99,32 +99,29 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
99
99
  const bffDataSource = useMemo(() => {
100
100
  return dataSources === null || dataSources === void 0 ? void 0 : dataSources.find((d) => d.type === DataSourceType.BFF);
101
101
  }, [dataSources]);
102
- const fakeUserId = useMemo(() => {
103
- var _a;
104
- return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + storeAndLoadFeUserId();
105
- }, [bffDataSource]);
106
102
  const bffFetch = useCallback((path, options) => {
107
103
  if (!bffDataSource)
108
104
  return;
109
105
  const url = bffDataSource.url;
106
+ const fakeUserId = storeAndLoadFeUserId();
110
107
  if (options === null || options === void 0 ? void 0 : options.query) {
111
108
  const queryString = qs.stringify(options.query);
112
109
  path = `${path}?${queryString}`;
113
110
  }
114
111
  if (options.type === 'beacon' && navigator.sendBeacon) {
115
- return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
112
+ return navigator.sendBeacon(`${url}/api/v1${path}`, new Blob([
116
113
  JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
117
114
  ], { type: 'application/json;charset=UTF-8' }));
118
115
  }
119
116
  return window
120
- .fetch(`${url}/api/${path}`, {
117
+ .fetch(`${url}/api/v1${path}`, {
121
118
  headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
122
119
  method: options.method,
123
120
  body: JSON.stringify(options.body)
124
121
  })
125
122
  .then((res) => res.json())
126
123
  .catch((err) => Promise.reject(err));
127
- }, [bffDataSource, fakeUserId]);
124
+ }, [bffDataSource]);
128
125
  const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
129
126
  var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
130
127
  query = {
@@ -161,7 +158,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
161
158
  const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
162
159
  var _v, _w, _x, _y, _z, _0;
163
160
  query.pageNum = pageNum;
164
- result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
161
+ result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
165
162
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
166
163
  return undefined;
167
164
  }
@@ -183,7 +180,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
183
180
  if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
184
181
  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
182
  }
186
- const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
183
+ const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
187
184
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
188
185
  return undefined;
189
186
  }
@@ -233,7 +230,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
233
230
  return expire;
234
231
  }, [data]);
235
232
  const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
236
- var _a;
237
233
  if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
238
234
  return;
239
235
  }
@@ -250,23 +246,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
250
246
  console.log('userInfo:', userInfo);
251
247
  console.log('eventInfo:', ef);
252
248
  console.log('========= 结束 =========');
253
- return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
249
+ return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/event/report', {
254
250
  method: 'POST',
255
251
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
256
252
  type: 'beacon'
257
253
  });
258
- }, [
259
- bffFetch,
260
- curReqInfo,
261
- enableReportEvent,
262
- globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
263
- layoutVariantId,
264
- globalConfig,
265
- playbookType,
266
- bffDataSource
267
- ]);
254
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId, globalConfig, playbookType]);
268
255
  const bffFbReport = useCallback(({ eventName, product }) => {
269
- var _a, _b, _c, _d, _e, _f;
256
+ var _a, _b, _c, _d, _e;
270
257
  if (!enableReportEvent ||
271
258
  !enabledMetaConversionApi ||
272
259
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
@@ -278,7 +265,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
278
265
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
279
266
  const fix_par = {
280
267
  event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
281
- external_id: fakeUserId,
268
+ external_id: storeAndLoadFeUserId(),
282
269
  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 : '',
283
270
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
284
271
  fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
@@ -330,30 +317,22 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
330
317
  }
331
318
  };
332
319
  getEventParams(jsonParams);
333
- 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}`, {
320
+ return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
334
321
  method: 'POST',
335
322
  body: jsonParams,
336
323
  type: 'beacon'
337
324
  });
338
- }, [
339
- bffFetch,
340
- enableReportEvent,
341
- enabledMetaConversionApi,
342
- globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
343
- globalConfig,
344
- fakeUserId,
345
- bffDataSource
346
- ]);
325
+ }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, globalConfig]);
347
326
  const bffMutateLike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
348
- const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
327
+ const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/like', { method: 'POST', body }));
349
328
  return res === null || res === void 0 ? void 0 : res.success;
350
329
  }), [bffFetch]);
351
330
  const bffMutateUnlike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
352
- const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/unlike', { method: 'POST', body }));
331
+ const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/unlike', { method: 'POST', body }));
353
332
  return res === null || res === void 0 ? void 0 : res.success;
354
333
  }), [bffFetch]);
355
334
  const bffSubmitForm = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
356
- const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/customform', { method: 'POST', body }));
335
+ const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
357
336
  return res === null || res === void 0 ? void 0 : res.success;
358
337
  }), [bffFetch]);
359
338
  const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
@@ -367,7 +346,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
367
346
  const key = val.split('=')[0];
368
347
  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);
369
348
  })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
370
- const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
349
+ const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
371
350
  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 : []);
372
351
  }
373
352
  catch (e) {
@@ -441,10 +420,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
441
420
  let curData;
442
421
  let gldata;
443
422
  if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
444
- layId = data === null || data === void 0 ? void 0 : data.layoutVariantId;
445
- setLayoutVariantId(data === null || data === void 0 ? void 0 : data.layoutVariantId);
446
423
  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];
447
424
  if (id) {
425
+ layId = id;
426
+ setLayoutVariantId(id);
448
427
  curData = dataList === null || dataList === void 0 ? void 0 : dataList.find((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
449
428
  if (curData) {
450
429
  setPageData(curData);
@@ -32,16 +32,14 @@ export const getBgStyleByImg = (data) => {
32
32
  };
33
33
  export const getPriceText = ({ product, enableFormattedPrice, globalConfig, isHiddenDef, style }) => {
34
34
  var _a, _b, _c, _d, _e, _f, _g, _h;
35
- let text = '';
36
35
  if ((!(product === null || product === void 0 ? void 0 : product.currency) || !(product === null || product === void 0 ? void 0 : product.price)) && isHiddenDef)
37
36
  return null;
38
- 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);
39
- if (typeof price !== 'number')
40
- return text;
37
+ 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;
38
+ let text = '';
41
39
  let priceSymbol = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.priceSymbol;
42
40
  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 : '' : '$';
43
41
  const isToLocStr = enableFormattedPrice === undefined || enableFormattedPrice;
44
- let decPic = price === null || price === void 0 ? void 0 : price.toString();
42
+ let decPic = price.toString();
45
43
  if (priceSymbol === null || priceSymbol === void 0 ? void 0 : priceSymbol.showTwoDecimalPoint) {
46
44
  decPic = price === null || price === void 0 ? void 0 : price.toFixed(2);
47
45
  }
@@ -35,7 +35,7 @@ const AniLink = (_a) => {
35
35
  onClick === null || onClick === void 0 ? void 0 : onClick();
36
36
  }
37
37
  };
38
- const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
38
+ const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || 'Show More';
39
39
  const aniTimStyle = useMemo(() => {
40
40
  var _a, _b;
41
41
  const ani = event === null || event === void 0 ? void 0 : event.animation;
@@ -35,7 +35,7 @@ const AniLinkPopup = (_a) => {
35
35
  onClick === null || onClick === void 0 ? void 0 : onClick();
36
36
  }
37
37
  };
38
- const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
38
+ const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || 'Show More';
39
39
  const aniTimStyle = useMemo(() => {
40
40
  const ani = event === null || event === void 0 ? void 0 : event.animation;
41
41
  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;
@@ -5,11 +5,12 @@ import './index.less';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
6
  const Iframe = (_a) => {
7
7
  var _b, _c;
8
- var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel"]);
8
+ var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel, iframe } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel", "iframe"]);
9
9
  const { popupDetailData } = useSxpDataSource();
10
- const iframeUrl = (_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;
11
- return (React.createElement("div", Object.assign({ className: `${css(Object.assign({}, style))}` }, props),
12
- React.createElement("iframe", { src: iframeUrl, style: {
10
+ const { src, allow } = iframe || {};
11
+ 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);
12
+ return (React.createElement("div", Object.assign({ className: `${css(Object.assign(Object.assign({}, style), { overflow: 'hidden' }))}` }, props),
13
+ React.createElement("iframe", { src: iframeUrl, allow: allow, scrolling: 'no', style: {
13
14
  width: '100%',
14
15
  height: 'calc(100% - 50px)',
15
16
  marginTop: '50px',
@@ -8,5 +8,20 @@ export default [
8
8
  name: ['style', 'backgroundColor']
9
9
  }
10
10
  ]
11
+ },
12
+ {
13
+ title: 'iframe',
14
+ child: [
15
+ {
16
+ type: 'TextArea',
17
+ label: 'url',
18
+ name: ['props', 'iframe', 'src']
19
+ },
20
+ {
21
+ type: 'TextArea',
22
+ label: 'allow',
23
+ name: ['props', 'iframe', 'allow']
24
+ }
25
+ ]
11
26
  }
12
27
  ];
@@ -11,7 +11,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
11
11
  react_1.default.createElement("button", { className: 'clc-sxp-nav-left', role: 'button', "aria-label": 'back button', onClick: onClose },
12
12
  react_1.default.createElement("img", { src: icon, alt: 'back button' })),
13
13
  react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
14
- __html: (0, tool_1.setFontForText)(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
14
+ __html: (0, tool_1.setFontForText)(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : 'title'}`, textStyle)
15
15
  } })));
16
16
  };
17
17
  exports.default = (0, react_1.memo)(Navbar);