pb-sxp-ui 1.0.56 → 1.0.58

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 (23) hide show
  1. package/dist/index.cjs +100 -91
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +100 -91
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +100 -91
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/DiyPortalPreview/VideoWidget.js +2 -2
  14. package/es/core/components/SxpPageRender/Popup/index.js +5 -4
  15. package/es/materials/sxp/popup/AppointForm/index.d.ts +1 -0
  16. package/es/materials/sxp/popup/AppointForm/index.js +12 -3
  17. package/es/materials/sxp/popup/CommodityDetail/index.js +1 -1
  18. package/lib/core/components/DiyPortalPreview/VideoWidget.js +2 -2
  19. package/lib/core/components/SxpPageRender/Popup/index.js +5 -4
  20. package/lib/materials/sxp/popup/AppointForm/index.d.ts +1 -0
  21. package/lib/materials/sxp/popup/AppointForm/index.js +12 -3
  22. package/lib/materials/sxp/popup/CommodityDetail/index.js +1 -1
  23. package/package.json +1 -1
package/dist/pb-ui.js CHANGED
@@ -1039,9 +1039,90 @@
1039
1039
  }
1040
1040
  ];
1041
1041
 
1042
+ /*
1043
+ * @Author: binruan@chatlabs.com
1044
+ * @Date: 2024-03-12 10:59:06
1045
+ * @LastEditors: binruan@chatlabs.com
1046
+ * @LastEditTime: 2024-04-15 09:47:08
1047
+ * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
1048
+ *
1049
+ */
1050
+ function useEventReport() {
1051
+ const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
1052
+ const jumpToWeb = React.useCallback((data, product, cta, position) => {
1053
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
1054
+ let fromKName = '';
1055
+ if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
1056
+ fromKName = 'pdpPage';
1057
+ }
1058
+ else if (isFromHashtag) {
1059
+ fromKName = 'hashTagPage';
1060
+ }
1061
+ else if ((_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.url) {
1062
+ fromKName = 'videoPage';
1063
+ }
1064
+ else if (((_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.imgUrls) && ((_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.imgUrls) === null || _g === void 0 ? void 0 : _g.length)) {
1065
+ fromKName = 'imagePage';
1066
+ }
1067
+ else if (data === null || data === void 0 ? void 0 : data.product) {
1068
+ fromKName = 'productPage';
1069
+ }
1070
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
1071
+ eventInfo: {
1072
+ eventSubject: 'jumpToWeb',
1073
+ eventDescription: 'User jumped to website',
1074
+ productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
1075
+ productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
1076
+ price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
1077
+ productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
1078
+ fromKName,
1079
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
1080
+ contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
1081
+ position: position + '',
1082
+ contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
1083
+ ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
1084
+ traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
1085
+ }
1086
+ });
1087
+ }, [bffEventReport, popupDetailData, isFromHashtag]);
1088
+ const productView = React.useCallback((data, product, cta, viewTime, position) => {
1089
+ var _a, _b, _c, _d;
1090
+ let fromKName = '';
1091
+ if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
1092
+ fromKName = 'pdpPage';
1093
+ }
1094
+ else if (data === null || data === void 0 ? void 0 : data.product) {
1095
+ fromKName = 'productPage';
1096
+ }
1097
+ bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
1098
+ eventInfo: {
1099
+ productId: product === null || product === void 0 ? void 0 : product.itemId,
1100
+ productName: product === null || product === void 0 ? void 0 : product.title,
1101
+ price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
1102
+ productCollection: product === null || product === void 0 ? void 0 : product.collection,
1103
+ fromKName,
1104
+ fromKPage: location === null || location === void 0 ? void 0 : location.href,
1105
+ contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
1106
+ position: position + '',
1107
+ contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
1108
+ ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
1109
+ traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
1110
+ timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
1111
+ eventSubject: 'productView',
1112
+ eventDescription: 'User browsed the product'
1113
+ }
1114
+ });
1115
+ }, [bffEventReport, popupDetailData]);
1116
+ return {
1117
+ jumpToWeb,
1118
+ productView
1119
+ };
1120
+ }
1121
+
1042
1122
  const AppointForm$1 = (_a) => {
1043
- var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, onClick, onClose } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "onClick", "onClose"]);
1044
- const { submitForm } = useSxpDataSource();
1123
+ var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, onClick, onClose } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "onClick", "onClose"]);
1124
+ const { submitForm, popupDetailData } = useSxpDataSource();
1125
+ const { jumpToWeb } = useEventReport();
1045
1126
  const formRef = React.useRef();
