pb-sxp-ui 1.20.1 → 1.20.3

package/lib/core/context/SxpDataSourceProvider.js

@@ -535,19 +535,45 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         playbookType,
         bffDataSource
     ]);
-    const getEventParamsByJson = (0, react_1.useCallback)((json, product) => {
-        var _a, _b, _c;
+    const getEventParamsByJson = (0, react_1.useCallback)((_a) => {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var { json, product = [], rec, contentType = 'post', position, eventName } = _a, props = tslib_1.__rest(_a, ["json", "product", "rec", "contentType", "position", "eventName"]);
         const jsonParams = (0, lodash_1.cloneDeep)(json);
         const urlParams = new URLSearchParams(window.location.search);
         const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
         const fix_par = {
-            event_source_url: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
+            event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
             external_id: fakeUserId,
-            client_user_agent: (_c = (_b = window === null || window === void 0 ? void 0 : window.navigator) === null || _b === void 0 ? void 0 : _b.userAgent) !== null && _c !== void 0 ? _c : '',
+            client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '',
             fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
             fbp: (0, tool_1.getCookie)('_fbp') ? `${(0, tool_1.getCookie)('_fbp')}` : '',
             time: Math.floor(Date.now() / 1000)
         };
+        let customData = Object.assign({ content_ids: [(_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.itemId, ...((_f = product === null || product === void 0 ? void 0 : product.map((item) => item === null || item === void 0 ? void 0 : item.itemId)) !== null && _f !== void 0 ? _f : [])], content_type: contentType, content_name: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.title, total_posts: rtcList === null || rtcList === void 0 ? void 0 : rtcList.length, position, currency: (_h = product === null || product === void 0 ? void 0 : product[0]) === null || _h === void 0 ? void 0 : _h.currency, contents: (_j = product === null || product === void 0 ? void 0 : product.map((item) => ({
+                item_id: item === null || item === void 0 ? void 0 : item.itemId,
+                item_price: item === null || item === void 0 ? void 0 : item.price
+            }))) !== null && _j !== void 0 ? _j : [], image_urls: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) !== null && _l !== void 0 ? _l : [], video_urls: (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.url, headline: (0, tool_1.getUrlParamByKey)('headline'), scene: (0, tool_1.getUrlParamByKey)('scene'), campaign_id: (0, tool_1.getUrlParamByKey)('campaign_id'), ad_id: (0, tool_1.getUrlParamByKey)('ad_id'), utm_source: (0, tool_1.getUrlParamByKey)('utm_source'), utm_medium: (0, tool_1.getUrlParamByKey)('utm_medium'), utm_campaign: (0, tool_1.getUrlParamByKey)('utm_campaign'), utm_content: (0, tool_1.getUrlParamByKey)('utm_content') }, props);
+        if (!((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.url) && !((_q = (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.imgUrls) === null || _q === void 0 ? void 0 : _q.length) && (rec === null || rec === void 0 ? void 0 : rec.product) && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _r === void 0 ? void 0 : _r.length) > 0) {
+            const product = rec === null || rec === void 0 ? void 0 : rec.product;
+            const productCustomData = {
+                content_ids: [product === null || product === void 0 ? void 0 : product.itemId],
+                content_type: 'product',
+                content_name: product === null || product === void 0 ? void 0 : product.title,
+                contents: [{
+                        item_id: product === null || product === void 0 ? void 0 : product.itemId,
+                        item_price: product === null || product === void 0 ? void 0 : product.price
+                    }],
+                image_urls: (_s = product.homePage) !== null && _s !== void 0 ? _s : []
+            };
+            customData = Object.assign(Object.assign({}, customData), productCustomData);
+        }
+        if (eventName === 'ContentSwipe' || eventName === 'Engagement' || eventName === 'ExitFeed') {
+            const deleteKeys = ['content_ids', 'content_category', 'currency', 'contents', 'image_urls', 'video_urls', 'prompt'];
+            deleteKeys.forEach(key => {
+                if (customData === null || customData === void 0 ? void 0 : customData[key])
+                    delete customData[key];
+            });
+        }
         const regex = /\{\{(.*?)\}\}/g;
         const getEventParams = (obj) => {
             if (!obj)
@@ -560,6 +586,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                     if (Object.prototype.hasOwnProperty.call(obj, key)) {
                         const value = obj === null || obj === void 0 ? void 0 : obj[key];
                         if (typeof value === 'object') {
+                            if (key === 'custom_data') {
+                                obj[key] = customData !== null && customData !== void 0 ? customData : {};
+                            }
                             getEventParams(value);
                         }
                         else if (typeof value === 'string') {
@@ -569,7 +598,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                                     var _a;
                                     const prop = match.substring(2, match.length - 2);
                                     try {
-                                        let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
+                                        let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product === null || product === void 0 ? void 0 : product[0]);
                                         if (replaceValue) {
                                             if ((prop === null || prop === void 0 ? void 0 : prop.indexOf('currency')) !== -1 &&
                                                 (replaceValue === null || replaceValue === void 0 ? void 0 : replaceValue.indexOf('-')) !== -1 &&
@@ -594,15 +623,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             }
         };
         getEventParams(jsonParams);
+        console.log('capi event params:', jsonParams);
         return jsonParams;
-    }, [fakeUserId]);
-    const bffFbReport = (0, react_1.useCallback)(({ eventName, product }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    }, [fakeUserId, globalConfig, rtcList]);
+    const bffFbReport = (0, react_1.useCallback)((_a) => {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var { eventName } = _a, props = tslib_1.__rest(_a, ["eventName"]);
         if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || getTargetingCookie()) {
             return;
         }
         let isPushState = false;
-        const pixelEventParamsJson = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _a === void 0 ? void 0 : _a[eventName];
+        const pixelEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _b === void 0 ? void 0 : _b[eventName];
         if ((pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
             function updateQueryStringParameter(uri, key, value) {
                 const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
@@ -626,39 +657,39 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 }
             }
             else {
-                window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, getEventParamsByJson(pixelEventParamsJson, product));
+                window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: pixelEventParamsJson, eventName }, props)));
             }
         }
         if (!isPushState) {
             if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
                 window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
             }
-            const tiktokPixelEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.tiktokPixel) === null || _b === void 0 ? void 0 : _b[eventName];
+            const tiktokPixelEventParamsJson = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.tiktokPixel) === null || _c === void 0 ? void 0 : _c[eventName];
             if ((tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name) &&
                 typeof (window === null || window === void 0 ? void 0 : window.ttq) === 'object' &&
-                typeof ((_c = window === null || window === void 0 ? void 0 : window.ttq) === null || _c === void 0 ? void 0 : _c.track) === 'function') {
-                (_d = window === null || window === void 0 ? void 0 : window.ttq) === null || _d === void 0 ? void 0 : _d.track(tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name, getEventParamsByJson(tiktokPixelEventParamsJson, product));
+                typeof ((_d = window === null || window === void 0 ? void 0 : window.ttq) === null || _d === void 0 ? void 0 : _d.track) === 'function') {
+                (_e = window === null || window === void 0 ? void 0 : window.ttq) === null || _e === void 0 ? void 0 : _e.track(tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: tiktokPixelEventParamsJson, eventName }, props)));
             }
         }
