pb-sxp-ui 1.9.8 → 1.10.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 (66) hide show
  1. package/dist/index.cjs +520 -162
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +35 -0
  4. package/dist/index.js +520 -162
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +7 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +7 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +520 -162
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +7 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/Pagebuilder/index.js +3 -4
  15. package/es/core/components/SxpPageCore/index.d.ts +1 -1
  16. package/es/core/components/SxpPageCore/index.js +7 -6
  17. package/es/core/components/SxpPageRender/NavBack.d.ts +9 -0
  18. package/es/core/components/SxpPageRender/NavBack.js +16 -0
  19. package/es/core/components/SxpPageRender/PictureGroup/index.js +3 -1
  20. package/es/core/components/SxpPageRender/index.d.ts +2 -0
  21. package/es/core/components/SxpPageRender/index.js +30 -22
  22. package/es/core/components/SxpPageRender/typing.d.ts +1 -0
  23. package/es/core/context/EditorContext.d.ts +2 -0
  24. package/es/core/context/EditorContext.js +9 -3
  25. package/es/core/context/EditorDataProvider.d.ts +2 -0
  26. package/es/core/context/EditorDataProvider.js +4 -1
  27. package/es/core/context/SxpDataSourceProvider.d.ts +4 -2
  28. package/es/core/context/SxpDataSourceProvider.js +83 -52
  29. package/es/core/utils/materials.d.ts +1 -1
  30. package/es/materials/sxp/MultiPosts/index.d.ts +26 -0
  31. package/es/materials/sxp/MultiPosts/index.js +98 -0
  32. package/es/materials/sxp/MultiPosts/interactionRender.d.ts +9 -0
  33. package/es/materials/sxp/MultiPosts/interactionRender.js +42 -0
  34. package/es/materials/sxp/MultiPosts/material.d.ts +2 -0
  35. package/es/materials/sxp/MultiPosts/material.js +22 -0
  36. package/es/materials/sxp/MultiPosts/settingRender.d.ts +73 -0
  37. package/es/materials/sxp/MultiPosts/settingRender.js +115 -0
  38. package/es/materials/sxp/index.d.ts +1 -0
  39. package/es/materials/sxp/index.js +1 -0
  40. package/lib/core/Pagebuilder/index.js +3 -4
  41. package/lib/core/components/SxpPageCore/index.d.ts +1 -1
  42. package/lib/core/components/SxpPageCore/index.js +6 -5
  43. package/lib/core/components/SxpPageRender/NavBack.d.ts +9 -0
  44. package/lib/core/components/SxpPageRender/NavBack.js +19 -0
  45. package/lib/core/components/SxpPageRender/PictureGroup/index.js +3 -1
  46. package/lib/core/components/SxpPageRender/index.d.ts +2 -0
  47. package/lib/core/components/SxpPageRender/index.js +30 -22
  48. package/lib/core/components/SxpPageRender/typing.d.ts +1 -0
  49. package/lib/core/context/EditorContext.d.ts +2 -0
  50. package/lib/core/context/EditorContext.js +9 -3
  51. package/lib/core/context/EditorDataProvider.d.ts +2 -0
  52. package/lib/core/context/EditorDataProvider.js +4 -1
  53. package/lib/core/context/SxpDataSourceProvider.d.ts +4 -2
  54. package/lib/core/context/SxpDataSourceProvider.js +83 -52
  55. package/lib/core/utils/materials.d.ts +1 -1
  56. package/lib/materials/sxp/MultiPosts/index.d.ts +26 -0
  57. package/lib/materials/sxp/MultiPosts/index.js +100 -0
  58. package/lib/materials/sxp/MultiPosts/interactionRender.d.ts +9 -0
  59. package/lib/materials/sxp/MultiPosts/interactionRender.js +44 -0
  60. package/lib/materials/sxp/MultiPosts/material.d.ts +2 -0
  61. package/lib/materials/sxp/MultiPosts/material.js +26 -0
  62. package/lib/materials/sxp/MultiPosts/settingRender.d.ts +73 -0
  63. package/lib/materials/sxp/MultiPosts/settingRender.js +117 -0
  64. package/lib/materials/sxp/index.d.ts +1 -0
  65. package/lib/materials/sxp/index.js +1 -0
  66. package/package.json +1 -1