1046
1127
  const [loading, setLoading] = React.useState(false);
1047
1128
  const defaultColumns = React.useMemo(() => [
@@ -1080,7 +1161,7 @@
1080
1161
  }
1081
1162
  }, [layoutType, columns, defaultColumns]);
1082
1163
  const handleSubmit = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
1083
- var _b, _c, _d;
1164
+ var _b, _c, _d, _e, _f, _g;
1084
1165
  const vals = yield ((_b = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue());
1085
1166
  if (!vals)
1086
1167
  return;
@@ -1097,6 +1178,13 @@
1097
1178
  const res = (yield (submitForm === null || submitForm === void 0 ? void 0 : submitForm({ attributes: arr })));
1098
1179
  setLoading(false);
1099
1180
  if (res) {
1181
+ if (isExternalLink) {
1182
+ const data = popupDetailData;
1183
+ const product = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct;
1184
+ const cta = (_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct) === null || _g === void 0 ? void 0 : _g.bindCta;
1185
+ const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
1186
+ jumpToWeb(data, product, cta, position);
1187
+ }
1100
1188
  onClose === null || onClose === void 0 ? void 0 : onClose();
1101
1189
  onClick === null || onClick === void 0 ? void 0 : onClick();
1102
1190
  }
@@ -8148,86 +8236,6 @@
8148
8236
  });
8149
8237
  SwiperSlide.displayName = 'SwiperSlide';
8150
8238
 
