pb-sxp-ui 1.0.56 → 1.0.58

package/dist/index.js

@@ -1025,9 +1025,90 @@ var settingRender$5 = [
     }
 ];
 
+/*
+ * @Author: binruan@chatlabs.com
+ * @Date: 2024-03-12 10:59:06
+ * @LastEditors: binruan@chatlabs.com
+ * @LastEditTime: 2024-04-15 09:47:08
+ * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
+ *
+ */
+function useEventReport() {
+    const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
+    const jumpToWeb = useCallback((data, product, cta, position) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        let fromKName = '';
+        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))) {
+            fromKName = 'pdpPage';
+        }
+        else if (isFromHashtag) {
+            fromKName = 'hashTagPage';
+        }
+        else if ((_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.url) {
+            fromKName = 'videoPage';
+        }
+        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)) {
+            fromKName = 'imagePage';
+        }
+        else if (data === null || data === void 0 ? void 0 : data.product) {
+            fromKName = 'productPage';
+        }
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'jumpToWeb',
+                eventDescription: 'User jumped to website',
+                productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
+                productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
+                price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
+                productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
+                fromKName,
+                fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
+                position: position + '',
+                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 : '',
+                ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
+                traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
+            }
+        });
+    }, [bffEventReport, popupDetailData, isFromHashtag]);
+    const productView = useCallback((data, product, cta, viewTime, position) => {
+        var _a, _b, _c, _d;
+        let fromKName = '';
+        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))) {
+            fromKName = 'pdpPage';
+        }
+        else if (data === null || data === void 0 ? void 0 : data.product) {
+            fromKName = 'productPage';
+        }
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                productId: product === null || product === void 0 ? void 0 : product.itemId,
+                productName: product === null || product === void 0 ? void 0 : product.title,
+                price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
+                productCollection: product === null || product === void 0 ? void 0 : product.collection,
+                fromKName,
+                fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
+                position: position + '',
+                contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
+                traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
+                timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
+                eventSubject: 'productView',
+                eventDescription: 'User browsed the product'
+            }
+        });
+    }, [bffEventReport, popupDetailData]);
+    return {
+        jumpToWeb,
+        productView
+    };
+}
+
 const AppointForm$1 = (_a) => {
-    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"]);
-    const { submitForm } = useSxpDataSource();
+    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"]);
+    const { submitForm, popupDetailData } = useSxpDataSource();
+    const { jumpToWeb } = useEventReport();
     const formRef = useRef();
     const [loading, setLoading] = useState(false);
     const defaultColumns = useMemo(() => [
@@ -1066,7 +1147,7 @@ const AppointForm$1 = (_a) => {
         }
     }, [layoutType, columns, defaultColumns]);
     const handleSubmit = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d;
+        var _b, _c, _d, _e, _f, _g;
         const vals = yield ((_b = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue());
         if (!vals)
             return;
@@ -1083,6 +1164,13 @@ const AppointForm$1 = (_a) => {
         const res = (yield (submitForm === null || submitForm === void 0 ? void 0 : submitForm({ attributes: arr })));
         setLoading(false);
         if (res) {
+            if (isExternalLink) {
+                const data = popupDetailData;
+                const product = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct;
+                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;
+                const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
+                jumpToWeb(data, product, cta, position);
+            }
             onClose === null || onClose === void 0 ? void 0 : onClose();
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
@@ -8134,86 +8222,6 @@ const SwiperSlide = /*#__PURE__*/forwardRef(function (_temp, externalRef) {
 });
 SwiperSlide.displayName = 'SwiperSlide';
 
-/*
- * @Author: binruan@chatlabs.com
- * @Date: 2024-03-12 10:59:06
- * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-15 09:47:08
- * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
- *
- */
-function useEventReport() {
-    const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
-    const jumpToWeb = useCallback((data, product, cta, position) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        let fromKName = '';
-        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))) {
-            fromKName = 'pdpPage';
-        }
-        else if (isFromHashtag) {
-            fromKName = 'hashTagPage';
-        }
-        else if ((_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.url) {
-            fromKName = 'videoPage';
-        }
-        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)) {
-            fromKName = 'imagePage';
-        }
-        else if (data === null || data === void 0 ? void 0 : data.product) {
-            fromKName = 'productPage';
-        }
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                eventSubject: 'jumpToWeb',
-                eventDescription: 'User jumped to website',
-                productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
-                productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
-                price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
-                productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
-                fromKName,
-                fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
-                position: position + '',
-                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 : '',
-                ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
-                traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
-            }
-        });
-    }, [bffEventReport, popupDetailData, isFromHashtag]);
-    const productView = useCallback((data, product, cta, viewTime, position) => {
-        var _a, _b, _c, _d;
-        let fromKName = '';
-        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))) {
-            fromKName = 'pdpPage';
-        }
-        else if (data === null || data === void 0 ? void 0 : data.product) {
-            fromKName = 'productPage';
-        }
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                productId: product === null || product === void 0 ? void 0 : product.itemId,
-                productName: product === null || product === void 0 ? void 0 : product.title,
-                price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
-                productCollection: product === null || product === void 0 ? void 0 : product.collection,
-                fromKName,
-                fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
-                position: position + '',
-                contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
-                ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
-                traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
-                timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
-                eventSubject: 'productView',
-                eventDescription: 'User browsed the product'
-            }
-        });
-    }, [bffEventReport, popupDetailData]);
-    return {
-        jumpToWeb,
-        productView
-    };
-}
-
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2023-11-02 18:34:34
@@ -8376,7 +8384,7 @@ const CommodityDetail$1 = (_a) => {
     const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
     const handleLink = () => {
         if (product === null || product === void 0 ? void 0 : product.link) {
-            jumpToWeb(popupDetailData, product, cta, position);
+            jumpToWeb(data, product, cta, position);
             if (!isPost) {
                 productView(data, product, cta, viewTime || curTimeRef.current, position);
             }
@@ -13407,7 +13415,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 right: 0
             } },
             React.createElement("div", { style: { position: 'relative', width, height: '100%' } },
-                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: {
+                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: {
                         width: '100%',
                         height,
                         objectFit: 'contain'
@@ -13419,7 +13427,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             height,
             overflow: 'hidden'
         } },
-        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 }),
+        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 }),
         renderPoster,
         React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
 };
@@ -13549,7 +13557,7 @@ var index$1 = memo(DiyPortalPreview);
  * @Author: binruan@chatlabs.com
  * @Date: 2023-10-31 10:56:01
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-05-08 17:41:44
+ * @LastEditTime: 2024-05-13 15:19:20
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
  *
  */
@@ -13595,18 +13603,19 @@ const Popup = () => {
     const renderPopupDetail = useMemo(() => {
         var _a, _b, _c;
         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) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             if ((value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id)) {
                 const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
                 const Component = withBindDataSource(t);
-                const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
-                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 })));
+                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';
+                const defaulSetting = (_e = t === null || t === void 0 ? void 0 : t.extend) === null || _e === void 0 ? void 0 : _e.defaulSetting;
+                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 })));
             }
             else {
                 return React.createElement(React.Fragment, null);
             }
         });
-    }, [schema, popup, resolver]);
+    }, [schema, popup, resolver, handleClose]);
     return (React.createElement(Modal$1, { popup: visible, onClose: handleClose, padding: 0, modalStyle: { position: 'fixed' } }, renderPopupDetail));
 };