pb-sxp-ui 1.20.2 → 1.20.4

package/lib/materials/sxp/popup/CommodityDetail/index.js

@@ -14,6 +14,7 @@ const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/compo
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const tool_1 = require("../../../../core/utils/tool");
 const materials_1 = require("../../../../core/utils/materials");
+const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
 const CommodityDetail = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
@@ -48,22 +49,78 @@ const CommodityDetail = (_a) => {
                     eventSubject: 'clickCta',
                     eventDescription: 'User clicked the CTA'
                 }, data, product, position);
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'ClickCTA',
+                    product: product ? [product] : undefined,
+                    contentType: 'product',
+                    data,
+                    position,
+                    cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+                    cta_action_type: 'open_external_link',
+                    target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+                    target_url: product.link
+                });
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
     };
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!isActive)
             return;
+        const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '', imgUrls: !isPost ? product === null || product === void 0 ? void 0 : product.homePage : (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.imgUrls }) : null });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'ProductView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: recData,
+            position
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: recData,
+            position
         });
     }, [isActive, bffFbReport]);
+    (0, react_1.useEffect)(() => {
+        if (!isActive || isPost)
+            return;
+        const onShow = () => {
+            curTimeRef.current = new Date();
+        };
+        const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '' }) : null });
+        const onHide = () => {
+            var _a;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'ExitFeed',
+                product: product ? [product] : undefined,
+                contentType: 'product',
+                rec: recData,
+                position,
+                view_time: new Date() - curTimeRef.current,
+                content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : ''
+            });
+        };
+        event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
+        event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
+        return () => {
+            var _a;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'Engagement',
+                product: product ? [product] : undefined,
+                rec: recData,
+                position,
+                content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : '',
+                engagement_type: 'close_popup',
+                contentType: 'product',
+                view_time: new Date() - curTimeRef.current
+            });
+            event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
+            event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
+        };
+    }, [isActive, isPost, bffFbReport, data, product, position, curTimeRef]);
     (0, react_1.useEffect)(() => {
         const initTime = () => {
             curTimeRef.current = new Date();

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -14,6 +14,7 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const tool_1 = require("../../../../core/utils/tool");
 const materials_1 = require("../../../../core/utils/materials");
+const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
 const CommodityDetailDiroNew = (_a) => {
     var _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;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
@@ -52,22 +53,78 @@ const CommodityDetailDiroNew = (_a) => {
                     eventSubject: 'clickCta',
                     eventDescription: 'User clicked the CTA'
                 }, data, product, position);
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'ClickCTA',
+                    product: product ? [product] : undefined,
+                    contentType: 'product',
+                    data,
+                    position,
+                    cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+                    cta_action_type: 'open_external_link',
+                    target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+                    target_url: product.link
+                });
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
     };
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!isActive)
             return;
+        const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '', imgUrls: !isPost ? product === null || product === void 0 ? void 0 : product.homePage : (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.imgUrls }) : null });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'ProductView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: recData,
+            position
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: recData,
+            position
         });