@@ -8,6 +8,7 @@ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../utils/event';
8
8
  import Consent from '../components/Consent';
9
9
  import { getBrowserInfo, getCookie, getDevice, getSystem } from '../utils/tool';
10
10
  import { cloneDeep } from 'lodash';
11
+ import { useEditor } from '../hooks/useEditor';
11
12
  export const SxpDataSourceContext = createContext({
12
13
  rtcList: [],
13
14
  tagList: []
@@ -17,8 +18,9 @@ var DataSourceType;
17
18
  DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
18
19
  })(DataSourceType || (DataSourceType = {}));
19
20
  export const DEFAULT_TAG = 'FOR U';
20
- const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false, utmParameter, channelQueryList }) => {
21
- var _a, _b, _c;
21
+ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, onUpdateSchema }) => {
22
+ var _a, _b, _c, _d, _e;
23
+ const { channel } = useEditor();
22
24
  const [rtcList, setRtcList] = useState([]);
23
25
  const [tagList, setTagList] = useState([]);
24
26
  const [loading, setLoading] = useState(false);
@@ -39,10 +41,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
39
41
  const checkCommodityIndexRef = useRef(-1);
40
42
  const popupCurTimeRef = useRef(null);
41
43
  const [isNoMoreData, setIsNoMoreData] = useState(false);
44
+ const [globalConfig, setGlobalConfig] = useState((_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf) === null || _b === void 0 ? void 0 : _b.globalConfig);
45
+ const [pageData, setPageData] = useState(data);
46
+ const [showConsent, setShowConsent] = useState(false);
47
+ const [layoutVariantId, setLayoutVariantId] = useState();
42
48
  const isShowConsent = useMemo(() => {
43
49
  var _a, _b, _c, _d;
44
- return (((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent;
45
- }, [isAgreePolicy, globalConfig, isOpenConsent, isEditor]);
50
+ return (((((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent) &&
51
+ showConsent);
52
+ }, [isAgreePolicy, globalConfig, isOpenConsent, isEditor, showConsent]);
46
53
  const getFilterRecList = useCallback((data) => {
47
54
  var _a;
48
55
  const recList = data === null || data === void 0 ? void 0 : data.recList;
@@ -99,10 +106,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
99
106
  .catch((err) => Promise.reject(err));
100
107
  }, [bffDataSource]);
101
108
  const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
102
- var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
109
+ var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
103
110
  query = {
104
- maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize,
105
- defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize,
111
+ maxSize: (_f = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _f !== void 0 ? _f : maxSize,
112
+ defaultSize: (_g = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _g !== void 0 ? _g : defaultSize,
106
113
  hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
107
114
  traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo,
108
115
  themeTag: query === null || query === void 0 ? void 0 : query.themeTag,
@@ -110,13 +117,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
110
117
  contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter,
111
118
  productFilter: query === null || query === void 0 ? void 0 : query.productFilter
112
119
  };
113
- if (utmVal) {
114
- const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
120
+ if (channel) {
121
+ query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
122
+ }
123
+ else if (utmVal) {
124
+ const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
115
125
  var _a, _b;
116
126
  const key = val.split('=')[0];
117
127
  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);
118
- })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
119
- query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
128
+ })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
129
+ if (val)
130
+ query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
120
131
  }
121
132
  if (isEditor) {
122
133
  let pageNum = 1;
@@ -128,17 +139,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
128
139
  let list = [];
129
140
  let result = null;
130
141
  const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
131
- var _t, _u, _v, _w, _x, _y;
142
+ var _v, _w, _x, _y, _z, _0;
132
143
  query.pageNum = pageNum;
133
144
  result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
134
145
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
135
146
  return undefined;
136
147
  }
137
148
  setLoading(false);
138
- list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
149
+ 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 : []);
139
150
  setRtcList(getFilterRecList(Object.assign(Object.assign({}, result.data), { recList: list })));
140
151
  setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result.data), { recList: list })));