8151
- /*
8152
- * @Author: binruan@chatlabs.com
8153
- * @Date: 2024-03-12 10:59:06
8154
- * @LastEditors: binruan@chatlabs.com
8155
- * @LastEditTime: 2024-04-15 09:47:08
8156
- * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
8157
- *
8158
- */
8159
- function useEventReport() {
8160
- const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
8161
- const jumpToWeb = React.useCallback((data, product, cta, position) => {
8162
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
8163
- let fromKName = '';
8164
- if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
8165
- fromKName = 'pdpPage';
8166
- }
8167
- else if (isFromHashtag) {
8168
- fromKName = 'hashTagPage';
8169
- }
8170
- else if ((_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.url) {
8171
- fromKName = 'videoPage';
8172
- }
8173
- else if (((_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.imgUrls) && ((_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.imgUrls) === null || _g === void 0 ? void 0 : _g.length)) {
8174
- fromKName = 'imagePage';
8175
- }
8176
- else if (data === null || data === void 0 ? void 0 : data.product) {
8177
- fromKName = 'productPage';
8178
- }
8179
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
8180
- eventInfo: {
8181
- eventSubject: 'jumpToWeb',
8182
- eventDescription: 'User jumped to website',
8183
- productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
8184
- productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
8185
- price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
8186
- productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
8187
- fromKName,
8188
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
8189
- contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
8190
- position: position + '',
8191
- contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
8192
- ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
8193
- traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
8194
- }
8195
- });
8196
- }, [bffEventReport, popupDetailData, isFromHashtag]);
8197
- const productView = React.useCallback((data, product, cta, viewTime, position) => {
8198
- var _a, _b, _c, _d;
8199
- let fromKName = '';
8200
- if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
8201
- fromKName = 'pdpPage';
8202
- }
8203
- else if (data === null || data === void 0 ? void 0 : data.product) {
8204
- fromKName = 'productPage';
8205
- }
8206
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
8207
- eventInfo: {
8208
- productId: product === null || product === void 0 ? void 0 : product.itemId,
8209
- productName: product === null || product === void 0 ? void 0 : product.title,
8210
- price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
8211
- productCollection: product === null || product === void 0 ? void 0 : product.collection,
8212
- fromKName,
8213
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
8214
- contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
8215
- position: position + '',
8216
- contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
8217
- ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
8218
- traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
8219
- timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
8220
- eventSubject: 'productView',
8221
- eventDescription: 'User browsed the product'
8222
- }
8223
- });
8224
- }, [bffEventReport, popupDetailData]);
8225
- return {
8226
- jumpToWeb,
8227
- productView
8228
- };
8229
- }
8230
-
8231
8239
  /*
8232
8240
  * @Author: binruan@chatlabs.com
8233
8241
  * @Date: 2023-11-02 18:34:34
@@ -8390,7 +8398,7 @@
8390
8398
  const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
8391
8399
  const handleLink = () => {
8392
8400
  if (product === null || product === void 0 ? void 0 : product.link) {
8393
- jumpToWeb(popupDetailData, product, cta, position);
8401
+ jumpToWeb(data, product, cta, position);
8394
8402
  if (!isPost) {
8395
8403
  productView(data, product, cta, viewTime || curTimeRef.current, position);
8396
8404
  }
@@ -13421,7 +13429,7 @@ Made in Italy` })));
13421
13429
  right: 0
13422
13430
  } },
13423
13431
  React.createElement("div", { style: { position: 'relative', width, height: '100%' } },
13424
- React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
13432
+ React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, autoPlay: true, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
13425
13433
  width: '100%',
13426
13434
  height,
13427
13435
  objectFit: 'contain'
@@ -13433,7 +13441,7 @@ Made in Italy` })));
13433
13441
  height,
13434
13442
  overflow: 'hidden'
13435
13443
  } },
13436
- React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
13444
+ React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', style: { width: '100%' }, ref: videoRef, crossOrigin: 'anonymous', muted: true, autoPlay: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
13437
13445
  renderPoster,
13438
13446
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
13439
13447
  };
@@ -13563,7 +13571,7 @@ Made in Italy` })));
13563
13571
  * @Author: binruan@chatlabs.com
13564
13572
  * @Date: 2023-10-31 10:56:01
13565
13573
  * @LastEditors: binruan@chatlabs.com
13566
- * @LastEditTime: 2024-05-08 17:41:44
13574
+ * @LastEditTime: 2024-05-13 15:19:20
13567
13575
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
13568
13576
  *
13569
13577
  */
@@ -13609,18 +13617,19 @@ Made in Italy` })));
13609
13617
  const renderPopupDetail = React.useMemo(() => {
13610
13618
  var _a, _b, _c;
13611
13619
  return (_c = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.map((value, index) => {
13612
- var _a, _b, _c, _d, _e, _f, _g, _h;
13620
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
13613
13621
  if ((value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id)) {
13614
13622
  const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
13615
13623
  const Component = withBindDataSource(t);
13616
- const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
13617
- return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.style), { width: '100%', height: '80vh', overflow: 'auto' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.textStyle), bindDatas: (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.bindDatas) !== null && _f !== void 0 ? _f : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.props, { event: ((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, onClose: handleClose })));
13624
+ const isExternalLink = ((_d = (_c = (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.event) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
13625
+ const defaulSetting = (_e = t === null || t === void 0 ? void 0 : t.extend) === null || _e === void 0 ? void 0 : _e.defaulSetting;
13626
+ return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.style), { width: '100%', height: '80vh', overflow: 'auto' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.textStyle), bindDatas: (_j = (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.bindDatas) !== null && _j !== void 0 ? _j : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.props, { event: ((_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, onClose: handleClose })));
13618
13627
  }
13619
13628
  else {
13620
13629
  return React.createElement(React.Fragment, null);
13621
13630
  }
13622
13631
  });
13623
- }, [schema, popup, resolver]);
13632
+ }, [schema, popup, resolver, handleClose]);
13624
13633
  return (React.createElement(Modal$1, { popup: visible, onClose: handleClose, padding: 0, modalStyle: { position: 'fixed' } }, renderPopupDetail));
13625
13634
  };
13626
13635