-        const snapchatPixelEventParamsJson = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.snapchatPixel) === null || _e === void 0 ? void 0 : _e[eventName];
+        const snapchatPixelEventParamsJson = (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.snapchatPixel) === null || _f === void 0 ? void 0 : _f[eventName];
         if ((snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.snaptr) === 'function') {
-            window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(snapchatPixelEventParamsJson, product));
+            window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: snapchatPixelEventParamsJson, eventName }, props)));
         }
-        if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' && typeof ((_f = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _f === void 0 ? void 0 : _f.trackPageView) === 'function') {
-            (_g = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _g === void 0 ? void 0 : _g.trackPageView();
+        if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' && typeof ((_g = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _g === void 0 ? void 0 : _g.trackPageView) === 'function') {
+            (_h = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _h === void 0 ? void 0 : _h.trackPageView();
         }
-        const converApiEventParamsJson = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _h === void 0 ? void 0 : _h[eventName];
+        const converApiEventParamsJson = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _j === void 0 ? void 0 : _j[eventName];
         if (enabledMetaConversionApi && converApiEventParamsJson) {
-            const body = getEventParamsByJson(converApiEventParamsJson, product);
+            const body = getEventParamsByJson(Object.assign({ json: converApiEventParamsJson, eventName }, props));
             const params = {};
             const queryString = location.search.slice(1);
-            (_j = (0, tool_1.splitUrlParams)(queryString)) === null || _j === void 0 ? void 0 : _j.forEach((val) => {
+            (_k = (0, tool_1.splitUrlParams)(queryString)) === null || _k === void 0 ? void 0 : _k.forEach((val) => {
                 const key = val.split('=')[0];
                 const value = val.split('=')[1];
                 params[key] = value;
             });
             const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
-            bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_k = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _k === void 0 ? void 0 : _k['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
+            bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_l = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _l === void 0 ? void 0 : _l['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
                 method: 'POST',
                 body,
                 type: 'beacon'
@@ -695,7 +726,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             console.log('e', e);
         }
     }), [bffFetch, utmVal]);
-    const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
+    const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position, ctaActionType, targetUrl, contentType) => {
         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;
         const cta = product === null || product === void 0 ? void 0 : product.bindCta;
         const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
@@ -716,34 +747,36 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '', contentFormat })
         });