141
- const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
152
+ 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));
142
153
  if (isNotNullList) {
143
154
  pageNum = pageNum + 1;
144
155
  yield recurveRecList(query);
@@ -146,11 +157,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
146
157
  });
147
158
  yield recurveRecList(query);
148
159
  if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
149
- setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
160
+ 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 });
150
161
  return Object.assign(Object.assign({}, result.data), { recList: list });
151
162
  }
152
163
  if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
153
- query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
164
+ 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 });
154
165
  }
155
166
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'POST', body: query }));
156
167
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
@@ -160,27 +171,27 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
160
171
  setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
161
172
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
162
173
  let list = [];
163
- list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
164
- const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
174
+ list = list.concat((_s = (_r = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.filter) === null || _r === void 0 ? void 0 : _r.call(_q, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _s !== void 0 ? _s : []);
175
+ const isNotNullList = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
165
176
  if (!isNotNullList) {
166
177
  setIsNoMoreData(true);
167
178
  }
168
179
  return Object.assign(Object.assign({}, result.data), { recList: list });
169
180
  }
170
181
  return result === null || result === void 0 ? void 0 : result.data;
171
- }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList]);
182
+ }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel]);
172
183
  const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
173
- var _z, _0, _1, _2;
184
+ var _1, _2, _3, _4;
174
185
  if (rtcList.length <= 0) {
175
186
  return;
176
187
  }
177
188
  const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
178
- const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: [(_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId] })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
189
+ const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _1 === void 0 ? void 0 : _1.itemId) && { productFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _2 === void 0 ? void 0 : _2.itemId] })), (((_3 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _3 === void 0 ? void 0 : _3.itemId) && { contentFilter: [(_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _4 === void 0 ? void 0 : _4.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
179
190
  setRtcList(rtcList.concat(getFilterRecList(data)));
180
191
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
181
192
  return data;
182
193
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
183
- const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
194
+ const bffEventReport = useCallback(({ userInfo, eventInfo, reportLayId = true }) => {
184
195
  if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
185
196
  return;
186
197
  }
@@ -188,7 +199,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
188
199
  userInfo = {};
189
200
  }
190
201
  const sessionID = storeAndLoadFeSessionId();
191
- const ef = Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), (getDevice() && { sxpDevice: getDevice() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: getBrowserInfo() }));
202
+ const ef = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), (getDevice() && { sxpDevice: getDevice() })), (getSystem() && { sxpSystem: getSystem() })), (getBrowserInfo() && { sxpBrowser: getBrowserInfo() })), { playbookType: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' ? 'organicMenu' : 'paidMedia' }), (layoutVariantId && reportLayId && { layoutVariantId }));
192
203
  const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
193
204
  const realEventInfo = Object.entries(ef)
194
205
  .map(([k, v]) => v && { name: k, value: v })
@@ -202,7 +213,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
202
213
  body: { userInfo: realUserInfo, eventInfo: realEventInfo },
203
214
  type: 'beacon'
204
215
  });
205
- }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
216
+ }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, layoutVariantId]);
206
217
  const bffFbReport = useCallback(({ eventName, product }) => {
207
218
  var _a, _b, _c, _d, _e;
208
219
  if (!enableReportEvent ||
@@ -286,23 +297,24 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
286
297
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
287
298
  return res === null || res === void 0 ? void 0 : res.success;
288
299
  }), [bffFetch]);