-    }, [isActive, bffFbReport]);
+    }, [isActive, bffFbReport, isPost]);
+    (0, react_1.useEffect)(() => {
+        if (!isActive || isPost)
+            return;
+        const onShow = () => {
+            curTimeRef.current = new Date();
+        };
+        const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '' }) : null });
+        const onHide = () => {
+            var _a;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'ExitFeed',
+                product: product ? [product] : undefined,
+                contentType: 'product',
+                rec: recData,
+                position,
+                view_time: new Date() - curTimeRef.current,
+                content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : ''
+            });
+        };
+        event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
+        event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
+        return () => {
+            var _a;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'Engagement',
+                product: product ? [product] : undefined,
+                rec: recData,
+                position,
+                content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : '',
+                engagement_type: 'close_popup',
+                contentType: 'product',
+                view_time: new Date() - curTimeRef.current
+            });
+            event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
+            event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
+        };
+    }, [isActive, isPost, bffFbReport, data, product, position, curTimeRef]);
     (0, react_1.useEffect)(() => {
         const initTime = () => {
             if (!isActive)

package/lib/materials/sxp/popup/CommodityList/index.js

@@ -29,16 +29,28 @@ const CommodityList = (_a) => {
         });
     }, [(_d = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _d === void 0 ? void 0 : _d.enableFormattedPrice, globalConfig]);
     const handleClick = (0, lodash_1.throttle)((item, multiCheckIndex, e) => {
+        var _a;
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, recData, item, index);
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'ClickCTA',
+            product: item ? [item] : undefined,
+            contentType: 'product',
+            recData,
+            index,
+            cta_text: (_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.enTitle,
+            cta_action_type: isExternalLink && !!(item === null || item === void 0 ? void 0 : item.link) ? 'open_external_link' : 'open_internal_popup',
+            target_content_id: item === null || item === void 0 ? void 0 : item.itemId,
+            target_url: item.link
+        });
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index, multiCheckIndex }));
         if (isExternalLink) {
-            if (item === null || item === void 0 ? void 0 : item.link) {
-                jumpToWeb(e, recData, item, item.bindCta, index);
-                window.location.href = window.getJointUtmLink(item.link);
-            }
+            if (!(item === null || item === void 0 ? void 0 : item.link))
+                return;
+            jumpToWeb(e, recData, item, item.bindCta, index);
+            window.location.href = window.getJointUtmLink(item.link);
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -46,7 +58,11 @@ const CommodityList = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     (0, react_1.useEffect)(() => {
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-            eventName: 'PageView'
+            eventName: 'PageView',
+            product: (product !== null && product !== void 0 ? product : []),
+            contentType: 'product',
+            rec: recData,
+            position: index
         });
     }, []);
     return (react_1.default.createElement("ul", { role: 'list', className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {

package/lib/materials/sxp/template/components/EventProvider.js

@@ -9,28 +9,40 @@ const EventProvider = (_a) => {
     var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink, multItem, multiCheckIndex } = _a, props = tslib_1.__rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink", "multItem", "multiCheckIndex"]);
     const ref = (0, react_1.useRef)(null);
     const { popup } = (0, hooks_1.useEditor)();
-    const { setPopupDetailData, ctaEvent } = (0, hooks_1.useSxpDataSource)();
+    const { setPopupDetailData, ctaEvent, bffFbReport } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const [element, setElement] = (0, react_1.useState)(null);
     const handleClick = (0, lodash_1.throttle)((e) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         e.preventDefault();
-        const item = multItem ? multItem : (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
+        const item = multItem || ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video);
+        const link = jumpLink || ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) || (multItem === null || multItem === void 0 ? void 0 : multItem.link) || '';
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, rec, item, index);
+        const product = multItem || ((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindProduct);
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'ClickCTA',
+            product: product ? [product] : undefined,
+            contentType: 'post',
+            rec,
+            index,
+            cta_text: (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle,
+            cta_action_type: isExternalLink && (!!link) ? 'open_external_link' : 'open_internal_popup',
+            target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+            target_url: link
+        });
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(multItem && multiCheckIndex !== undefined && multiCheckIndex >= 0
             ? Object.assign(Object.assign({}, rec), { video: Object.assign(Object.assign({}, rec === null || rec === void 0 ? void 0 : rec.video), { bindProduct: multItem }), index, multiCheckIndex }) : Object.assign(Object.assign({}, rec), { index }));
         setElement(ref === null || ref === void 0 ? void 0 : ref.current);
         if (isExternalLink) {
-            const link = ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) || (multItem === null || multItem === void 0 ? void 0 : multItem.link);
-            if (jumpLink || link) {
-                const cta = ((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
-                const product = ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct) || multItem;
-                jumpToWeb(e, rec, product, cta, index);
-                window.location.href = window.getJointUtmLink(jumpLink || link || '');
-            }
+            if (!link)
+                return;
+            const cta = ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
+            const product = ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.bindProduct) || multItem;
+            jumpToWeb(e, rec, product, cta, index);
+            window.location.href = window.getJointUtmLink(link);
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.20.2",
+  "version": "1.20.4",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",