-    }, [bffEventReport, isFromHashtag]);
-    const h5EnterLink = (0, react_1.useCallback)(() => {
-        var _a, _b, _c;
-        const queryString = location.search.slice(1);
-        const params = {};
-        (_a = (0, tool_1.splitUrlParams)(queryString.replace(/\+/g, '%2B'))) === null || _a === void 0 ? void 0 : _a.map((val) => {
-            const key = val.split('=')[0];
-            const value = val.split('=')[1];
-            params[key] = value;
-        });
-        for (const key in params) {
-            params[key] = params[key].replace(/%2B/g, '+');
+        if ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject) === 'clickCta') {
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'ClickCTA',
+                product: product ? [product] : undefined,
+                contentType: contentType !== null && contentType !== void 0 ? contentType : 'post',
+                rec,
+                position,
+                cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+                cta_action_type: ctaActionType,
+                target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+                target_url: targetUrl
+            });
         }
-        const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
+    }, [bffEventReport, isFromHashtag, bffFbReport]);
+    const h5EnterLink = (0, react_1.useCallback)(() => {
+        var _a, _b;
         const time = new Date();
         curTime.current = time;
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: {
                 eventSubject: 'h5LinkEnterFeed',
                 eventDescription: 'User enter h5 link',
-                utmSource: getVal('utm_source'),
-                utmMedium: getVal('utm_medium'),
-                utmCampaign: getVal('utm_campaign'),
-                utmId: getVal('utm_id'),
-                utmContent: getVal('utm_content'),
+                utmSource: (0, tool_1.getUrlParamByKey)('utm_source'),
+                utmMedium: (0, tool_1.getUrlParamByKey)('utm_medium'),
+                utmCampaign: (0, tool_1.getUrlParamByKey)('utm_campaign'),
+                utmId: (0, tool_1.getUrlParamByKey)('utm_id'),
+                utmContent: (0, tool_1.getUrlParamByKey)('utm_content'),
                 enterTime: Math.floor(time / 1000) + '',
                 requestId: null,
-                enterUrl: (_c = (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : ''
+                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 : ''
             },
             reportLayId: false
         });

package/lib/core/utils/tool.d.ts

@@ -15,4 +15,5 @@ declare function getScreenReader(): boolean;
 declare function splitUrlParams(urlParams: string): string[] | undefined;
 declare function deleteCookie(name: string, path?: string, domain?: string): void;
 declare function setCookie(name: string, value: string, days?: number, path?: string, domain?: string, secure?: boolean, sameSite?: string): void;
-export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie };
+declare function getUrlParamByKey(key: string): any;
+export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie, getUrlParamByKey };