289
- const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
290
- var _3, _4, _5, _6, _7;
300
+ const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
301
+ var _5, _6, _7, _8, _9, _10, _11, _12;
302
+ const isShowTag = !!((_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.data) === null || _5 === void 0 ? void 0 : _5.sxpPageConf) === null || _6 === void 0 ? void 0 : _6.globalConfig) === null || _7 === void 0 ? void 0 : _7.isShowTag);
291
303
  if (!utmVal || !isShowTag)
292
304
  return;
293
305
  try {
294
- const val = (_5 = (_4 = (_3 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _3 === void 0 ? void 0 : _3.filter((val) => {
306
+ const val = (_10 = (_9 = (_8 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
295
307
  var _a, _b;
296
308
  const key = val.split('=')[0];
297
309
  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);
298
- })) === null || _4 === void 0 ? void 0 : _4.join('&')) !== null && _5 !== void 0 ? _5 : '';
310
+ })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
299
311
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
300
- setTagList((_7 = (_6 = result === null || result === void 0 ? void 0 : result.data) === null || _6 === void 0 ? void 0 : _6.tags) !== null && _7 !== void 0 ? _7 : []);
312
+ 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 : []);
301
313
  }
302
314
  catch (e) {
303
315
  console.log('e', e);
304
316
  }
305
- }), [bffFetch, utmVal, isShowTag]);
317
+ }), [bffFetch, utmVal]);
306
318
  const ctaEvent = useCallback((eventInfo, rec, product, position) => {
307
319
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
308
320
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
@@ -348,7 +360,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
348
360
  requestId: null,
349
361
  enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : '',
350
362
  clSource: getVal('cl_source')
351
- }
363
+ },
364
+ reportLayId: false
352
365
  });
353
366
  }, [bffEventReport]);
354
367
  useEffect(() => {
@@ -359,46 +372,64 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
359
372
  if (isShowConsent)
360
373
  return;
361
374
  setLoading(true);
362
- bffGetTagList();
375
+ let layId;
363
376
  getRecommendVideos()
364
377
  .then((data) => {
378
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
365
379
  if (data) {
366
- setRtcList(getFilterRecList(data));
367
- setCacheRtcList(getFilterRecList(data));
380
+ const list = getFilterRecList(data);
381
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
382
+ list.unshift('organic menu');
383
+ }
384
+ setRtcList(list);
385
+ setCacheRtcList(list);
386
+ let curData;
387
+ if (data === null || data === void 0 ? void 0 : data.layoutVariantId) {
388
+ 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];
389
+ if (id) {
390
+ layId = id;
391
+ setLayoutVariantId(id);
392
+ curData = dataList === null || dataList === void 0 ? void 0 : dataList.find((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
393
+ if (curData) {
394
+ setPageData(curData);
395
+ document.title = (_c = curData === null || curData === void 0 ? void 0 : curData.name) !== null && _c !== void 0 ? _c : 'home';
396
+ setGlobalConfig((_d = curData === null || curData === void 0 ? void 0 : curData.data) === null || _d === void 0 ? void 0 : _d.globalConfig);
397
+ onUpdateSchema === null || onUpdateSchema === void 0 ? void 0 : onUpdateSchema(curData === null || curData === void 0 ? void 0 : curData.data);
398
+ if ((_k = (_j = (_h = (_g = (_f = (_e = curData === null || curData === void 0 ? void 0 : curData.data) === null || _e === void 0 ? void 0 : _e.globalConfig) === null || _f === void 0 ? void 0 : _f.consent) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.privacy_necessity)
399
+ setShowConsent(true);
400
+ }
401
+ }
402
+ }
403
+ bffGetTagList(curData !== null && curData !== void 0 ? curData : pageData);
368
404
  }
369
405
  })
370
406
  .finally(() => {
371
407
  bffEventReport({
372
- eventInfo: {
373
- eventSubject: 'apiRequest',
374
- eventDescription: 'api request succeed'
375
- }
408
+ eventInfo: Object.assign({ eventSubject: 'apiRequest', eventDescription: 'api request succeed' }, (layId && { layoutVariantId: layId }))
376
409
  });
377
410
  setLoading(false);
378
411
  });
379
- }, [isShowConsent]);
412
+ }, [isShowConsent, channel]);
380
413
  useEffect(() => {
381
414
  if (!isPreview)
382
415
  return;
383
416
  setLoading(true);
384
- bffGetTagList();
417
+ bffGetTagList(pageData);
385
418
  getRecommendVideos()
386
419
  .then((data) => {
387
420
  if (data) {
388
- setRtcList(getFilterRecList(data));
389
- setCacheRtcList(getFilterRecList(data));
421
+ const list = getFilterRecList(data);
422
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) === 'organic menu' && !channel) {
423
+ list.unshift('organic menu');
424
+ }
425
+ setRtcList(list);
426
+ setCacheRtcList(list);
390
427
  }
391
428
  })
392
429
  .finally(() => {
393
- bffEventReport({
394
- eventInfo: {
395
- eventSubject: 'apiRequest',
396
- eventDescription: 'api request succeed'
397
- }
398
- });
399
430
  setLoading(false);
400
431
  });
401
- }, [getRecommendVideos, bffGetTagList]);
432
+ }, [getRecommendVideos, bffGetTagList, channel]);
402
433
  const defaultLoadingImage = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