package/lib/core/utils/tool.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setCookie = exports.deleteCookie = exports.splitUrlParams = exports.getScreenReader = exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
+exports.getUrlParamByKey = exports.setCookie = exports.deleteCookie = exports.splitUrlParams = exports.getScreenReader = exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
 const uuid_1 = require("uuid");
 function uuid(len, radix) {
     const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
@@ -235,3 +235,18 @@ function setCookie(name, value, days = 0, path = '/', domain = '', secure = fals
     document.cookie = cookieString;
 }
 exports.setCookie = setCookie;
+function getUrlParamByKey(key) {
+    var _a, _b;
+    const queryString = location.search.slice(1);
+    const params = {};
+    (_a = splitUrlParams(queryString.replace(/\+/g, '%2B'))) === null || _a === void 0 ? void 0 : _a.map((val) => {
+        const key = val.split('=')[0];
+        const value = val.split('=')[1];
+        params[key] = value;
+    });
+    for (const key in params) {
+        params[key] = params[key].replace(/%2B/g, '+');
+    }
+    return (_b = params[key]) !== null && _b !== void 0 ? _b : '';
+}
+exports.getUrlParamByKey = getUrlParamByKey;

package/lib/materials/sxp/cta/AniLink/index.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
+const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const tool_1 = require("../../../../core/utils/tool");
-const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
 const AniLink = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -21,17 +21,17 @@ const AniLink = (_a) => {
     const handleTo = (e) => {
         var _a, _b, _c, _d;
         const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
+        const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item, index);
+        }, recData, item, index, (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup', link);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
-            const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
-            if (link) {
-                jumpToWeb(e, recData, product, cta, index);
-                window.location.href = window.getJointUtmLink(link);
-            }
+            if (!link)
+                return;
+            jumpToWeb(e, recData, product, cta, index);
+            window.location.href = window.getJointUtmLink(link);
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();

package/lib/materials/sxp/cta/AniLinkPopup/index.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
+const Img_1 = tslib_1.__importDefault(require("../../template/components/Img"));
+const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
-const Img_1 = tslib_1.__importDefault(require("../../template/components/Img"));
 const tool_1 = require("../../../../core/utils/tool");
-const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
 const AniLinkPopup = (_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;
@@ -21,17 +21,17 @@ const AniLinkPopup = (_a) => {
     const handleTo = (e) => {
         var _a, _b, _c, _d;
         const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
+        const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item, index);
+        }, recData, item, index, (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup', link);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
-            const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
-            if (link) {
-                jumpToWeb(e, recData, product, cta, index);
-                window.location.href = window.getJointUtmLink(link);
-            }
+            if (!link)
+                return;
+            jumpToWeb(e, recData, product, cta, index);
+            window.location.href = window.getJointUtmLink(link);
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -65,8 +65,8 @@ const AniLinkPopup = (_a) => {
             height: '40px',
             lineHeight: '40px',
             paddingLeft: '6px'
-        } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({}, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default['aniLinkPopup']} ${aniNamStyle}  ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
-        react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
+        } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({}, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default.aniLinkPopup} ${aniNamStyle}  ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
+        react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style.padding) !== null && _s !== void 0 ? _s : 0 } },
             react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
         react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {

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

@@ -47,7 +47,7 @@ const CommodityDetail = (_a) => {
                 ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                     eventSubject: 'clickCta',
                     eventDescription: 'User clicked the CTA'
-                }, data, product, position);
+                }, data, product, position, 'open_external_link', product.link, 'product');
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
@@ -57,11 +57,17 @@ const CommodityDetail = (_a) => {
             return;
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'ProductView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position
         });
     }, [isActive, bffFbReport]);
     (0, react_1.useEffect)(() => {

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

@@ -51,7 +51,7 @@ const CommodityDetailDiroNew = (_a) => {
                 ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                     eventSubject: 'clickCta',
                     eventDescription: 'User clicked the CTA'
-                }, data, product, position);
+                }, data, product, position, 'open_external_link', product.link, 'product');
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
@@ -61,11 +61,17 @@ const CommodityDetailDiroNew = (_a) => {
             return;
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'ProductView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position
         });
     }, [isActive, bffFbReport]);
     (0, react_1.useEffect)(() => {

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

@@ -32,13 +32,13 @@ const CommodityList = (_a) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item, index);
+        }, recData, item, index, isExternalLink && !!(item === null || item === void 0 ? void 0 : item.link) ? 'open_external_link' : 'open_internal_popup', item.link, 'product');
         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 +46,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

@@ -15,22 +15,22 @@ const EventProvider = (_a) => {
     const handleClick = (0, lodash_1.throttle)((e) => {
         var _a, _b, _c, _d, _e, _f;
         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 = ((_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);
+        }, rec, item, index, isExternalLink && (jumpLink || !!link) ? 'open_external_link' : 'open_internal_popup', 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 (!jumpLink && !link)
+                return;
+            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(link);
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();

package/package.json

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