403
434
  return (React.createElement(SxpDataSourceContext.Provider, { value: {
404
435
  rtcList,
@@ -411,7 +442,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
411
442
  setPopupDetailData,
412
443
  getRecommendVideos,
413
444
  bffEventReport,
414
- utmVal,
415
445
  isPreview,
416
446
  loading,
417
447
  sxpParameter,
@@ -449,12 +479,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
449
479
  checkCommodityIndexRef,
450
480
  isEditor,
451
481
  isNoMoreData
452
- } }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
482
+ } }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.props))) : (render({
453
483
  rtcList,
454
484
  mutateLike: bffMutateLike,
455
485
  mutateUnlike: bffMutateUnlike,
456
486
  submitForm: bffSubmitForm,
457
- tagList
487
+ tagList,
488
+ pageData
458
489
  }))));
459
490
  };
460
491
  export default memo(SxpDataSourceProvider);
@@ -1,7 +1,7 @@
1
1
  import { ISxpPageRenderProps } from '../components/SxpPageRender';
2
2
  import { ProductInfoType } from '../components/SxpPageRender/typing';
3
3
  export declare const getMediaValueByMode: (obj?: Record<string, any>) => any;
4
- export declare const getBgStyle: (imgSrc: string) => "" | {
4
+ export declare const getBgStyle: (imgSrc?: string) => "" | {
5
5
  backgroundImage: string;
6
6
  backgroundRepeat: string;
7
7
  backgroundSize: string;
@@ -0,0 +1,26 @@
1
+ import React, { CSSProperties } from 'react';
2
+ import './index.less';
3
+ import { RecItemType } from '../../../core/components/SxpPageRender/typing';
4
+ export interface IMultiPostsProps {
5
+ bgImgUrl?: string;
6
+ backButton?: {
7
+ enable: boolean;
8
+ icon: string;
9
+ xPosit: string;
10
+ x: number;
11
+ yPosit: string;
12
+ y: number;
13
+ };
14
+ button1Url?: string;
15
+ button2Url?: string;
16
+ button3Url?: string;
17
+ button4Url?: string;
18
+ style?: CSSProperties;
19
+ button1?: any;
20
+ button2?: any;
21
+ button3?: any;
22
+ button4?: any;
23
+ recData?: RecItemType;
24
+ }
25
+ declare const _default: React.NamedExoticComponent<IMultiPostsProps>;
26
+ export default _default;
@@ -0,0 +1,98 @@
1
+ import { __rest } from "tslib";
2
+ import { getBgStyle } from '../../../core/utils/materials';
3
+ import React, { memo, useCallback, useEffect, useRef } from 'react';
4
+ import './index.less';
5
+ import { useEditor, useSxpDataSource } from '../../../core/hooks';
6
+ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
7
+ import { useSwiperSlide } from 'swiper/react';
8
+ const MultiPosts = (_a) => {
9
+ var _b, _c;
10
+ var { bgImgUrl, style, recData } = _a, props = __rest(_a, ["bgImgUrl", "style", "recData"]);
11
+ const { setChannel } = useEditor();
12
+ const { bffEventReport, curTime } = useSxpDataSource();
13
+ const { isActive } = useSwiperSlide();
14
+ const initRef = useRef(false);
15
+ const viewTime = useRef();
16
+ const traceinfo = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) !== null && _c !== void 0 ? _c : '';
17
+ const getPropsVal = useCallback((index, str) => {
18
+ try {
19
+ return new Function('props', 'str', `if (str) {
20
+ return props?.button${index + 1}${str}
21
+ } else {
22
+ return props?.button${index + 1}
23
+ }`)(props, str);
24
+ }
25
+ catch (_a) { }
26
+ }, [props]);
27
+ const handleClick = useCallback((index) => {
28
+ const v = getPropsVal(index);
29
+ const value = v === null || v === void 0 ? void 0 : v.value;
30
+ if (!value)
31
+ return;
32
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
33
+ eventInfo: {
34
+ eventSubject: 'multiPostClick',
35
+ eventDescription: 'multiPostClick',
36
+ traceinfo,
37
+ branchfeed: (v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow' && value ? value : ''
38
+ }
39
+ });
40
+ if ((v === null || v === void 0 ? void 0 : v.linkType) === 'recommendFlow') {
41
+ endMultiPost('multipostClick');
42
+ setChannel === null || setChannel === void 0 ? void 0 : setChannel(value);
43
+ curTime.current = new Date();
44
+ }
45
+ else {
46
+ new Function(value)();
47
+ }
48
+ }, [props]);
49
+ const startMultiPost = useCallback(() => {
50
+ viewTime.current = new Date();
51
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
52
+ eventInfo: {
53
+ eventSubject: 'startMultiPost',
54
+ eventDescription: 'startMultiPost',
55
+ contentFormat: 'IMAGE',
56
+ position: '0',
57
+ traceinfo
58
+ }
59
+ });
60
+ }, []);
61
+ const endMultiPost = useCallback((nextStep) => {
62
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
63
+ eventInfo: {
64
+ eventSubject: 'endMultiPost',
65
+ eventDescription: 'endMultiPost',
66
+ contentFormat: 'IMAGE',
67
+ position: '0',
68
+ traceinfo,
69
+ nextStep: nextStep || 'others',
70
+ timeOnSite: Math.floor((new Date() - (viewTime === null || viewTime === void 0 ? void 0 : viewTime.current)) / 1000) + ''
71
+ }
72
+ });
73
+ }, []);
74
+ useEffect(() => {
75
+ if (isActive) {
76
+ startMultiPost();
77
+ initRef.current = true;
78
+ }
79
+ else if (initRef.current) {
80
+ endMultiPost();
81
+ }
82
+ }, [isActive]);
83
+ useEffect(() => {
84
+ const onShow = () => startMultiPost();
85
+ const onHide = () => endMultiPost();
86
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
87
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
88
+ return () => {
89
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
90
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
91
+ };
92
+ }, [isActive]);
93
+ return (React.createElement("div", { className: 'multiposts', style: Object.assign(Object.assign({}, style), getBgStyle(bgImgUrl)) }, Array.from({ length: 4 }, (_, index) => {
94
+ return (React.createElement("button", { className: 'multiposts-btn', role: 'button', "aria-label": `multiposts-${index + 1}`, onClick: () => handleClick(index) },
95
+ React.createElement("img", { className: 'multiposts-btn-img', src: getPropsVal(index, 'Url'), alt: `multiposts-img-${index + 1}` })));
96
+ })));
97
+ };
98
+ export default memo(MultiPosts);
@@ -0,0 +1,9 @@
1
+ declare const _default: {
2
+ title: string;
3
+ child: {
4
+ type: string;
5
+ name: string;
6
+ isMultiPosts: boolean;
7
+ }[];
8
+ }[];
9
+ export default _default;
@@ -0,0 +1,42 @@
1
+ export default [
2
+ {
3
+ title: '按钮1点击事件',
4
+ child: [
5
+ {
6
+ type: 'link',
7
+ name: 'button1',
8
+ isMultiPosts: true
9
+ }
10
+ ]
11
+ },
12
+ {
13
+ title: '按钮2点击事件',
14
+ child: [
15
+ {
16
+ type: 'link',
17
+ name: 'button2',
18
+ isMultiPosts: true
19
+ }
20
+ ]
21
+ },
22
+ {
23
+ title: '按钮3点击事件',
24
+ child: [
25
+ {
26
+ type: 'link',
27
+ name: 'button3',
28
+ isMultiPosts: true
29
+ }
30
+ ]
31
+ },
32
+ {
33
+ title: '按钮4点击事件',
34
+ child: [
35
+ {
36
+ type: 'link',
37
+ name: 'button4',
38
+ isMultiPosts: true
39
+ }
40
+ ]
41
+ }
42
+ ];
@@ -0,0 +1,2 @@
1
+ declare const MultiPosts: import("../../../core/create").MaterialComponet<import(".").IMultiPostsProps>;
2
+ export { MultiPosts };
@@ -0,0 +1,22 @@
1
+ import settingRender from './settingRender';
2
+ import ConsentComponent from '.';
3
+ import { createMaterial } from '../../../core/create';
4
+ import interactionRender from './interactionRender';
5
+ const MultiPosts = createMaterial(ConsentComponent, {
6
+ displayName: 'MultiPosts',
7
+ icon: '',
8
+ category: 'base',
9
+ type: 'MultiPosts',
10
+ related: {
11
+ settingRender,
12
+ interactionRender
13
+ },
14
+ defaulSetting: {
15
+ props: {},
16
+ style: {}
17
+ },
18
+ w: 100,
19
+ h: 40,
20
+ sort: 1
21
+ });
22
+ export { MultiPosts };
@@ -0,0 +1,73 @@
1
+ declare const _default: ({
2
+ title: string;
3
+ child: ({
4
+ label: string;
5
+ type: string;
6
+ name: string[];
7
+ child?: undefined;
8
+ } | {
9
+ type: string;
10
+ label: string;
11
+ child: ({
12
+ type: string;
13
+ name: string[];
14
+ text?: undefined;
15
+ } | {
16
+ type: string;
17
+ name: string[];
18
+ text: string;
19
+ })[];
20
+ name?: undefined;
21
+ } | {
22
+ type: string;
23
+ label: string;
24
+ child: ({
25
+ type: string;
26
+ name: string[];
27
+ options: {
28
+ label: string;
29
+ value: string;
30
+ }[];
31
+ initialValue: string;
32
+ addonAfter?: undefined;
33
+ } | {
34
+ type: string;
35
+ name: string[];
36
+ addonAfter: string;
37
+ options?: undefined;
38
+ initialValue?: undefined;
39
+ })[];
40
+ name?: undefined;
41
+ } | {
42
+ type: string;
43
+ label: string;
44
+ child: ({
45
+ type: string;
46
+ name: string[];
47
+ options: {
48
+ label: string;
49
+ value: string;
50
+ }[];
51
+ initialValue: string;
52
+ addonAfter?: undefined;
53
+ } | {
54
+ type: string;
55
+ name: string[];
56
+ addonAfter: string;
57
+ initialValue: number;
58
+ options?: undefined;
59
+ })[];
60
+ name?: undefined;
61
+ })[];
62
+ } | {
63
+ title: string;
64
+ child: {
65
+ type: string;
66
+ child: {
67
+ type: string;
68
+ name: string[];
69
+ text: string;
70
+ }[];
71
+ }[];
72
+ })[];
73
+ export default _default;